From bcd45ce8a6eb07cae0b7723d8cae5cbe4a8f7c98 Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Mon, 15 Apr 2024 18:39:03 +0100
Subject: [PATCH 1/3] 0351d front end linting (#377)

* feat: disable custom script for  trial users

* after lint fix

* frontend linting

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/.eslintrc.cjs                          |   19 +
 client/app.vue                                |  110 +-
 client/components/forms/CheckboxInput.vue     |   31 +-
 client/components/forms/CodeInput.client.vue  |   41 +-
 client/components/forms/ColorInput.vue        |   30 +-
 client/components/forms/FileInput.vue         |  167 +-
 client/components/forms/FlatSelectInput.vue   |   77 +-
 client/components/forms/ImageInput.vue        |  214 +-
 client/components/forms/PhoneInput.vue        |  166 +-
 client/components/forms/RatingInput.vue       |   77 +-
 .../forms/RichTextAreaInput.client.vue        |   66 +-
 client/components/forms/ScaleInput.vue        |   62 +-
 client/components/forms/SelectInput.vue       |   82 +-
 client/components/forms/SignatureInput.vue    |   52 +-
 client/components/forms/SliderInput.vue       |   38 +-
 client/components/forms/TextAreaInput.vue     |   51 +-
 client/components/forms/TextInput.vue         |   67 +-
 client/components/forms/ToggleSwitchInput.vue |   31 +-
 .../forms/components/CameraUpload.vue         |  327 +-
 .../components/forms/components/InputHelp.vue |   10 +-
 .../forms/components/InputLabel.vue           |    2 +-
 .../forms/components/InputWrapper.vue         |    6 +-
 .../forms/components/UploadedFile.vue         |   43 +-
 .../components/forms/components/VCheckbox.vue |   22 +-
 .../components/forms/components/VSelect.vue   |  152 +-
 .../components/forms/components/VSwitch.vue   |    9 +-
 client/components/forms/useFormInput.js       |   40 +-
 client/components/forms/validation/Alert.js   |   12 +-
 .../forms/validation/AlertError.vue           |   34 +-
 .../forms/validation/AlertSuccess.vue         |   45 +-
 .../components/forms/validation/HasError.vue  |   49 +-
 client/components/global/Badge.vue            |   51 +-
 client/components/global/Breadcrumb.vue       |   95 +-
 client/components/global/Card.vue             |   20 +-
 client/components/global/Collapse.vue         |   40 +-
 client/components/global/Dropdown.vue         |   48 +-
 client/components/global/EditableDiv.vue      |   60 +-
 client/components/global/Loader.vue           |   26 +-
 client/components/global/Modal.vue            |  178 +-
 client/components/global/Navbar.vue           |  281 +-
 client/components/global/Notifications.vue    |  115 +-
 client/components/global/NotionPage.vue       |   24 +-
 client/components/global/ProTag.vue           |   58 +-
 client/components/global/ScrollShadow.vue     |   83 +-
 client/components/global/Steps.vue            |   40 +-
 client/components/global/VButton.vue          |  218 +-
 .../components/global/WorkspaceDropdown.vue   |  113 +-
 .../global/transitions/Collapsible.vue        |   37 +-
 .../global/transitions/VTransition.vue        |   19 +-
 .../open/components/EditSubmissionModal.vue   |   80 +-
 .../open/components/RecordOperations.vue      |  120 +-
 .../open/editors/EditorOptionsPanel.vue       |   35 +-
 .../open/editors/EditorRightSidebar.vue       |   34 +-
 .../open/forms/OpenCompleteForm.vue           |  160 +-
 client/components/open/forms/OpenForm.vue     |  101 +-
 .../components/open/forms/OpenFormButton.vue  |   63 +-
 .../components/open/forms/OpenFormField.vue   |  140 +-
 .../components/AdvancedFormUrlSettings.vue    |   80 +-
 .../open/forms/components/CopyContent.vue     |   42 +-
 .../open/forms/components/FormEditor.vue      |  315 +-
 .../forms/components/FormFieldsEditor.vue     |  268 +-
 .../open/forms/components/FormStats.vue       |  105 +-
 .../open/forms/components/FormSubmissions.vue |  105 +-
 .../open/forms/components/FormUrlPrefill.vue  |   76 +-
 .../forms/components/FormWorkspaceModal.vue   |  206 +-
 .../form-components/AddFormBlock.vue          |  315 +-
 .../form-components/FormAboutSubmission.vue   |  282 +-
 .../components/form-components/FormAccess.vue |  108 +-
 .../form-components/FormCustomCode.vue        |   51 +-
 .../form-components/FormCustomSeo.vue         |   91 +-
 .../form-components/FormCustomization.vue     |  185 +-
 .../form-components/FormEditorPreview.vue     |   87 +-
 .../form-components/FormEditorSidebar.vue     |   50 +-
 .../form-components/FormErrorModal.vue        |   35 +-
 .../form-components/FormInformation.vue       |  235 +-
 .../form-components/FormSecurityPrivacy.vue   |   59 +-
 .../form-components/FormStructure.vue         |   53 +-
 .../form-logic-components/ColumnCondition.vue |  169 +-
 .../ConditionEditor.client.vue                |  122 +-
 .../FormBlockLogicEditor.vue                  |  254 +-
 .../GroupControlSlot.vue                      |   44 +-
 .../templates/FormTemplateModal.vue           |  241 +-
 .../components/templates/QuestionsEditor.vue  |  139 +-
 .../open/forms/fields/FormFieldEdit.vue       |  222 +-
 .../forms/fields/components/BlockOptions.vue  |  199 +-
 .../fields/components/ChangeFieldType.vue     |  118 +-
 .../forms/fields/components/FieldOptions.vue  |  489 +-
 .../open/integrations/DiscordIntegration.vue  |   40 +-
 .../open/integrations/EmailIntegration.vue    |   37 +-
 .../integrations/GoogleSheetsIntegration.vue  |   10 +-
 .../open/integrations/SlackIntegration.vue    |   41 +-
 .../SubmissionConfirmationIntegration.vue     |   77 +-
 .../open/integrations/WebhookIntegration.vue  |   18 +-
 .../open/integrations/ZapierIntegration.vue   |   10 +-
 .../components/IntegrationCard.vue            |  200 +-
 .../components/IntegrationEventsModal.vue     |   73 +-
 .../components/IntegrationListOption.vue      |   65 +-
 .../components/IntegrationModal.vue           |  110 +-
 .../components/IntegrationWrapper.vue         |   69 +-
 .../NotificationsMessageActions.vue           |   81 +-
 client/components/open/tables/OpenTable.vue   |  277 +-
 .../open/tables/components/OpenCheckbox.vue   |   44 +-
 .../open/tables/components/OpenFile.vue       |   88 +-
 .../open/tables/components/OpenSelect.vue     |   30 +-
 .../open/tables/components/OpenTag.vue        |   27 +-
 .../open/tables/components/OpenText.vue       |    5 +-
 .../open/tables/components/OpenUrl.vue        |   17 +-
 .../open/tables/components/ResizableTh.vue    |   42 +-
 client/components/pages/OpenFormFooter.vue    |   59 +-
 .../pages/auth/ForgotPasswordModal.vue        |  216 +-
 .../pages/auth/components/LoginForm.vue       |  142 +-
 .../pages/auth/components/QuickRegister.vue   |   88 +-
 .../pages/auth/components/RegisterForm.vue    |  160 +-
 client/components/pages/forms/NewFeatures.vue |  117 +-
 .../forms/create/CreateFormBaseModal.vue      |  216 +-
 .../components/pages/forms/show/EmbedCode.vue |   59 +-
 .../forms/show/EmbedFormAsPopupModal.vue      |  187 +-
 .../components/pages/forms/show/ExtraMenu.vue |  378 +-
 .../pages/forms/show/FormCleanings.vue        |  130 +-
 .../pages/forms/show/FormQrCode.vue           |   42 +-
 .../pages/forms/show/RegenerateFormLink.vue   |  119 +-
 .../components/pages/forms/show/ShareLink.vue |   76 +-
 .../pages/forms/show/UrlFormPrefill.vue       |  103 +-
 .../pages/pricing/CheckoutDetailsModal.vue    |  106 +-
 .../components/pages/pricing/CustomPlan.vue   |   30 +-
 .../pages/pricing/MonthlyYearlySelector.vue   |   17 +-
 .../components/pages/pricing/PricingTable.vue |  184 +-
 .../pages/templates/SingleTemplate.vue        |   64 +-
 .../pages/templates/TemplateTags.vue          |   75 +-
 .../pages/templates/TemplatesList.vue         |  218 +-
 client/components/pages/welcome/AiFeature.vue |  222 +-
 client/components/pages/welcome/Features.vue  |  250 +-
 .../components/pages/welcome/MoreFeatures.vue |  297 +-
 .../pages/welcome/TemplatesSlider.vue         |   69 +-
 .../components/pages/welcome/Testimonials.vue |    2 -
 client/components/tools/StopImpersonation.vue |   43 +-
 client/components/vendor/FeatureBase.vue      |   66 +-
 .../vendor/appsumo/AppSumoBilling.vue         |   96 +-
 .../vendor/appsumo/AppSumoRegister.vue        |   69 +-
 client/composables/forms/initForm.js          |   55 +-
 client/composables/forms/pendingSubmission.js |   14 +-
 .../forms/validatePropertiesLogic.js          |    6 +-
 client/composables/lib/vForm/Errors.js        |   43 +-
 client/composables/lib/vForm/Form.js          |  156 +-
 client/composables/stores/useContentStore.js  |   14 +-
 client/composables/useAlert.js                |   31 +-
 client/composables/useAmplitude.js            |   17 +-
 client/composables/useConfetti.js             |   12 +-
 client/composables/useCrisp.js                |   26 +-
 client/composables/useOpnApi.js               |   40 +-
 client/composables/useOpnSeoMeta.js           |   28 +-
 client/error.vue                              |   13 +-
 client/layouts/basic.vue                      |    4 +-
 client/layouts/default.vue                    |    3 +-
 client/lib/file-uploads.js                    |   47 +-
 client/lib/forms/FormLogicConditionChecker.js |  319 +-
 client/lib/forms/FormLogicPropertyResolver.js |   77 +-
 client/lib/forms/FormPropertyLogicRule.js     |  128 +-
 client/lib/utils.js                           |   61 +-
 client/middleware/01.check-auth.global.js     |   12 +-
 client/middleware/admin.js                    |    4 +-
 client/middleware/api-redirect.global.js      |   13 +-
 client/middleware/auth.js                     |    6 +-
 client/middleware/custom-domain.global.js     |   31 +-
 client/middleware/guest.js                    |    7 +-
 client/middleware/moderator.js                |    4 +-
 client/middleware/subscribed.js               |    4 +-
 client/mixins/forms/input.js                  |   42 +-
 client/mixins/forms/saveUpdateAlert.js        |   12 +-
 client/opnform.config.js                      |   38 +-
 client/package-lock.json                      | 3976 ++++++++++-------
 client/package.json                           |   14 +-
 client/pages/ai-form-builder.vue              |  951 ++--
 client/pages/forms/[slug]/edit.vue            |   54 +-
 client/pages/forms/[slug]/index.vue           |   61 +-
 client/pages/forms/[slug]/show.vue            |  283 +-
 client/pages/forms/[slug]/show/index.vue      |    6 +-
 .../forms/[slug]/show/integrations/index.vue  |   94 +-
 client/pages/forms/[slug]/show/share.vue      |   70 +-
 client/pages/forms/[slug]/show/stats.vue      |   10 +-
 .../pages/forms/[slug]/show/submissions.vue   |   13 +-
 client/pages/forms/create/guest.vue           |   81 +-
 client/pages/forms/create/index.vue           |   99 +-
 client/pages/home.vue                         |  229 +-
 client/pages/index.vue                        |  289 +-
 client/pages/login.vue                        |   55 +-
 client/pages/password/email.vue               |   43 +-
 client/pages/password/reset/[token].vue       |   68 +-
 client/pages/pricing.vue                      |  369 +-
 client/pages/privacy-policy.vue               |   19 +-
 client/pages/register.vue                     |   64 +-
 client/pages/settings.vue                     |  155 +-
 client/pages/settings/account.vue             |   49 +-
 client/pages/settings/admin.vue               |  101 +-
 client/pages/settings/billing.vue             |   42 +-
 client/pages/settings/index.vue               |    6 +-
 client/pages/settings/password.vue            |   52 +-
 client/pages/settings/profile.vue             |   41 +-
 client/pages/settings/workspace.vue           |  268 +-
 client/pages/subscriptions/error.vue          |   31 +-
 client/pages/subscriptions/success.vue        |   60 +-
 client/pages/templates/[slug].vue             |  262 +-
 client/pages/templates/index.vue              |   20 +-
 client/pages/templates/industries/[slug].vue  |   80 +-
 client/pages/templates/my-templates.vue       |   24 +-
 client/pages/templates/types/[slug].vue       |   78 +-
 client/pages/terms-conditions.vue             |   21 +-
 client/plugins/amplitude.js                   |   17 +-
 client/plugins/crisp.client.js                |    7 +-
 client/plugins/sentry.js                      |   29 +-
 client/plugins/vue-confetti.client.js         |    6 +-
 client/public/widgets/embed-min.js            |   56 +-
 client/public/widgets/embed.js                |   53 +-
 client/public/widgets/iframeResize.min.js     |  850 +++-
 .../iframeResizer.contentWindow.min.js        |  774 +++-
 client/server/plugins/embeddable.js           |   10 +-
 client/sitemap.js                             |    8 +-
 client/stores/app.js                          |   55 +-
 client/stores/auth.js                         |   24 +-
 client/stores/errors.js                       |   14 +-
 client/stores/form_integrations.js            |   35 +-
 client/stores/forms.js                        |   41 +-
 client/stores/notion_pages.js                 |   15 +-
 client/stores/records.js                      |   12 +-
 client/stores/templates.js                    |   39 +-
 client/stores/working_form.js                 |   36 +-
 client/stores/workspaces.js                   |   22 +-
 client/tailwind.config.js                     |  107 +-
 228 files changed, 17142 insertions(+), 8850 deletions(-)
 create mode 100644 client/.eslintrc.cjs

diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs
new file mode 100644
index 000000000..bae286281
--- /dev/null
+++ b/client/.eslintrc.cjs
@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  extends: ['@nuxt/eslint-config'],
+  parser: 'vue-eslint-parser',
+  env: {
+      browser: true,
+      node: true,
+  },
+  extends: ['@nuxt/eslint-config'],
+  rules: {
+      'vue/require-default-prop': 'off',
+      'vue/no-mutating-props': 'off',
+      semi: ['error', 'never'],
+      'vue/no-v-html': 'off',
+      'prefer-rest-params': 'off',
+      'vue/valid-template-root': 'off',
+      'no-undef': 'off',
+  },
+}
\ No newline at end of file
diff --git a/client/app.vue b/client/app.vue
index 558d33ad8..f3a3ec6a2 100644
--- a/client/app.vue
+++ b/client/app.vue
@@ -1,103 +1,123 @@
 <template>
-  <div id="app" class="bg-white dark:bg-notion-dark">
-    <transition enter-active-class="linear duration-200 overflow-hidden"
-                enter-from-class="max-h-0"
-                enter-to-class="max-h-screen"
-                leave-active-class="linear duration-200 overflow-hidden"
-                leave-from-class="max-h-screen"
-                leave-to-class="max-h-0"
+  <div
+    id="app"
+    class="bg-white dark:bg-notion-dark"
+  >
+    <transition
+      enter-active-class="linear duration-200 overflow-hidden"
+      enter-from-class="max-h-0"
+      enter-to-class="max-h-screen"
+      leave-active-class="linear duration-200 overflow-hidden"
+      leave-from-class="max-h-screen"
+      leave-to-class="max-h-0"
     >
-      <div v-if="announcement && !isIframe" class="bg-nt-blue text-white text-center p-3 relative">
-        <a class="text-white font-semibold" href="" target="_blank">🚨
-          OpnForm beta is over 🚨</a>
-        <div role="button" class="text-white absolute right-0 top-0 p-3 cursor-pointer" @click="announcement=false">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd"
-                  d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                  clip-rule="evenodd"
+      <div
+        v-if="announcement && !isIframe"
+        class="bg-nt-blue text-white text-center p-3 relative"
+      >
+        <a
+          class="text-white font-semibold"
+          href=""
+          target="_blank"
+        >🚨 OpnForm beta is over 🚨</a>
+        <div
+          role="button"
+          class="text-white absolute right-0 top-0 p-3 cursor-pointer"
+          @click="announcement = false"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-6 w-6"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+              clip-rule="evenodd"
             />
           </svg>
         </div>
       </div>
     </transition>
 
-
-    <NuxtLoadingIndicator color="#2563eb"/>
+    <NuxtLoadingIndicator color="#2563eb" />
     <NuxtLayout>
-      <NuxtPage/>
+      <NuxtPage />
     </NuxtLayout>
-    <ToolsStopImpersonation/>
+    <ToolsStopImpersonation />
 
     <Notifications />
-    <feature-base/>
+    <feature-base />
   </div>
 </template>
 
 <script>
-import {computed} from 'vue'
-import {useAppStore} from '~/stores/app'
-import FeatureBase from "~/components/vendor/FeatureBase.vue";
+import { computed } from "vue"
+import { useAppStore } from "~/stores/app"
+import FeatureBase from "~/components/vendor/FeatureBase.vue"
 
 export default {
-  el: '#app',
+  el: "#app",
 
-  name: 'OpnForm',
+  name: "OpnForm",
 
-  components: {FeatureBase},
+  components: { FeatureBase },
 
   setup() {
     const config = useRuntimeConfig()
     useOpnSeoMeta({
-      title: 'OpnForm',
-      description: 'Create beautiful forms for free. Unlimited fields, unlimited submissions. It\'s free and it takes less than 1 minute to create your first form.',
-      ogImage: '/img/social-preview.jpg',
+      title: "OpnForm",
+      description:
+        "Create beautiful forms for free. Unlimited fields, unlimited submissions. It's free and it takes less than 1 minute to create your first form.",
+      ogImage: "/img/social-preview.jpg",
       robots: () => {
-        return config.public.env === 'production' ? null : 'noindex, nofollow'
-      }
+        return config.public.env === "production" ? null : "noindex, nofollow"
+      },
     })
     useHead({
       titleTemplate: (titleChunk) => {
-        return titleChunk ? `${titleChunk} - OpnForm` : 'OpnForm';
-      }
+        return titleChunk ? `${titleChunk} - OpnForm` : "OpnForm"
+      },
     })
 
     const appStore = useAppStore()
 
     return {
       layout: computed(() => appStore.layout),
-      isIframe: useIsIframe()
+      isIframe: useIsIframe(),
     }
   },
 
-  mounted() {
-    useCrisp().showChat()
-  },
-
   data: () => ({
     announcement: false,
     alert: {
       type: null,
       autoClose: 0,
-      message: '',
+      message: "",
       confirmationProceed: null,
-      confirmationCancel: null
+      confirmationCancel: null,
     },
-    navbarHidden: false
+    navbarHidden: false,
   }),
 
   computed: {
     isOnboardingPage() {
-      return this.$route.name === 'onboarding'
+      return this.$route.name === "onboarding"
     },
   },
 
+  mounted() {
+    useCrisp().showChat()
+  },
+
   methods: {
     workspaceAdded() {
-      this.$router.push({name: 'home'})
+      this.$router.push({ name: "home" })
     },
     hideNavbar(hidden = true) {
       this.navbarHidden = hidden
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/forms/CheckboxInput.vue b/client/components/forms/CheckboxInput.vue
index 42f40933f..bec304556 100644
--- a/client/components/forms/CheckboxInput.vue
+++ b/client/components/forms/CheckboxInput.vue
@@ -4,9 +4,18 @@
       <span />
     </template>
 
-    <v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled?true:null" :name="name">
+    <v-checkbox
+      :id="id ? id : name"
+      v-model="compVal"
+      :disabled="disabled ? true : null"
+      :name="name"
+    >
       <slot name="label">
-        {{ label }} <span v-if="required" class="text-red-500 required-dot">*</span>
+        {{ label }}
+        <span
+          v-if="required"
+          class="text-red-500 required-dot"
+        >*</span>
       </slot>
     </v-checkbox>
 
@@ -21,28 +30,28 @@
 </template>
 
 <script>
-import { inputProps, useFormInput } from './useFormInput.js'
-import VCheckbox from './components/VCheckbox.vue'
-import InputWrapper from './components/InputWrapper.vue'
+import { inputProps, useFormInput } from "./useFormInput.js"
+import VCheckbox from "./components/VCheckbox.vue"
+import InputWrapper from "./components/InputWrapper.vue"
 
 export default {
-  name: 'CheckboxInput',
+  name: "CheckboxInput",
 
   components: { InputWrapper, VCheckbox },
   props: {
-    ...inputProps
+    ...inputProps,
   },
 
-  setup (props, context) {
+  setup(props, context) {
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
     }
   },
 
-  mounted () {
+  mounted() {
     if (!this.compVal) {
       this.compVal = false
     }
-  }
+  },
 }
 </script>
diff --git a/client/components/forms/CodeInput.client.vue b/client/components/forms/CodeInput.client.vue
index 507045744..75e4189b9 100644
--- a/client/components/forms/CodeInput.client.vue
+++ b/client/components/forms/CodeInput.client.vue
@@ -1,7 +1,5 @@
 <template>
-  <input-wrapper
-    v-bind="inputWrapperProps"
-  >
+  <input-wrapper v-bind="inputWrapperProps">
     <template #label>
       <slot name="label" />
     </template>
@@ -11,12 +9,23 @@
     </template>
 
     <div
-      :class="[theme.CodeInput.input,{ '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
+      :class="[
+        theme.CodeInput.input,
+        {
+          '!ring-red-500 !ring-2 !border-transparent': hasError,
+          '!cursor-not-allowed !bg-gray-200': disabled,
+        },
+      ]"
     >
-      <codemirror :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
-                  :extensions="extensions"
-                  :style="inputStyle" :name="name" :tab-size="4"
-                  :placeholder="placeholder"
+      <codemirror
+        :id="id ? id : name"
+        v-model="compVal"
+        :disabled="disabled ? true : null"
+        :extensions="extensions"
+        :style="inputStyle"
+        :name="name"
+        :tab-size="4"
+        :placeholder="placeholder"
       />
     </div>
 
@@ -27,25 +36,25 @@
 </template>
 
 <script>
-import { Codemirror } from 'vue-codemirror'
+import { Codemirror } from "vue-codemirror"
 
-import {html} from '@codemirror/lang-html'
+import { html } from "@codemirror/lang-html"
 
-import { inputProps, useFormInput } from './useFormInput.js'
-import InputWrapper from './components/InputWrapper.vue'
+import { inputProps, useFormInput } from "./useFormInput.js"
+import InputWrapper from "./components/InputWrapper.vue"
 
 export default {
   components: { InputWrapper, Codemirror },
   props: {
-    ...inputProps
+    ...inputProps,
   },
 
-  setup (props, context) {
+  setup(props, context) {
     const extensions = [html()]
     return {
       ...useFormInput(props, context),
-      extensions
+      extensions,
     }
-  }
+  },
 }
 </script>
diff --git a/client/components/forms/ColorInput.vue b/client/components/forms/ColorInput.vue
index 3bfa0e8f1..491afd28b 100644
--- a/client/components/forms/ColorInput.vue
+++ b/client/components/forms/ColorInput.vue
@@ -5,12 +5,20 @@
     </template>
 
     <div class="flex items-center">
-      <input :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
-             type="color" class="mr-2"
-             :name="name"
+      <input
+        :id="id ? id : name"
+        v-model="compVal"
+        :disabled="disabled ? true : null"
+        type="color"
+        class="mr-2"
+        :name="name"
       >
       <slot name="label">
-        <span>{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span></span>
+        <span>{{ label }}
+          <span
+            v-if="required"
+            class="text-red-500 required-dot"
+          >*</span></span>
       </slot>
     </div>
 
@@ -25,21 +33,21 @@
 </template>
 
 <script>
-import InputWrapper from './components/InputWrapper.vue'
-import { inputProps, useFormInput } from './useFormInput.js'
+import InputWrapper from "./components/InputWrapper.vue"
+import { inputProps, useFormInput } from "./useFormInput.js"
 
 export default {
-  name: 'ColorInput',
+  name: "ColorInput",
   components: { InputWrapper },
 
   props: {
-    ...inputProps
+    ...inputProps,
   },
 
-  setup (props, context) {
+  setup(props, context) {
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
     }
-  }
+  },
 }
 </script>
diff --git a/client/components/forms/FileInput.vue b/client/components/forms/FileInput.vue
index bb78f5058..45e7f3688 100644
--- a/client/components/forms/FileInput.vue
+++ b/client/components/forms/FileInput.vue
@@ -3,60 +3,117 @@
     <template #label>
       <slot name="label" />
     </template>
-    <div v-if="cameraUpload && isInWebcam" class="hidden sm:block w-full min-h-40">
-      <camera-upload  v-if="cameraUpload" @uploadImage="cameraFileUpload" @stopWebcam="isInWebcam=false" :theme="theme"/>
+    <div
+      v-if="cameraUpload && isInWebcam"
+      class="hidden sm:block w-full min-h-40"
+    >
+      <camera-upload
+        v-if="cameraUpload"
+        :theme="theme"
+        @upload-image="cameraFileUpload"
+        @stop-webcam="isInWebcam=false"
+      />
     </div>
-    <div v-else class="flex flex-col w-full items-center justify-center transition-colors duration-40"
-         :class="[{'!cursor-not-allowed':disabled, 'cursor-pointer':!disabled,
-                   [theme.fileInput.inputHover.light + ' dark:'+theme.fileInput.inputHover.dark]: uploadDragoverEvent,
-                   ['hover:'+theme.fileInput.inputHover.light +' dark:hover:'+theme.fileInput.inputHover.dark]: !loading}, theme.fileInput.input]"
-         @dragover.prevent="uploadDragoverEvent=true"
-         @dragleave.prevent="uploadDragoverEvent=false"
-         @drop.prevent="onUploadDropEvent"
-         @click="openFileUpload"
+    <div
+      v-else
+      class="flex flex-col w-full items-center justify-center transition-colors duration-40"
+      :class="[{'!cursor-not-allowed':disabled, 'cursor-pointer':!disabled,
+                [theme.fileInput.inputHover.light + ' dark:'+theme.fileInput.inputHover.dark]: uploadDragoverEvent,
+                ['hover:'+theme.fileInput.inputHover.light +' dark:hover:'+theme.fileInput.inputHover.dark]: !loading}, theme.fileInput.input]"
+      @dragover.prevent="uploadDragoverEvent=true"
+      @dragleave.prevent="uploadDragoverEvent=false"
+      @drop.prevent="onUploadDropEvent"
+      @click="openFileUpload"
     >
-    <div class="flex w-full items-center justify-center">
-      <div
-        v-if="loading"
-        class="text-gray-600 dark:text-gray-400"
-      >
-        <Loader class="mx-auto h-6 w-6" />
-        <p class="mt-2 text-center text-sm text-gray-500">
-          Uploading your file...
-        </p>
-      </div>
-      <template v-else>
-        <div class="text-center">
-          <input ref="actual-input" class="hidden" :multiple="multiple" type="file" :name="name"
-            :accept="acceptExtensions" @change="manualFileUpload">
-          <div v-if="files.length" class="flex flex-wrap items-center justify-center gap-4">
-            <uploaded-file v-for="file in files" :key="file.url" :file="file" :theme="theme"
-              @remove="clearFile(file)" />
-          </div>
-          <template v-else>
-            <div class="text-gray-500 w-full flex justify-center">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                stroke="currentColor" class="w-6 h-6">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                  d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
-              </svg>
+      <div class="flex w-full items-center justify-center">
+        <div
+          v-if="loading"
+          class="text-gray-600 dark:text-gray-400"
+        >
+          <Loader class="mx-auto h-6 w-6" />
+          <p class="mt-2 text-center text-sm text-gray-500">
+            Uploading your file...
+          </p>
+        </div>
+        <template v-else>
+          <div class="text-center">
+            <input
+              ref="actual-input"
+              class="hidden"
+              :multiple="multiple"
+              type="file"
+              :name="name"
+              :accept="acceptExtensions"
+              @change="manualFileUpload"
+            >
+            <div
+              v-if="files.length"
+              class="flex flex-wrap items-center justify-center gap-4"
+            >
+              <uploaded-file
+                v-for="file in files"
+                :key="file.url"
+                :file="file"
+                :theme="theme"
+                @remove="clearFile(file)"
+              />
             </div>
+            <template v-else>
+              <div class="text-gray-500 w-full flex justify-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="w-6 h-6"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                  />
+                </svg>
+              </div>
 
-            <p class="mt-2 text-sm text-gray-500 font-semibold select-none">
-              Click to choose {{ multiple ? 'file(s)' : 'a file' }} or drag here
-            </p>
-            <p class="mt-1 text-xs text-gray-400 dark:text-gray-600 select-none">
-              Size limit: {{ mbLimit }}MB per file
-            </p>
-          </template>
-        </div>
-      </template>
-    </div>
+              <p class="mt-2 text-sm text-gray-500 font-semibold select-none">
+                Click to choose {{ multiple ? 'file(s)' : 'a file' }} or drag here
+              </p>
+              <p class="mt-1 text-xs text-gray-400 dark:text-gray-600 select-none">
+                Size limit: {{ mbLimit }}MB per file
+              </p>
+            </template>
+          </div>
+        </template>
+      </div>
       <div class="w-full items-center justify-center mt-2  hidden sm:flex">
-        <open-form-button native-type="button" :loading="loading" :theme="theme" :color="color" class="py-2 p-1 px-2" @click.stop="openWebcam" v-if="cameraUpload">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" />
-            <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" />
+        <open-form-button
+          v-if="cameraUpload"
+          native-type="button"
+          :loading="loading"
+          :theme="theme"
+          :color="color"
+          class="py-2 p-1 px-2"
+          @click.stop="openWebcam"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-6 h-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
+            />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
+            />
           </svg>
         </open-form-button>
       </div>
@@ -134,14 +191,14 @@ export default {
       deep: true,
       handler(newVal, oldVal) {
         if (!oldVal) {
-          this.handleCompValChange();
+          this.handleCompValChange()
         }
       }
     }
   },
 
   mounted() {
-    this.handleCompValChange();
+    this.handleCompValChange()
   },
 
   methods: {
@@ -199,13 +256,13 @@ export default {
     },
     openWebcam(){
       if(!this.cameraUpload){
-        return;
+        return
       }
-      this.isInWebcam = true;
+      this.isInWebcam = true
     },
     cameraFileUpload(file){
       this.isInWebcam = false
-      this.isUploading = false;
+      this.isUploading = false
       this.uploadFileToServer(file)
     },
     uploadFileToServer(file) {
@@ -254,7 +311,7 @@ export default {
       }
       const response = await fetch(url)
       const data = await response.blob()
-      const name = url.replace(/^.*(\\|\/|\:)/, '')
+      const name = url.replace(/^.*(\\|\/|:)/, '')
       return new File([data], name, {
         type: data.type || defaultType
       })
diff --git a/client/components/forms/FlatSelectInput.vue b/client/components/forms/FlatSelectInput.vue
index 1e6453901..bf4c175d7 100644
--- a/client/components/forms/FlatSelectInput.vue
+++ b/client/components/forms/FlatSelectInput.vue
@@ -1,22 +1,49 @@
 <template>
-  <input-wrapper
-    v-bind="inputWrapperProps"
-  >
+  <input-wrapper v-bind="inputWrapperProps">
     <template #label>
       <slot name="label" />
     </template>
 
-    <Loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
-    <div v-for="(option, index) in options" v-else :key="option[optionKey]" role="button"
-         :class="[theme.default.input,'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',{ 'mb-2': index !== options.length,'!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
-         @click="onSelect(option[optionKey])"
+    <Loader
+      v-if="loading"
+      key="loader"
+      class="h-6 w-6 text-nt-blue mx-auto"
+    />
+    <div
+      v-for="(option, index) in options"
+      v-else
+      :key="option[optionKey]"
+      role="button"
+      :class="[
+        theme.default.input,
+        'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex',
+        {
+          'mb-2': index !== options.length,
+          '!ring-red-500 !ring-2 !border-transparent': hasError,
+          '!cursor-not-allowed !bg-gray-200': disabled,
+        },
+      ]"
+      @click="onSelect(option[optionKey])"
     >
       <p class="flex-grow">
         {{ option[displayKey] }}
       </p>
-      <div v-if="isSelected(option[optionKey])" class="flex items-center">
-        <svg :color="color" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+      <div
+        v-if="isSelected(option[optionKey])"
+        class="flex items-center"
+      >
+        <svg
+          :color="color"
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+            clip-rule="evenodd"
+          />
         </svg>
       </div>
     </div>
@@ -31,36 +58,36 @@
 </template>
 
 <script>
-import { inputProps, useFormInput } from './useFormInput.js'
-import InputWrapper from './components/InputWrapper.vue'
+import { inputProps, useFormInput } from "./useFormInput.js"
+import InputWrapper from "./components/InputWrapper.vue"
 
 /**
  * Options: {name,value} objects
  */
 export default {
-  name: 'FlatSelectInput',
+  name: "FlatSelectInput",
   components: { InputWrapper },
 
   props: {
     ...inputProps,
     options: { type: Array, required: true },
-    optionKey: { type: String, default: 'value' },
-    emitKey: { type: String, default: 'value' },
-    displayKey: { type: String, default: 'name' },
+    optionKey: { type: String, default: "value" },
+    emitKey: { type: String, default: "value" },
+    displayKey: { type: String, default: "name" },
     loading: { type: Boolean, default: false },
-    multiple: { type: Boolean, default: false }
+    multiple: { type: Boolean, default: false },
   },
-  setup (props, context) {
+  setup(props, context) {
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
     }
   },
-  data () {
+  data() {
     return {}
   },
   computed: {},
   methods: {
-    onSelect (value) {
+    onSelect(value) {
       if (this.disabled) {
         return
       }
@@ -80,17 +107,17 @@ export default {
         emitValue.push(value)
         this.compVal = emitValue
       } else {
-        this.compVal = (this.compVal === value) ? null : value
+        this.compVal = this.compVal === value ? null : value
       }
     },
-    isSelected (value) {
+    isSelected(value) {
       if (!this.compVal) return false
 
       if (this.multiple) {
         return this.compVal.includes(value)
       }
       return this.compVal === value
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/forms/ImageInput.vue b/client/components/forms/ImageInput.vue
index 8ab9e408e..77c504d2a 100644
--- a/client/components/forms/ImageInput.vue
+++ b/client/components/forms/ImageInput.vue
@@ -1,37 +1,68 @@
 <template>
-  <input-wrapper
-    v-bind="inputWrapperProps"
-  >
+  <input-wrapper v-bind="inputWrapperProps">
     <template #label>
       <slot name="label" />
     </template>
 
     <span class="inline-block w-full rounded-md shadow-sm">
-      <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
-              class="cursor-pointer relative w-full" :class="[theme.default.input,{'ring-red-500 ring-2': hasError}]"
-              :style="inputStyle" @click.prevent="showUploadModal=true"
+      <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        class="cursor-pointer relative w-full"
+        :class="[theme.default.input, { 'ring-red-500 ring-2': hasError }]"
+        :style="inputStyle"
+        @click.prevent="showUploadModal = true"
       >
-        <div v-if="currentUrl==null" class="h-6 text-gray-600 dark:text-gray-400">
-          Upload image <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor"
+        <div
+          v-if="currentUrl == null"
+          class="h-6 text-gray-600 dark:text-gray-400"
+        >
+          Upload image
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-6 w-6 inline"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
           >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
             />
           </svg>
         </div>
-        <div v-else class="h-6 text-gray-600 dark:text-gray-400 flex">
+        <div
+          v-else
+          class="h-6 text-gray-600 dark:text-gray-400 flex"
+        >
           <div class="flex-grow">
-            <img :src="currentUrl" class="h-6 rounded shadow-md"/>
+            <img
+              :src="currentUrl"
+              class="h-6 rounded shadow-md"
+            >
           </div>
-          <a href="#" class="hover:text-nt-blue flex" @click.prevent="clearUrl">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                 stroke="currentColor"
+          <a
+            href="#"
+            class="hover:text-nt-blue flex"
+            @click.prevent="clearUrl"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
             >
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-              />
-            </svg></a>
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+              /></svg></a>
         </div>
       </button>
     </span>
@@ -44,13 +75,18 @@
     </template>
 
     <!--  Modal  -->
-    <modal :show="showUploadModal" @close="showUploadModal=false">
+    <modal
+      :show="showUploadModal"
+      @close="showUploadModal = false"
+    >
       <h2 class="text-lg font-semibold">
         Upload an image
       </h2>
 
       <div class="max-w-3xl mx-auto lg:max-w-none">
-        <div class="sm:mt-5 sm:grid sm:grid-cols-1 sm:gap-4 sm:items-start sm:pt-5">
+        <div
+          class="sm:mt-5 sm:grid sm:grid-cols-1 sm:gap-4 sm:items-start sm:pt-5"
+        >
           <div class="mt-2 sm:mt-0 sm:col-span-2 mb-5">
             <div
               v-cloak
@@ -58,7 +94,10 @@
               @dragover.prevent="onUploadDragoverEvent($event)"
               @drop.prevent="onUploadDropEvent($event)"
             >
-              <div v-if="loading" class="text-gray-600 dark:text-gray-400">
+              <div
+                v-if="loading"
+                class="text-gray-600 dark:text-gray-400"
+              >
                 <Loader class="h-6 w-6 mx-auto m-10" />
                 <p class="text-center mt-6">
                   Uploading your file...
@@ -69,18 +108,30 @@
                   class="absolute rounded-full bg-gray-100 h-20 w-20 z-10 transition-opacity duration-500 ease-in-out"
                   :class="{
                     'opacity-100': uploadDragoverTracking,
-                    'opacity-0': !uploadDragoverTracking
+                    'opacity-0': !uploadDragoverTracking,
                   }"
                 />
                 <div class="relative z-20 text-center">
-                  <input ref="actual-input" class="hidden" type="file" :name="name"
-                         accept="image/png, image/gif, image/jpeg, image/bmp, image/svg+xml" @change="manualFileUpload"
+                  <input
+                    ref="actual-input"
+                    class="hidden"
+                    type="file"
+                    :name="name"
+                    accept="image/png, image/gif, image/jpeg, image/bmp, image/svg+xml"
+                    @change="manualFileUpload"
                   >
-                  <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-24 w-24 text-gray-200" fill="none"
-                       viewBox="0 0 24 24" stroke="currentColor"
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="mx-auto h-24 w-24 text-gray-200"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
                   >
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                          d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                     />
                   </svg>
                   <p class="mt-5 text-sm text-gray-600">
@@ -107,22 +158,22 @@
 </template>
 
 <script>
-import { inputProps, useFormInput } from './useFormInput.js'
-import InputWrapper from './components/InputWrapper.vue'
-import Modal from '../global/Modal.vue'
-import {storeFile} from "~/lib/file-uploads.js"
+import { inputProps, useFormInput } from "./useFormInput.js"
+import InputWrapper from "./components/InputWrapper.vue"
+import Modal from "../global/Modal.vue"
+import { storeFile } from "~/lib/file-uploads.js"
 
 export default {
-  name: 'ImageInput',
+  name: "ImageInput",
   components: { InputWrapper, Modal },
   mixins: [],
   props: {
-    ...inputProps
+    ...inputProps,
   },
 
-  setup (props, context) {
+  setup(props, context) {
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
     }
   },
 
@@ -132,87 +183,96 @@ export default {
     file: [],
     uploadDragoverTracking: false,
     uploadDragoverEvent: false,
-    loading: false
+    loading: false,
   }),
 
   computed: {
-    currentUrl () {
+    currentUrl() {
       return this.compVal
-    }
+    },
   },
 
   watch: {
     showUploadModal: {
-      handler (val) {
+      handler() {
         if (import.meta.server) return
-        document.removeEventListener('paste', this.onUploadPasteEvent)
+        document.removeEventListener("paste", this.onUploadPasteEvent)
         if (this.showUploadModal) {
-          document.addEventListener('paste', this.onUploadPasteEvent)
+          document.addEventListener("paste", this.onUploadPasteEvent)
         }
-      }
-    }
+      },
+    },
   },
 
   methods: {
-    clearUrl () {
+    clearUrl() {
       this.form[this.name] = null
     },
-    onUploadDragoverEvent (e) {
+    onUploadDragoverEvent() {
       this.uploadDragoverEvent = true
       this.uploadDragoverTracking = true
     },
-    onUploadDropEvent (e) {
+    onUploadDropEvent(e) {
       this.uploadDragoverEvent = false
       this.uploadDragoverTracking = false
       this.droppedFiles(e.dataTransfer.files)
     },
-    onUploadPasteEvent (e) {
+    onUploadPasteEvent(e) {
       if (!this.showUploadModal) return
       this.uploadDragoverEvent = false
       this.uploadDragoverTracking = false
       this.droppedFiles(e.clipboardData.files)
     },
-    droppedFiles (droppedFiles) {
+    droppedFiles(droppedFiles) {
       if (!droppedFiles) return
 
       this.file = droppedFiles[0]
       this.uploadFileToServer()
     },
-    openFileUpload () {
-      this.$refs['actual-input'].click()
+    openFileUpload() {
+      this.$refs["actual-input"].click()
     },
-    manualFileUpload (e) {
+    manualFileUpload(e) {
       this.file = e.target.files[0]
       this.uploadFileToServer()
     },
-    uploadFileToServer () {
+    uploadFileToServer() {
       this.loading = true
       // Store file in s3
-      storeFile(this.file).then(response => {
-        // Move file to permanent storage for form assets
-        opnFetch('/open/forms/assets/upload', {
-          method: 'POST',
-          body: {
-            url: this.file.name.split('.').slice(0, -1).join('.') + '_' + response.uuid + '.' + response.extension
-          }
-        }).then(moveFileResponseData => {
-          if (!this.multiple) {
-            this.files = []
-          }
-          this.compVal = moveFileResponseData.url
-          this.showUploadModal = false
-          this.loading = false
-        }).catch((error) => {
+      storeFile(this.file)
+        .then((response) => {
+          // Move file to permanent storage for form assets
+          opnFetch("/open/forms/assets/upload", {
+            method: "POST",
+            body: {
+              url:
+                this.file.name.split(".").slice(0, -1).join(".") +
+                "_" +
+                response.uuid +
+                "." +
+                response.extension,
+            },
+          })
+            .then((moveFileResponseData) => {
+              if (!this.multiple) {
+                this.files = []
+              }
+              this.compVal = moveFileResponseData.url
+              this.showUploadModal = false
+              this.loading = false
+            })
+            .catch(() => {
+              this.compVal = null
+              this.showUploadModal = false
+              this.loading = false
+            })
+        })
+        .catch(() => {
           this.compVal = null
           this.showUploadModal = false
           this.loading = false
         })
-      }).catch((error) => {
-        this.compVal = null
-        this.showUploadModal = false
-        this.loading = false
-      })
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/forms/PhoneInput.vue b/client/components/forms/PhoneInput.vue
index dccb68530..54418a433 100644
--- a/client/components/forms/PhoneInput.vue
+++ b/client/components/forms/PhoneInput.vue
@@ -1,77 +1,110 @@
 <template>
-  <input-wrapper
-    v-bind="inputWrapperProps"
-  >
+  <input-wrapper v-bind="inputWrapperProps">
     <template #label>
-      <slot name="label"/>
+      <slot name="label" />
     </template>
 
-    <div :id="id ? id : name" :name="name" :style="inputStyle" class="flex items-start">
-      <v-select v-model="selectedCountryCode" class="w-[130px]" dropdown-class="w-[300px]" input-class="rounded-r-none"
-                :data="countries"
-                :disabled="(disabled || countries.length===1)?true:null" :searchable="true" :search-keys="['name']"
-                :option-key="'code'" :color="color"
-                :has-error="hasError"
-                :placeholder="'Select a country'" :uppercase-labels="true" :theme="theme"
-                @update:model-value="onChangeCountryCode"
+    <div
+      :id="id ? id : name"
+      :name="name"
+      :style="inputStyle"
+      class="flex items-start"
+    >
+      <v-select
+        v-model="selectedCountryCode"
+        class="w-[130px]"
+        dropdown-class="w-[300px]"
+        input-class="rounded-r-none"
+        :data="countries"
+        :disabled="disabled || countries.length === 1 ? true : null"
+        :searchable="true"
+        :search-keys="['name']"
+        :option-key="'code'"
+        :color="color"
+        :has-error="hasError"
+        :placeholder="'Select a country'"
+        :uppercase-labels="true"
+        :theme="theme"
+        @update:model-value="onChangeCountryCode"
       >
         <template #option="props">
           <div class="flex items-center space-x-2 hover:text-white">
-            <country-flag size="normal" class="!-mt-[9px]" :country="props.option.code"/>
+            <country-flag
+              size="normal"
+              class="!-mt-[9px]"
+              :country="props.option.code"
+            />
             <span class="grow">{{ props.option.name }}</span>
             <span>{{ props.option.dial_code }}</span>
           </div>
         </template>
         <template #selected="props">
-          <div class="flex items-center space-x-2 justify-center overflow-hidden">
-            <country-flag size="normal" class="!-mt-[9px]" :country="props.option.code"/>
+          <div
+            class="flex items-center space-x-2 justify-center overflow-hidden"
+          >
+            <country-flag
+              size="normal"
+              class="!-mt-[9px]"
+              :country="props.option.code"
+            />
             <span>{{ props.option.dial_code }}</span>
           </div>
         </template>
       </v-select>
-      <input v-model="inputVal" type="text" class="inline-flex-grow !border-l-0 !rounded-l-none"
-             :disabled="disabled?true:null"
-             :class="[theme.default.input, { '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
-             :placeholder="placeholder" :style="inputStyle" @input="onInput"
+      <input
+        v-model="inputVal"
+        type="text"
+        class="inline-flex-grow !border-l-0 !rounded-l-none"
+        :disabled="disabled ? true : null"
+        :class="[
+          theme.default.input,
+          {
+            '!ring-red-500 !ring-2': hasError,
+            '!cursor-not-allowed !bg-gray-200': disabled,
+          },
+        ]"
+        :placeholder="placeholder"
+        :style="inputStyle"
+        @input="onInput"
       >
     </div>
 
     <template #help>
-      <slot name="help"/>
+      <slot name="help" />
     </template>
 
     <template #error>
-      <slot name="error"/>
+      <slot name="error" />
     </template>
   </input-wrapper>
 </template>
 
 <script>
-import {inputProps, useFormInput} from './useFormInput.js'
-import InputWrapper from './components/InputWrapper.vue'
-import countryCodes from '~/data/country_codes.json'
-import CountryFlag from 'vue-country-flag-next'
-import parsePhoneNumber from 'libphonenumber-js'
+import { inputProps, useFormInput } from "./useFormInput.js"
+import InputWrapper from "./components/InputWrapper.vue"
+import countryCodes from "~/data/country_codes.json"
+import CountryFlag from "vue-country-flag-next"
+import parsePhoneNumber from "libphonenumber-js"
 
 export default {
-  phone: 'PhoneInput',
-  components: {InputWrapper, CountryFlag},
+  phone: "PhoneInput",
+  components: { InputWrapper, CountryFlag },
   props: {
     ...inputProps,
-    canOnlyCountry: {type: Boolean, default: false},
-    unavailableCountries: {type: Array, default: () => []}
+    canOnlyCountry: { type: Boolean, default: false },
+    unavailableCountries: { type: Array, default: () => [] },
   },
 
   setup(props, context) {
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
     }
   },
 
   data() {
     return {
       selectedCountryCode: null,
-      inputVal: null
+      inputVal: null,
     }
   },
 
@@ -80,30 +113,42 @@ export default {
       return countryCodes.filter((item) => {
         return !this.unavailableCountries.includes(item.code)
       })
-    }
+    },
   },
 
   watch: {
     inputVal: {
       handler(val) {
-        if (val && val.startsWith('0')) {
+        if (val && val.startsWith("0")) {
           val = val.substring(1)
         }
         if (this.canOnlyCountry) {
-          this.compVal = (val) ? this.selectedCountryCode.code + this.selectedCountryCode.dial_code + val : this.selectedCountryCode.code + this.selectedCountryCode.dial_code
+          this.compVal = val
+            ? this.selectedCountryCode.code +
+              this.selectedCountryCode.dial_code +
+              val
+            : this.selectedCountryCode.code +
+              this.selectedCountryCode.dial_code
         } else {
-          this.compVal = (val) ? this.selectedCountryCode.code + this.selectedCountryCode.dial_code + val : null
+          this.compVal = val
+            ? this.selectedCountryCode.code +
+              this.selectedCountryCode.dial_code +
+              val
+            : null
         }
-      }
+      },
     },
-    compVal(newVal, oldVal) {
+    compVal() {
       this.initState()
     },
     selectedCountryCode(newVal, oldVal) {
       if (this.compVal && newVal && oldVal) {
-        this.compVal = this.compVal.replace(oldVal.code + oldVal.dial_code, newVal.code + newVal.dial_code)
+        this.compVal = this.compVal.replace(
+          oldVal.code + oldVal.dial_code,
+          newVal.code + newVal.dial_code,
+        )
       }
-    }
+    },
   },
 
   mounted() {
@@ -119,40 +164,51 @@ export default {
   },
 
   methods: {
-    getCountryBy(code = 'US', type = 'code') {
-      if (!code) code = 'US' // Default US
-      return this.countries.find((item) => {
-        return item[type] === code
-      }) ?? null
+    getCountryBy(code = "US", type = "code") {
+      if (!code) code = "US" // Default US
+      return (
+        this.countries.find((item) => {
+          return item[type] === code
+        }) ?? null
+      )
     },
     onInput(event) {
-      this.inputVal = event?.target?.value.replace(/[^0-9]/g, '')
-
+      this.inputVal = event?.target?.value.replace(/[^0-9]/g, "")
     },
     onChangeCountryCode() {
       if (!this.selectedCountryCode && this.countries.length > 0) {
         this.selectedCountryCode = this.countries[0]
       }
-      if (this.canOnlyCountry && (this.inputVal === null || this.inputVal === '' || !this.inputVal)) {
-        this.compVal = this.selectedCountryCode.code + this.selectedCountryCode.dial_code
+      if (
+        this.canOnlyCountry &&
+        (this.inputVal === null || this.inputVal === "" || !this.inputVal)
+      ) {
+        this.compVal =
+          this.selectedCountryCode.code + this.selectedCountryCode.dial_code
       }
     },
     initState() {
       if (this.compVal === null) {
-        return;
+        return
       }
-      if (!this.compVal?.startsWith('+')) {
-        this.selectedCountryCode = this.getCountryBy(this.compVal.substring(2, 0))
+      if (!this.compVal?.startsWith("+")) {
+        this.selectedCountryCode = this.getCountryBy(
+          this.compVal.substring(2, 0),
+        )
       }
 
       const phoneObj = parsePhoneNumber(this.compVal)
       if (phoneObj !== undefined && phoneObj) {
-        if (!this.selectedCountryCode && phoneObj.country !== undefined && phoneObj.country) {
+        if (
+          !this.selectedCountryCode &&
+          phoneObj.country !== undefined &&
+          phoneObj.country
+        ) {
           this.selectedCountryCode = this.getCountryBy(phoneObj.country)
         }
         this.inputVal = phoneObj.nationalNumber
       }
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/forms/RatingInput.vue b/client/components/forms/RatingInput.vue
index 564da2d38..a8f507f5a 100644
--- a/client/components/forms/RatingInput.vue
+++ b/client/components/forms/RatingInput.vue
@@ -1,20 +1,31 @@
 <template>
-  <input-wrapper
-    v-bind="inputWrapperProps"
-  >
+  <input-wrapper v-bind="inputWrapperProps">
     <template #label>
       <slot name="label" />
     </template>
 
     <div class="stars-outer">
-      <div v-for="i in starsCount" :key="i"
-           class="cursor-pointer inline-block text-gray-200 dark:text-gray-800"
-           :class="{'!text-yellow-400 active-star':i<=compVal, '!text-yellow-200 !dark:text-yellow-800 hover-star':i>compVal && i<=hoverRating, '!cursor-not-allowed':disabled}"
-           role="button" @click="setRating(i)"
-           @mouseenter="onMouseHover(i)"
-           @mouseleave="hoverRating = -1"
+      <div
+        v-for="i in starsCount"
+        :key="i"
+        class="cursor-pointer inline-block text-gray-200 dark:text-gray-800"
+        :class="{
+          '!text-yellow-400 active-star': i <= compVal,
+          '!text-yellow-200 !dark:text-yellow-800 hover-star':
+            i > compVal && i <= hoverRating,
+          '!cursor-not-allowed': disabled,
+        }"
+        role="button"
+        @click="setRating(i)"
+        @mouseenter="onMouseHover(i)"
+        @mouseleave="hoverRating = -1"
       >
-        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          class="w-8 h-8"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path
             d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
           />
@@ -32,37 +43,27 @@
 </template>
 
 <script>
-import { inputProps, useFormInput } from './useFormInput.js'
-import InputWrapper from './components/InputWrapper.vue'
+import { inputProps, useFormInput } from "./useFormInput.js"
+import InputWrapper from "./components/InputWrapper.vue"
 
 export default {
-  name: 'RatingInput',
+  name: "RatingInput",
   components: { InputWrapper },
 
   props: {
     ...inputProps,
-    numberOfStars: { type: Number, default: 5 }
+    numberOfStars: { type: Number, default: 5 },
   },
 
-  setup (props, context) {
+  setup(props, context) {
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
     }
   },
 
-  data () {
+  data() {
     return {
-      hoverRating: -1
-    }
-  },
-
-  mounted () {
-    if (!this.compVal) this.compVal = 0
-  },
-
-  updated () {
-    if (!this.compVal) {
-      this.compVal = 0
+      hoverRating: -1,
     }
   },
 
@@ -72,14 +73,24 @@ export default {
         return 5
       }
       return this.numberOfStars
+    },
+  },
+
+  mounted() {
+    if (!this.compVal) this.compVal = 0
+  },
+
+  updated() {
+    if (!this.compVal) {
+      this.compVal = 0
     }
   },
 
   methods: {
-    onMouseHover (i) {
-      this.hoverRating = (this.disabled) ? -1 : i
+    onMouseHover(i) {
+      this.hoverRating = this.disabled ? -1 : i
     },
-    setRating (val) {
+    setRating(val) {
       if (this.disabled) {
         return
       }
@@ -88,7 +99,7 @@ export default {
       } else {
         this.compVal = val
       }
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/forms/RichTextAreaInput.client.vue b/client/components/forms/RichTextAreaInput.client.vue
index e3b609c46..78730ce2a 100644
--- a/client/components/forms/RichTextAreaInput.client.vue
+++ b/client/components/forms/RichTextAreaInput.client.vue
@@ -1,15 +1,25 @@
 <template>
-  <input-wrapper
-    v-bind="inputWrapperProps"
-  >
+  <input-wrapper v-bind="inputWrapperProps">
     <template #label>
       <slot name="label" />
     </template>
 
-    <vue-editor :id="id?id:name" ref="editor" v-model="compVal" :disabled="disabled?true:null"
-                :placeholder="placeholder" :class="[{ '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }, theme.RichTextAreaInput.input]"
-                :editor-toolbar="editorToolbar" class="rich-editor resize-y"
-                :style="inputStyle"
+    <vue-editor
+      :id="id ? id : name"
+      ref="editor"
+      v-model="compVal"
+      :disabled="disabled ? true : null"
+      :placeholder="placeholder"
+      :class="[
+        {
+          '!ring-red-500 !ring-2 !border-transparent': hasError,
+          '!cursor-not-allowed !bg-gray-200': disabled,
+        },
+        theme.RichTextAreaInput.input,
+      ]"
+      :editor-toolbar="editorToolbar"
+      class="rich-editor resize-y"
+      :style="inputStyle"
     />
 
     <template #help>
@@ -22,14 +32,14 @@
 </template>
 
 <script>
-import { inputProps, useFormInput } from './useFormInput.js'
-import InputWrapper from './components/InputWrapper.vue'
-import { VueEditor, Quill } from 'vue3-editor'
+import { inputProps, useFormInput } from "./useFormInput.js"
+import InputWrapper from "./components/InputWrapper.vue"
+import { VueEditor, Quill } from "vue3-editor"
 
-Quill.imports['formats/link'].PROTOCOL_WHITELIST.push('notion')
+Quill.imports["formats/link"].PROTOCOL_WHITELIST.push("notion")
 
 export default {
-  name: 'RichTextAreaInput',
+  name: "RichTextAreaInput",
   components: { InputWrapper, VueEditor },
 
   props: {
@@ -39,20 +49,19 @@ export default {
       default: () => {
         return [
           [{ header: 1 }, { header: 2 }],
-          ['bold', 'italic', 'underline', 'link'],
-          [{ list: 'ordered' }, { list: 'bullet' }],
-          [{ color: [] }]
+          ["bold", "italic", "underline", "link"],
+          [{ list: "ordered" }, { list: "bullet" }],
+          [{ color: [] }],
         ]
-      }
-    }
+      },
+    },
   },
 
-  setup (props, context) {
+  setup(props, context) {
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
     }
-  }
-
+  },
 }
 </script>
 
@@ -74,7 +83,20 @@ export default {
     border-left: 0px !important;
   }
 
-  .ql-snow .ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar button.ql-active, .ql-snow .ql-toolbar button:focus, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar button.ql-active, .ql-snow.ql-toolbar button:focus, .ql-snow.ql-toolbar button:hover {
+  .ql-snow .ql-toolbar .ql-picker-item.ql-selected,
+  .ql-snow .ql-toolbar .ql-picker-item:hover,
+  .ql-snow .ql-toolbar .ql-picker-label.ql-active,
+  .ql-snow .ql-toolbar .ql-picker-label:hover,
+  .ql-snow .ql-toolbar button.ql-active,
+  .ql-snow .ql-toolbar button:focus,
+  .ql-snow .ql-toolbar button:hover,
+  .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+  .ql-snow.ql-toolbar .ql-picker-item:hover,
+  .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+  .ql-snow.ql-toolbar .ql-picker-label:hover,
+  .ql-snow.ql-toolbar button.ql-active,
+  .ql-snow.ql-toolbar button:focus,
+  .ql-snow.ql-toolbar button:hover {
     @apply text-nt-blue;
   }
 }
diff --git a/client/components/forms/ScaleInput.vue b/client/components/forms/ScaleInput.vue
index 5eef87806..ce1506758 100644
--- a/client/components/forms/ScaleInput.vue
+++ b/client/components/forms/ScaleInput.vue
@@ -1,16 +1,21 @@
 <template>
-  <input-wrapper
-    v-bind="inputWrapperProps"
-  >
+  <input-wrapper v-bind="inputWrapperProps">
     <template #label>
       <slot name="label" />
     </template>
 
     <div class="rectangle-outer grid grid-cols-5 gap-2">
-      <div v-for="i in scaleList" :key="i"
-           :class="[{'font-semibold':compVal===i},theme.ScaleInput.button, compVal!==i ? unselectedButtonClass: '']"
-           :style="btnStyle(i===compVal)"
-           role="button" @click="setScale(i)"
+      <div
+        v-for="i in scaleList"
+        :key="i"
+        :class="[
+          { 'font-semibold': compVal === i },
+          theme.ScaleInput.button,
+          compVal !== i ? unselectedButtonClass : '',
+        ]"
+        :style="btnStyle(i === compVal)"
+        role="button"
+        @click="setScale(i)"
       >
         {{ i }}
       </div>
@@ -26,43 +31,44 @@
 </template>
 
 <script>
-import { inputProps, useFormInput } from './useFormInput.js'
-import InputWrapper from './components/InputWrapper.vue'
+import { inputProps, useFormInput } from "./useFormInput.js"
+import InputWrapper from "./components/InputWrapper.vue"
 
 export default {
-  name: 'ScaleInput',
+  name: "ScaleInput",
   components: { InputWrapper },
 
   props: {
     ...inputProps,
     minScale: { type: Number, default: 1 },
     maxScale: { type: Number, default: 5 },
-    stepScale: { type: Number, default: 1 }
+    stepScale: { type: Number, default: 1 },
   },
 
-  setup (props, context) {
+  setup(props, context) {
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
     }
   },
 
-  data () {
+  data() {
     return {}
   },
 
   computed: {
-    scaleList () {
+    scaleList() {
       const list = []
       for (let i = this.minScale; i <= this.maxScale; i += this.stepScale) {
         list.push(i)
       }
       return list
     },
-    unselectedButtonClass () {
+    unselectedButtonClass() {
       return this.theme.ScaleInput.unselectedButton
     },
-    textColor () {
-      const color = (this.color.charAt(0) === '#') ? this.color.substring(1, 7) : this.color
+    textColor() {
+      const color =
+        this.color.charAt(0) === "#" ? this.color.substring(1, 7) : this.color
       const r = parseInt(color.substring(0, 2), 16) // hexToR
       const g = parseInt(color.substring(2, 4), 16) // hexToG
       const b = parseInt(color.substring(4, 6), 16) // hexToB
@@ -73,26 +79,26 @@ export default {
         }
         return Math.pow((col + 0.055) / 1.055, 2.4)
       })
-      const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2])
-      return (L > 0.55) ? '#000000' : '#FFFFFF'
-    }
+      const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
+      return L > 0.55 ? "#000000" : "#FFFFFF"
+    },
   },
 
-  mounted () {
-    if (this.compVal && typeof this.compVal === 'string') {
+  mounted() {
+    if (this.compVal && typeof this.compVal === "string") {
       this.compVal = parseInt(this.compVal)
     }
   },
 
   methods: {
-    btnStyle (isSelected) {
+    btnStyle(isSelected) {
       if (!isSelected) return {}
       return {
         color: this.textColor,
-        backgroundColor: this.color
+        backgroundColor: this.color,
       }
     },
-    setScale (val) {
+    setScale(val) {
       if (this.disabled) {
         return
       }
@@ -101,7 +107,7 @@ export default {
       } else {
         this.compVal = val
       }
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/forms/SelectInput.vue b/client/components/forms/SelectInput.vue
index 6542fa8fb..aab21b3f7 100644
--- a/client/components/forms/SelectInput.vue
+++ b/client/components/forms/SelectInput.vue
@@ -3,17 +3,38 @@
     <template #label>
       <slot name="label" />
     </template>
-    <v-select v-model="compVal" :data="finalOptions" :label="label" :option-key="optionKey" :emit-key="emitKey"
-      :required="required" :multiple="multiple" :searchable="searchable" :loading="loading" :color="color"
-      :placeholder="placeholder" :uppercase-labels="uppercaseLabels" :theme="theme" :has-error="hasError"
-      :allow-creation="allowCreation" :disabled="disabled ? true : null" :help="help" :help-position="helpPosition"
-      @update-options="updateOptions" @update:model-value="updateModelValue">
+    <v-select
+      v-model="compVal"
+      :data="finalOptions"
+      :label="label"
+      :option-key="optionKey"
+      :emit-key="emitKey"
+      :required="required"
+      :multiple="multiple"
+      :searchable="searchable"
+      :loading="loading"
+      :color="color"
+      :placeholder="placeholder"
+      :uppercase-labels="uppercaseLabels"
+      :theme="theme"
+      :has-error="hasError"
+      :allow-creation="allowCreation"
+      :disabled="disabled ? true : null"
+      :help="help"
+      :help-position="helpPosition"
+      @update-options="updateOptions"
+      @update:model-value="updateModelValue"
+    >
       <template #selected="{ option }">
-        <slot name="selected" :option="option" :optionName="getOptionName(option)">
+        <slot
+          name="selected"
+          :option="option"
+          :option-name="getOptionName(option)"
+        >
           <template v-if="multiple">
             <div class="flex items-center truncate mr-6">
               <span class="truncate">
-                {{ getOptionNames(selectedValues).join(', ') }}
+                {{ getOptionNames(selectedValues).join(", ") }}
               </span>
             </div>
           </template>
@@ -25,16 +46,29 @@
         </slot>
       </template>
       <template #option="{ option, selected }">
-        <slot name="option" :option="option" :selected="selected">
+        <slot
+          name="option"
+          :option="option"
+          :selected="selected"
+        >
           <span class="flex group-hover:text-white">
             <p class="flex-grow group-hover:text-white">
               {{ option.name }}
             </p>
-            <span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-4 dark:text-white">
-              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd"
+            <span
+              v-if="selected"
+              class="absolute inset-y-0 right-0 flex items-center pr-4 dark:text-white"
+            >
+              <svg
+                class="h-5 w-5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
                   d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                  clip-rule="evenodd" />
+                  clip-rule="evenodd"
+                />
               </svg>
             </span>
           </span>
@@ -53,31 +87,31 @@
 </template>
 
 <script>
-import { inputProps, useFormInput } from './useFormInput.js'
-import InputWrapper from './components/InputWrapper.vue'
+import { inputProps, useFormInput } from "./useFormInput.js"
+import InputWrapper from "./components/InputWrapper.vue"
 
 /**
  * Options: {name,value} objects
  */
 export default {
-  name: 'SelectInput',
+  name: "SelectInput",
   components: { InputWrapper },
 
   props: {
     ...inputProps,
     options: { type: Array, required: true },
-    optionKey: { type: String, default: 'value' },
-    emitKey: { type: String, default: 'value' },
-    displayKey: { type: String, default: 'name' },
+    optionKey: { type: String, default: "value" },
+    emitKey: { type: String, default: "value" },
+    displayKey: { type: String, default: "name" },
     loading: { type: Boolean, default: false },
     multiple: { type: Boolean, default: false },
     searchable: { type: Boolean, default: false },
-    allowCreation: { type: Boolean, default: false }
+    allowCreation: { type: Boolean, default: false },
   },
 
   setup(props, context) {
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
     }
   },
 
@@ -91,7 +125,7 @@ export default {
   computed: {
     finalOptions() {
       return this.options.concat(this.additionalOptions)
-    }
+    },
   },
   methods: {
     getOptionName(val) {
@@ -102,7 +136,7 @@ export default {
       return null
     },
     getOptionNames(values) {
-      return values.map(val => {
+      return values.map((val) => {
         return this.getOptionName(val)
       })
     },
@@ -114,7 +148,7 @@ export default {
       if (newItem) {
         this.additionalOptions.push(newItem)
       }
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/forms/SignatureInput.vue b/client/components/forms/SignatureInput.vue
index cda0ca9d3..cb1ec30dd 100644
--- a/client/components/forms/SignatureInput.vue
+++ b/client/components/forms/SignatureInput.vue
@@ -1,21 +1,30 @@
 <template>
-  <input-wrapper
-    v-bind="inputWrapperProps"
-  >
+  <input-wrapper v-bind="inputWrapperProps">
     <template #label>
       <slot name="label" />
     </template>
 
-    <VueSignaturePad ref="signaturePad"
-                     :class="[theme.default.input,{ '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
-                     height="150px"
-                     :name="name"
-                     :options="{ onEnd }"
+    <VueSignaturePad
+      ref="signaturePad"
+      :class="[
+        theme.default.input,
+        {
+          '!ring-red-500 !ring-2 !border-transparent': hasError,
+          '!cursor-not-allowed !bg-gray-200': disabled,
+        },
+      ]"
+      height="150px"
+      :name="name"
+      :options="{ onEnd }"
     />
 
     <template #bottom_after_help>
       <small :class="theme.default.help">
-        <a :class="theme.default.help" href="#" @click.prevent="clear">Clear</a>
+        <a
+          :class="theme.default.help"
+          href="#"
+          @click.prevent="clear"
+        >Clear</a>
       </small>
     </template>
 
@@ -26,37 +35,38 @@
 </template>
 
 <script>
-import { inputProps, useFormInput } from './useFormInput.js'
-import InputWrapper from './components/InputWrapper.vue'
-import { VueSignaturePad } from 'vue-signature-pad'
+import { inputProps, useFormInput } from "./useFormInput.js"
+import InputWrapper from "./components/InputWrapper.vue"
+import { VueSignaturePad } from "vue-signature-pad"
 
 export default {
-  name: 'SignatureInput',
+  name: "SignatureInput",
   components: { InputWrapper, VueSignaturePad },
 
   props: {
-    ...inputProps
+    ...inputProps,
   },
 
-  setup (props, context) {
+  setup(props, context) {
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
     }
   },
 
   methods: {
-    clear () {
+    clear() {
       this.$refs.signaturePad.clearSignature()
       this.onEnd()
     },
-    onEnd () {
+    onEnd() {
       if (this.disabled) {
         this.$refs.signaturePad.clearSignature()
       } else {
+        /* eslint-disable-next-line */
         const { isEmpty, data } = this.$refs.signaturePad?.saveSignature()
-        this.form[this.name] = (!isEmpty && data) ? data : null
+        this.form[this.name] = !isEmpty && data ? data : null
       }
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/forms/SliderInput.vue b/client/components/forms/SliderInput.vue
index d45c469f6..8513cc2c5 100644
--- a/client/components/forms/SliderInput.vue
+++ b/client/components/forms/SliderInput.vue
@@ -5,30 +5,28 @@
     </template>
     <div class="flex space-x-2">
       <div class="flex-1 relative">
-        <div class="font-medium text-sm absolute -top-[6px]"
-             :style="labelStyle"
+        <div
+          class="font-medium text-sm absolute -top-[6px]"
+          :style="labelStyle"
         >
           <div class="">
             {{ compVal }}
           </div>
         </div>
         <input
+          v-model="compVal"
           type="range"
           class="w-full mt-3"
           :disabled="disabled"
           :min="minSlider"
           :max="maxSlider"
           :step="stepSlider"
-          v-model="compVal"
-        />
+        >
         <div class="grid grid-cols-3 gap-2 -mt-1">
           <div
             v-for="i in sliderLabelsList"
             :key="i"
-            :class="[
-              theme.SliderInput.stepLabel,
-              i.style,
-            ]"
+            :class="[theme.SliderInput.stepLabel, i.style]"
           >
             {{ i.label }}
           </div>
@@ -46,8 +44,8 @@
 </template>
 
 <script>
-import { inputProps, useFormInput } from "./useFormInput.js";
-import InputWrapper from "./components/InputWrapper.vue";
+import { inputProps, useFormInput } from "./useFormInput.js"
+import InputWrapper from "./components/InputWrapper.vue"
 
 export default {
   name: "SliderInput",
@@ -63,18 +61,20 @@ export default {
   setup(props, context) {
     return {
       ...useFormInput(props, context),
-    };
+    }
   },
   computed: {
     labelStyle() {
-      const ratio = ((this.compVal-this.minSlider) / (this.maxSlider-this.minSlider)) * 100
+      const ratio =
+        ((this.compVal - this.minSlider) / (this.maxSlider - this.minSlider)) *
+        100
       return {
         left: `${ratio}%`,
-        marginLeft: `-${ratio/100*15}px`
+        marginLeft: `-${(ratio / 100) * 15}px`,
       }
     },
     sliderLabelsList() {
-      const midPoint = (this.maxSlider - this.minSlider) / 2 + this.minSlider;
+      const midPoint = (this.maxSlider - this.minSlider) / 2 + this.minSlider
       const labels = [
         {
           label: `${this.minSlider}`,
@@ -88,14 +88,12 @@ export default {
           label: `${this.maxSlider}`,
           style: "flex items-center justify-end",
         },
-      ];
-      return labels;
+      ]
+      return labels
     },
   },
   mounted() {
-    this.compVal = parseInt(this.compVal ?? this.minSlider);
+    this.compVal = parseInt(this.compVal ?? this.minSlider)
   },
-
-
-};
+}
 </script>
diff --git a/client/components/forms/TextAreaInput.vue b/client/components/forms/TextAreaInput.vue
index 8cc5f1779..4105ebd23 100644
--- a/client/components/forms/TextAreaInput.vue
+++ b/client/components/forms/TextAreaInput.vue
@@ -1,20 +1,31 @@
 <template>
-  <input-wrapper
-    v-bind="inputWrapperProps"
-  >
+  <input-wrapper v-bind="inputWrapperProps">
     <template #label>
       <slot name="label" />
     </template>
 
-    <textarea :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
-              :class="[theme.default.input,{ '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
-              class="resize-y"
-              :name="name" :style="inputStyle"
-              :placeholder="placeholder"
-              :maxlength="maxCharLimit"
+    <textarea
+      :id="id ? id : name"
+      v-model="compVal"
+      :disabled="disabled ? true : null"
+      :class="[
+        theme.default.input,
+        {
+          '!ring-red-500 !ring-2 !border-transparent': hasError,
+          '!cursor-not-allowed !bg-gray-200': disabled,
+        },
+      ]"
+      class="resize-y"
+      :name="name"
+      :style="inputStyle"
+      :placeholder="placeholder"
+      :maxlength="maxCharLimit"
     />
 
-    <template v-if="maxCharLimit && showCharLimit" #bottom_after_help>
+    <template
+      v-if="maxCharLimit && showCharLimit"
+      #bottom_after_help
+    >
       <small :class="theme.default.help">
         {{ charCount }}/{{ maxCharLimit }}
       </small>
@@ -27,30 +38,30 @@
 </template>
 
 <script>
-import { inputProps, useFormInput } from './useFormInput.js'
-import InputWrapper from './components/InputWrapper.vue'
+import { inputProps, useFormInput } from "./useFormInput.js"
+import InputWrapper from "./components/InputWrapper.vue"
 
 export default {
-  name: 'TextAreaInput',
+  name: "TextAreaInput",
   components: { InputWrapper },
   mixins: [],
 
   props: {
     ...inputProps,
     maxCharLimit: { type: Number, required: false, default: null },
-    showCharLimit: { type: Boolean, required: false, default: false }
+    showCharLimit: { type: Boolean, required: false, default: false },
   },
 
-  setup (props, context) {
+  setup(props, context) {
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
     }
   },
 
   computed: {
-    charCount () {
-      return (this.compVal) ? this.compVal.length : 0
-    }
-  }
+    charCount() {
+      return this.compVal ? this.compVal.length : 0
+    },
+  },
 }
 </script>
diff --git a/client/components/forms/TextInput.vue b/client/components/forms/TextInput.vue
index 0c40c80d3..a5062f8ed 100644
--- a/client/components/forms/TextInput.vue
+++ b/client/components/forms/TextInput.vue
@@ -1,19 +1,32 @@
 <template>
-  <input-wrapper
-    v-bind="inputWrapperProps"
-  >
+  <input-wrapper v-bind="inputWrapperProps">
     <template #label>
       <slot name="label" />
     </template>
 
-    <input :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
-           :type="nativeType" :autocomplete="autocomplete"
-           :pattern="pattern"
-           :style="inputStyle"
-           :class="[theme.default.input, { '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
-           :name="name" :accept="accept"
-           :placeholder="placeholder" :min="min" :max="max" :maxlength="maxCharLimit"
-           @change="onChange" @keydown.enter.prevent="onEnterPress"
+    <input
+      :id="id ? id : name"
+      v-model="compVal"
+      :disabled="disabled ? true : null"
+      :type="nativeType"
+      :autocomplete="autocomplete"
+      :pattern="pattern"
+      :style="inputStyle"
+      :class="[
+        theme.default.input,
+        {
+          '!ring-red-500 !ring-2 !border-transparent': hasError,
+          '!cursor-not-allowed !bg-gray-200': disabled,
+        },
+      ]"
+      :name="name"
+      :accept="accept"
+      :placeholder="placeholder"
+      :min="min"
+      :max="max"
+      :maxlength="maxCharLimit"
+      @change="onChange"
+      @keydown.enter.prevent="onEnterPress"
     >
 
     <template #help>
@@ -36,28 +49,28 @@
 </template>
 
 <script>
-import { inputProps, useFormInput } from './useFormInput.js'
-import InputWrapper from './components/InputWrapper.vue'
+import { inputProps, useFormInput } from "./useFormInput.js"
+import InputWrapper from "./components/InputWrapper.vue"
 
 export default {
-  name: 'TextInput',
+  name: "TextInput",
   components: { InputWrapper },
 
   props: {
     ...inputProps,
-    nativeType: { type: String, default: 'text' },
+    nativeType: { type: String, default: "text" },
     accept: { type: String, default: null },
     min: { type: Number, required: false, default: null },
     max: { type: Number, required: false, default: null },
-    autocomplete: { default: null },
+    autocomplete: { type:[Boolean, String, Object], default: null },
     maxCharLimit: { type: Number, required: false, default: null },
     showCharLimit: { type: Boolean, required: false, default: false },
-    pattern: { type: String, default: null }
+    pattern: { type: String, default: null },
   },
 
-  setup (props, context) {
+  setup(props, context) {
     const onChange = (event) => {
-      if (props.nativeType !== 'file') return
+      if (props.nativeType !== "file") return
 
       const file = event.target.files[0]
       // eslint-disable-next-line vue/no-mutating-props
@@ -70,15 +83,19 @@ export default {
     }
 
     return {
-      ...useFormInput(props, context, props.nativeType === 'file' ? 'file-' : null),
+      ...useFormInput(
+        props,
+        context,
+        props.nativeType === "file" ? "file-" : null,
+      ),
       onEnterPress,
-      onChange
+      onChange,
     }
   },
   computed: {
-    charCount () {
-      return (this.compVal) ? this.compVal.length : 0
-    }
-  }
+    charCount() {
+      return this.compVal ? this.compVal.length : 0
+    },
+  },
 }
 </script>
diff --git a/client/components/forms/ToggleSwitchInput.vue b/client/components/forms/ToggleSwitchInput.vue
index 208121ddb..7bffcc9c3 100644
--- a/client/components/forms/ToggleSwitchInput.vue
+++ b/client/components/forms/ToggleSwitchInput.vue
@@ -5,9 +5,18 @@
     </template>
 
     <div class="flex">
-      <v-switch :id="id?id:name" v-model="compVal" class="inline-block mr-2" :disabled="disabled?true:null" />
+      <v-switch
+        :id="id ? id : name"
+        v-model="compVal"
+        class="inline-block mr-2"
+        :disabled="disabled ? true : null"
+      />
       <slot name="label">
-        <span>{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span></span>
+        <span>{{ label }}
+          <span
+            v-if="required"
+            class="text-red-500 required-dot"
+          >*</span></span>
       </slot>
     </div>
 
@@ -22,25 +31,25 @@
 </template>
 
 <script>
-import { inputProps, useFormInput } from './useFormInput.js'
-import VSwitch from './components/VSwitch.vue'
-import InputWrapper from './components/InputWrapper.vue'
+import { inputProps, useFormInput } from "./useFormInput.js"
+import VSwitch from "./components/VSwitch.vue"
+import InputWrapper from "./components/InputWrapper.vue"
 export default {
-  name: 'ToggleSwitchInput',
+  name: "ToggleSwitchInput",
 
   components: { InputWrapper, VSwitch },
   props: {
-    ...inputProps
+    ...inputProps,
   },
 
-  setup (props, context) {
+  setup(props, context) {
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
     }
   },
 
-  mounted () {
+  mounted() {
     this.compVal = !!this.compVal
-  }
+  },
 }
 </script>
diff --git a/client/components/forms/components/CameraUpload.vue b/client/components/forms/components/CameraUpload.vue
index b04194963..67d4891aa 100644
--- a/client/components/forms/components/CameraUpload.vue
+++ b/client/components/forms/components/CameraUpload.vue
@@ -1,143 +1,218 @@
 <template>
-    <div class="relative border">
-        <video id="webcam" autoplay playsinline :class="[{ 'hidden': !isCapturing },theme.fileInput.cameraInput]" width="1280" height="720"></video>
-        <canvas id="canvas" :class="{ 'hidden': !capturedImage }"></canvas>
-        <div v-if="cameraPermissionStatus === 'allowed'" class="absolute inset-x-0 grid place-content-center bottom-2">
-            <div class=" p-2 px-4 flex items-center justify-center text-xs space-x-2" v-if="isCapturing">
-                <span class="cursor-pointer  rounded-full w-14 h-14 border-2 grid place-content-center"
-                    @click="processCapturedImage">
-                    <span class="cursor-pointer bg-gray-100 rounded-full w-10 h-10 grid place-content-center">
-                    </span>
-                </span>
-                <span class="text-white cursor-pointer" @click="cancelCamera">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                        stroke="currentColor" class="w-8 h-8">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-                    </svg>
-                </span>
-            </div>
-        </div>
-        <div v-else-if="cameraPermissionStatus === 'blocked'"
-            class="absolute p-5 top-0 inset-x-0 flex flex-col items-center justify-center space-y-4 text-center rounded border border-gray-400/30 h-full"
-            @click="openCameraUpload">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-                class="w-6 h-6">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" />
-                <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" />
-            </svg>
-            <p class="text-center font-bold">
-                Allow Camera Permission
-            </p>
-            <p class="text-xs">You need to allow camera permission before you can take pictures. Go to browser settings to enable camera permission on this page.</p>
-            <button class="text-xs p-1 px-2 bg-blue-600 rounded" type="button" @click.stop="cancelCamera">Got it!</button>
-        </div>
-
-        <div v-else-if="cameraPermissionStatus === 'loading'"
-            class="absolute p-5 top-0 inset-x-0 flex flex-col items-center justify-center space-y-4 text-center rounded border border-gray-400/30 h-full"
-            >
-            <div class="w-6 h-6">
-                <Loader />
-            </div>
-        </div>
-        <div v-else
-            class="absolute p-5 top-0 inset-x-0 flex flex-col items-center justify-center space-y-4 text-center rounded border border-gray-400/30 h-full"
-            @click="openCameraUpload">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-            <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M12 18.75H4.5a2.25 2.25 0 0 1-2.25-2.25V9m12.841 9.091L16.5 19.5m-1.409-1.409c.407-.407.659-.97.659-1.591v-9a2.25 2.25 0 0 0-2.25-2.25h-9c-.621 0-1.184.252-1.591.659m12.182 12.182L2.909 5.909M1.5 4.5l1.409 1.409" />
-            </svg>
+  <div class="relative border">
+    <video
+      id="webcam"
+      autoplay
+      playsinline
+      :class="[{ hidden: !isCapturing }, theme.fileInput.cameraInput]"
+      width="1280"
+      height="720"
+    />
+    <canvas
+      id="canvas"
+      :class="{ hidden: !capturedImage }"
+    />
+    <div
+      v-if="cameraPermissionStatus === 'allowed'"
+      class="absolute inset-x-0 grid place-content-center bottom-2"
+    >
+      <div
+        v-if="isCapturing"
+        class="p-2 px-4 flex items-center justify-center text-xs space-x-2"
+      >
+        <span
+          class="cursor-pointer rounded-full w-14 h-14 border-2 grid place-content-center"
+          @click="processCapturedImage"
+        >
+          <span
+            class="cursor-pointer bg-gray-100 rounded-full w-10 h-10 grid place-content-center"
+          />
+        </span>
+        <span
+          class="text-white cursor-pointer"
+          @click="cancelCamera"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-8 h-8"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M6 18 18 6M6 6l12 12"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+    <div
+      v-else-if="cameraPermissionStatus === 'blocked'"
+      class="absolute p-5 top-0 inset-x-0 flex flex-col items-center justify-center space-y-4 text-center rounded border border-gray-400/30 h-full"
+      @click="openCameraUpload"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="w-6 h-6"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
+        />
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
+        />
+      </svg>
+      <p class="text-center font-bold">
+        Allow Camera Permission
+      </p>
+      <p class="text-xs">
+        You need to allow camera permission before you can take pictures. Go to
+        browser settings to enable camera permission on this page.
+      </p>
+      <button
+        class="text-xs p-1 px-2 bg-blue-600 rounded"
+        type="button"
+        @click.stop="cancelCamera"
+      >
+        Got it!
+      </button>
+    </div>
 
-            <p class="text-center font-bold">
-                Camera Device Error
-            </p>
-            <p class="text-xs">An unknown error occurred when trying to start Webcam device.</p>
-            <button class="text-xs p-1 px-2 bg-blue-600 rounded" type="button" @click.stop="cancelCamera">Go back</button>
-        </div>
+    <div
+      v-else-if="cameraPermissionStatus === 'loading'"
+      class="absolute p-5 top-0 inset-x-0 flex flex-col items-center justify-center space-y-4 text-center rounded border border-gray-400/30 h-full"
+    >
+      <div class="w-6 h-6">
+        <Loader />
+      </div>
+    </div>
+    <div
+      v-else
+      class="absolute p-5 top-0 inset-x-0 flex flex-col items-center justify-center space-y-4 text-center rounded border border-gray-400/30 h-full"
+      @click="openCameraUpload"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="w-6 h-6"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M12 18.75H4.5a2.25 2.25 0 0 1-2.25-2.25V9m12.841 9.091L16.5 19.5m-1.409-1.409c.407-.407.659-.97.659-1.591v-9a2.25 2.25 0 0 0-2.25-2.25h-9c-.621 0-1.184.252-1.591.659m12.182 12.182L2.909 5.909M1.5 4.5l1.409 1.409"
+        />
+      </svg>
 
+      <p class="text-center font-bold">
+        Camera Device Error
+      </p>
+      <p class="text-xs">
+        An unknown error occurred when trying to start Webcam device.
+      </p>
+      <button
+        class="text-xs p-1 px-2 bg-blue-600 rounded"
+        type="button"
+        @click.stop="cancelCamera"
+      >
+        Go back
+      </button>
     </div>
+  </div>
 </template>
 
 <script>
-import Webcam from 'webcam-easy';
-import { themes } from '~/lib/forms/form-themes.js'
+import Webcam from "webcam-easy"
+import { themes } from "~/lib/forms/form-themes.js"
 export default {
-    name: 'FileInput',
-    props:{
-        theme: { type: Object, default: () => themes.default }
-    },
-    data: () => ({
-        webcam: null,
-        isCapturing: false,
-        capturedImage: null,
-        cameraPermissionStatus: 'loading',
-    }),
-    computed: {
-        videoDisplay() {
-            return this.isCapturing ? '' : 'hidden';
-        },
-        canvasDisplay() {
-            return (!this.isCapturing && this.capturedImage) ? '' : 'hidden'
-        }
+  name: "FileInput",
+  props: {
+    theme: { type: Object, default: () => themes.default },
+  },
+  emits: ['stopWebcam', 'uploadImage'],
+  data: () => ({
+    webcam: null,
+    isCapturing: false,
+    capturedImage: null,
+    cameraPermissionStatus: "loading",
+  }),
+  computed: {
+    videoDisplay() {
+      return this.isCapturing ? "" : "hidden"
     },
-    mounted() {
-        const webcamElement = document.getElementById('webcam');
-        const canvasElement = document.getElementById('canvas');
-        this.webcam = new Webcam(webcamElement, 'user', canvasElement);
-        this.openCameraUpload()
+    canvasDisplay() {
+      return !this.isCapturing && this.capturedImage ? "" : "hidden"
     },
+  },
+  mounted() {
+    const webcamElement = document.getElementById("webcam")
+    const canvasElement = document.getElementById("canvas")
+    this.webcam = new Webcam(webcamElement, "user", canvasElement)
+    this.openCameraUpload()
+  },
 
-    methods: {
-        openCameraUpload() {
-            this.isCapturing = true;
-            this.capturedImage = null;
-            this.webcam.start()
-                .then(result => {
-                    this.cameraPermissionStatus = 'allowed';
-                })
-                .catch(err => {
-                    console.error(err)
-                    if(err.toString()  === 'NotAllowedError: Permission denied'){
-                        this.cameraPermissionStatus = 'blocked';
-                        return;
-                    }
-                    this.cameraPermissionStatus = 'unknown';
-                });
-        },
-        cancelCamera() {
-            this.isCapturing = false;
-            this.capturedImage = null;
-            this.webcam.stop()
-            this.$emit('stopWebcam')
-        },
-        processCapturedImage() {
-            this.capturedImage = this.webcam.snap();
-            this.isCapturing = false;
-            this.webcam.stop()
-            const byteCharacters = atob(this.capturedImage.split(',')[1]);
-            const byteArrays = [];
-            for (let offset = 0; offset < byteCharacters.length; offset += 512) {
-                const slice = byteCharacters.slice(offset, offset + 512);
-
-                const byteNumbers = new Array(slice.length);
-                for (let i = 0; i < slice.length; i++) {
-                    byteNumbers[i] = slice.charCodeAt(i);
-                }
-
-                const byteArray = new Uint8Array(byteNumbers);
-                byteArrays.push(byteArray);
-            }
+  methods: {
+    openCameraUpload() {
+      this.isCapturing = true
+      this.capturedImage = null
+      this.webcam
+        .start()
+        .then(() => {
+          this.cameraPermissionStatus = "allowed"
+        })
+        .catch((err) => {
+          console.error(err)
+          if (err.toString() === "NotAllowedError: Permission denied") {
+            this.cameraPermissionStatus = "blocked"
+            return
+          }
+          this.cameraPermissionStatus = "unknown"
+        })
+    },
+    cancelCamera() {
+      this.isCapturing = false
+      this.capturedImage = null
+      this.webcam.stop()
+      this.$emit("stopWebcam")
+    },
+    processCapturedImage() {
+      this.capturedImage = this.webcam.snap()
+      this.isCapturing = false
+      this.webcam.stop()
+      const byteCharacters = atob(this.capturedImage.split(",")[1])
+      const byteArrays = []
+      for (let offset = 0; offset < byteCharacters.length; offset += 512) {
+        const slice = byteCharacters.slice(offset, offset + 512)
 
-            // Create Blob from binary data
-            const blob = new Blob(byteArrays, { type: 'image/png' });
-            const filename = Date.now()
-            // Create a File object from the Blob
-            const file = new File([blob], `${filename}.png`, { type: 'image/png' });
-            this.$emit('uploadImage', file)
+        const byteNumbers = new Array(slice.length)
+        for (let i = 0; i < slice.length; i++) {
+          byteNumbers[i] = slice.charCodeAt(i)
         }
 
+        const byteArray = new Uint8Array(byteNumbers)
+        byteArrays.push(byteArray)
+      }
 
-    }
+      // Create Blob from binary data
+      const blob = new Blob(byteArrays, { type: "image/png" })
+      const filename = Date.now()
+      // Create a File object from the Blob
+      const file = new File([blob], `${filename}.png`, { type: "image/png" })
+      this.$emit("uploadImage", file)
+    },
+  },
 }
-
 </script>
diff --git a/client/components/forms/components/InputHelp.vue b/client/components/forms/components/InputHelp.vue
index 69efb70cc..1de6f10b3 100644
--- a/client/components/forms/components/InputHelp.vue
+++ b/client/components/forms/components/InputHelp.vue
@@ -8,19 +8,19 @@
         <span
           v-if="help"
           class="field-help"
-          v-html="help"/>
+          v-html="help"
+        />
       </slot>
     </small>
     <slot name="after-help">
-      <small class="flex-grow"/>
+      <small class="flex-grow" />
     </slot>
   </div>
 </template>
 
 <script setup>
-
 defineProps({
-  helpClasses: {type: String, default: 'text-gray-400 dark:text-gray-500'},
-  help: {type: String, required: false}
+  helpClasses: { type: String, default: "text-gray-400 dark:text-gray-500" },
+  help: { type: String, required: false },
 })
 </script>
diff --git a/client/components/forms/components/InputLabel.vue b/client/components/forms/components/InputLabel.vue
index 19ec06d6f..7bfa064df 100644
--- a/client/components/forms/components/InputLabel.vue
+++ b/client/components/forms/components/InputLabel.vue
@@ -19,7 +19,7 @@
 
 <script>
 export default {
-  name: 'InputLabel',
+  name: "InputLabel",
 
   props: {
     nativeFor: { type: String, default: null },
diff --git a/client/components/forms/components/InputWrapper.vue b/client/components/forms/components/InputWrapper.vue
index 05569fd4d..bacad11b6 100644
--- a/client/components/forms/components/InputWrapper.vue
+++ b/client/components/forms/components/InputWrapper.vue
@@ -50,8 +50,8 @@
 </template>
 
 <script setup>
-import InputLabel from './InputLabel.vue'
-import InputHelp from './InputHelp.vue'
+import InputLabel from "./InputLabel.vue"
+import InputHelp from "./InputHelp.vue"
 
 defineProps({
   id: { type: String, required: false },
@@ -62,7 +62,7 @@ defineProps({
   wrapperClass: { type: String, required: false },
   inputStyle: { type: Object, required: false },
   help: { type: String, required: false },
-  helpPosition: { type: String, default: 'below_input' },
+  helpPosition: { type: String, default: "below_input" },
   uppercaseLabels: { type: Boolean, default: true },
   hideFieldName: { type: Boolean, default: true },
   required: { type: Boolean, default: false },
diff --git a/client/components/forms/components/UploadedFile.vue b/client/components/forms/components/UploadedFile.vue
index 8b00e3a93..4385be605 100644
--- a/client/components/forms/components/UploadedFile.vue
+++ b/client/components/forms/components/UploadedFile.vue
@@ -3,15 +3,32 @@
     :class="[theme.fileInput.uploadedFile, 'overflow-hidden']"
     :title="file.file.name"
   >
-    <div v-if="file.src && !isImageHide" class="h-20 overflow-hidden flex">
-      <img class="block object-cover object-center w-full" :src="file.src" @error="isImageHide=true"/>
+    <div
+      v-if="file.src && !isImageHide"
+      class="h-20 overflow-hidden flex"
+    >
+      <img
+        class="block object-cover object-center w-full"
+        :src="file.src"
+        @error="isImageHide = true"
+      >
     </div>
-    <div v-else class="h-20 flex items-center justify-center">
-      <svg class="w-10 h-10 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-           stroke-width="0.8" stroke="currentColor"
+    <div
+      v-else
+      class="h-20 flex items-center justify-center"
+    >
+      <svg
+        class="w-10 h-10 text-gray-500"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="0.8"
+        stroke="currentColor"
       >
-        <path stroke-linecap="round" stroke-linejoin="round"
-              d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
         />
       </svg>
     </div>
@@ -47,17 +64,17 @@
 
 <script>
 export default {
-  name: 'UploadedFile',
+  name: "UploadedFile",
 
   props: {
-    file: { default: null },
-    theme: { type: Object }
+    file: { type:Object, default: null },
+    theme: { type: Object },
   },
-
+  emits: ['remove'],
   data: () => ({
-    isImageHide: false
+    isImageHide: false,
   }),
 
-  computed: {}
+  computed: {},
 }
 </script>
diff --git a/client/components/forms/components/VCheckbox.vue b/client/components/forms/components/VCheckbox.vue
index c0e4cc5ca..755851210 100644
--- a/client/components/forms/components/VCheckbox.vue
+++ b/client/components/forms/components/VCheckbox.vue
@@ -27,21 +27,21 @@ import {
   onMounted,
   ref,
   watch,
-} from 'vue'
+} from "vue"
 
 defineOptions({
-  name: 'VCheckbox',
+  name: "VCheckbox",
 })
 
 const props = defineProps({
   id: { type: String, default: null },
-  name: { type: String, default: 'checkbox' },
+  name: { type: String, default: "checkbox" },
   modelValue: { type: [Boolean, String], default: false },
   disabled: { type: Boolean, default: false },
-  sizeClasses: { type: String, default: 'w-4 h-4' },
+  sizeClasses: { type: String, default: "w-4 h-4" },
 })
 
-const emit = defineEmits(['update:modelValue', 'click'])
+const emit = defineEmits(["update:modelValue", "click"])
 
 const internalValue = ref(props.modelValue)
 
@@ -62,18 +62,14 @@ watch(
 watch(
   () => internalValue.value,
   (val, oldVal) => {
-    if (val === 0 || val === '0')
-      val = false
-    if (val === 1 || val === '1')
-      val = true
+    if (val === 0 || val === "0") val = false
+    if (val === 1 || val === "1") val = true
 
-    if (val !== oldVal)
-      emit('update:modelValue', val)
+    if (val !== oldVal) emit("update:modelValue", val)
   },
 )
 
 onMounted(() => {
-  if (internalValue.value === null)
-    internalValue.value = false
+  if (internalValue.value === null) internalValue.value = false
 })
 </script>
diff --git a/client/components/forms/components/VSelect.vue b/client/components/forms/components/VSelect.vue
index e0d2a1289..c7b843717 100644
--- a/client/components/forms/components/VSelect.vue
+++ b/client/components/forms/components/VSelect.vue
@@ -12,7 +12,16 @@
         aria-labelledby="listbox-label"
         class="cursor-pointer"
         :style="inputStyle"
-        :class="[theme.SelectInput.input, { 'py-2': !multiple || loading, 'py-1': multiple, '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200': disabled }, inputClass]"
+        :class="[
+          theme.SelectInput.input,
+          {
+            'py-2': !multiple || loading,
+            'py-1': multiple,
+            '!ring-red-500 !ring-2 !border-transparent': hasError,
+            '!cursor-not-allowed !bg-gray-200': disabled,
+          },
+          inputClass,
+        ]"
         @click="toggleDropdown"
       >
         <div :class="{ 'h-6': !multiple, 'min-h-8': multiple && !loading }">
@@ -43,14 +52,17 @@
               <slot name="placeholder">
                 <div
                   class="text-gray-400 dark:text-gray-500 w-full text-left truncate pr-3"
-                  :class="{ 'py-1': multiple && !loading }">
+                  :class="{ 'py-1': multiple && !loading }"
+                >
                   {{ placeholder }}
                 </div>
               </slot>
             </div>
           </transition>
         </div>
-        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+        <span
+          class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
+        >
           <svg
             class="h-5 w-5 text-gray-400"
             viewBox="0 0 20 20"
@@ -67,13 +79,32 @@
         </span>
       </button>
     </span>
-    <collapsible v-model="isOpen" @click-away="onClickAway"
-      class="absolute mt-1 rounded-md bg-white dark:bg-notion-dark-light shadow-xl z-10" :class="dropdownClass">
-      <ul tabindex="-1" role="listbox"
+    <collapsible
+      v-model="isOpen"
+      class="absolute mt-1 rounded-md bg-white dark:bg-notion-dark-light shadow-xl z-10"
+      :class="dropdownClass"
+      @click-away="onClickAway"
+    >
+      <ul
+        tabindex="-1"
+        role="listbox"
         class="rounded-md text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-sm sm:leading-5 relative"
-        :class="{ 'max-h-42 py-1': !isSearchable, 'max-h-48 pb-1': isSearchable }">
-        <div v-if="isSearchable" class="px-2 pt-2 sticky top-0 bg-white dark-bg-notion-dark-light z-10">
-          <text-input v-model="searchTerm" name="search" :color="color" :theme="theme" placeholder="Search..." />
+        :class="{
+          'max-h-42 py-1': !isSearchable,
+          'max-h-48 pb-1': isSearchable,
+        }"
+      >
+        <div
+          v-if="isSearchable"
+          class="px-2 pt-2 sticky top-0 bg-white dark-bg-notion-dark-light z-10"
+        >
+          <text-input
+            v-model="searchTerm"
+            name="search"
+            :color="color"
+            :theme="theme"
+            placeholder="Search..."
+          />
         </div>
         <div
           v-if="loading"
@@ -89,7 +120,8 @@
             :style="optionStyle"
             :class="{ 'px-3 pr-9': multiple, 'px-3': !multiple }"
             class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover:bg-form-color focus:outline-none focus-text-white focus-nt-blue"
-            @click="select(item)">
+            @click="select(item)"
+          >
             <slot
               name="option"
               :option="item"
@@ -101,7 +133,11 @@
           v-else-if="!loading && !(allowCreation && searchTerm)"
           class="w-full text-gray-500 text-center py-2"
         >
-          {{ (allowCreation ? 'Type something to add an option' : 'No option available') }}.
+          {{
+            allowCreation
+              ? "Type something to add an option"
+              : "No option available"
+          }}.
         </p>
         <li
           v-if="allowCreation && searchTerm"
@@ -109,8 +145,12 @@
           :style="optionStyle"
           :class="{ 'px-3 pr-9': multiple, 'px-3': !multiple }"
           class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white dark:text-white hover:bg-form-color focus:outline-none focus-text-white focus-nt-blue"
-          @click="createOption(searchTerm)">
-          Create <b class="px-1 bg-gray-300 rounded group-hover-text-black">{{ searchTerm }}</b>
+          @click="createOption(searchTerm)"
+        >
+          Create
+          <b class="px-1 bg-gray-300 rounded group-hover-text-black">{{
+            searchTerm
+          }}</b>
         </li>
       </ul>
     </collapsible>
@@ -118,54 +158,54 @@
 </template>
 
 <script>
-import Collapsible from '~/components/global/transitions/Collapsible.vue'
-import { themes} from "~/lib/forms/form-themes.js"
-import TextInput from '../TextInput.vue'
-import debounce from 'lodash/debounce'
-import Fuse from 'fuse.js'
+import Collapsible from "~/components/global/transitions/Collapsible.vue"
+import { themes } from "~/lib/forms/form-themes.js"
+import TextInput from "../TextInput.vue"
+import debounce from "lodash/debounce"
+import Fuse from "fuse.js"
 
 export default {
-  name: 'VSelect',
+  name: "VSelect",
   components: { Collapsible, TextInput },
   directives: {},
   props: {
     data: Array,
     modelValue: { default: null, type: [String, Number, Array, Object] },
     inputClass: { type: String, default: null },
-    dropdownClass: { type: String, default: 'w-full' },
+    dropdownClass: { type: String, default: "w-full" },
     loading: { type: Boolean, default: false },
     required: { type: Boolean, default: false },
     multiple: { type: Boolean, default: false },
     searchable: { type: Boolean, default: false },
     hasError: { type: Boolean, default: false },
     remote: { type: Function, default: null },
-    searchKeys: { type: Array, default: () => ['name'] },
-    optionKey: { type: String, default: 'id' },
+    searchKeys: { type: Array, default: () => ["name"] },
+    optionKey: { type: String, default: "id" },
     emitKey: { type: String, default: null },
-    color: { type: String, default: '#3B82F6' },
+    color: { type: String, default: "#3B82F6" },
     placeholder: { type: String, default: null },
     uppercaseLabels: { type: Boolean, default: true },
     theme: { type: Object, default: () => themes.default },
     allowCreation: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false }
+    disabled: { type: Boolean, default: false },
   },
-  emits: ['update:modelValue', 'update-options'],
+  emits: ["update:modelValue", "update-options"],
   data() {
     return {
       isOpen: false,
-      searchTerm: '',
-      defaultValue: this.modelValue ?? null
+      searchTerm: "",
+      defaultValue: this.modelValue ?? null,
     }
   },
   computed: {
     optionStyle() {
       return {
-        '--bg-form-color': this.color
+        "--bg-form-color": this.color,
       }
     },
     inputStyle() {
       return {
-        '--tw-ring-color': this.color
+        "--tw-ring-color": this.color,
       }
     },
     debouncedRemote() {
@@ -176,13 +216,13 @@ export default {
     },
     filteredOptions() {
       if (!this.data) return []
-      if (!this.searchable || this.remote || this.searchTerm === '') {
+      if (!this.searchable || this.remote || this.searchTerm === "") {
         return this.data
       }
 
       // Fuse search
       const fuzeOptions = {
-        keys: this.searchKeys
+        keys: this.searchKeys,
       }
       const fuse = new Fuse(this.data, fuzeOptions)
       return fuse.search(this.searchTerm).map((res) => {
@@ -191,15 +231,19 @@ export default {
     },
     isSearchable() {
       return this.searchable || this.remote !== null || this.allowCreation
-    }
+    },
   },
   watch: {
     searchTerm(val) {
       if (!this.debouncedRemote) return
-      if ((this.remote && val) || (val === '' && !this.modelValue) || (val === '' && this.isOpen)) {
+      if (
+        (this.remote && val) ||
+        (val === "" && !this.modelValue) ||
+        (val === "" && this.isOpen)
+      ) {
         return this.debouncedRemote(val)
       }
-    }
+    },
   },
   methods: {
     onClickAway(event) {
@@ -227,7 +271,7 @@ export default {
         this.isOpen = !this.isOpen
       }
       if (!this.isOpen) {
-        this.searchTerm = ''
+        this.searchTerm = ""
       }
     },
     select(value) {
@@ -241,25 +285,33 @@ export default {
       }
 
       if (this.multiple) {
-        const emitValue = Array.isArray(this.modelValue) ? [...this.modelValue] : []
+        const emitValue = Array.isArray(this.modelValue)
+          ? [...this.modelValue]
+          : []
 
         if (this.isSelected(value)) {
-          this.$emit('update:modelValue', emitValue.filter((item) => {
-            if (this.emitKey) {
-              return item !== value
-            }
-            return item[this.optionKey] !== value && item[this.optionKey] !== value[this.optionKey]
-          }))
+          this.$emit(
+            "update:modelValue",
+            emitValue.filter((item) => {
+              if (this.emitKey) {
+                return item !== value
+              }
+              return (
+                item[this.optionKey] !== value &&
+                item[this.optionKey] !== value[this.optionKey]
+              )
+            }),
+          )
           return
         }
 
         emitValue.push(value)
-        this.$emit('update:modelValue', emitValue)
+        this.$emit("update:modelValue", emitValue)
       } else {
         if (this.modelValue === value) {
-          this.$emit('update:modelValue', this.defaultValue ?? null)
+          this.$emit("update:modelValue", this.defaultValue ?? null)
         } else {
-          this.$emit('update:modelValue', value)
+          this.$emit("update:modelValue", value)
         }
       }
     },
@@ -268,13 +320,13 @@ export default {
         const newItem = {
           name: newOption,
           value: newOption,
-          id: newOption
+          id: newOption,
         }
-        this.$emit('update-options', newItem)
+        this.$emit("update-options", newItem)
         this.select(newItem)
-        this.searchTerm = ''
+        this.searchTerm = ""
       }
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/forms/components/VSwitch.vue b/client/components/forms/components/VSwitch.vue
index a0026bca0..13d1405ec 100644
--- a/client/components/forms/components/VSwitch.vue
+++ b/client/components/forms/components/VSwitch.vue
@@ -16,17 +16,16 @@
 </template>
 
 <script setup>
-import { defineEmits, defineProps } from 'vue'
+import { defineEmits, defineProps } from "vue"
 
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
 })
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(["update:modelValue"])
 
 function onClick() {
-  if (props.disabled)
-    return
-  emit('update:modelValue', !props.modelValue)
+  if (props.disabled) return
+  emit("update:modelValue", !props.modelValue)
 }
 </script>
diff --git a/client/components/forms/useFormInput.js b/client/components/forms/useFormInput.js
index fda9689fb..34a494f7b 100644
--- a/client/components/forms/useFormInput.js
+++ b/client/components/forms/useFormInput.js
@@ -1,8 +1,8 @@
-import { ref, computed, watch } from 'vue'
-import { themes } from '~/lib/forms/form-themes.js'
-import {default as _get} from 'lodash/get'
-import {default as _set} from 'lodash/set'
-import { default as _has } from 'lodash/has'
+import { ref, computed, watch } from "vue"
+import { themes } from "~/lib/forms/form-themes.js"
+import { default as _get } from "lodash/get"
+import { default as _set } from "lodash/set"
+import { default as _has } from "lodash/has"
 
 export const inputProps = {
   id: { type: String, default: null },
@@ -17,22 +17,26 @@ export const inputProps = {
   uppercaseLabels: { type: Boolean, default: false },
   hideFieldName: { type: Boolean, default: false },
   help: { type: String, default: null },
-  helpPosition: { type: String, default: 'below_input' },
-  color: { type: String, default: '#3B82F6' },
-  wrapperClass: { type: String, default: 'relative mb-3' }
+  helpPosition: { type: String, default: "below_input" },
+  color: { type: String, default: "#3B82F6" },
+  wrapperClass: { type: String, default: "relative mb-3" },
 }
 
-export function useFormInput (props, context, formPrefixKey = null) {
+export function useFormInput(props, context, formPrefixKey = null) {
   const content = ref(props.modelValue)
 
   const inputStyle = computed(() => {
     return {
-      '--tw-ring-color': props.color
+      "--tw-ring-color": props.color,
     }
   })
 
   const hasValidation = computed(() => {
-    return props.form !== null && props.form !== undefined && _has(props.form, 'errors')
+    return (
+      props.form !== null &&
+      props.form !== undefined &&
+      _has(props.form, "errors")
+    )
   })
 
   const hasError = computed(() => {
@@ -42,13 +46,13 @@ export function useFormInput (props, context, formPrefixKey = null) {
   const compVal = computed({
     get: () => {
       if (props.form) {
-        return _get(props.form, (formPrefixKey || '') + props.name)
+        return _get(props.form, (formPrefixKey || "") + props.name)
       }
       return content.value
     },
     set: (val) => {
       if (props.form) {
-        _set(props.form, (formPrefixKey || '') + props.name, val)
+        _set(props.form, (formPrefixKey || "") + props.name, val)
       } else {
         content.value = val
       }
@@ -57,14 +61,14 @@ export function useFormInput (props, context, formPrefixKey = null) {
         props.form.errors.clear(props.name)
       }
 
-      context.emit('update:modelValue', compVal.value)
-    }
+      context.emit("update:modelValue", compVal.value)
+    },
   })
 
   const inputWrapperProps = computed(() => {
     const wrapperProps = {}
     Object.keys(inputProps).forEach((key) => {
-      if (!['modelValue', 'disabled', 'placeholder', 'color'].includes(key)) {
+      if (!["modelValue", "disabled", "placeholder", "color"].includes(key)) {
         wrapperProps[key] = props[key]
       }
     })
@@ -78,7 +82,7 @@ export function useFormInput (props, context, formPrefixKey = null) {
       if (content.value !== newValue) {
         content.value = newValue
       }
-    }
+    },
   )
 
   return {
@@ -86,6 +90,6 @@ export function useFormInput (props, context, formPrefixKey = null) {
     inputStyle,
     hasValidation,
     hasError,
-    inputWrapperProps
+    inputWrapperProps,
   }
 }
diff --git a/client/components/forms/validation/Alert.js b/client/components/forms/validation/Alert.js
index eab837c45..b8b2ae597 100644
--- a/client/components/forms/validation/Alert.js
+++ b/client/components/forms/validation/Alert.js
@@ -2,20 +2,20 @@ export default {
   props: {
     form: {
       type: Object,
-      required: true
+      required: true,
     },
 
     dismissible: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
 
   methods: {
-    dismiss () {
+    dismiss() {
       if (this.dismissible) {
         this.form.clear()
       }
-    }
-  }
+    },
+  },
 }
diff --git a/client/components/forms/validation/AlertError.vue b/client/components/forms/validation/AlertError.vue
index f004caae8..b1304d056 100644
--- a/client/components/forms/validation/AlertError.vue
+++ b/client/components/forms/validation/AlertError.vue
@@ -1,29 +1,45 @@
 <template>
-  <div v-if="form.errors.any()" class="alert alert-danger alert-dismissible" role="alert">
-    <button v-if="dismissible" type="button" class="close" aria-label="Close" @click="dismiss">
+  <div
+    v-if="form.errors.any()"
+    class="alert alert-danger alert-dismissible"
+    role="alert"
+  >
+    <button
+      v-if="dismissible"
+      type="button"
+      class="close"
+      aria-label="Close"
+      @click="dismiss"
+    >
       <span aria-hidden="true">&times;</span>
     </button>
 
     <slot>
-      <div v-if="form.errors.has('error')" v-html="form.errors.get('error')"/>
-      <div v-else v-html="message"/>
+      <div
+        v-if="form.errors.has('error')"
+        v-html="form.errors.get('error')"
+      />
+      <div
+        v-else
+        v-html="message"
+      />
     </slot>
   </div>
 </template>
 
 <script>
-import Alert from './Alert.js'
+import Alert from "./Alert.js"
 
 export default {
-  name: 'AlertError',
+  name: "AlertError",
 
   extends: Alert,
 
   props: {
     message: {
       type: String,
-      default: 'There were some problems with your input.'
-    }
-  }
+      default: "There were some problems with your input.",
+    },
+  },
 }
 </script>
diff --git a/client/components/forms/validation/AlertSuccess.vue b/client/components/forms/validation/AlertSuccess.vue
index 5b998c49a..27710ed11 100644
--- a/client/components/forms/validation/AlertSuccess.vue
+++ b/client/components/forms/validation/AlertSuccess.vue
@@ -1,37 +1,46 @@
 <template>
   <transition name="fade">
-    <div v-if="form.successful" class="bg-green-200 border-green-600 text-green-600 border-l-4 p-4 relative rounded-lg"
-         role="alert">
-      <button v-if="dismissible"
-              type="button"
-              @click.prevent="dismiss()"
-              class="absolute right-2 top-0 -mr-1 flex-shrink-0 flex p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 sm:-mr-2">
-        <span class="sr-only">
-            Dismiss
-        </span>
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="h-6 w-6 text-green-500"
-             viewBox="0 0 1792 1792">
+    <div
+      v-if="form.successful"
+      class="bg-green-200 border-green-600 text-green-600 border-l-4 p-4 relative rounded-lg"
+      role="alert"
+    >
+      <button
+        v-if="dismissible"
+        type="button"
+        class="absolute right-2 top-0 -mr-1 flex-shrink-0 flex p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 sm:-mr-2"
+        @click.prevent="dismiss()"
+      >
+        <span class="sr-only"> Dismiss </span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="h-6 w-6 text-green-500"
+          viewBox="0 0 1792 1792"
+        >
           <path
-            d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z">
-          </path>
+            d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"
+          />
         </svg>
       </button>
       <p class="font-bold">
         Success
       </p>
-      <div v-html="message"/>
+      <div v-html="message" />
     </div>
   </transition>
 </template>
 
 <script>
-import Alert from './Alert.js'
+import Alert from "./Alert.js"
 
 export default {
-  name: 'AlertSuccess',
+  name: "AlertSuccess",
   extends: Alert,
   props: {
-    message: { type: String, default: '' }
-  }
+    message: { type: String, default: "" },
+  },
 }
 </script>
diff --git a/client/components/forms/validation/HasError.vue b/client/components/forms/validation/HasError.vue
index 814d8f57d..7136538d1 100644
--- a/client/components/forms/validation/HasError.vue
+++ b/client/components/forms/validation/HasError.vue
@@ -1,43 +1,52 @@
 <template>
   <transition name="fade">
-    <div v-if="errorMessage" class="has-error text-sm text-red-500 -bottom-3"
-         v-html="errorMessage"
+    <div
+      v-if="errorMessage"
+      class="has-error text-sm text-red-500 -bottom-3"
+      v-html="errorMessage"
     />
   </transition>
 </template>
 
 <script>
 export default {
-  name: 'HasError',
+  name: "HasError",
   props: {
     form: {
       type: Object,
-      required: true
+      required: true,
     },
     field: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
-    errorMessage () {
-      if (!this.form || !this.form.errors || !this.form.errors.any()) return null
-      const subErrorsKeys = Object.keys(this.form.errors.all()).filter((key) => {
-        return key.startsWith(this.field) && key !== this.field
-      })
-      const baseError = this.form.errors.get(this.field) ?? (subErrorsKeys.length ? 'This field has some errors:' : null)
+    errorMessage() {
+      if (!this.form || !this.form.errors || !this.form.errors.any())
+        return null
+      const subErrorsKeys = Object.keys(this.form.errors.all()).filter(
+        (key) => {
+          return key.startsWith(this.field) && key !== this.field
+        },
+      )
+      const baseError =
+        this.form.errors.get(this.field) ??
+        (subErrorsKeys.length ? "This field has some errors:" : null)
       // If no error and no sub errors, return
       if (!baseError) return null
 
-      return `<p class="text-red-500">${baseError}</p><ul class="list-disc list-inside">${subErrorsKeys.map((key) => {
-        return '<li>' + this.getSubError(key) + '</li>'
-      })}</ul>`
-    }
+      return `<p class="text-red-500">${baseError}</p><ul class="list-disc list-inside">${subErrorsKeys.map(
+        (key) => {
+          return "<li>" + this.getSubError(key) + "</li>"
+        },
+      )}</ul>`
+    },
   },
   methods: {
-    getSubError (subErrorKey) {
-      return this.form.errors.get(subErrorKey).replace(subErrorKey, 'item')
-    }
-  }
+    getSubError(subErrorKey) {
+      return this.form.errors.get(subErrorKey).replace(subErrorKey, "item")
+    },
+  },
 }
 </script>
diff --git a/client/components/global/Badge.vue b/client/components/global/Badge.vue
index 2b39cc78b..18aad7712 100644
--- a/client/components/global/Badge.vue
+++ b/client/components/global/Badge.vue
@@ -1,51 +1,66 @@
 <template>
   <div :class="classes">
-    <Icon v-if="beforeIcon" :name="beforeIcon" :class="iconClasses"/>
-    <slot></slot>
-    <Icon v-if="afterIcon" :name="afterIcon" :class="iconClasses"/>
+    <Icon
+      v-if="beforeIcon"
+      :name="beforeIcon"
+      :class="iconClasses"
+    />
+    <slot />
+    <Icon
+      v-if="afterIcon"
+      :name="afterIcon"
+      :class="iconClasses"
+    />
   </div>
 </template>
 
 <script setup>
-import { default as _has } from 'lodash/has'
+import { default as _has } from "lodash/has"
 
 const props = defineProps({
   color: {
     type: String,
-    default: 'green'
+    default: "green",
   },
   beforeIcon: {
     type: String,
-    default: null
+    default: null,
   },
   afterIcon: {
     type: String,
-    default: null
-  }
+    default: null,
+  },
 })
 
 const baseClasses = {
-  'green': ['bg-green-100', 'border', 'border-green-300', 'text-green-700'],
-  'red': ['bg-red-100', 'border', 'border-red-300', 'text-red-700'],
-  'gray': ['bg-gray-100', 'border', 'border-gray-300', 'text-gray-700'],
+  green: ["bg-green-100", "border", "border-green-300", "text-green-700"],
+  red: ["bg-red-100", "border", "border-red-300", "text-red-700"],
+  gray: ["bg-gray-100", "border", "border-gray-300", "text-gray-700"],
 }
 
 const iconBaseClasses = {
-  'green': ['text-green-500'],
-  'red': ['text-red-500'],
-  'gray': ['text-gray-500'],
+  green: ["text-green-500"],
+  red: ["text-red-500"],
+  gray: ["text-gray-500"],
 }
 
 const activeColor = computed(() => {
-  return _has(baseClasses, props.color) ? props.color : 'gray'
+  return _has(baseClasses, props.color) ? props.color : "gray"
 })
 
 const classes = computed(() => {
-  const classes = ['border', 'text-xs', 'px-2', 'inline-flex', 'items-center', 'rounded-full'].concat(baseClasses[activeColor.value])
-  return classes.join(' ')
+  const classes = [
+    "border",
+    "text-xs",
+    "px-2",
+    "inline-flex",
+    "items-center",
+    "rounded-full",
+  ].concat(baseClasses[activeColor.value])
+  return classes.join(" ")
 })
 
 const iconClasses = computed(() => {
-  return iconBaseClasses[activeColor.value].concat(['w-2 h-2 mr-1']).join(' ')
+  return iconBaseClasses[activeColor.value].concat(["w-2 h-2 mr-1"]).join(" ")
 })
 </script>
diff --git a/client/components/global/Breadcrumb.vue b/client/components/global/Breadcrumb.vue
index 16b7e39ff..5e7af2533 100644
--- a/client/components/global/Breadcrumb.vue
+++ b/client/components/global/Breadcrumb.vue
@@ -1,46 +1,77 @@
 <template>
-  <section class="sticky flex items-center inset-x-0 top-0 z-20 py-3 bg-white border-b border-gray-200">
+  <section
+    class="sticky flex items-center inset-x-0 top-0 z-20 py-3 bg-white border-b border-gray-200"
+  >
     <div class="hidden md:flex flex-grow">
       <slot name="left" />
     </div>
     <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
       <div class="flex items-center justify-center space-x-4">
-        <div v-if="displayHome" class="flex items-center">
-          <NuxtLink class="text-gray-400 hover:text-gray-500" :to="{ name: (authenticated) ? 'home' : 'index' }">
-            <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path fill-rule="evenodd"
-                    d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
-                    clip-rule="evenodd"
+        <div
+          v-if="displayHome"
+          class="flex items-center"
+        >
+          <NuxtLink
+            class="text-gray-400 hover:text-gray-500"
+            :to="{ name: authenticated ? 'home' : 'index' }"
+          >
+            <svg
+              class="flex-shrink-0 w-5 h-5"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
+                clip-rule="evenodd"
               />
             </svg>
             <span class="sr-only">Home</span>
           </NuxtLink>
-          <svg class="flex-shrink-0 w-5 h-5 text-gray-400 ml-4" viewBox="0 0 20 20" fill="currentColor"
-               aria-hidden="true"
+          <svg
+            class="flex-shrink-0 w-5 h-5 text-gray-400 ml-4"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
           >
-            <path fill-rule="evenodd"
-                  d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-                  clip-rule="evenodd"
+            <path
+              fill-rule="evenodd"
+              d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+              clip-rule="evenodd"
             />
           </svg>
         </div>
 
-        <div v-for="(item,index) in path" :key="index" class="flex items-center">
-          <NuxtLink v-if="item.route" class="text-sm font-semibold text-gray-500 hover:text-gray-700 truncate"
-                       :to="item.route"
+        <div
+          v-for="(item, index) in path"
+          :key="index"
+          class="flex items-center"
+        >
+          <NuxtLink
+            v-if="item.route"
+            class="text-sm font-semibold text-gray-500 hover:text-gray-700 truncate"
+            :to="item.route"
           >
             {{ item.label }}
           </NuxtLink>
-          <div v-else class="text-sm font-semibold sm:w-full w-36 text-blue-500 truncate">
+          <div
+            v-else
+            class="text-sm font-semibold sm:w-full w-36 text-blue-500 truncate"
+          >
             {{ item.label }}
           </div>
-          <div v-if="index!==path.length-1">
-            <svg class="flex-shrink-0 w-5 h-5 text-gray-400 ml-4" viewBox="0 0 20 20" fill="currentColor"
-                 aria-hidden="true"
+          <div v-if="index !== path.length - 1">
+            <svg
+              class="flex-shrink-0 w-5 h-5 text-gray-400 ml-4"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
             >
-              <path fill-rule="evenodd"
-                    d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-                    clip-rule="evenodd"
+              <path
+                fill-rule="evenodd"
+                d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                clip-rule="evenodd"
               />
             </svg>
           </div>
@@ -54,36 +85,36 @@
 </template>
 
 <script>
-import { computed } from 'vue'
-import { useAuthStore } from '../../stores/auth';
+import { computed } from "vue"
+import { useAuthStore } from "../../stores/auth"
 
 export default {
-  name: 'Breadcrumb',
+  name: "Breadcrumb",
   props: {
     /**
      * route: Route object
      * label: Label
      */
-    path: { type: Array }
+    path: { type: Array },
   },
 
-  setup () {
+  setup() {
     const authStore = useAuthStore()
     return {
-      authenticated : computed(() => authStore.check)
+      authenticated: computed(() => authStore.check),
     }
   },
 
-  data () {
+  data() {
     return {
-      displayHome: true
+      displayHome: true,
     }
   },
 
   computed: {},
 
-  mounted () {},
+  mounted() {},
 
-  methods: {}
+  methods: {},
 }
 </script>
diff --git a/client/components/global/Card.vue b/client/components/global/Card.vue
index a484cfb9d..68be43a0a 100644
--- a/client/components/global/Card.vue
+++ b/client/components/global/Card.vue
@@ -1,8 +1,12 @@
 <template>
-  <div class="flex flex-col w-full bg-white rounded-lg shadow"
-       :class="{'px-4 py-8 sm:px-6 md:px-8 lg:px-10':padding}"
+  <div
+    class="flex flex-col w-full bg-white rounded-lg shadow"
+    :class="{ 'px-4 py-8 sm:px-6 md:px-8 lg:px-10': padding }"
   >
-    <div v-if="title" class="self-center mb-6 text-xl font-light text-gray-900 sm:text-3xl font-bold dark:text-white">
+    <div
+      v-if="title"
+      class="self-center mb-6 text-xl font-light text-gray-900 sm:text-3xl font-bold dark:text-white"
+    >
       {{ title }}
     </div>
     <slot />
@@ -11,17 +15,17 @@
 
 <script>
 export default {
-  name: 'Card',
+  name: "Card",
 
   props: {
     padding: {
       type: Boolean,
-      default: true
+      default: true,
     },
     title: {
       type: String,
-      default: null
-    }
-  }
+      default: null,
+    },
+  },
 }
 </script>
diff --git a/client/components/global/Collapse.vue b/client/components/global/Collapse.vue
index 0f13a8a59..e403cb425 100644
--- a/client/components/global/Collapse.vue
+++ b/client/components/global/Collapse.vue
@@ -1,22 +1,36 @@
 <template>
   <div>
     <div class="w-full relative">
-      <div class="cursor-pointer" @click="trigger">
+      <div
+        class="cursor-pointer"
+        @click="trigger"
+      >
         <slot name="title" />
       </div>
-      <div class="text-gray-400 hover:text-gray-600 absolute -right-2 -top-1 cursor-pointer p-2" @click="trigger">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition transform duration-500"
-             :class="{'rotate-180':showContent}" viewBox="0 0 20 20" fill="currentColor"
+      <div
+        class="text-gray-400 hover:text-gray-600 absolute -right-2 -top-1 cursor-pointer p-2"
+        @click="trigger"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5 transition transform duration-500"
+          :class="{ 'rotate-180': showContent }"
+          viewBox="0 0 20 20"
+          fill="currentColor"
         >
-          <path fill-rule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z"
-                clip-rule="evenodd"
+          <path
+            fill-rule="evenodd"
+            d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z"
+            clip-rule="evenodd"
           />
         </svg>
       </div>
     </div>
     <VTransition>
-      <div v-if="showContent" class="w-full">
+      <div
+        v-if="showContent"
+        class="w-full"
+      >
         <slot />
       </div>
     </VTransition>
@@ -24,18 +38,18 @@
 </template>
 
 <script setup>
-import VTransition from './transitions/VTransition.vue'
-import { ref, defineProps, defineEmits } from 'vue'
+import VTransition from "./transitions/VTransition.vue"
+import { ref, defineProps, defineEmits } from "vue"
 
 const props = defineProps({
-  modelValue: { type: Boolean, default: null }
+  modelValue: { type: Boolean, default: null },
 })
 
 const showContent = ref(props.modelValue)
-const emit = defineEmits()
+const emit = defineEmits(['update:modelValue'])
 
 const trigger = () => {
   showContent.value = !showContent.value
-  emit('update:modelValue', showContent.value)
+  emit("update:modelValue", showContent.value)
 }
 </script>
diff --git a/client/components/global/Dropdown.vue b/client/components/global/Dropdown.vue
index f8c421424..b2d5baa87 100644
--- a/client/components/global/Dropdown.vue
+++ b/client/components/global/Dropdown.vue
@@ -1,42 +1,56 @@
 <template>
-  <div class="relative" ref="dropdown">
-    <slot name="trigger"
-          :toggle="toggle"
-          :open="open"
-          :close="close"
+  <div
+    ref="dropdown"
+    class="relative"
+  >
+    <slot
+      name="trigger"
+      :toggle="toggle"
+      :open="open"
+      :close="close"
     />
 
-    <collapsible v-model="isOpen" :class="dropdownClass" @click-away="onClickAway">
-      <div class="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
-        <slot/>
+    <collapsible
+      v-model="isOpen"
+      :class="dropdownClass"
+      @click-away="onClickAway"
+    >
+      <div
+        class="py-1"
+        role="menu"
+        aria-orientation="vertical"
+        aria-labelledby="options-menu"
+      >
+        <slot />
       </div>
     </collapsible>
   </div>
 </template>
 
 <script setup>
-import {ref} from 'vue'
-import Collapsible from './transitions/Collapsible.vue'
+import { ref } from "vue"
+import Collapsible from "./transitions/Collapsible.vue"
 
-const props = defineProps({
+defineProps({
   dropdownClass: {
     type: String,
-    default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20'
-  }
+    default:
+      "origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20",
+  },
 })
 
 const isOpen = ref(false)
 const dropdown = ref(null)
 
-const open = (event) => {
+const open = () => {
   isOpen.value = true
 }
 
-const close = (event) => {
+const close = () => {
   isOpen.value = false
 }
 
-const toggle = (event) => {
+const toggle = () => {
   isOpen.value = !isOpen.value
 }
 
@@ -50,6 +64,6 @@ const onClickAway = (event) => {
 defineExpose({
   open,
   close,
-  toggle
+  toggle,
 })
 </script>
diff --git a/client/components/global/EditableDiv.vue b/client/components/global/EditableDiv.vue
index 4938a9d17..cace4ab6a 100644
--- a/client/components/global/EditableDiv.vue
+++ b/client/components/global/EditableDiv.vue
@@ -1,40 +1,51 @@
 <template>
-  <div ref="parentRef"
-       tabindex="0"
-       :class="{
-         'hover:bg-gray-100 dark:hover:bg-gray-800 rounded px-2 cursor-pointer': !editing
-       }"
-       class="relative"
-       :style="{ height: editing ? divHeight + 'px' : 'auto' }"
-       @focus="startEditing"
+  <div
+    ref="parentRef"
+    tabindex="0"
+    :class="{
+      'hover:bg-gray-100 dark:hover:bg-gray-800 rounded px-2 cursor-pointer':
+        !editing,
+    }"
+    class="relative"
+    :style="{ height: editing ? divHeight + 'px' : 'auto' }"
+    @focus="startEditing"
   >
-    <slot v-if="!editing" :content="content">
+    <slot
+      v-if="!editing"
+      :content="content"
+    >
       <label class="cursor-pointer truncate w-full">
         {{ content }}
       </label>
     </slot>
-    <div v-if="editing" class="absolute inset-0 border-2 transition-colors"
-         :class="{ 'border-transparent': !editing, 'border-blue-500': editing }"
+    <div
+      v-if="editing"
+      class="absolute inset-0 border-2 transition-colors"
+      :class="{ 'border-transparent': !editing, 'border-blue-500': editing }"
     >
-      <input ref="editInputRef" v-model="content"
-             class="absolute inset-0 focus:outline-none bg-white transition-colors"
-             :class="[{'bg-blue-50': editing}, contentClass]" @blur="editing = false" @keyup.enter="editing = false"
-             @input="handleInput"
+      <input
+        ref="editInputRef"
+        v-model="content"
+        class="absolute inset-0 focus:outline-none bg-white transition-colors"
+        :class="[{ 'bg-blue-50': editing }, contentClass]"
+        @blur="editing = false"
+        @keyup.enter="editing = false"
+        @input="handleInput"
       >
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch, nextTick, defineProps, defineEmits } from 'vue'
+import { ref, onMounted, watch, nextTick, defineProps, defineEmits } from "vue"
 
 const props = defineProps({
   modelValue: { type: String, required: true },
-  textAlign: { type: String, default: 'left' },
-  contentClass: { type: String, default: '' }
+  textAlign: { type: String, default: "left" },
+  contentClass: { type: String, default: "" },
 })
 
-const emit = defineEmits()
+const emit = defineEmits(['update:modelValue'])
 const content = ref(props.modelValue)
 const editing = ref(false)
 const divHeight = ref(0)
@@ -55,13 +66,16 @@ const startEditing = () => {
 }
 
 const handleInput = () => {
-  emit('update:modelValue', content.value)
+  emit("update:modelValue", content.value)
 }
 
 // Watch for changes in props.modelValue and update the local content
-watch(() => props.modelValue, (newValue) => {
-  content.value = newValue
-})
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    content.value = newValue
+  },
+)
 
 // Wait until the component is mounted to set the initial divHeight
 onMounted(() => {
diff --git a/client/components/global/Loader.vue b/client/components/global/Loader.vue
index c8b1aa299..cf765d257 100644
--- a/client/components/global/Loader.vue
+++ b/client/components/global/Loader.vue
@@ -1,13 +1,29 @@
 <template>
-  <svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+  <svg
+    class="animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    />
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
   </svg>
 </template>
 
 <script>
 export default {
-  name: 'Loader',
-  props: {}
+  name: "Loader",
+  props: {},
 }
 </script>
diff --git a/client/components/global/Modal.vue b/client/components/global/Modal.vue
index 2053922d8..4e7dca764 100644
--- a/client/components/global/Modal.vue
+++ b/client/components/global/Modal.vue
@@ -1,49 +1,90 @@
 <template>
   <Teleport to="body">
     <transition @leave="onLeave">
-      <div v-if="show" ref="backdrop"
-           class="fixed z-30 top-0 inset-0 px-4 sm:px-0 flex items-top justify-center bg-gray-700/75 w-full h-screen overflow-y-scroll"
-           :class="{'backdrop-blur-sm':backdropBlur}"
-           @click.self="close"
+      <div
+        v-if="show"
+        ref="backdrop"
+        class="fixed z-30 top-0 inset-0 px-4 sm:px-0 flex items-top justify-center bg-gray-700/75 w-full h-screen overflow-y-scroll"
+        :class="{ 'backdrop-blur-sm': backdropBlur }"
+        @click.self="close"
       >
-        <div ref="content"
-             class="self-start bg-white dark:bg-notion-dark w-full relative my-6 rounded-xl shadow-xl"
-             :class="maxWidthClass"
+        <div
+          ref="content"
+          class="self-start bg-white dark:bg-notion-dark w-full relative my-6 rounded-xl shadow-xl"
+          :class="maxWidthClass"
         >
-          <div v-if="closeable" class="absolute top-4 right-4">
-            <button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click="close()">
-              <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                      stroke-linejoin="round"
+          <div
+            v-if="closeable"
+            class="absolute top-4 right-4"
+          >
+            <button
+              class="text-gray-500 hover:text-gray-900 cursor-pointer"
+              @click="close()"
+            >
+              <svg
+                class="h-6 w-6"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M18 6L6 18M6 6L18 18"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
                 />
               </svg>
             </button>
           </div>
-          <div class="flex border-b pb-4"
-               v-if="_has($slots,'icon') || _has($slots,'title')"
-               :class="[{'flex-col sm:items-start':!compactHeader, 'items-center justify-center py-6 gap-x-4':compactHeader},headerInnerPadding]">
-            <div v-if="_has($slots,'icon')" :class="{'w-full mb-4 flex justify-center':!compactHeader}">
-              <div class="w-14 h-14 rounded-full flex justify-center items-center"
-                   :class="'bg-'+iconColor+'-100 text-'+iconColor+'-600'"
+          <div
+            v-if="_has($slots, 'icon') || _has($slots, 'title')"
+            class="flex border-b pb-4"
+            :class="[
+              {
+                'flex-col sm:items-start': !compactHeader,
+                'items-center justify-center py-6 gap-x-4': compactHeader,
+              },
+              headerInnerPadding,
+            ]"
+          >
+            <div
+              v-if="_has($slots, 'icon')"
+              :class="{ 'w-full mb-4 flex justify-center': !compactHeader }"
+            >
+              <div
+                class="w-14 h-14 rounded-full flex justify-center items-center"
+                :class="'bg-' + iconColor + '-100 text-' + iconColor + '-600'"
               >
-                <slot name="icon"/>
+                <slot name="icon" />
               </div>
             </div>
-            <div class="mt-3 text-center sm:mt-0" :class="{'w-full':!compactHeader}">
-              <h2 v-if="_has($slots,'title')"
-                  class="text-2xl font-semibold text-center text-gray-900"
+            <div
+              class="mt-3 text-center sm:mt-0"
+              :class="{ 'w-full': !compactHeader }"
+            >
+              <h2
+                v-if="_has($slots, 'title')"
+                class="text-2xl font-semibold text-center text-gray-900"
               >
-                <slot name="title"/>
+                <slot name="title" />
               </h2>
             </div>
           </div>
 
-          <div class="w-full" :class="innerPadding">
-            <slot/>
+          <div
+            class="w-full"
+            :class="innerPadding"
+          >
+            <slot />
           </div>
 
-          <div v-if="_has($slots,'footer')" class="bg-gray-50 border-t rounded-b-xl text-right" :class="footerInnerPadding">
-            <slot name="footer"/>
+          <div
+            v-if="_has($slots, 'footer')"
+            class="bg-gray-50 border-t rounded-b-xl text-right"
+            :class="footerInnerPadding"
+          >
+            <slot name="footer" />
           </div>
         </div>
       </div>
@@ -52,77 +93,84 @@
 </template>
 
 <script setup>
-import {watch} from "vue";
-import { default as _has } from 'lodash/has'
+import { watch } from "vue"
+import { default as _has } from "lodash/has"
 
 const props = defineProps({
   show: {
-    default: false
+    type: Boolean,
+    default: false,
   },
   backdropBlur: {
     type: Boolean,
-    default: false
+    default: false,
   },
   iconColor: {
-    default: 'blue'
+    type: String,
+    default: "blue",
   },
   maxWidth: {
-    default: '2xl'
+    type: String,
+    default: "2xl",
   },
   innerPadding: {
-    default: 'p-6'
+    type: String,
+    default: "p-6",
   },
   headerInnerPadding: {
-    default: 'p-6'
+    type: String,
+    default: "p-6",
   },
   footerInnerPadding: {
-    default: 'p-6'
+    type: String,
+    default: "p-6",
   },
   closeable: {
-    default: true
+    type: Boolean,
+    default: true,
   },
   compactHeader: {
     default: false,
-    type: Boolean
+    type: Boolean,
   },
 })
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(["close"])
 
 useHead({
   bodyAttrs: computed(() => {
     return {
       class: {
-        'overflow-hidden': props.show
-      }
+        "overflow-hidden": props.show,
+      },
     }
-  })
+  }),
 })
 
 const closeOnEscape = (e) => {
-  if (e.key === 'Escape' && props.show) {
+  if (e.key === "Escape" && props.show) {
     close()
   }
 }
 
 onMounted(() => {
   if (import.meta.server) return
-  document.addEventListener('keydown', closeOnEscape)
+  document.addEventListener("keydown", closeOnEscape)
   initMotions()
 })
 
 onBeforeUnmount(() => {
   if (import.meta.server) return
-  document.removeEventListener('keydown', closeOnEscape)
+  document.removeEventListener("keydown", closeOnEscape)
 })
 
 const maxWidthClass = computed(() => {
   return {
-    sm: 'sm:max-w-sm',
-    md: 'sm:max-w-md',
-    lg: 'sm:max-w-lg',
-    xl: 'sm:max-w-xl',
-    '2xl': 'sm:max-w-2xl'
+    sm: "sm:max-w-sm",
+    md: "sm:max-w-md",
+    lg: "sm:max-w-lg",
+    xl: "sm:max-w-xl",
+    "2xl": "sm:max-w-2xl",
   }[props.maxWidth]
 })
 
@@ -132,15 +180,15 @@ const motionFadeIn = {
     transition: {
       delay: 100,
       duration: 200,
-      ease: 'easeIn'
-    }
+      ease: "easeIn",
+    },
   },
   enter: {
     opacity: 1,
     transition: {
-      duration: 200
-    }
-  }
+      duration: 200,
+    },
+  },
 }
 
 const motionSlideBottom = {
@@ -148,30 +196,29 @@ const motionSlideBottom = {
     y: 150,
     opacity: 0,
     transition: {
-      ease: 'easeIn',
-      duration: 200
-    }
+      ease: "easeIn",
+      duration: 200,
+    },
   },
   enter: {
     y: 0,
     opacity: 1,
     transition: {
       duration: 250,
-      ease: 'easeOut',
-      delay: 100
-    }
-  }
+      ease: "easeOut",
+      delay: 100,
+    },
+  },
 }
 
 const onLeave = (el, done) => {
-  contentMotion.value.leave(() => {
-  })
+  contentMotion.value.leave(() => {})
   backdropMotion.value.leave(done)
 }
 
 const close = () => {
   if (props.closeable) {
-    emit('close')
+    emit("close")
   }
 }
 
@@ -190,5 +237,4 @@ const initMotions = () => {
 }
 
 watch(() => props.show, initMotions)
-
 </script>
diff --git a/client/components/global/Navbar.vue b/client/components/global/Navbar.vue
index 68d5922b7..f795427f6 100644
--- a/client/components/global/Navbar.vue
+++ b/client/components/global/Navbar.vue
@@ -1,152 +1,258 @@
 <template>
-  <nav v-if="hasNavbar" class="bg-white dark:bg-notion-dark border-b">
+  <nav
+    v-if="hasNavbar"
+    class="bg-white dark:bg-notion-dark border-b"
+  >
     <div class="max-w-7xl mx-auto px-8">
       <div class="flex items-center justify-between h-16">
         <div class="flex items-center">
-          <NuxtLink :to="{ name: user ? 'home' : 'index' }"
-                    class="flex-shrink-0 font-semibold hover:no-underline flex items-center">
-            <img src="/img/logo.svg" alt="notion tools logo" class="w-8 h-8"/>
-            <span class="ml-2 text-md hidden sm:inline text-black dark:text-white">OpnForm</span>
+          <NuxtLink
+            :to="{ name: user ? 'home' : 'index' }"
+            class="flex-shrink-0 font-semibold hover:no-underline flex items-center"
+          >
+            <img
+              src="/img/logo.svg"
+              alt="notion tools logo"
+              class="w-8 h-8"
+            >
+            <span
+              class="ml-2 text-md hidden sm:inline text-black dark:text-white"
+            >OpnForm</span>
           </NuxtLink>
-          <workspace-dropdown class="ml-6"/>
+          <workspace-dropdown class="ml-6" />
         </div>
-        <div v-if="showAuth" class="hidden md:block ml-auto relative">
-          <NuxtLink v-if="$route.name !== 'templates'" :to="{name:'templates'}"
-                    class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1 mr-8"
+        <div
+          v-if="showAuth"
+          class="hidden md:block ml-auto relative"
+        >
+          <NuxtLink
+            v-if="$route.name !== 'templates'"
+            :to="{ name: 'templates' }"
+            class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1 mr-8"
           >
             Templates
           </NuxtLink>
           <template v-if="featureBaseEnabled">
-            <button v-if="user" @click.prevent="openChangelog"
-                    class="text-sm text-gray-600 dark:text-white hidden sm:inline hover:text-gray-800 cursor-pointer mt-1 mr-8"
+            <button
+              v-if="user"
+              class="text-sm text-gray-600 dark:text-white hidden sm:inline hover:text-gray-800 cursor-pointer mt-1 mr-8"
+              @click.prevent="openChangelog"
             >
-              What's new? <span id="fb-update-badge"></span>
+              What's new? <span id="fb-update-badge" />
             </button>
-            <a :href="opnformConfig.links.changelog_url" target="_blank" v-else
-               class="text-sm text-gray-600 dark:text-white hidden lg:inline hover:text-gray-800 cursor-pointer mt-1 mr-8"
+            <a
+              v-else
+              :href="opnformConfig.links.changelog_url"
+              target="_blank"
+              class="text-sm text-gray-600 dark:text-white hidden lg:inline hover:text-gray-800 cursor-pointer mt-1 mr-8"
             >
               What's new?
             </a>
           </template>
-          <NuxtLink v-if="$route.name !== 'ai-form-builder' && user === null" :to="{name:'ai-form-builder'}"
-                    class="text-sm text-gray-600 dark:text-white hidden lg:inline hover:text-gray-800 cursor-pointer mt-1 mr-8"
+          <NuxtLink
+            v-if="$route.name !== 'ai-form-builder' && user === null"
+            :to="{ name: 'ai-form-builder' }"
+            class="text-sm text-gray-600 dark:text-white hidden lg:inline hover:text-gray-800 cursor-pointer mt-1 mr-8"
           >
             AI Form Builder
           </NuxtLink>
           <NuxtLink
-            v-if="paidPlansEnabled && (user===null || (user && workspace && !workspace.is_pro)) && $route.name !== 'pricing'"
-            :to="{name:'pricing'}"
+            v-if="
+              paidPlansEnabled &&
+                (user === null || (user && workspace && !workspace.is_pro)) &&
+                $route.name !== 'pricing'
+            "
+            :to="{ name: 'pricing' }"
             class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1 mr-8"
           >
             <span v-if="user">Upgrade</span>
             <span v-else>Pricing</span>
           </NuxtLink>
-          <a v-if="hasCrisp" href="#"
-             class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1"
-             @click.prevent="openHelpdesk"
+          <a
+            v-if="hasCrisp"
+            href="#"
+            class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1"
+            @click.prevent="openHelpdesk"
           >
             Help
           </a>
-          <NuxtLink v-else :href="helpUrl"
-                    class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1"
-                    target="_blank"
+          <NuxtLink
+            v-else
+            :href="helpUrl"
+            class="text-sm text-gray-600 dark:text-white hover:text-gray-800 cursor-pointer mt-1"
+            target="_blank"
           >
             Help
           </NuxtLink>
         </div>
-        <div v-if="showAuth" class="hidden md:block pl-5 border-gray-300 border-r h-5"/>
-        <div v-if="showAuth" class="block">
+        <div
+          v-if="showAuth"
+          class="hidden md:block pl-5 border-gray-300 border-r h-5"
+        />
+        <div
+          v-if="showAuth"
+          class="block"
+        >
           <div class="flex items-center">
             <div class="ml-3 mr-4 relative">
               <div class="relative inline-block text-left">
-                <dropdown v-if="user" dusk="nav-dropdown">
-                  <template #trigger="{toggle}">
-                    <button id="dropdown-menu-button" type="button"
-                            class="flex items-center justify-center w-full rounded-md  px-4 py-2 text-sm text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500"
-                            dusk="nav-dropdown-button" @click.stop="toggle()"
+                <dropdown
+                  v-if="user"
+                  dusk="nav-dropdown"
+                >
+                  <template #trigger="{ toggle }">
+                    <button
+                      id="dropdown-menu-button"
+                      type="button"
+                      class="flex items-center justify-center w-full rounded-md px-4 py-2 text-sm text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500"
+                      dusk="nav-dropdown-button"
+                      @click.stop="toggle()"
                     >
-                      <img :src="user.photo_url" class="rounded-full w-6 h-6"/>
+                      <img
+                        :src="user.photo_url"
+                        class="rounded-full w-6 h-6"
+                      >
                       <p class="ml-2 hidden sm:inline">
                         {{ user.name }}
                       </p>
                     </button>
                   </template>
 
-                  <NuxtLink v-if="userOnboarded" :to="{ name: 'home' }"
-                            class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
+                  <NuxtLink
+                    v-if="userOnboarded"
+                    :to="{ name: 'home' }"
+                    class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                   >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24"
-                         stroke="currentColor"
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="w-4 h-4 mr-2"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
                     >
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
                       />
                     </svg>
                     My Forms
                   </NuxtLink>
 
-                  <NuxtLink v-if="userOnboarded" :to="{ name: 'templates-my-templates' }"
-                            class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
+                  <NuxtLink
+                    v-if="userOnboarded"
+                    :to="{ name: 'templates-my-templates' }"
+                    class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                   >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24"
-                         stroke-width="1.5" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round"
-                            d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="w-4 h-4 mr-2"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+                      />
                     </svg>
                     My Templates
                   </NuxtLink>
 
-                  <NuxtLink :to="{ name: 'settings-profile' }"
-                            class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
+                  <NuxtLink
+                    :to="{ name: 'settings-profile' }"
+                    class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                   >
-                    <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                         stroke="currentColor"
+                    <svg
+                      class="w-4 h-4 mr-2"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
                     >
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                       />
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                       />
                     </svg>
                     Settings
                   </NuxtLink>
 
-                  <NuxtLink :to="{ name: 'settings-admin' }" v-if="user.moderator"
-                            class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
+                  <NuxtLink
+                    v-if="user.moderator"
+                    :to="{ name: 'settings-admin' }"
+                    class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                   >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                         stroke="currentColor" class="w-4 h-4 mr-2">
-                      <path stroke-linecap="round" stroke-linejoin="round"
-                            d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      class="w-4 h-4 mr-2"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"
+                      />
                     </svg>
                     Admin
                   </NuxtLink>
 
-                  <a href="#"
-                     class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
-                     @click.prevent="logout"
+                  <a
+                    href="#"
+                    class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
+                    @click.prevent="logout"
                   >
-                    <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                         stroke="currentColor"
+                    <svg
+                      class="w-4 h-4 mr-2"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
                     >
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
                       />
                     </svg>
                     Logout
                   </a>
                 </dropdown>
-                <div v-else class="flex gap-2">
-                  <NuxtLink v-if="$route.name !== 'login'" :to="{ name: 'login' }"
-                            class="text-gray-600 dark:text-white hover:text-gray-800 dark:hover:text-white px-0 sm:px-3 py-2 rounded-md text-sm"
-                            active-class="text-gray-800 dark:text-white"
+                <div
+                  v-else
+                  class="flex gap-2"
+                >
+                  <NuxtLink
+                    v-if="$route.name !== 'login'"
+                    :to="{ name: 'login' }"
+                    class="text-gray-600 dark:text-white hover:text-gray-800 dark:hover:text-white px-0 sm:px-3 py-2 rounded-md text-sm"
+                    active-class="text-gray-800 dark:text-white"
                   >
                     Login
                   </NuxtLink>
 
-                  <v-button v-track.nav_create_form_click size="small" :to="{ name: 'forms-create-guest' }"
-                            color="outline-blue" :arrow="true">
+                  <v-button
+                    v-track.nav_create_form_click
+                    size="small"
+                    :to="{ name: 'forms-create-guest' }"
+                    color="outline-blue"
+                    :arrow="true"
+                  >
                     Create a form
                   </v-button>
                 </div>
@@ -160,20 +266,20 @@
 </template>
 
 <script>
-import {computed} from 'vue'
-import Dropdown from '~/components/global/Dropdown.vue'
-import WorkspaceDropdown from './WorkspaceDropdown.vue'
-import opnformConfig from "~/opnform.config.js";
-import {useRuntimeConfig} from "#app";
+import { computed } from "vue"
+import Dropdown from "~/components/global/Dropdown.vue"
+import WorkspaceDropdown from "./WorkspaceDropdown.vue"
+import opnformConfig from "~/opnform.config.js"
+import { useRuntimeConfig } from "#app"
 
 export default {
   components: {
     WorkspaceDropdown,
-    Dropdown
+    Dropdown,
   },
 
   async setup() {
-    const {openHelpdesk} = useCrisp()
+    const { openHelpdesk } = useCrisp()
     const authStore = useAuthStore()
     return {
       authStore,
@@ -193,7 +299,7 @@ export default {
       return this.opnformConfig.links.help_url
     },
     form() {
-      if (this.$route.name && this.$route.name.startsWith('forms-slug')) {
+      if (this.$route.name && this.$route.name.startsWith("forms-slug")) {
         return this.formsStore.getByKey(this.$route.params.slug)
       }
       return null
@@ -208,12 +314,12 @@ export default {
       return this.config.public.featureBaseOrganization !== null
     },
     showAuth() {
-      return this.$route.name && this.$route.name !== 'forms-slug'
+      return this.$route.name && this.$route.name !== "forms-slug"
     },
     hasNavbar() {
       if (this.isIframe) return false
 
-      if (this.$route.name && this.$route.name === 'forms-slug') {
+      if (this.$route.name && this.$route.name === "forms-slug") {
         if (this.form) {
           // If there is a cover, or if branding is hidden remove nav
           if (this.form.cover_picture || this.form.no_branding) {
@@ -229,14 +335,17 @@ export default {
       return this.user && this.user.has_forms === true
     },
     hasCrisp() {
-      return this.config.public.crispWebsiteId && this.config.public.crispWebsiteId !== ''
-    }
+      return (
+        this.config.public.crispWebsiteId &&
+        this.config.public.crispWebsiteId !== ""
+      )
+    },
   },
 
   methods: {
     openChangelog() {
       if (import.meta.server) return
-      window.Featurebase('manually_open_changelog_popup')
+      window.Featurebase("manually_open_changelog_popup")
     },
     async logout() {
       // Log out the user.
@@ -248,8 +357,8 @@ export default {
 
       // Redirect to login.
       const router = useRouter()
-      router.push({name: 'login'})
+      router.push({ name: "login" })
     },
-  }
+  },
 }
 </script>
diff --git a/client/components/global/Notifications.vue b/client/components/global/Notifications.vue
index 05475bb56..90161b001 100644
--- a/client/components/global/Notifications.vue
+++ b/client/components/global/Notifications.vue
@@ -1,29 +1,60 @@
 <template>
-  <div class="fixed top-0 bottom-24 right-0 flex gap-y-4 items-start justify-end z-50 pointer-events-auto">
+  <div
+    class="fixed top-0 bottom-24 right-0 flex gap-y-4 items-start justify-end z-50 pointer-events-auto"
+  >
     <NuxtNotifications>
       <template #body="props">
         <div class="p-2">
           <div
             class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden relative"
           >
-            <div class="flex justify-center items-center w-12" :class="notifTypes[props.item.type].background"
-                 v-html="notifTypes[props.item.type].svg"/>
+            <div
+              class="flex justify-center items-center w-12"
+              :class="notifTypes[props.item.type].background"
+              v-html="notifTypes[props.item.type].svg"
+            />
 
             <div class="-mx-3 py-2 px-4">
               <div class="mx-3">
-                <span :class="notifTypes[props.item.type].text" class="font-semibold pr-6">{{ props.item.title }}</span>
-                <p class="text-gray-600 text-sm">{{ props.item.text }}</p>
-                <div class="w-full flex gap-2 mt-1" v-if="props.item.type == 'confirm'">
-                  <v-button color="blue" size="small" @click.prevent="props.item.data.success();props.close()">Yes
+                <span
+                  :class="notifTypes[props.item.type].text"
+                  class="font-semibold pr-6"
+                >{{ props.item.title }}</span>
+                <p class="text-gray-600 text-sm">
+                  {{ props.item.text }}
+                </p>
+                <div
+                  v-if="props.item.type == 'confirm'"
+                  class="w-full flex gap-2 mt-1"
+                >
+                  <v-button
+                    color="blue"
+                    size="small"
+                    @click.prevent="
+                      props.item.data.success();
+                      props.close();
+                    "
+                  >
+                    Yes
                   </v-button>
-                  <v-button color="white" size="small"
-                            @click.prevent="props.item.data.failure();props.close()">No
+                  <v-button
+                    color="white"
+                    size="small"
+                    @click.prevent="
+                      props.item.data.failure();
+                      props.close();
+                    "
+                  >
+                    No
                   </v-button>
                 </div>
               </div>
             </div>
 
-            <button @click="props.close()" class="absolute top-0 right-0 px-2 py-2 cursor-pointer">
+            <button
+              class="absolute top-0 right-0 px-2 py-2 cursor-pointer"
+              @click="props.close()"
+            >
               <svg
                 class="fill-current h-6 w-6 text-gray-300 hover:text-gray-500"
                 role="button"
@@ -45,60 +76,64 @@
 
 <script>
 export default {
-  name: 'Notifications',
+  name: "Notifications",
 
   data() {
     return {
       notifTypes: {
         success: {
-          background: 'bg-green-500',
-          text: 'text-green-500',
-          svg: '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-current text-white" viewBox="0 0 20 20" fill="currentColor">' +
+          background: "bg-green-500",
+          text: "text-green-500",
+          svg:
+            '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-current text-white" viewBox="0 0 20 20" fill="currentColor">' +
             '              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />' +
-            '            </svg>'
+            "            </svg>",
         },
         warning: {
-          background: 'bg-yellow-500',
-          text: 'text-yellow-500',
-          svg: '<svg' +
+          background: "bg-yellow-500",
+          text: "text-yellow-500",
+          svg:
+            "<svg" +
             '              class="h-6 w-6 fill-current text-white"' +
             '              viewBox="0 0 40 40"' +
             '              xmlns="http://www.w3.org/2000/svg"' +
-            '            >' +
-            '              <path' +
+            "            >" +
+            "              <path" +
             '                d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"' +
-            '              />' +
-            '            </svg>',
+            "              />" +
+            "            </svg>",
         },
         error: {
-          background: 'bg-red-500',
-          text: 'text-red-500',
-          svg: '<svg' +
+          background: "bg-red-500",
+          text: "text-red-500",
+          svg:
+            "<svg" +
             '              class="h-6 w-6 fill-current text-white"' +
             '              viewBox="0 0 40 40"' +
             '              xmlns="http://www.w3.org/2000/svg"' +
-            '            >' +
-            '              <path' +
+            "            >" +
+            "              <path" +
             '                d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"' +
-            '              />' +
-            '            </svg>'
+            "              />" +
+            "            </svg>",
         },
         confirm: {
-          background: 'bg-blue-500',
-          text: 'text-blue-500',
-          svg: '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-current text-white" viewBox="0 0 20 20" fill="currentColor">' +
+          background: "bg-blue-500",
+          text: "text-blue-500",
+          svg:
+            '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-current text-white" viewBox="0 0 20 20" fill="currentColor">' +
             '              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />' +
-            '            </svg>'
+            "            </svg>",
         },
         info: {
-          background: 'bg-blue-500',
-          text: 'text-blue-500',
-          svg: '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-current text-white" viewBox="0 0 20 20" fill="currentColor">' +
+          background: "bg-blue-500",
+          text: "text-blue-500",
+          svg:
+            '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-current text-white" viewBox="0 0 20 20" fill="currentColor">' +
             '              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />' +
-            '            </svg>'
-        }
-
-      }
+            "            </svg>",
+        },
+      },
     }
   },
 }
diff --git a/client/components/global/NotionPage.vue b/client/components/global/NotionPage.vue
index 24cc5851f..5263fc9f1 100644
--- a/client/components/global/NotionPage.vue
+++ b/client/components/global/NotionPage.vue
@@ -1,24 +1,30 @@
 <template>
-  <notion-renderer v-if="!loading" :block-map="blockMap"/>
-  <div class="p-6 flex items-center justify-center" v-else>
-    <loader class="w-6 h-6"/>
+  <notion-renderer
+    v-if="!loading"
+    :block-map="blockMap"
+  />
+  <div
+    v-else
+    class="p-6 flex items-center justify-center"
+  >
+    <loader class="w-6 h-6" />
   </div>
 </template>
 
 <script>
-import {NotionRenderer} from 'vue-notion'
+import { NotionRenderer } from "vue-notion"
 
 export default {
-  name: 'NotionPage',
-  components: {NotionRenderer},
+  name: "NotionPage",
+  components: { NotionRenderer },
   props: {
     blockMap: {
-      type: Object
+      type: Object,
     },
     loading: {
       type: Boolean,
-      required: true
-    }
+      required: true,
+    },
   },
 }
 </script>
diff --git a/client/components/global/ProTag.vue b/client/components/global/ProTag.vue
index 6699d57f9..c39095e1b 100644
--- a/client/components/global/ProTag.vue
+++ b/client/components/global/ProTag.vue
@@ -1,35 +1,53 @@
 <template>
-  <div class="inline" v-if="shouldDisplayProTag">
+  <div
+    v-if="shouldDisplayProTag"
+    class="inline"
+  >
     <UTooltip text="Upgrade to use this feature">
-      <div role="button" class="bg-nt-blue text-white px-2 text-xs uppercase inline rounded-full font-semibold cursor-pointer"
-           @click="showPremiumModal=true">
+      <div
+        role="button"
+        class="bg-nt-blue text-white px-2 text-xs uppercase inline rounded-full font-semibold cursor-pointer"
+        @click="showPremiumModal = true"
+      >
         PRO
       </div>
-      <modal :show="showPremiumModal" @close="showPremiumModal=false">
+      <modal
+        :show="showPremiumModal"
+        @close="showPremiumModal = false"
+      >
         <h2 class="text-nt-blue">
           OpnForm PRO
         </h2>
-        <h4 v-if="user && user.is_subscribed" class="text-center mt-5">
-          We're happy to have you as a Pro customer. If you're having any issue with OpnForm, or if you have a
-          feature request, please <a href="mailto:contact@opnform.com">contact us</a>.
+        <h4
+          v-if="user && user.is_subscribed"
+          class="text-center mt-5"
+        >
+          We're happy to have you as a Pro customer. If you're having any issue
+          with OpnForm, or if you have a feature request, please
+          <a href="mailto:contact@opnform.com">contact us</a>.
         </h4>
-        <div v-if="!user || !user.is_subscribed" class="mt-4">
+        <div
+          v-if="!user || !user.is_subscribed"
+          class="mt-4"
+        >
           <p>
             All the features with a<span
-            class="bg-nt-blue text-white px-2 text-xs uppercase inline rounded-full font-semibold mx-1"
-          >
-          PRO
-        </span> tag are available in the Pro plan of OpnForm. <b>You can play around and try all Pro features
-            within
-            the form editor, but you can't use them in your real forms</b>. You can subscribe now to gain unlimited
-            access
-            to
-            all our pro features!
+              class="bg-nt-blue text-white px-2 text-xs uppercase inline rounded-full font-semibold mx-1"
+            >
+              PRO
+            </span>
+            tag are available in the Pro plan of OpnForm.
+            <b>You can play around and try all Pro features within the form
+              editor, but you can't use them in your real forms</b>. You can subscribe now to gain unlimited access to all our pro
+            features!
           </p>
         </div>
 
         <div class="my-4 text-center">
-          <v-button color="white" @click="showPremiumModal=false">
+          <v-button
+            color="white"
+            @click="showPremiumModal = false"
+          >
             Close
           </v-button>
         </div>
@@ -39,7 +57,7 @@
 </template>
 
 <script setup>
-import {computed} from 'vue'
+import { computed } from "vue"
 
 const authStore = useAuthStore()
 const workspacesStore = useWorkspacesStore()
@@ -50,6 +68,6 @@ const showPremiumModal = ref(false)
 const shouldDisplayProTag = computed(() => {
   if (!useRuntimeConfig().public.paidPlansEnabled) return false
   if (!user.value || !workspace.value) return true
-  return !(workspace.value.is_pro)
+  return !workspace.value.is_pro
 })
 </script>
diff --git a/client/components/global/ScrollShadow.vue b/client/components/global/ScrollShadow.vue
index d767f5c3c..2733d549f 100644
--- a/client/components/global/ScrollShadow.vue
+++ b/client/components/global/ScrollShadow.vue
@@ -1,47 +1,58 @@
 <template>
-  <div class="scroll-shadow max-w-full" :class="[$style.wrap,{'w-max':!shadow.left && !shadow.right}]">
+  <div
+    class="scroll-shadow max-w-full"
+    :class="[$style.wrap, { 'w-max': !shadow.left && !shadow.right }]"
+  >
     <div
       ref="scrollContainer"
-      :class="[$style['scroll-container'],{'no-scrollbar':hideScrollbar}]"
-      :style="{ width: width?width:'auto', height }"
+      :class="[$style['scroll-container'], { 'no-scrollbar': hideScrollbar }]"
+      :style="{ width: width ? width : 'auto', height }"
       @scroll.passive="throttled.toggleShadow"
     >
       <slot />
-      <span :class="[$style['shadow-top'], shadow.top && $style['is-active']]" :style="{
-        top: shadowTopOffset+'px',
-      }"
+      <span
+        :class="[$style['shadow-top'], shadow.top && $style['is-active']]"
+        :style="{
+          top: shadowTopOffset + 'px',
+        }"
+      />
+      <span
+        :class="[$style['shadow-right'], shadow.right && $style['is-active']]"
+      />
+      <span
+        :class="[$style['shadow-bottom'], shadow.bottom && $style['is-active']]"
+      />
+      <span
+        :class="[$style['shadow-left'], shadow.left && $style['is-active']]"
       />
-      <span :class="[$style['shadow-right'], shadow.right && $style['is-active']]" />
-      <span :class="[$style['shadow-bottom'], shadow.bottom && $style['is-active']]" />
-      <span :class="[$style['shadow-left'], shadow.left && $style['is-active']]" />
     </div>
   </div>
 </template>
 
 <script>
-import throttle from 'lodash/throttle'
-function newResizeObserver (callback) {
+import throttle from "lodash/throttle"
+function newResizeObserver(callback) {
   // Skip this feature for browsers which
   // do not support ResizeObserver.
   // https://caniuse.com/#search=resizeobserver
-  if (typeof ResizeObserver === 'undefined') return
+  if (typeof ResizeObserver === "undefined") return
 
-  return new ResizeObserver(e => e.map(callback))
+  return new ResizeObserver((e) => e.map(callback))
 }
 
 export default {
-  name: 'ScrollShadow',
+  name: "ScrollShadow",
   props: {
     hideScrollbar: {
       type: Boolean,
-      default: false
+      default: false,
     },
     shadowTopOffset: {
       type: Number,
-      default: 0
-    }
+      default: 0,
+    },
   },
-  data () {
+  data() {
     return {
       width: undefined,
       height: undefined,
@@ -49,21 +60,23 @@ export default {
         top: false,
         right: false,
         bottom: false,
-        left: false
+        left: false,
       },
       scrollContainerObserver: null,
       wrapObserver: null,
-      throttled: {}
+      throttled: {},
     }
   },
-  mounted () {
-    this.throttled.toggleShadow = throttle(this.toggleShadow, 100);
-    this.throttled.calcDimensions = throttle(this.calcDimensions, 100);
+  mounted() {
+    this.throttled.toggleShadow = throttle(this.toggleShadow, 100)
+    this.throttled.calcDimensions = throttle(this.calcDimensions, 100)
 
-    window.addEventListener('resize', this.throttled.calcDimensions)
+    window.addEventListener("resize", this.throttled.calcDimensions)
 
     // Check if shadows are necessary after the element is resized.
-    const scrollContainerObserver = newResizeObserver(this.throttled.toggleShadow)
+    const scrollContainerObserver = newResizeObserver(
+      this.throttled.toggleShadow,
+    )
     if (scrollContainerObserver) {
       scrollContainerObserver.observe(this.$refs.scrollContainer)
     }
@@ -74,8 +87,8 @@ export default {
       this.wrapObserver.observe(this.$el)
     }
   },
-  unmounted () {
-    window.removeEventListener('resize', this.throttled.calcDimensions)
+  unmounted() {
+    window.removeEventListener("resize", this.throttled.calcDimensions)
     // Cleanup when the component is unmounted.
     this.wrapObserver.disconnect()
     if (this.scrollContainerObserver) {
@@ -83,7 +96,7 @@ export default {
     }
   },
   methods: {
-    async calcDimensions () {
+    async calcDimensions() {
       // Reset dimensions for correctly recalculating parent dimensions.
       this.width = undefined
       this.height = undefined
@@ -93,7 +106,7 @@ export default {
       this.height = `${this.$el.clientHeight}px`
     },
     // Check if shadows are needed.
-    toggleShadow () {
+    toggleShadow() {
       if (!this.$refs.scrollContainer) return
       const hasHorizontalScrollbar =
         this.$refs.scrollContainer.clientWidth <
@@ -122,8 +135,8 @@ export default {
         this.shadow.bottom = hasVerticalScrollbar && !scrolledToBottom
         this.shadow.left = hasHorizontalScrollbar && !scrolledToLeft
       })
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -155,7 +168,7 @@ export default {
   height: 1em;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
-  background-image: linear-gradient(rgba(#555, 0.1) 0%, rgba(#FFF, 0) 100%);
+  background-image: linear-gradient(rgba(#555, 0.1) 0%, rgba(#fff, 0) 100%);
 }
 
 .shadow-top {
@@ -174,7 +187,11 @@ export default {
   width: 1em;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  background-image: linear-gradient(90deg, rgba(#555, 0.1) 0%, rgba(#FFF, 0) 100%);
+  background-image: linear-gradient(
+    90deg,
+    rgba(#555, 0.1) 0%,
+    rgba(#fff, 0) 100%
+  );
 }
 
 .shadow-right {
diff --git a/client/components/global/Steps.vue b/client/components/global/Steps.vue
index 12703949e..9ef0b1c24 100644
--- a/client/components/global/Steps.vue
+++ b/client/components/global/Steps.vue
@@ -1,22 +1,36 @@
 <template>
-  <div class="py-4" :class="{'border-b-2':borderBottom}">
-    <div class="uppercase tracking-wide text-xs font-bold dark:text-gray-400 text-gray-500 mb-1 leading-tight">
+  <div
+    class="py-4"
+    :class="{ 'border-b-2': borderBottom }"
+  >
+    <div
+      class="uppercase tracking-wide text-xs font-bold dark:text-gray-400 text-gray-500 mb-1 leading-tight"
+    >
       Step: {{ Math.min(current + 1, steps.length) }} of {{ steps.length }}
     </div>
     <div class="flex flex-col md:flex-row md:items-center md:justify-between">
       <div class="flex-1">
-        <div class="text-lg font-bold dark:text-gray-300 text-gray-700 leading-tight">
-          {{ steps[current] ? steps[current] : 'Complete!' }}
+        <div
+          class="text-lg font-bold dark:text-gray-300 text-gray-700 leading-tight"
+        >
+          {{ steps[current] ? steps[current] : "Complete!" }}
         </div>
       </div>
 
       <div class="flex items-center md:w-64">
         <div class="w-full bg-gray-100 dark:bg-gray-700 rounded-full mr-2">
-          <div class="rounded-full bg-nt-blue text-xs leading-none h-2 text-center text-white transition-all"
-               :style="{'width': parseInt(current / steps.length * 100) +'%', 'min-width': '8px'}"
+          <div
+            class="rounded-full bg-nt-blue text-xs leading-none h-2 text-center text-white transition-all"
+            :style="{
+              width: parseInt((current / steps.length) * 100) + '%',
+              'min-width': '8px',
+            }"
           />
         </div>
-        <div class="text-xs w-10 text-gray-600 dark:text-gray-400" v-text="parseInt(current / steps.length * 100) +'%'" />
+        <div
+          class="text-xs w-10 text-gray-600 dark:text-gray-400"
+          v-text="parseInt((current / steps.length) * 100) + '%'"
+        />
       </div>
     </div>
   </div>
@@ -24,21 +38,21 @@
 
 <script>
 export default {
-  name: 'Steps',
+  name: "Steps",
 
   props: {
     steps: {
       type: Array,
-      required: true
+      required: true,
     },
     borderBottom: {
       type: Boolean,
-      default: true
+      default: true,
     },
     current: {
       type: Number,
-      default: 0
-    }
-  }
+      default: 0,
+    },
+  },
 }
 </script>
diff --git a/client/components/global/VButton.vue b/client/components/global/VButton.vue
index 1c6f4db6b..b3edf7a19 100644
--- a/client/components/global/VButton.vue
+++ b/client/components/global/VButton.vue
@@ -1,27 +1,66 @@
 <template>
-  <NuxtLink v-if="href" :class="btnClasses" :href="href" :target="target">
+  <NuxtLink
+    v-if="href"
+    :class="btnClasses"
+    :href="href"
+    :target="target"
+  >
     <slot />
   </NuxtLink>
-  <button v-else-if="!to" :type="nativeType" :disabled="loading?true:null" :class="btnClasses">
+  <button
+    v-else-if="!to"
+    :type="nativeType"
+    :disabled="loading ? true : null"
+    :class="btnClasses"
+  >
     <template v-if="!loading">
       <span class="no-underline mx-auto">
         <slot />
       </span>
-      <svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M1 11L11 1M11 1H1M11 1V11" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round"
+      <svg
+        v-if="arrow"
+        class="ml-2 w-3 h-3 inline"
+        viewBox="0 0 12 12"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M1 11L11 1M11 1H1M11 1V11"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
       </svg>
     </template>
-    <Loader v-else class="h-6 w-6 mx-auto" :class="`text-${colorShades['text']}`" />
+    <Loader
+      v-else
+      class="h-6 w-6 mx-auto"
+      :class="`text-${colorShades['text']}`"
+    />
   </button>
-  <NuxtLink v-else :class="btnClasses" :to="to" :target="target">
+  <NuxtLink
+    v-else
+    :class="btnClasses"
+    :to="to"
+    :target="target"
+  >
     <span class="no-underline mx-auto">
       <slot />
     </span>
-    <svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M1 11L11 1M11 1H1M11 1V11" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-            stroke-linejoin="round"
+    <svg
+      v-if="arrow"
+      class="ml-2 w-3 h-3 inline"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 11L11 1M11 1H1M11 1V11"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
       />
     </svg>
   </NuxtLink>
@@ -29,149 +68,152 @@
 
 <script>
 export default {
-  name: 'VButton',
+  name: "VButton",
 
   props: {
     color: {
       type: String,
-      default: 'blue'
+      default: "blue",
     },
 
     size: {
       type: String,
-      default: 'medium'
+      default: "medium",
     },
 
     nativeType: {
       type: String,
-      default: null
+      default: null,
     },
 
     loading: {
       type: Boolean,
-      default: false
+      default: false,
     },
 
     arrow: {
       type: Boolean,
-      default: false
+      default: false,
     },
 
     to: {
       type: Object,
-      default: null
+      default: null,
     },
 
     href: {
       type: String,
-      default: null
+      default: null,
     },
 
     target: {
       type: String,
-      default: '_self'
-    }
+      default: "_self",
+    },
   },
 
   computed: {
-    btnClasses () {
+    btnClasses() {
       const sizes = this.sizes
       const colorShades = this.colorShades
-      return `v-btn ${sizes['p-y']} ${sizes['p-x']}
-        ${colorShades?.main} ${colorShades?.hover} ${colorShades?.ring} ${colorShades['ring-offset']}
+      return `v-btn ${sizes["p-y"]} ${sizes["p-x"]}
+        ${colorShades?.main} ${colorShades?.hover} ${colorShades?.ring} ${colorShades["ring-offset"]}
         ${colorShades?.text} transition ease-in duration-200 text-center text-${sizes?.font} font-medium focus:outline-none focus:ring-2
         focus:ring-offset-2 rounded-lg flex items-center hover:no-underline`
     },
-    colorShades () {
-      if (this.color === 'blue') {
+    colorShades() {
+      if (this.color === "blue") {
         return {
-          main: 'bg-blue-600',
-          hover: 'hover:bg-blue-700',
-          ring: 'focus:ring-blue-500',
-          'ring-offset': 'focus:ring-offset-blue-200',
-          text: 'text-white'
+          main: "bg-blue-600",
+          hover: "hover:bg-blue-700",
+          ring: "focus:ring-blue-500",
+          "ring-offset": "focus:ring-offset-blue-200",
+          text: "text-white",
         }
-      } else if (this.color === 'outline-blue') {
+      } else if (this.color === "outline-blue") {
         return {
-          main: 'bg-transparent border border-blue-600',
-          hover: 'hover:bg-blue-600',
-          ring: 'focus:ring-blue-500',
-          'ring-offset': 'focus:ring-offset-blue-200',
-          text: 'text-blue-600 hover:text-white'
+          main: "bg-transparent border border-blue-600",
+          hover: "hover:bg-blue-600",
+          ring: "focus:ring-blue-500",
+          "ring-offset": "focus:ring-offset-blue-200",
+          text: "text-blue-600 hover:text-white",
         }
-      } else if (this.color === 'outline-gray') {
+      } else if (this.color === "outline-gray") {
         return {
-          main: 'bg-transparent border border-gray-300',
-          hover: 'hover:bg-gray-500',
-          ring: 'focus:ring-gray-500',
-          'ring-offset': 'focus:ring-offset-gray-200',
-          text: 'text-gray-500 hover:text-white'
+          main: "bg-transparent border border-gray-300",
+          hover: "hover:bg-gray-500",
+          ring: "focus:ring-gray-500",
+          "ring-offset": "focus:ring-offset-gray-200",
+          text: "text-gray-500 hover:text-white",
         }
-      } else if (this.color === 'red') {
+      } else if (this.color === "red") {
         return {
-          main: 'bg-red-600',
-          hover: 'hover:bg-red-700',
-          ring: 'focus:ring-red-500',
-          'ring-offset': 'focus:ring-offset-red-200',
-          text: 'text-white'
+          main: "bg-red-600",
+          hover: "hover:bg-red-700",
+          ring: "focus:ring-red-500",
+          "ring-offset": "focus:ring-offset-red-200",
+          text: "text-white",
         }
-      } else if (this.color === 'gray') {
+      } else if (this.color === "gray") {
         return {
-          main: 'bg-gray-600',
-          hover: 'hover:bg-gray-700',
-          ring: 'focus:ring-gray-500',
-          'ring-offset': 'focus:ring-offset-gray-200',
-          text: 'text-white'
+          main: "bg-gray-600",
+          hover: "hover:bg-gray-700",
+          ring: "focus:ring-gray-500",
+          "ring-offset": "focus:ring-offset-gray-200",
+          text: "text-white",
         }
-      } else if (this.color === 'light-gray') {
+      } else if (this.color === "light-gray") {
         return {
-          main: 'bg-gray-50 border border-gray-300',
-          hover: 'hover:bg-gray-100',
-          ring: 'focus:ring-gray-500',
-          'ring-offset': 'focus:ring-offset-gray-300',
-          text: 'text-gray-700'
+          main: "bg-gray-50 border border-gray-300",
+          hover: "hover:bg-gray-100",
+          ring: "focus:ring-gray-500",
+          "ring-offset": "focus:ring-offset-gray-300",
+          text: "text-gray-700",
         }
-      } else if (this.color === 'green') {
+      } else if (this.color === "green") {
         return {
-          main: 'bg-green-600',
-          hover: 'hover:bg-green-700',
-          ring: 'focus:ring-green-500',
-          'ring-offset': 'focus:ring-offset-green-200',
-          text: 'text-white'
+          main: "bg-green-600",
+          hover: "hover:bg-green-700",
+          ring: "focus:ring-green-500",
+          "ring-offset": "focus:ring-offset-green-200",
+          text: "text-white",
         }
-      } else if (this.color === 'yellow') {
+      } else if (this.color === "yellow") {
         return {
-          main: 'bg-yellow-600',
-          hover: 'hover:bg-yellow-700',
-          ring: 'focus:ring-yellow-500',
-          'ring-offset': 'focus:ring-offset-yellow-200',
-          text: 'text-white'
+          main: "bg-yellow-600",
+          hover: "hover:bg-yellow-700",
+          ring: "focus:ring-yellow-500",
+          "ring-offset": "focus:ring-offset-yellow-200",
+          text: "text-white",
         }
-      } else if (this.color === 'white') {
+      } else if (this.color === "white") {
         return {
-          main: 'bg-transparent border border-gray-300',
-          hover: 'hover:bg-gray-200',
-          ring: 'focus:ring-white-500',
-          'ring-offset': 'focus:ring-offset-white-200',
-          text: 'text-gray-700'
+          main: "bg-transparent border border-gray-300",
+          hover: "hover:bg-gray-200",
+          ring: "focus:ring-white-500",
+          "ring-offset": "focus:ring-offset-white-200",
+          text: "text-gray-700",
         }
+      }else{
+
+        console.error("Unknown color")
+        return null
       }
-      console.error('Unknown color')
     },
-    sizes () {
-      if (this.size === 'small') {
+    sizes() {
+      if (this.size === "small") {
         return {
-          font: 'sm',
-          'p-y': 'py-1',
-          'p-x': 'px-2'
+          font: "sm",
+          "p-y": "py-1",
+          "p-x": "px-2",
         }
       }
       return {
-        font: 'base',
-        'p-y': 'py-2',
-        'p-x': 'px-4'
+        font: "base",
+        "p-y": "py-2",
+        "p-x": "px-4",
       }
-    }
+    },
   },
 }
 </script>
diff --git a/client/components/global/WorkspaceDropdown.vue b/client/components/global/WorkspaceDropdown.vue
index 26212bf7e..f13398b5e 100644
--- a/client/components/global/WorkspaceDropdown.vue
+++ b/client/components/global/WorkspaceDropdown.vue
@@ -1,37 +1,66 @@
 <template>
-  <dropdown v-if="user && workspaces && workspaces.length > 1" ref="dropdown"
-            dropdown-class="origin-top-left absolute left-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
-            dusk="workspace-dropdown"
+  <dropdown
+    v-if="user && workspaces && workspaces.length > 1"
+    ref="dropdown"
+    dropdown-class="origin-top-left absolute left-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
+    dusk="workspace-dropdown"
   >
-    <template v-if="workspace" #trigger="{toggle}">
-      <div class="flex items-center cursor group" role="button" @click.stop="toggle()">
+    <template
+      v-if="workspace"
+      #trigger="{ toggle }"
+    >
+      <div
+        class="flex items-center cursor group"
+        role="button"
+        @click.stop="toggle()"
+      >
         <div class="rounded-full h-8 8">
-          <img v-if="isUrl(workspace.icon)"
-               :src="workspace.icon"
-               :alt="workspace.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow"
-          />
-          <div v-else class="rounded-full pt-2 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow"
-               v-text="workspace.icon"
+          <img
+            v-if="isUrl(workspace.icon)"
+            :src="workspace.icon"
+            :alt="workspace.name + ' icon'"
+            class="flex-shrink-0 h-8 w-8 rounded-full shadow"
+          >
+          <div
+            v-else
+            class="rounded-full pt-2 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow"
+            v-text="workspace.icon"
           />
         </div>
-        <p class="hidden group-hover:underline lg:block max-w-10 truncate ml-2 text-gray-800 dark:text-gray-200">
+        <p
+          class="hidden group-hover:underline lg:block max-w-10 truncate ml-2 text-gray-800 dark:text-gray-200"
+        >
           {{ workspace.name }}
         </p>
       </div>
     </template>
 
-    <template v-for="worksp in workspaces" :key="worksp.id">
-      <a href="#"
-         class="px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
-         :class="{'bg-blue-100 dark:bg-blue-900':workspace?.id === worksp?.id}" @click.prevent="switchWorkspace(worksp)"
+    <template
+      v-for="worksp in workspaces"
+      :key="worksp.id"
+    >
+      <a
+        href="#"
+        class="px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
+        :class="{
+          'bg-blue-100 dark:bg-blue-900': workspace?.id === worksp?.id,
+        }"
+        @click.prevent="switchWorkspace(worksp)"
       >
-        <div class="rounded-full h-8 w-8 flex-shrink-0" role="button">
-          <img v-if="isUrl(worksp.icon)"
-               :src="worksp.icon"
-               :alt="worksp.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow"
-          />
-          <div v-else class="rounded-full flex-shrink-0 pt-1 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow"
-               v-text="worksp.icon"
+        <div
+          class="rounded-full h-8 w-8 flex-shrink-0"
+          role="button"
+        >
+          <img
+            v-if="isUrl(worksp.icon)"
+            :src="worksp.icon"
+            :alt="worksp.name + ' icon'"
+            class="flex-shrink-0 h-8 w-8 rounded-full shadow"
+          >
+          <div
+            v-else
+            class="rounded-full flex-shrink-0 pt-1 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow"
+            v-text="worksp.icon"
           />
         </div>
         <p class="ml-4 truncate">{{ worksp.name }}</p>
@@ -41,17 +70,16 @@
 </template>
 
 <script>
-import { computed } from 'vue'
-import Dropdown from '~/components/global/Dropdown.vue'
+import { computed } from "vue"
+import Dropdown from "~/components/global/Dropdown.vue"
 
 export default {
-
-  name: 'WorkspaceDropdown',
+  name: "WorkspaceDropdown",
   components: {
-    Dropdown
+    Dropdown,
   },
 
-  setup () {
+  setup() {
     const authStore = useAuthStore()
     const formsStore = useFormsStore()
     const workspacesStore = useWorkspacesStore()
@@ -60,45 +88,42 @@ export default {
       workspacesStore,
       user: computed(() => authStore.user),
       workspaces: computed(() => workspacesStore.getAll),
-      loading: computed(() => workspacesStore.loading)
+      loading: computed(() => workspacesStore.loading),
     }
   },
 
   computed: {
-    workspace () {
+    workspace() {
       return this.workspacesStore.getCurrent
-    }
+    },
   },
 
-  watch: {
-  },
+  watch: {},
 
-  mounted () {
-  },
+  mounted() {},
 
   methods: {
-    switchWorkspace (workspace) {
+    switchWorkspace(workspace) {
       this.workspacesStore.setCurrentId(workspace.id)
       this.formsStore.resetState()
       this.formsStore.loadAll(workspace.id)
       const router = useRouter()
       const route = useRoute()
-      if (route.name !== 'home') {
-        router.push({ name: 'home' })
+      if (route.name !== "home") {
+        router.push({ name: "home" })
       }
       this.formsStore.loadAll(workspace.id)
     },
-    isUrl (str) {
+    isUrl(str) {
       try {
         new URL(str)
       } catch (_) {
         return false
       }
       return true
-    }
-  }
+    },
+  },
 }
 </script>
 
-<style>
-</style>
+<style></style>
diff --git a/client/components/global/transitions/Collapsible.vue b/client/components/global/transitions/Collapsible.vue
index ec3512ffd..57bb5a819 100644
--- a/client/components/global/transitions/Collapsible.vue
+++ b/client/components/global/transitions/Collapsible.vue
@@ -1,23 +1,23 @@
 <template>
   <transition @leave="onLeave">
     <div
-      ref="collapsible"
       v-if="modelValue"
+      ref="collapsible"
       v-on-click-outside.bubble="onClickAway"
     >
-      <slot/>
+      <slot />
     </div>
   </transition>
 </template>
 
 <script setup>
-import {vOnClickOutside} from '@vueuse/components'
+import { vOnClickOutside } from "@vueuse/components"
 
 const props = defineProps({
-  modelValue: {type: Boolean},
-  maxHeight: {type: Number, default: 200},
+  modelValue: { type: Boolean },
+  maxHeight: { type: Number, default: 200 },
 })
-const emit = defineEmits(['click-away'])
+const emit = defineEmits(["click-away"])
 
 const motion = ref(null)
 const collapsible = ref(null)
@@ -25,28 +25,31 @@ const variants = {
   initial: {
     opacity: 0,
     y: -10,
-    transition: {duration: 75, ease: 'easeIn'}
+    transition: { duration: 75, ease: "easeIn" },
   },
   enter: {
     opacity: 1,
     y: 0,
-    transition: {duration: 150, ease: 'easeOut'}
-  }
+    transition: { duration: 150, ease: "easeOut" },
+  },
 }
 
-watch(() => props.modelValue, (newValue) => {
-  if (newValue) {
-    nextTick(() => {
-      motion.value = useMotion(collapsible.value, variants)
-    })
-  }
-})
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue) {
+      nextTick(() => {
+        motion.value = useMotion(collapsible.value, variants)
+      })
+    }
+  },
+)
 
 const onLeave = (el, done) => {
   motion.value.leave(done)
 }
 
 const onClickAway = (event) => {
-  emit('click-away', event)
+  emit("click-away", event)
 }
 </script>
diff --git a/client/components/global/transitions/VTransition.vue b/client/components/global/transitions/VTransition.vue
index a2376dab4..dd9eefa1a 100644
--- a/client/components/global/transitions/VTransition.vue
+++ b/client/components/global/transitions/VTransition.vue
@@ -1,11 +1,12 @@
 <template>
-  <transition v-if="name=='slideInUp'"
-              enter-active-class="linear duration-300 overflow-hidden"
-              enter-from-class="max-h-0"
-              enter-to-class="max-h-screen"
-              leave-active-class="linear duration-300 overflow-hidden"
-              leave-from-class="max-h-screen"
-              leave-to-class="max-h-0"
+  <transition
+    v-if="name == 'slideInUp'"
+    enter-active-class="linear duration-300 overflow-hidden"
+    enter-from-class="max-h-0"
+    enter-to-class="max-h-screen"
+    leave-active-class="linear duration-300 overflow-hidden"
+    leave-from-class="max-h-screen"
+    leave-to-class="max-h-0"
   >
     <slot />
   </transition>
@@ -13,7 +14,7 @@
 
 <script>
 export default {
-  name: 'VTransition',
-  props: { name: { default: 'slideInUp' } }
+  name: "VTransition",
+  props: { name: {type: String,  default: "slideInUp" } },
 }
 </script>
diff --git a/client/components/open/components/EditSubmissionModal.vue b/client/components/open/components/EditSubmissionModal.vue
index 746ec2d30..875feb7b2 100644
--- a/client/components/open/components/EditSubmissionModal.vue
+++ b/client/components/open/components/EditSubmissionModal.vue
@@ -1,42 +1,58 @@
 <template>
-    <modal :show="show" max-width="lg" @close="emit('close')">
-        <open-form :theme="theme" :loading="false" :show-hidden="true" :form="form" :fields="form.properties" @submit="updateForm" :default-data-form="submission">
-        <template #submit-btn="{submitForm}">
-                <v-button :loading="loading" class="mt-2 px-8 mx-1" @click.prevent="submitForm">
-                Update Submission
-                </v-button>
-            </template>
-        </open-form>
-    </modal>
+  <modal
+    :show="show"
+    max-width="lg"
+    @close="emit('close')"
+  >
+    <open-form
+      :theme="theme"
+      :loading="false"
+      :show-hidden="true"
+      :form="form"
+      :fields="form.properties"
+      :default-data-form="submission"
+      @submit="updateForm"
+    >
+      <template #submit-btn="{ submitForm }">
+        <v-button
+          :loading="loading"
+          class="mt-2 px-8 mx-1"
+          @click.prevent="submitForm"
+        >
+          Update Submission
+        </v-button>
+      </template>
+    </open-form>
+  </modal>
 </template>
 <script setup>
-import {ref, defineProps, defineEmits, onMounted } from 'vue'
-import OpenForm from '../forms/OpenForm.vue';
-import { themes } from '~/lib/forms/form-themes.js'
+import { ref, defineProps, defineEmits } from "vue"
+import OpenForm from "../forms/OpenForm.vue"
+import { themes } from "~/lib/forms/form-themes.js"
 const props = defineProps({
   show: { type: Boolean, required: true },
   form: { type: Object, required: true },
-  theme:{type:Object, default:themes.default},
-  submission:{type:Object}
+  theme: { type: Object, default: themes.default },
+  submission: { type: Object },
 })
 
-let loading = ref(false)
+const loading = ref(false)
 
-const emit = defineEmits(['close', 'updated'])
-const updateForm =  (form, onFailure) =>{
-    loading.value  = true
-    form.put('/open/forms/' + props.form.id + '/submissions/'+props.submission.id).then((res) => {
-        useAlert().success(res.message)
-        loading.value  = false
-        emit('close')
-        emit('updated', res.data.data)
-
-      }).catch((error) => {
-        console.error(error)
-        loading.value = false
-        onFailure()
-      })
-    
+const emit = defineEmits(["close", "updated"])
+const updateForm = (form, onFailure) => {
+  loading.value = true
+  form
+    .put("/open/forms/" + props.form.id + "/submissions/" + props.submission.id)
+    .then((res) => {
+      useAlert().success(res.message)
+      loading.value = false
+      emit("close")
+      emit("updated", res.data.data)
+    })
+    .catch((error) => {
+      console.error(error)
+      loading.value = false
+      onFailure()
+    })
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/open/components/RecordOperations.vue b/client/components/open/components/RecordOperations.vue
index 75d52bcb1..b3f7b9818 100644
--- a/client/components/open/components/RecordOperations.vue
+++ b/client/components/open/components/RecordOperations.vue
@@ -1,79 +1,115 @@
 <template>
   <div class="flex items-center justify-center space-x-1">
-    <button v-track.delete_record_click
-            class="border rounded py-1 px-2 text-gray-500 dark:text-gray-400 hover:text-blue-700"
-            @click="showEditSubmissionModal=true"
+    <button
+      v-track.delete_record_click
+      class="border rounded py-1 px-2 text-gray-500 dark:text-gray-400 hover:text-blue-700"
+      @click="showEditSubmissionModal = true"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-      <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="w-4 h-4"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
+        />
       </svg>
     </button>
-    <button v-track.delete_record_click
-            class="border rounded py-1 px-2 text-gray-500 dark:text-gray-400 hover:text-red-700"
-            @click="onDeleteClick"
+    <button
+      v-track.delete_record_click
+      class="border rounded py-1 px-2 text-gray-500 dark:text-gray-400 hover:text-red-700"
+      @click="onDeleteClick"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-           class="w-4 h-4"
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="w-4 h-4"
       >
-        <path stroke-linecap="round" stroke-linejoin="round"
-              d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
         />
       </svg>
     </button>
   </div>
-  <EditSubmissionModal :show="showEditSubmissionModal" :form="form" :submission="submission" @close="showEditSubmissionModal=false" @updated="(submission)=>$emit('updated', submission)"/>
+  <EditSubmissionModal
+    :show="showEditSubmissionModal"
+    :form="form"
+    :submission="submission"
+    @close="showEditSubmissionModal = false"
+    @updated="(submission) => $emit('updated', submission)"
+  />
 </template>
 
 <script>
-import EditSubmissionModal from './EditSubmissionModal.vue'
+import EditSubmissionModal from "./EditSubmissionModal.vue"
 
 export default {
   components: { EditSubmissionModal },
-  emits: ["updated",  "deleted"],
   props: {
     form: {
       type: Object,
-      required: true
+      required: true,
     },
     structure: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     submission: {
       type: Object,
-      default: () => {}
-    }
+      default: () => {},
+    },
   },
-  setup () {
+  emits: ["updated", "deleted"],
+  setup() {
     return {
-      useAlert: useAlert()
+      useAlert: useAlert(),
     }
   },
-  data () {
+  data() {
     return {
-      showEditSubmissionModal:false,
+      showEditSubmissionModal: false,
     }
   },
-  computed: {
-  },
-  mounted () {
-  },
+  computed: {},
+  mounted() {},
   methods: {
-    onDeleteClick () {
-      this.useAlert.confirm('Do you really want to delete this record?', this.deleteRecord)
+    onDeleteClick() {
+      this.useAlert.confirm(
+        "Do you really want to delete this record?",
+        this.deleteRecord,
+      )
     },
-    async deleteRecord () {
-      opnFetch('/open/forms/' + this.form.id + '/records/' + this.submission.id + '/delete', {method:'DELETE'}).then(async (data) => {
-        if (data.type === 'success') {
-          this.$emit('deleted',this.submission)
-          this.useAlert.success(data.message)
-        } else {
-          this.useAlert.error('Something went wrong!')
-        }
-      }).catch((error) => {
-        this.useAlert.error(error.data.message)
-      })
-    }
-  }
+    async deleteRecord() {
+      opnFetch(
+        "/open/forms/" +
+          this.form.id +
+          "/records/" +
+          this.submission.id +
+          "/delete",
+        { method: "DELETE" },
+      )
+        .then(async (data) => {
+          if (data.type === "success") {
+            this.$emit("deleted", this.submission)
+            this.useAlert.success(data.message)
+          } else {
+            this.useAlert.error("Something went wrong!")
+          }
+        })
+        .catch((error) => {
+          this.useAlert.error(error.data.message)
+        })
+    },
+  },
 }
 </script>
diff --git a/client/components/open/editors/EditorOptionsPanel.vue b/client/components/open/editors/EditorOptionsPanel.vue
index 0bfcb1074..82b98f47f 100644
--- a/client/components/open/editors/EditorOptionsPanel.vue
+++ b/client/components/open/editors/EditorOptionsPanel.vue
@@ -1,11 +1,20 @@
 <template>
-  <collapse class="p-4 w-full border-b" v-model="show">
+  <collapse
+    v-model="show"
+    class="p-4 w-full border-b"
+  >
     <template #title>
       <div class="flex items-center pr-8">
-        <div class="mr-3" :class="{'text-blue-600':show, 'text-gray-500':!show}">
+        <div
+          class="mr-3"
+          :class="{ 'text-blue-600': show, 'text-gray-500': !show }"
+        >
           <slot name="icon" />
         </div>
-        <h3 id="v-step-2" class="font-semibold flex-grow">
+        <h3
+          id="v-step-2"
+          class="font-semibold flex-grow"
+        >
           {{ name }}
         </h3>
         <pro-tag v-if="hasProTag" />
@@ -17,30 +26,30 @@
 </template>
 
 <script>
-import Collapse from '~/components/global/Collapse.vue'
-import ProTag from '~/components/global/ProTag.vue'
+import Collapse from "~/components/global/Collapse.vue"
+import ProTag from "~/components/global/ProTag.vue"
 
 export default {
-  name: 'EditorOptionsPanel',
+  name: "EditorOptionsPanel",
   components: { Collapse, ProTag },
   props: {
     name: {
       type: String,
-      required: true
+      required: true,
     },
     hasProTag: {
       type: Boolean,
-      default: false
+      default: false,
     },
     alreadyOpened: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
-  data () {
+  data() {
     return {
-      show: this.alreadyOpened
+      show: this.alreadyOpened,
     }
-  }
+  },
 }
 </script>
diff --git a/client/components/open/editors/EditorRightSidebar.vue b/client/components/open/editors/EditorRightSidebar.vue
index 1a6fab113..1392fef3f 100644
--- a/client/components/open/editors/EditorRightSidebar.vue
+++ b/client/components/open/editors/EditorRightSidebar.vue
@@ -1,7 +1,9 @@
 <template>
-  <transition @leave="(el,done) => sidebarMotion?.leave(done)">
-    <div v-if="show" ref="sidebar"
-         class="absolute shadow-lg shadow-gray-800/30 top-0 h-[calc(100vh-53px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 z-30"
+  <transition @leave="(el, done) => sidebarMotion?.leave(done)">
+    <div
+      v-if="show"
+      ref="sidebar"
+      class="absolute shadow-lg shadow-gray-800/30 top-0 h-[calc(100vh-53px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 z-30"
     >
       <slot />
     </div>
@@ -9,24 +11,26 @@
 </template>
 
 <script setup>
-import {slideRight, useMotion} from "@vueuse/motion"
-import {watch} from "vue";
+import { slideRight, useMotion } from "@vueuse/motion"
+import { watch } from "vue"
 
 const props = defineProps({
   show: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 })
 
 const sidebar = ref(null)
 const sidebarMotion = ref(null)
-watch(() => props.show, (newVal) => {
-  if (newVal) {
-    nextTick(() => {
-      sidebarMotion.value = useMotion(sidebar.value, slideRight)
-    })
-  }
-})
-
+watch(
+  () => props.show,
+  (newVal) => {
+    if (newVal) {
+      nextTick(() => {
+        sidebarMotion.value = useMotion(sidebar.value, slideRight)
+      })
+    }
+  },
+)
 </script>
diff --git a/client/components/open/forms/OpenCompleteForm.vue b/client/components/open/forms/OpenCompleteForm.vue
index efecd633a..472c861fb 100644
--- a/client/components/open/forms/OpenCompleteForm.vue
+++ b/client/components/open/forms/OpenCompleteForm.vue
@@ -1,8 +1,19 @@
 <template>
-  <div v-if="form" class="open-complete-form">
-    <h1 v-if="!isHideTitle" class="mb-4 px-2" :class="{'mt-4':isEmbedPopup}" v-text="form.title" />
-    <div v-if="form.description" v-html="form.description"
-           class="form-description mb-4 text-gray-700 dark:text-gray-300 whitespace-pre-wrap px-2"/>
+  <div
+    v-if="form"
+    class="open-complete-form"
+  >
+    <h1
+      v-if="!isHideTitle"
+      class="mb-4 px-2"
+      :class="{'mt-4':isEmbedPopup}"
+      v-text="form.title"
+    />
+    <div
+      v-if="form.description"
+      class="form-description mb-4 text-gray-700 dark:text-gray-300 whitespace-pre-wrap px-2"
+      v-html="form.description"
+    />
 
     <div v-if="isPublicFormPage && form.is_password_protected">
       <p class="form-description mb-4 text-gray-700 dark:text-gray-300 px-2">
@@ -10,48 +21,77 @@
       </p>
       <div class="form-group flex flex-wrap w-full">
         <div class="relative mb-3 w-full px-2">
-          <text-input :theme="theme" :form="passwordForm" name="password" native-type="password" label="Password" />
+          <text-input
+            :theme="theme"
+            :form="passwordForm"
+            name="password"
+            native-type="password"
+            label="Password"
+          />
         </div>
       </div>
       <div class="flex flex-wrap justify-center w-full text-center">
-        <open-form-button :theme="theme" :color="form.color" class="my-4" @click="passwordEntered">
+        <open-form-button
+          :theme="theme"
+          :color="form.color"
+          class="my-4"
+          @click="passwordEntered"
+        >
           Submit
         </open-form-button>
       </div>
     </div>
 
     <v-transition>
-      <div v-if="!form.is_password_protected && form.password && !hidePasswordDisabledMsg"
-           class="border shadow-sm p-2 my-4 flex items-center rounded-md bg-yellow-100 border-yellow-500"
+      <div
+        v-if="!form.is_password_protected && form.password && !hidePasswordDisabledMsg"
+        class="border shadow-sm p-2 my-4 flex items-center rounded-md bg-yellow-100 border-yellow-500"
       >
         <div class="flex flex-grow">
           <p class="mb-0 py-2 px-4 text-yellow-600 dark:text-yellow-600">
             We disabled the password protection for this form because you are an owner of it.
           </p>
-          <v-button color="yellow" @click="hidePasswordDisabledMsg=true">
+          <v-button
+            color="yellow"
+            @click="hidePasswordDisabledMsg=true"
+          >
             OK
           </v-button>
         </div>
       </div>
     </v-transition>
 
-    <div v-if="isPublicFormPage && (form.is_closed || form.visibility=='closed')"
-         class="border shadow-sm p-2 my-4 flex items-center rounded-md bg-yellow-100 border-yellow-500"
+    <div
+      v-if="isPublicFormPage && (form.is_closed || form.visibility=='closed')"
+      class="border shadow-sm p-2 my-4 flex items-center rounded-md bg-yellow-100 border-yellow-500"
     >
       <div class="flex-grow">
-        <p class="mb-0 py-2 px-4 text-yellow-600" v-html="form.closed_text" />
+        <p
+          class="mb-0 py-2 px-4 text-yellow-600"
+          v-html="form.closed_text"
+        />
       </div>
     </div>
 
-    <div v-if="isPublicFormPage && form.max_number_of_submissions_reached"
-         class="border shadow-sm p-2 my-4 flex items-center rounded-md bg-yellow-100 border-yellow-500"
+    <div
+      v-if="isPublicFormPage && form.max_number_of_submissions_reached"
+      class="border shadow-sm p-2 my-4 flex items-center rounded-md bg-yellow-100 border-yellow-500"
     >
       <div class="flex-grow">
-        <p class="mb-0 py-2 px-4 text-yellow-600" v-html="form.max_submissions_reached_text" />
+        <p
+          class="mb-0 py-2 px-4 text-yellow-600"
+          v-html="form.max_submissions_reached_text"
+        />
       </div>
     </div>
 
-    <form-cleanings v-if="!adminPreview" :hideable="true" class="mb-4 mx-2" :form="form" :specify-form-owner="true" />
+    <form-cleanings
+      v-if="!adminPreview"
+      :hideable="true"
+      class="mb-4 mx-2"
+      :form="form"
+      :specify-form-owner="true"
+    />
 
     <transition
       v-if="!form.is_password_protected && (!isPublicFormPage || (!form.is_closed && !form.max_number_of_submissions_reached && form.visibility!='closed'))"
@@ -63,45 +103,85 @@
       leave-to-class="translate-x-full opacity-0"
       mode="out-in"
     >
-      <div v-if="!submitted" key="form">
-        <open-form v-if="form"
-                   :form="form"
-                   :loading="loading"
-                   :fields="form.properties"
-                   :theme="theme"
-                   :dark-mode="darkMode"
-                   :admin-preview="adminPreview"
-                   @submit="submitForm"
+      <div
+        v-if="!submitted"
+        key="form"
+      >
+        <open-form
+          v-if="form"
+          :form="form"
+          :loading="loading"
+          :fields="form.properties"
+          :theme="theme"
+          :dark-mode="darkMode"
+          :admin-preview="adminPreview"
+          @submit="submitForm"
         >
           <template #submit-btn="{submitForm}">
-            <open-form-button :loading="loading" :theme="theme" :color="form.color" class="mt-2 px-8 mx-1"
-                              :class="submitButtonClass" @click.prevent="submitForm"
+            <open-form-button
+              :loading="loading"
+              :theme="theme"
+              :color="form.color"
+              class="mt-2 px-8 mx-1"
+              :class="submitButtonClass"
+              @click.prevent="submitForm"
             >
               {{ form.submit_button_text }}
             </open-form-button>
           </template>
         </open-form>
-        <p v-if="!form.no_branding" class="text-center w-full mt-2">
-          <a href="https://opnform.com?utm_source=form&utm_content=powered_by"
-             class="text-gray-400 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-500 cursor-pointer hover:underline text-xs"
-             target="_blank"
+        <p
+          v-if="!form.no_branding"
+          class="text-center w-full mt-2"
+        >
+          <a
+            href="https://opnform.com?utm_source=form&utm_content=powered_by"
+            class="text-gray-400 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-500 cursor-pointer hover:underline text-xs"
+            target="_blank"
           >
             Powered by <span class="font-semibold">OpnForm</span>
           </a>
         </p>
       </div>
-      <div v-else key="submitted" class="px-2">
-        <p class="form-description text-gray-700 dark:text-gray-300 whitespace-pre-wrap" v-html="form.submitted_text " />
-        <open-form-button v-if="form.re_fillable" :theme="theme" :color="form.color" class="my-4" @click="restart">
+      <div
+        v-else
+        key="submitted"
+        class="px-2"
+      >
+        <p
+          class="form-description text-gray-700 dark:text-gray-300 whitespace-pre-wrap"
+          v-html="form.submitted_text "
+        />
+        <open-form-button
+          v-if="form.re_fillable"
+          :theme="theme"
+          :color="form.color"
+          class="my-4"
+          @click="restart"
+        >
           {{ form.re_fill_button_text }}
         </open-form-button>
-        <p v-if="form.editable_submissions && submissionId" class="mt-5">
-          <a target="_parent" :href="form.share_url+'?submission_id='+submissionId" class="text-nt-blue hover:underline">
+        <p
+          v-if="form.editable_submissions && submissionId"
+          class="mt-5"
+        >
+          <a
+            target="_parent"
+            :href="form.share_url+'?submission_id='+submissionId"
+            class="text-nt-blue hover:underline"
+          >
             {{ form.editable_submissions_button_text }}
           </a>
         </p>
-        <p v-if="!form.no_branding" class="mt-5">
-          <a target="_parent" href="https://opnform.com/?utm_source=form&utm_content=create_form_free" class="text-nt-blue hover:underline">
+        <p
+          v-if="!form.no_branding"
+          class="mt-5"
+        >
+          <a
+            target="_parent"
+            href="https://opnform.com/?utm_source=form&utm_content=create_form_free"
+            class="text-nt-blue hover:underline"
+          >
             Create your form for free with OpnForm
           </a>
         </p>
@@ -117,8 +197,8 @@ import { themes } from '~/lib/forms/form-themes.js'
 import VButton from '~/components/global/VButton.vue'
 import FormCleanings from '../../pages/forms/show/FormCleanings.vue'
 import VTransition from '~/components/global/transitions/VTransition.vue'
-import {pendingSubmission} from "~/composables/forms/pendingSubmission.js";
-import clonedeep from "clone-deep";
+import {pendingSubmission} from "~/composables/forms/pendingSubmission.js"
+import clonedeep from "clone-deep"
 import { default as _has } from 'lodash/has'
 
 export default {
diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
index f96e635a0..c2692c077 100644
--- a/client/components/open/forms/OpenForm.vue
+++ b/client/components/open/forms/OpenForm.vue
@@ -4,34 +4,54 @@
       <Loader class="h-6 w-6 text-nt-blue mx-auto" />
     </p>
   </div>
-  <form v-else-if="dataForm" @submit.prevent="">
-    <template v-if='form.show_progress_bar'>
-      <div v-if='isIframe' class='mb-4 p-2'>
-        <div class='w-full h-2 bg-gray-200 dark:bg-gray-600 relative border rounded-full overflow-hidden'>
-          <div class='h-full transition-all duration-300 rounded-r-full'
-               :class="{ 'w-0': formProgress === 0 }"
-               :style="{ width: formProgress + '%', background: form.color }"
+  <form
+    v-else-if="dataForm"
+    @submit.prevent=""
+  >
+    <template v-if="form.show_progress_bar">
+      <div
+        v-if="isIframe"
+        class="mb-4 p-2"
+      >
+        <div class="w-full h-2 bg-gray-200 dark:bg-gray-600 relative border rounded-full overflow-hidden">
+          <div
+            class="h-full transition-all duration-300 rounded-r-full"
+            :class="{ 'w-0': formProgress === 0 }"
+            :style="{ width: formProgress + '%', background: form.color }"
           />
         </div>
       </div>
-      <div v-else class='fixed top-0 left-0 right-0 z-50'>
-        <div class='w-full h-[0.2rem] bg-gray-200 dark:bg-gray-600 relative overflow-hidden'>
-          <div class='h-full transition-all duration-300'
-               :class="{ 'w-0': formProgress === 0 }"
-               :style="{ width: formProgress + '%', background: form.color }"
+      <div
+        v-else
+        class="fixed top-0 left-0 right-0 z-50"
+      >
+        <div class="w-full h-[0.2rem] bg-gray-200 dark:bg-gray-600 relative overflow-hidden">
+          <div
+            class="h-full transition-all duration-300"
+            :class="{ 'w-0': formProgress === 0 }"
+            :style="{ width: formProgress + '%', background: form.color }"
           />
         </div>
       </div>
     </template>
-    <transition name="fade" mode="out-in">
-      <div :key="currentFieldGroupIndex" class="form-group flex flex-wrap w-full">
-        <draggable v-model="currentFields"
-                   item-key="id"
-                   class="flex flex-wrap transition-all w-full"
-                   :class="{'-m-6 p-2 bg-gray-50 rounded-md':dragging}"
-                   ghost-class="ghost-item"
-                   handle=".draggable" :animation="200"
-                   @start="onDragStart" @end="onDragEnd"
+    <transition
+      name="fade"
+      mode="out-in"
+    >
+      <div
+        :key="currentFieldGroupIndex"
+        class="form-group flex flex-wrap w-full"
+      >
+        <draggable
+          v-model="currentFields"
+          item-key="id"
+          class="flex flex-wrap transition-all w-full"
+          :class="{'-m-6 p-2 bg-gray-50 rounded-md':dragging}"
+          ghost-class="ghost-item"
+          handle=".draggable"
+          :animation="200"
+          @start="onDragStart"
+          @end="onDragEnd"
         >
           <template #item="{element}">
             <open-form-field
@@ -52,22 +72,43 @@
     <!-- Captcha -->
     <template v-if="form.use_captcha && isLastPage">
       <div class="mb-3 px-2 mt-2 mx-auto w-max">
-        <vue-hcaptcha ref="hcaptcha" :sitekey="hCaptchaSiteKey" :theme="darkMode?'dark':'light'" />
-        <has-error :form="dataForm" field="h-captcha-response" />
+        <vue-hcaptcha
+          ref="hcaptcha"
+          :sitekey="hCaptchaSiteKey"
+          :theme="darkMode?'dark':'light'"
+        />
+        <has-error
+          :form="dataForm"
+          field="h-captcha-response"
+        />
       </div>
     </template>
 
     <!--  Submit, Next and previous buttons  -->
     <div class="flex flex-wrap justify-center w-full">
-      <open-form-button v-if="currentFieldGroupIndex>0 && previousFieldsPageBreak && !loading" native-type="button"
-                        :color="form.color" :theme="theme" class="mt-2 px-8 mx-1" @click="previousPage"
+      <open-form-button
+        v-if="currentFieldGroupIndex>0 && previousFieldsPageBreak && !loading"
+        native-type="button"
+        :color="form.color"
+        :theme="theme"
+        class="mt-2 px-8 mx-1"
+        @click="previousPage"
       >
         {{ previousFieldsPageBreak.previous_btn_text }}
       </open-form-button>
 
-      <slot v-if="isLastPage" name="submit-btn" :submitForm="submitForm" />
-      <open-form-button v-else-if="currentFieldsPageBreak" native-type="button" :color="form.color" :theme="theme" class="mt-2 px-8 mx-1"
-                        @click.stop="nextPage"
+      <slot
+        v-if="isLastPage"
+        name="submit-btn"
+        :submit-form="submitForm"
+      />
+      <open-form-button
+        v-else-if="currentFieldsPageBreak"
+        native-type="button"
+        :color="form.color"
+        :theme="theme"
+        class="mt-2 px-8 mx-1"
+        @click.stop="nextPage"
       >
         {{ currentFieldsPageBreak.next_btn_text }}
       </open-form-button>
@@ -337,7 +378,7 @@ export default {
     async initForm () {
       if(this.defaultDataForm){
         this.dataForm = useForm(this.defaultDataForm)
-        return;
+        return
       }
 
       if (this.isPublicFormPage && this.form.editable_submissions) {
@@ -351,7 +392,7 @@ export default {
         }
       }
       if (this.isPublicFormPage && this.form.auto_save) {
-        let pendingData = this.pendingSubmission.get()
+        const pendingData = this.pendingSubmission.get()
         if (pendingData !== null && pendingData && Object.keys(this.pendingSubmission.get()).length !== 0) {
           this.fields.forEach((field) => {
             if (field.type === 'date' && field.prefill_today === true) { // For Prefill with 'today'
diff --git a/client/components/open/forms/OpenFormButton.vue b/client/components/open/forms/OpenFormButton.vue
index 76f3802ba..9395383ea 100644
--- a/client/components/open/forms/OpenFormButton.vue
+++ b/client/components/open/forms/OpenFormButton.vue
@@ -1,73 +1,82 @@
 <template>
-  <button :type="nativeType" :disabled="loading?true:null" :class="`py-${sizes['p-y']} px-${sizes['p-x']} text-${sizes['font']} ${theme.Button.body}`" :style="buttonStyle"
-          class="btn">
+  <button
+    :type="nativeType"
+    :disabled="loading ? true : null"
+    :class="`py-${sizes['p-y']} px-${sizes['p-x']} text-${sizes['font']} ${theme.Button.body}`"
+    :style="buttonStyle"
+    class="btn"
+  >
     <template v-if="!loading">
       <slot />
     </template>
-    <Loader v-else class="h-6 w-6 text-white mx-auto" />
+    <Loader
+      v-else
+      class="h-6 w-6 text-white mx-auto"
+    />
   </button>
 </template>
 
 <script>
-import { themes } from '~/lib/forms/form-themes.js'
+import { themes } from "~/lib/forms/form-themes.js"
 
 export default {
-  name: 'OpenFormButton',
+  name: "OpenFormButton",
 
   props: {
     color: {
       type: String,
-      required: true
+      required: true,
     },
 
     size: {
       type: String,
-      default: 'medium'
+      default: "medium",
     },
 
     nativeType: {
       type: String,
-      default: 'submit'
+      default: "submit",
     },
 
     loading: {
       type: Boolean,
-      default: false
+      default: false,
     },
 
-    theme: { type: Object, default: () => themes.default }
+    theme: { type: Object, default: () => themes.default },
   },
 
   computed: {
-    buttonStyle () {
+    buttonStyle() {
       return {
         backgroundColor: this.color,
         color: this.getTextColor(this.color),
-        '--tw-ring-color': this.color
+        "--tw-ring-color": this.color,
       }
     },
-    sizes () {
-      if (this.size === 'small') {
+    sizes() {
+      if (this.size === "small") {
         return {
-          font: 'sm',
-          'p-y': '1',
-          'p-x': '2'
+          font: "sm",
+          "p-y": "1",
+          "p-x": "2",
         }
       }
       return {
-        font: 'base',
-        'p-y': '2',
-        'p-x': '4'
+        font: "base",
+        "p-y": "2",
+        "p-x": "4",
       }
-    }
+    },
   },
 
   methods: {
-    getTextColor (bgColor, lightColor = '#FFFFFF', darkColor = '#000000') {
+    getTextColor(bgColor, lightColor = "#FFFFFF", darkColor = "#000000") {
       if (!bgColor) {
         return darkColor
       }
-      const color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor
+      const color =
+        bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor
       const r = parseInt(color.substring(0, 2), 16) // hexToR
       const g = parseInt(color.substring(2, 4), 16) // hexToG
       const b = parseInt(color.substring(4, 6), 16) // hexToB
@@ -78,9 +87,9 @@ export default {
         }
         return Math.pow((col + 0.055) / 1.055, 2.4)
       })
-      const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2])
-      return (L > 0.45) ? darkColor : lightColor
-    }
-  }
+      const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
+      return L > 0.45 ? darkColor : lightColor
+    },
+  },
 }
 </script>
diff --git a/client/components/open/forms/OpenFormField.vue b/client/components/open/forms/OpenFormField.vue
index 9edb6ff26..cc1e9708d 100644
--- a/client/components/open/forms/OpenFormField.vue
+++ b/client/components/open/forms/OpenFormField.vue
@@ -1,52 +1,128 @@
 <template>
-  <div v-if="!isFieldHidden" :id="'block-' + field.id" :class="getFieldWidthClasses(field)">
+  <div
+    v-if="!isFieldHidden"
+    :id="'block-' + field.id"
+    :class="getFieldWidthClasses(field)"
+  >
     <div :class="getFieldClasses(field)">
-      <div v-if="adminPreview"
-        class="absolute -translate-x-full top-0 bottom-0 opacity-0 group-hover/nffield:opacity-100 transition-opacity mb-4">
-        <div class="flex flex-col bg-white rounded-md"
-          :class="{ 'lg:flex-row': !fieldSideBarOpened, 'xl:flex-row': fieldSideBarOpened }">
-          <div class="p-2 -mr-3 -mb-2 text-gray-300 hover:text-blue-500 cursor-pointer hidden xl:block" role="button"
+      <div
+        v-if="adminPreview"
+        class="absolute -translate-x-full top-0 bottom-0 opacity-0 group-hover/nffield:opacity-100 transition-opacity mb-4"
+      >
+        <div
+          class="flex flex-col bg-white rounded-md"
+          :class="{ 'lg:flex-row': !fieldSideBarOpened, 'xl:flex-row': fieldSideBarOpened }"
+        >
+          <div
+            class="p-2 -mr-3 -mb-2 text-gray-300 hover:text-blue-500 cursor-pointer hidden xl:block"
+            role="button"
             :class="{ 'lg:block': !fieldSideBarOpened, 'xl:block': fieldSideBarOpened }"
-            @click.prevent="openAddFieldSidebar">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
-              stroke="currentColor" class="w-5 h-5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            @click.prevent="openAddFieldSidebar"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="3"
+              stroke="currentColor"
+              class="w-5 h-5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 4.5v15m7.5-7.5h-15"
+              />
             </svg>
           </div>
-          <div class="p-2 text-gray-300 hover:text-blue-500 cursor-pointer" role="button"
+          <div
+            class="p-2 text-gray-300 hover:text-blue-500 cursor-pointer"
+            role="button"
             :class="{ 'lg:-mr-2': !fieldSideBarOpened, 'xl:-mr-2': fieldSideBarOpened }"
-            @click.prevent="editFieldOptions">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
-              <path fill-rule="evenodd"
+            @click.prevent="editFieldOptions"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="w-5 h-5"
+            >
+              <path
+                fill-rule="evenodd"
                 d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
-                clip-rule="evenodd" />
+                clip-rule="evenodd"
+              />
             </svg>
           </div>
           <div
             class="px-2 xl:pl-0 lg:pr-1 lg:pt-2 pb-2 bg-white rounded-md text-gray-300 hover:text-gray-500 cursor-grab draggable"
-            :class="{ 'lg:pr-1 lg:pl-0': !fieldSideBarOpened, 'xl:-mr-2': fieldSideBarOpened }" role="button">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-              stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
+            :class="{ 'lg:pr-1 lg:pl-0': !fieldSideBarOpened, 'xl:-mr-2': fieldSideBarOpened }"
+            role="button"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+              />
             </svg>
           </div>
         </div>
       </div>
-      <component :is="getFieldComponents" v-if="getFieldComponents" v-bind="inputProperties(field)"
-        :required="isFieldRequired" :disabled="isFieldDisabled ? true : null" />
+      <component
+        :is="getFieldComponents"
+        v-if="getFieldComponents"
+        v-bind="inputProperties(field)"
+        :required="isFieldRequired"
+        :disabled="isFieldDisabled ? true : null"
+      />
       <template v-else>
-        <div v-if="field.type === 'nf-text' && field.content" :id="field.id" :key="field.id" class="nf-text w-full mb-3"
-          :class="[getFieldAlignClasses(field)]" v-html="field.content" />
-        <div v-if="field.type === 'nf-code' && field.content" :id="field.id" :key="field.id"
-          class="nf-code w-full px-2 mb-3" v-html="field.content" />
-        <div v-if="field.type === 'nf-divider'" :id="field.id" :key="field.id" class="border-b my-4 w-full mx-2" />
-        <div v-if="field.type === 'nf-image' && (field.image_block || !isPublicFormPage)" :id="field.id" :key="field.id"
-          class="my-4 w-full px-2" :class="[getFieldAlignClasses(field)]">
-          <div v-if="!field.image_block" class="p-4 border border-dashed">
+        <div
+          v-if="field.type === 'nf-text' && field.content"
+          :id="field.id"
+          :key="field.id"
+          class="nf-text w-full mb-3"
+          :class="[getFieldAlignClasses(field)]"
+          v-html="field.content"
+        />
+        <div
+          v-if="field.type === 'nf-code' && field.content"
+          :id="field.id"
+          :key="field.id"
+          class="nf-code w-full px-2 mb-3"
+          v-html="field.content"
+        />
+        <div
+          v-if="field.type === 'nf-divider'"
+          :id="field.id"
+          :key="field.id"
+          class="border-b my-4 w-full mx-2"
+        />
+        <div
+          v-if="field.type === 'nf-image' && (field.image_block || !isPublicFormPage)"
+          :id="field.id"
+          :key="field.id"
+          class="my-4 w-full px-2"
+          :class="[getFieldAlignClasses(field)]"
+        >
+          <div
+            v-if="!field.image_block"
+            class="p-4 border border-dashed"
+          >
             Open <b>{{ field.name }}'s</b> block settings to upload image.
           </div>
-          <img v-else :alt="field.name" :src="field.image_block" class="max-w-full" />
+          <img
+            v-else
+            :alt="field.name"
+            :src="field.image_block"
+            class="max-w-full"
+          >
         </div>
       </template>
     </div>
@@ -298,7 +374,7 @@ export default {
         inputProperties.maxSlider = parseInt(field.slider_max_value) ?? 50
         inputProperties.stepSlider = parseInt(field.slider_step_value) ?? 5
       } else if (field.type === 'number' || (field.type === 'phone_number' && field.use_simple_text_input)) {
-        inputProperties.pattern = '/\d*'
+        inputProperties.pattern = '/d*'
       } else if (field.type === 'phone_number' && !field.use_simple_text_input) {
         inputProperties.unavailableCountries = field.unavailable_countries ?? []
       }
diff --git a/client/components/open/forms/components/AdvancedFormUrlSettings.vue b/client/components/open/forms/components/AdvancedFormUrlSettings.vue
index cfc3961f2..f792073e7 100644
--- a/client/components/open/forms/components/AdvancedFormUrlSettings.vue
+++ b/client/components/open/forms/components/AdvancedFormUrlSettings.vue
@@ -1,66 +1,88 @@
 <template>
-  <collapse class="py-5 w-full" :model-value="false">
+  <collapse
+    class="py-5 w-full"
+    :model-value="false"
+  >
     <template #title>
       <div class="flex">
         <h3 class="font-semibold block text-lg">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline text-gray-500 mr-2 -mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-          </svg> Show advanced sharing options
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5 inline text-gray-500 mr-2 -mt-1"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 6h16M4 12h16M4 18h16"
+            />
+          </svg>
+          Show advanced sharing options
         </h3>
       </div>
     </template>
-    <toggle-switch-input :model-value="modelValue.hide_title" name="hide_title" class="mt-4"
-                         label="Hide Form Title"
-                         :disabled="(form.hide_title===true)?true:null"
-                         :help="hideTitleHelp"
-                         @update:model-value="onChangeHideTitle"
+    <toggle-switch-input
+      :model-value="modelValue.hide_title"
+      name="hide_title"
+      class="mt-4"
+      label="Hide Form Title"
+      :disabled="form.hide_title === true ? true : null"
+      :help="hideTitleHelp"
+      @update:model-value="onChangeHideTitle"
     />
-    <toggle-switch-input :model-value="modelValue.auto_submit" name="auto_submit" class="mt-4"
-                         label="Auto Submit Form"
-                         help="Form will auto submit immediate after open URL"
-                         @update:model-value="onChangeAutoSubmit"
+    <toggle-switch-input
+      :model-value="modelValue.auto_submit"
+      name="auto_submit"
+      class="mt-4"
+      label="Auto Submit Form"
+      help="Form will auto submit immediate after open URL"
+      @update:model-value="onChangeAutoSubmit"
     />
   </collapse>
 </template>
 
 <script>
-import Collapse from '~/components/global/Collapse.vue'
+import Collapse from "~/components/global/Collapse.vue"
 export default {
-  name: 'AdvancedFormUrlSettings',
+  name: "AdvancedFormUrlSettings",
   components: { Collapse },
   props: {
     form: {
       type: Object,
-      required: true
+      required: true,
     },
     modelValue: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
 
-  data () {
-    return {
-    }
+  data() {
+    return {}
   },
 
   computed: {
-    hideTitleHelp () {
-      return this.form.hide_title ? 'This option is disabled because the form title is already hidden' : null
-    }
+    hideTitleHelp() {
+      return this.form.hide_title
+        ? "This option is disabled because the form title is already hidden"
+        : null
+    },
   },
 
   watch: {},
 
-  mounted () {},
+  mounted() {},
 
   methods: {
-    onChangeHideTitle (val) {
+    onChangeHideTitle(val) {
       this.modelValue.hide_title = val
     },
-    onChangeAutoSubmit (val) {
+    onChangeAutoSubmit(val) {
       this.modelValue.auto_submit = val
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/open/forms/components/CopyContent.vue b/client/components/open/forms/components/CopyContent.vue
index 6aef45a19..968c66e81 100644
--- a/client/components/open/forms/components/CopyContent.vue
+++ b/client/components/open/forms/components/CopyContent.vue
@@ -1,48 +1,64 @@
 <template>
   <div class="flex flex-wrap sm:flex-nowrap my-4 w-full">
-    <div class="w-full sm:w-auto border border-gray-300 rounded-md p-2 flex-grow select-all bg-gray-100">
+    <div
+      class="w-full sm:w-auto border border-gray-300 rounded-md p-2 flex-grow select-all bg-gray-100"
+    >
       <p class="select-all text-gray-900">
         {{ content }}
       </p>
     </div>
     <div class="w-full sm:w-40 sm:ml-2 mt-2 sm:mt-0 shrink-0">
-      <v-button color="light-gray" class="w-full" @click="copyToClipboard">
+      <v-button
+        color="light-gray"
+        class="w-full"
+        @click="copyToClipboard"
+      >
         <slot name="icon">
-          <svg class="h-4 w-4 -mt-1 text-blue-600 inline mr-1" viewBox="0 0 20 20" fill="none"
-               xmlns="http://www.w3.org/2000/svg">
+          <svg
+            class="h-4 w-4 -mt-1 text-blue-600 inline mr-1"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
             <path
               d="M4.16667 12.4998C3.3901 12.4998 3.00182 12.4998 2.69553 12.373C2.28715 12.2038 1.9627 11.8794 1.79354 11.471C1.66667 11.1647 1.66667 10.7764 1.66667 9.99984V4.33317C1.66667 3.39975 1.66667 2.93304 1.84833 2.57652C2.00812 2.26292 2.26308 2.00795 2.57669 1.84816C2.93321 1.6665 3.39992 1.6665 4.33334 1.6665H10C10.7766 1.6665 11.1649 1.6665 11.4711 1.79337C11.8795 1.96253 12.204 2.28698 12.3731 2.69536C12.5 3.00165 12.5 3.38993 12.5 4.1665M10.1667 18.3332H15.6667C16.6001 18.3332 17.0668 18.3332 17.4233 18.1515C17.7369 17.9917 17.9919 17.7368 18.1517 17.4232C18.3333 17.0666 18.3333 16.5999 18.3333 15.6665V10.1665C18.3333 9.23308 18.3333 8.76637 18.1517 8.40985C17.9919 8.09625 17.7369 7.84128 17.4233 7.68149C17.0668 7.49984 16.6001 7.49984 15.6667 7.49984H10.1667C9.23325 7.49984 8.76654 7.49984 8.41002 7.68149C8.09642 7.84128 7.84145 8.09625 7.68166 8.40985C7.50001 8.76637 7.50001 9.23308 7.50001 10.1665V15.6665C7.50001 16.5999 7.50001 17.0666 7.68166 17.4232C7.84145 17.7368 8.09642 17.9917 8.41002 18.1515C8.76654 18.3332 9.23325 18.3332 10.1667 18.3332Z"
-              stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+              stroke="currentColor"
+              stroke-width="1.66667"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </slot>
-        <slot></slot>
+        <slot />
       </v-button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
+import { defineProps } from "vue"
 const { copy } = useClipboard()
 
 const props = defineProps({
   content: {
     type: String,
-    required: true
+    required: true,
   },
   isDraft: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 })
 
 const copyToClipboard = () => {
   if (import.meta.server) return
   copy(props.content)
-  if(props.isDraft){
-    useAlert().warning('Copied! But other people won\'t be able to see the form since it\'s currently in draft mode')
+  if (props.isDraft) {
+    useAlert().warning(
+      "Copied! But other people won't be able to see the form since it's currently in draft mode",
+    )
   } else {
-    useAlert().success('Copied!')
+    useAlert().success("Copied!")
   }
 }
 </script>
diff --git a/client/components/open/forms/components/FormEditor.vue b/client/components/open/forms/components/FormEditor.vue
index 61de07966..d661724c0 100644
--- a/client/components/open/forms/components/FormEditor.vue
+++ b/client/components/open/forms/components/FormEditor.vue
@@ -1,13 +1,29 @@
 <template>
-  <div v-if="form" id="form-editor" class="relative flex w-full flex-col grow max-h-screen">
+  <div
+    v-if="form"
+    id="form-editor"
+    class="relative flex w-full flex-col grow max-h-screen"
+  >
     <!--  Navbar  -->
     <div class="w-full border-b p-2 flex items-center justify-between bg-white">
-      <a v-if="backButton" href="#" class="ml-2 flex text-blue font-semibold text-sm"
-         @click.prevent="$router.back()"
+      <a
+        v-if="backButton"
+        href="#"
+        class="ml-2 flex text-blue font-semibold text-sm"
+        @click.prevent="$router.back()"
       >
-        <svg class="w-3 h-3 text-blue mt-1 mr-1" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M5 9L1 5L5 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
-                stroke-linejoin="round"
+        <svg
+          class="w-3 h-3 text-blue mt-1 mr-1"
+          viewBox="0 0 6 10"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5 9L1 5L5 1"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
           />
         </svg>
         Go back
@@ -18,25 +34,39 @@
         </h3>
       </div>
 
-      <div class="flex items-center" :class="{'mx-auto md:mx-0':!backButton}">
+      <div
+        class="flex items-center"
+        :class="{ 'mx-auto md:mx-0': !backButton }"
+      >
         <div class="hidden md:block mr-10 relative">
-          <a href="#"
-             class="text-sm px-3 py-2 hover:bg-gray-50 cursor-pointer rounded-md text-gray-500 px-0 sm:px-3 hover:text-gray-800 cursor-pointer mt-1"
-             @click.prevent="openCrisp"
+          <a
+            href="#"
+            class="text-sm px-3 py-2 hover:bg-gray-50 cursor-pointer rounded-md text-gray-500 px-0 sm:px-3 hover:text-gray-800 cursor-pointer mt-1"
+            @click.prevent="openCrisp"
           >
             Help
           </a>
         </div>
-        <v-button v-track.save_form_click size="small" class="w-full px-8 md:px-4 py-2"
-                  :loading="updateFormLoading" :class="saveButtonClass"
-                  @click="saveForm"
+        <v-button
+          v-track.save_form_click
+          size="small"
+          class="w-full px-8 md:px-4 py-2"
+          :loading="updateFormLoading"
+          :class="saveButtonClass"
+          @click="saveForm"
         >
-          <svg class="w-4 h-4 text-white inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
-               xmlns="http://www.w3.org/2000/svg"
+          <svg
+            class="w-4 h-4 text-white inline mr-1 -mt-1"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
           >
             <path
               d="M17 21V13H7V21M7 3V8H15M19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16L21 8V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21Z"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
             />
           </svg>
           <template v-if="form.visibility === 'public'">
@@ -50,9 +80,12 @@
     </div>
 
     <div class="w-full flex grow overflow-y-scroll relative bg-gray-50">
-      <div class="relative w-full bg-white shrink-0 overflow-y-scroll border-r md:w-1/2 md:max-w-sm lg:w-2/5">
+      <div
+        class="relative w-full bg-white shrink-0 overflow-y-scroll border-r md:w-1/2 md:max-w-sm lg:w-2/5"
+      >
         <div class="border-b bg-blue-50 p-5 text-nt-blue-dark md:hidden">
-          Please create this form on a device with a larger screen. That will allow you to preview your form changes.
+          Please create this form on a device with a larger screen. That will
+          allow you to preview your form changes.
         </div>
 
         <form-information />
@@ -72,33 +105,36 @@
       <form-error-modal
         :show="showFormErrorModal"
         :form="form"
-        @close="showFormErrorModal=false"
+        @close="showFormErrorModal = false"
       />
     </div>
   </div>
-  <div v-else class="flex justify-center items-center p-8">
+  <div
+    v-else
+    class="flex justify-center items-center p-8"
+  >
     <Loader class="w-6 h-6" />
   </div>
 </template>
 
 <script>
-import FormEditorSidebar from './form-components/FormEditorSidebar.vue'
-import FormErrorModal from './form-components/FormErrorModal.vue'
-import FormInformation from './form-components/FormInformation.vue'
-import FormStructure from './form-components/FormStructure.vue'
-import FormCustomization from './form-components/FormCustomization.vue'
-import FormCustomCode from './form-components/FormCustomCode.vue'
-import FormAboutSubmission from './form-components/FormAboutSubmission.vue'
-import FormEditorPreview from './form-components/FormEditorPreview.vue'
-import FormSecurityPrivacy from './form-components/FormSecurityPrivacy.vue'
-import FormCustomSeo from './form-components/FormCustomSeo.vue'
-import FormAccess from './form-components/FormAccess.vue'
-import {validatePropertiesLogic} from "~/composables/forms/validatePropertiesLogic.js"
-import opnformConfig from "~/opnform.config.js";
-import {captureException} from "@sentry/core";
+import FormEditorSidebar from "./form-components/FormEditorSidebar.vue"
+import FormErrorModal from "./form-components/FormErrorModal.vue"
+import FormInformation from "./form-components/FormInformation.vue"
+import FormStructure from "./form-components/FormStructure.vue"
+import FormCustomization from "./form-components/FormCustomization.vue"
+import FormCustomCode from "./form-components/FormCustomCode.vue"
+import FormAboutSubmission from "./form-components/FormAboutSubmission.vue"
+import FormEditorPreview from "./form-components/FormEditorPreview.vue"
+import FormSecurityPrivacy from "./form-components/FormSecurityPrivacy.vue"
+import FormCustomSeo from "./form-components/FormCustomSeo.vue"
+import FormAccess from "./form-components/FormAccess.vue"
+import { validatePropertiesLogic } from "~/composables/forms/validatePropertiesLogic.js"
+import opnformConfig from "~/opnform.config.js"
+import { captureException } from "@sentry/core"
 
 export default {
-  name: 'FormEditor',
+  name: "FormEditor",
   components: {
     FormEditorSidebar,
     FormEditorPreview,
@@ -110,36 +146,38 @@ export default {
     FormErrorModal,
     FormSecurityPrivacy,
     FormCustomSeo,
-    FormAccess
+    FormAccess,
   },
   props: {
     isEdit: {
       required: false,
       type: Boolean,
-      default: false
+      default: false,
     },
     isGuest: {
       required: false,
       type: Boolean,
-      default: false
+      default: false,
     },
     backButton: {
       required: false,
       type: Boolean,
-      default: true
+      default: true,
     },
     saveButtonClass: {
       required: false,
       type: String,
-      default: ''
-    }
+      default: "",
+    },
   },
 
-  setup () {
-    const {user} = storeToRefs(useAuthStore())
+  emits: ['mounted', 'on-save', 'openRegister'],
+
+  setup() {
+    const { user } = storeToRefs(useAuthStore())
     const formsStore = useFormsStore()
-    const {content: form} = storeToRefs(useWorkingFormStore())
-    const {getCurrent: workspace} = storeToRefs(useWorkspacesStore())
+    const { content: form } = storeToRefs(useWorkingFormStore())
+    const { getCurrent: workspace } = storeToRefs(useWorkspacesStore())
     return {
       appStore: useAppStore(),
       crisp: useCrisp(),
@@ -148,90 +186,96 @@ export default {
       workspace,
       formsStore,
       form,
-      user
+      user,
     }
   },
 
-  data () {
+  data() {
     return {
       showFormErrorModal: false,
       validationErrorResponse: null,
       updateFormLoading: false,
-      createdFormSlug: null
+      createdFormSlug: null,
     }
   },
 
   computed: {
-    createdForm () {
+    createdForm() {
       return this.formsStore.getByKey(this.createdFormSlug)
     },
-    steps () {
+    steps() {
       return [
         {
-          target: '#v-step-0',
+          target: "#v-step-0",
           header: {
-            title: 'Welcome to the OpnForm Editor!'
+            title: "Welcome to the OpnForm Editor!",
           },
-          content: 'Discover <strong>your form Editor</strong>!'
+          content: "Discover <strong>your form Editor</strong>!",
         },
         {
-          target: '#v-step-1',
+          target: "#v-step-1",
           header: {
-            title: 'Change your form fields'
+            title: "Change your form fields",
           },
-          content: 'Here you can decide which field to include or not, but also the ' +
-            'order you want your fields to be and so on. You also have custom options available for each field, just ' +
-            'click the blue cog.'
+          content:
+            "Here you can decide which field to include or not, but also the " +
+            "order you want your fields to be and so on. You also have custom options available for each field, just " +
+            "click the blue cog.",
         },
         {
-          target: '#v-step-2',
+          target: "#v-step-2",
           header: {
-            title: 'Notifications, Customizations and more!'
+            title: "Notifications, Customizations and more!",
           },
-          content: 'Many more options are available: change colors, texts and receive a ' +
-            'notifications whenever someones submits your form.'
+          content:
+            "Many more options are available: change colors, texts and receive a " +
+            "notifications whenever someones submits your form.",
         },
         {
-          target: '.v-last-step',
+          target: ".v-last-step",
           header: {
-            title: 'Create your form'
+            title: "Create your form",
           },
-          content: 'Click this button when you\'re done to save your form!'
-        }
+          content: "Click this button when you're done to save your form!",
+        },
       ]
     },
-    helpUrl () {
+    helpUrl() {
       return this.opnformConfig.links.help
-    }
+    },
   },
 
   watch: {},
 
-  mounted () {
-    this.$emit('mounted')
+  mounted() {
+    this.$emit("mounted")
     this.appStore.hideNavbar()
   },
 
-  beforeUnmount () {
+  beforeUnmount() {
     this.appStore.showNavbar()
   },
 
   methods: {
-    displayFormModificationAlert (responseData) {
+    displayFormModificationAlert(responseData) {
       const alert = useAlert()
-      if (responseData.form && responseData.form.cleanings && Object.keys(responseData.form.cleanings).length > 0) {
+      if (
+        responseData.form &&
+        responseData.form.cleanings &&
+        Object.keys(responseData.form.cleanings).length > 0
+      ) {
         alert.warning(responseData.message)
       } else if (responseData.message) {
         alert.success(responseData.message)
       }
     },
-    openCrisp () {
+    openCrisp() {
       this.crisp.openChat()
     },
-    showValidationErrors () {
+    showValidationErrors() {
       this.showFormErrorModal = true
     },
-    saveForm () {
+    saveForm() {
       this.form.properties = validatePropertiesLogic(this.form.properties)
       if (this.isGuest) {
         this.saveFormGuest()
@@ -241,63 +285,90 @@ export default {
         this.saveFormCreate()
       }
     },
-    saveFormEdit () {
+    saveFormEdit() {
       if (this.updateFormLoading) return
 
       this.updateFormLoading = true
       this.validationErrorResponse = null
-      this.form.put('/open/forms/{id}/'.replace('{id}', this.form.id)).then((data) => {
-        this.formsStore.save(data.form)
-        this.$emit('on-save')
-        this.$router.push({ name: 'forms-slug-show-share', params: { slug: this.form.slug } })
-        this.amplitude.logEvent('form_saved', { form_id: this.form.id, form_slug: this.form.slug })
-        this.displayFormModificationAlert(data)
-      }).catch((error) => {
-        if (error?.response?.status === 422) {
-          this.validationErrorResponse = error.response.data
-          this.showValidationErrors()
-        } else {
-          useAlert().error('An error occurred while saving the form, please try again.')
-          captureException(error)
-        }
-      }).finally(() => {
-        this.updateFormLoading = false
-      })
+      this.form
+        .put("/open/forms/{id}/".replace("{id}", this.form.id))
+        .then((data) => {
+          this.formsStore.save(data.form)
+          this.$emit("on-save")
+          this.$router.push({
+            name: "forms-slug-show-share",
+            params: { slug: this.form.slug },
+          })
+          this.amplitude.logEvent("form_saved", {
+            form_id: this.form.id,
+            form_slug: this.form.slug,
+          })
+          this.displayFormModificationAlert(data)
+        })
+        .catch((error) => {
+          if (error?.response?.status === 422) {
+            this.validationErrorResponse = error.response.data
+            this.showValidationErrors()
+          } else {
+            useAlert().error(
+              "An error occurred while saving the form, please try again.",
+            )
+            captureException(error)
+          }
+        })
+        .finally(() => {
+          this.updateFormLoading = false
+        })
     },
-    saveFormCreate () {
+    saveFormCreate() {
       if (this.updateFormLoading) return
       this.form.workspace_id = this.workspace.id
       this.validationErrorResponse = null
 
       this.updateFormLoading = true
-      this.form.post('/open/forms').then((response) => {
-        this.formsStore.save(response.form)
-        this.$emit('on-save')
-        this.createdFormSlug = response.form.slug
+      this.form
+        .post("/open/forms")
+        .then((response) => {
+          this.formsStore.save(response.form)
+          this.$emit("on-save")
+          this.createdFormSlug = response.form.slug
 
-        this.amplitude.logEvent('form_created', { form_id: response.form.id, form_slug: response.form.slug })
-        this.crisp.pushEvent('form_created',{
-          form_id: response.form.id,
-          form_slug: response.form.slug
+          this.amplitude.logEvent("form_created", {
+            form_id: response.form.id,
+            form_slug: response.form.slug,
+          })
+          this.crisp.pushEvent("form_created", {
+            form_id: response.form.id,
+            form_slug: response.form.slug,
+          })
+          this.displayFormModificationAlert(response)
+          useRouter().push({
+            name: "forms-slug-show-share",
+            params: {
+              slug: this.createdFormSlug,
+              new_form: response.users_first_form,
+            },
+          })
+        })
+        .catch((error) => {
+          if (error?.response?.status === 422) {
+            this.validationErrorResponse = error.response
+            this.showValidationErrors()
+          } else {
+            useAlert().error(
+              "An error occurred while saving the form, please try again.",
+            )
+            captureException(error)
+          }
+        })
+        .finally(() => {
+          this.updateFormLoading = false
         })
-        this.displayFormModificationAlert(response)
-        useRouter().push({ name: 'forms-slug-show-share', params: { slug: this.createdFormSlug, new_form: response.users_first_form } })
-      }).catch((error) => {
-        if (error?.response?.status === 422) {
-          this.validationErrorResponse = error.response
-          this.showValidationErrors()
-        } else {
-          useAlert().error('An error occurred while saving the form, please try again.')
-          captureException(error)
-        }
-      }).finally(() => {
-        this.updateFormLoading = false
-      })
     },
-    saveFormGuest () {
-      this.$emit('openRegister')
-    }
-  }
+    saveFormGuest() {
+      this.$emit("openRegister")
+    },
+  },
 }
 </script>
 
@@ -305,13 +376,13 @@ export default {
 .v-step {
   color: white;
 
-  .v-step__header, .v-step__content {
+  .v-step__header,
+  .v-step__content {
     color: white;
 
     div {
       color: white;
     }
   }
-
 }
 </style>
diff --git a/client/components/open/forms/components/FormFieldsEditor.vue b/client/components/open/forms/components/FormFieldsEditor.vue
index 046bb5302..42042da04 100644
--- a/client/components/open/forms/components/FormFieldsEditor.vue
+++ b/client/components/open/forms/components/FormFieldsEditor.vue
@@ -1,43 +1,75 @@
 <template>
   <div>
-    <v-button v-if="form.properties && form.properties.length > 8"
-              class="w-full mb-3" color="light-gray"
-              @click="openAddFieldSidebar"
+    <v-button
+      v-if="form.properties && form.properties.length > 8"
+      class="w-full mb-3"
+      color="light-gray"
+      @click="openAddFieldSidebar"
     >
-      <svg class="w-4 h-4 text-nt-blue inline mr-1 -mt-1" viewBox="0 0 14 14" fill="none"
-           xmlns="http://www.w3.org/2000/svg"
+      <svg
+        class="w-4 h-4 text-nt-blue inline mr-1 -mt-1"
+        viewBox="0 0 14 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path d="M7.00001 1.1665V12.8332M1.16667 6.99984H12.8333" stroke="currentColor" stroke-width="1.67"
-              stroke-linecap="round" stroke-linejoin="round"
+        <path
+          d="M7.00001 1.1665V12.8332M1.16667 6.99984H12.8333"
+          stroke="currentColor"
+          stroke-width="1.67"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
       </svg>
       Add block
     </v-button>
 
-    <draggable v-model="form.properties"
-               item-key="id"
-               class="bg-white overflow-hidden dark:bg-notion-dark-light rounded-md w-full mx-auto border transition-colors"
-               ghost-class="bg-gray-50"
-               handle=".draggable"
-               :animation="200"
+    <draggable
+      v-model="form.properties"
+      item-key="id"
+      class="bg-white overflow-hidden dark:bg-notion-dark-light rounded-md w-full mx-auto border transition-colors"
+      ghost-class="bg-gray-50"
+      handle=".draggable"
+      :animation="200"
     >
-      <template #item="{element, index}">
-        <div class="w-full mx-auto transition-colors"
-             :class="{'bg-gray-100 dark:bg-gray-800':element.hidden,'bg-white dark:bg-notion-dark-light':!element.hidden && !element.type==='nf-page-break', 'border-b': (index!== form.properties.length -1), 'bg-blue-50 dark:bg-blue-900':element && element.type==='nf-page-break'}"
+      <template #item="{ element, index }">
+        <div
+          class="w-full mx-auto transition-colors"
+          :class="{
+            'bg-gray-100 dark:bg-gray-800': element.hidden,
+            'bg-white dark:bg-notion-dark-light':
+              !element.hidden && !element.type === 'nf-page-break',
+            'border-b': index !== form.properties.length - 1,
+            'bg-blue-50 dark:bg-blue-900':
+              element && element.type === 'nf-page-break',
+          }"
         >
-          <div v-if="element" class="flex items-center space-x-1 group py-2 pr-4 relative">
+          <div
+            v-if="element"
+            class="flex items-center space-x-1 group py-2 pr-4 relative"
+          >
             <!-- Drag handler -->
             <div class="cursor-move draggable p-2 -mr-2">
-              <svg class="h-4 w-4 text-gray-400" viewBox="0 0 18 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M1.5 1.0835H16.5M1.5 6.91683H16.5" stroke="currentColor" stroke-width="1.67"
-                      stroke-linecap="round" stroke-linejoin="round"
+              <svg
+                class="h-4 w-4 text-gray-400"
+                viewBox="0 0 18 8"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M1.5 1.0835H16.5M1.5 6.91683H16.5"
+                  stroke="currentColor"
+                  stroke-width="1.67"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
                 />
               </svg>
             </div>
             <!-- Field name and type -->
             <div class="flex flex-col flex-grow truncate">
-              <editable-div class="max-w-full flex items-center" :model-value="element.name"
-                            @update:model-value="onChangeName(element, $event)"
+              <editable-div
+                class="max-w-full flex items-center"
+                :model-value="element.name"
+                @update:model-value="onChangeName(element, $event)"
               >
                 <div class="cursor-pointer max-w-full truncate">
                   {{ element.name }}
@@ -52,10 +84,20 @@
             <template v-if="removing == element.id">
               <div class="flex text-sm items-center">
                 Remove block?
-                <v-button class="inline ml-1" color="red" size="small" @click="removeBlock(index)">
+                <v-button
+                  class="inline ml-1"
+                  color="red"
+                  size="small"
+                  @click="removeBlock(index)"
+                >
                   Yes
                 </v-button>
-                <v-button class="inline ml-1" color="light-gray" size="small" @click="removing=false">
+                <v-button
+                  class="inline ml-1"
+                  color="light-gray"
+                  size="small"
+                  @click="removing = false"
+                >
                   No
                 </v-button>
               </div>
@@ -63,82 +105,151 @@
             <template v-else>
               <button
                 class="hover:bg-red-50 text-gray-500 hover:text-red-600 rounded transition-colors cursor-pointer p-2 hidden md:group-hover:block"
-                @click="removing=element.id"
+                @click="removing = element.id"
               >
-                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <svg
+                  class="h-4 w-4"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
                   <path
                     d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17"
-                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
                   />
                 </svg>
               </button>
-              <button class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2 hidden"
-                      :class="{'text-blue-500': !element.hidden, 'text-gray-500': element.hidden, 'group-hover:md:block': !element.hidden, 'md:block':element.hidden}"
-                      @click="toggleHidden(element)"
+              <button
+                class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2 hidden"
+                :class="{
+                  'text-blue-500': !element.hidden,
+                  'text-gray-500': element.hidden,
+                  'group-hover:md:block': !element.hidden,
+                  'md:block': element.hidden,
+                }"
+                @click="toggleHidden(element)"
               >
                 <template v-if="!element.hidden">
-                  <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
-                          stroke="currentColor"
-                          stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                  <svg
+                    class="h-4 w-4"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
                     />
                     <path
                       d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
-                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
                     />
                   </svg>
                 </template>
                 <template v-else>
-                  <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <svg
+                    class="h-4 w-4"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
                     <g clip-path="url(#clip0_1027_7292)">
                       <path
                         d="M9.9 4.24C10.5883 4.07888 11.2931 3.99834 12 4C19 4 23 12 23 12C22.393 13.1356 21.6691 14.2047 20.84 15.19M14.12 14.12C13.8454 14.4147 13.5141 14.6512 13.1462 14.8151C12.7782 14.9791 12.3809 15.0673 11.9781 15.0744C11.5753 15.0815 11.1752 15.0074 10.8016 14.8565C10.4281 14.7056 10.0887 14.481 9.80385 14.1962C9.51897 13.9113 9.29439 13.5719 9.14351 13.1984C8.99262 12.8248 8.91853 12.4247 8.92563 12.0219C8.93274 11.6191 9.02091 11.2218 9.18488 10.8538C9.34884 10.4859 9.58525 10.1546 9.88 9.88M1 1L23 23M17.94 17.94C16.2306 19.243 14.1491 19.9649 12 20C5 20 1 12 1 12C2.24389 9.6819 3.96914 7.65661 6.06 6.06L17.94 17.94Z"
-                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
                       />
                     </g>
                     <defs>
                       <clipPath id="clip0_1027_7292">
-                        <rect width="24" height="24" fill="white"/>
+                        <rect
+                          width="24"
+                          height="24"
+                          fill="white"
+                        />
                       </clipPath>
                     </defs>
                   </svg>
                 </template>
               </button>
-              <button v-if="!element.type.startsWith('nf-')"
-                      class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2 hidden"
-                      :class="{'group-hover:md:block': !element.required, 'md:block':element.required}"
-                      @click="toggleRequired(element)"
+              <button
+                v-if="!element.type.startsWith('nf-')"
+                class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2 hidden"
+                :class="{
+                  'group-hover:md:block': !element.required,
+                  'md:block': element.required,
+                }"
+                @click="toggleRequired(element)"
               >
-                <div class="w-4 h-4 text-center font-bold text-3xl"
-                     :class="{'text-red-500': element.required, 'text-gray-500': !element.required}"
+                <div
+                  class="w-4 h-4 text-center font-bold text-3xl"
+                  :class="{
+                    'text-red-500': element.required,
+                    'text-gray-500': !element.required,
+                  }"
                 >
-                  <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <svg
+                    class="w-4 h-4"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
                     <path
                       d="M12 2V12M12 12V22M12 12L4.93 4.93M12 12L19.07 19.07M12 12H2M12 12H22M12 12L4.93 19.07M12 12L19.07 4.93"
-                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
                     />
                   </svg>
                 </div>
               </button>
-              <button class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2"
-                      @click="editOptions(index)"
+              <button
+                class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer p-2"
+                @click="editOptions(index)"
               >
-                <svg class="h-4 w-4 text-blue-600" width="24" height="24" viewBox="0 0 24 24" fill="none"
-                     xmlns="http://www.w3.org/2000/svg"
+                <svg
+                  class="h-4 w-4 text-blue-600"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <g clip-path="url(#clip0_1027_7210)">
                     <path
                       d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
-                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
                     />
                     <path
                       d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z"
-                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
                     />
                   </g>
                   <defs>
                     <clipPath id="clip0_1027_7210">
-                      <rect width="24" height="24" fill="white"/>
+                      <rect
+                        width="24"
+                        height="24"
+                        fill="white"
+                      />
                     </clipPath>
                   </defs>
                 </svg>
@@ -150,14 +261,22 @@
     </draggable>
 
     <v-button
-      class="w-full mt-3" color="light-gray"
+      class="w-full mt-3"
+      color="light-gray"
       @click="openAddFieldSidebar"
     >
-      <svg class="w-4 h-4 text-nt-blue inline mr-1 -mt-1" viewBox="0 0 14 14" fill="none"
-           xmlns="http://www.w3.org/2000/svg"
+      <svg
+        class="w-4 h-4 text-nt-blue inline mr-1 -mt-1"
+        viewBox="0 0 14 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path d="M7.00001 1.1665V12.8332M1.16667 6.99984H12.8333" stroke="currentColor" stroke-width="1.67"
-              stroke-linecap="round" stroke-linejoin="round"
+        <path
+          d="M7.00001 1.1665V12.8332M1.16667 6.99984H12.8333"
+          stroke="currentColor"
+          stroke-width="1.67"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
       </svg>
       Add block
@@ -166,20 +285,17 @@
 </template>
 
 <script>
-import draggable from 'vuedraggable'
-import ProTag from '~/components/global/ProTag.vue'
-import clonedeep from 'clone-deep'
-import EditableDiv from '~/components/global/EditableDiv.vue'
-import VButton from '~/components/global/VButton.vue'
+import draggable from "vuedraggable"
+import EditableDiv from "~/components/global/EditableDiv.vue"
+import VButton from "~/components/global/VButton.vue"
 
-draggable.compatConfig = {MODE: 3}
+draggable.compatConfig = { MODE: 3 }
 export default {
-  name: 'FormFieldsEditor',
+  name: "FormFieldsEditor",
   components: {
     VButton,
-    ProTag,
     draggable,
-    EditableDiv
+    EditableDiv,
   },
 
   setup() {
@@ -193,7 +309,7 @@ export default {
 
   data() {
     return {
-      removing: null
+      removing: null,
     }
   },
 
@@ -229,20 +345,20 @@ export default {
         field.placeholder = field.placeholder || null
         field.prefill = field.prefill || null
         field.help = field.help || null
-        field.help_position = field.help_position || 'below_input'
+        field.help_position = field.help_position || "below_input"
 
         return field
       })
     },
     formatType(field) {
-      let type = field.type.replace('_', ' ')
-      if (!type.startsWith('nf')) {
-        type = type + ' Input'
+      let type = field.type.replace("_", " ")
+      if (!type.startsWith("nf")) {
+        type = type + " Input"
       } else {
-        type = type.replace('nf-', '')
+        type = type.replace("nf-", "")
       }
       if (field.generates_uuid || field.generates_auto_increment_id) {
-        type = type + ' - Auto ID'
+        type = type + " - Auto ID"
       }
       return type
     },
@@ -258,7 +374,7 @@ export default {
     },
     openAddFieldSidebar() {
       this.workingFormStore.openAddFieldSidebar(null)
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/open/forms/components/FormStats.vue b/client/components/open/forms/components/FormStats.vue
index f8064cf72..788036ba2 100644
--- a/client/components/open/forms/components/FormStats.vue
+++ b/client/components/open/forms/components/FormStats.vue
@@ -1,34 +1,44 @@
 <template>
-  <div class="border border-nt-blue-light bg-blue-50 dark:bg-notion-dark-light rounded-md p-4 mb-5 w-full mx-auto mt-4 select-all">
-    <div v-if="false" class="relative">
+  <div
+    class="border border-nt-blue-light bg-blue-50 dark:bg-notion-dark-light rounded-md p-4 mb-5 w-full mx-auto mt-4 select-all"
+  >
+    <div
+      v-if="false"
+      class="relative"
+    >
       <div class="absolute inset-0 z-10">
         <div class="p-5 max-w-md mx-auto mt-5">
           <p class="text-center">
-            You need a <pro-tag class="mx-1" /> subscription to access your form analytics.
+            You need a <pro-tag class="mx-1" /> subscription to access your form
+            analytics.
           </p>
           <p class="mt-5 text-center">
-            <v-button :to="{name:'pricing'}">
+            <v-button :to="{ name: 'pricing' }">
               Subscribe
             </v-button>
           </p>
         </div>
       </div>
-      <img src="/img/pages/forms/blurred_graph.png"
-           alt="Sample Graph"
-           class="mx-auto filter blur-md z-0"
-      />
-
+      <img
+        src="/img/pages/forms/blurred_graph.png"
+        alt="Sample Graph"
+        class="mx-auto filter blur-md z-0"
+      >
     </div>
-    <Loader v-else-if="isLoading" class="h-6 w-6 text-nt-blue mx-auto" />
-    <LineChart v-else
-               :options="chartOptions"
-               :data="chartData"
+    <Loader
+      v-else-if="isLoading"
+      class="h-6 w-6 text-nt-blue mx-auto"
+    />
+    <LineChart
+      v-else
+      :options="chartOptions"
+      :data="chartData"
     />
   </div>
 </template>
 
 <script>
-import { Line as LineChart } from 'vue-chartjs'
+import { Line as LineChart } from "vue-chartjs"
 import {
   Chart as ChartJS,
   Title,
@@ -37,9 +47,9 @@ import {
   LineElement,
   LinearScale,
   CategoryScale,
-  PointElement
-} from 'chart.js'
-import ProTag from '~/components/global/ProTag.vue'
+  PointElement,
+} from "chart.js"
+import ProTag from "~/components/global/ProTag.vue"
 
 ChartJS.register(
   Title,
@@ -48,63 +58,70 @@ ChartJS.register(
   LineElement,
   LinearScale,
   CategoryScale,
-  PointElement
+  PointElement,
 )
 
 export default {
-  name: 'FormStats',
+  name: "FormStats",
   components: {
     ProTag,
-    LineChart
+    LineChart,
   },
   props: {
     form: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
-  data () {
+  data() {
     return {
       isLoading: true,
       chartData: {
         labels: [],
         datasets: [
           {
-            label: 'Form Views',
-            backgroundColor: 'rgba(59, 130, 246, 1)',
-            borderColor: 'rgba(59, 130, 246, 1)',
-            data: []
+            label: "Form Views",
+            backgroundColor: "rgba(59, 130, 246, 1)",
+            borderColor: "rgba(59, 130, 246, 1)",
+            data: [],
           },
           {
-            label: 'Form Submissions',
-            backgroundColor: 'rgba(16, 185, 129, 1)',
-            borderColor: 'rgba(16, 185, 129, 1)',
-            data: []
-          }
-        ]
+            label: "Form Submissions",
+            backgroundColor: "rgba(16, 185, 129, 1)",
+            borderColor: "rgba(16, 185, 129, 1)",
+            data: [],
+          },
+        ],
       },
       chartOptions: {
         scales: {
           y: {
             beginAtZero: true,
             ticks: {
-              precision: 0
-            }
-          }
+              precision: 0,
+            },
+          },
         },
         responsive: true,
-        maintainAspectRatio: true
-      }
+        maintainAspectRatio: true,
+      },
     }
   },
-  mounted () {
+  mounted() {
     this.getChartData()
   },
   methods: {
-    getChartData () {
-      if (!this.form) { return null }
+    getChartData() {
+      if (!this.form) {
+        return null
+      }
       this.isLoading = true
-      opnFetch('/open/workspaces/' + this.form.workspace_id + '/form-stats/' + this.form.id).then((statsData) => {
+      opnFetch(
+        "/open/workspaces/" +
+          this.form.workspace_id +
+          "/form-stats/" +
+          this.form.id,
+      ).then((statsData) => {
         if (statsData && statsData.views !== undefined) {
           this.chartData.labels = Object.keys(statsData.views)
           this.chartData.datasets[0].data = statsData.views
@@ -112,7 +129,7 @@ export default {
           this.isLoading = false
         }
       })
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/open/forms/components/FormSubmissions.vue b/client/components/open/forms/components/FormSubmissions.vue
index dbc3a92f6..ac76d6406 100644
--- a/client/components/open/forms/components/FormSubmissions.vue
+++ b/client/components/open/forms/components/FormSubmissions.vue
@@ -1,5 +1,6 @@
 <template>
-  <div id="table-page"
+  <div
+    id="table-page"
     class="w-full flex flex-col"
   >
     <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4 pt-4">
@@ -8,15 +9,31 @@
       </h3>
 
       <!--  Table columns modal  -->
-      <modal :show="showColumnsModal" @close="showColumnsModal=false">
+      <modal
+        :show="showColumnsModal"
+        @close="showColumnsModal=false"
+      >
         <template #icon>
-          <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <svg
+            class="w-8 h-8"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
             <path
               d="M16 5H8C4.13401 5 1 8.13401 1 12C1 15.866 4.13401 19 8 19H16C19.866 19 23 15.866 23 12C23 8.13401 19.866 5 16 5Z"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
             <path
               d="M8 15C9.65685 15 11 13.6569 11 12C11 10.3431 9.65685 9 8 9C6.34315 9 5 10.3431 5 12C5 13.6569 6.34315 15 8 15Z"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </template>
         <template #title>
@@ -29,14 +46,20 @@
               Form Fields
             </h4>
             <div class="border border-gray-300 rounded-md">
-              <div v-for="(field,index) in candidatesProperties" :key="field.id"
-                   class="p-2 border-gray-300 flex items-center"
-                   :class="{'border-t':index!=0}">
+              <div
+                v-for="(field,index) in candidatesProperties"
+                :key="field.id"
+                class="p-2 border-gray-300 flex items-center"
+                :class="{'border-t':index!=0}"
+              >
                 <p class="flex-grow truncate">
                   {{ field.name }}
                 </p>
-                <v-switch v-model="displayColumns[field.id]" class="float-right"
-                          @update:model-value="onChangeDisplayColumns"/>
+                <v-switch
+                  v-model="displayColumns[field.id]"
+                  class="float-right"
+                  @update:model-value="onChangeDisplayColumns"
+                />
               </div>
             </div>
           </template>
@@ -45,40 +68,65 @@
               Removed Fields
             </h4>
             <div class="border border-gray-300 rounded-md">
-              <div v-for="(field,index) in removed_properties" :key="field.id"
-                   class="p-2 border-gray-300 flex items-center" :class="{'border-t':index!=0}">
+              <div
+                v-for="(field,index) in removed_properties"
+                :key="field.id"
+                class="p-2 border-gray-300 flex items-center"
+                :class="{'border-t':index!=0}"
+              >
                 <p class="flex-grow truncate">
                   {{ field.name }}
                 </p>
-                <v-switch v-model="displayColumns[field.id]" class="float-right"
-                          @update:model-value="onChangeDisplayColumns"/>
+                <v-switch
+                  v-model="displayColumns[field.id]"
+                  class="float-right"
+                  @update:model-value="onChangeDisplayColumns"
+                />
               </div>
             </div>
           </template>
         </div>
       </modal>
 
-      <Loader v-if="!form" class="h-6 w-6 text-nt-blue mx-auto"/>
+      <Loader
+        v-if="!form"
+        class="h-6 w-6 text-nt-blue mx-auto"
+      />
       <div v-else>
-        <div v-if="form && tableData.length > 0" class="flex flex-wrap items-end">
+        <div
+          v-if="form && tableData.length > 0"
+          class="flex flex-wrap items-end"
+        >
           <div class="flex-grow">
-            <text-input class="w-64" :form="searchForm" name="search" placeholder="Search..."/>
+            <text-input
+              class="w-64"
+              :form="searchForm"
+              name="search"
+              placeholder="Search..."
+            />
           </div>
           <div class="font-semibold flex gap-4">
             <p class="float-right text-xs uppercase mb-2">
               <a
-                href="javascript:void(0);" class="text-gray-500" @click="showColumnsModal=true"
+                href="javascript:void(0);"
+                class="text-gray-500"
+                @click="showColumnsModal=true"
               >Display columns</a>
             </p>
-            <p class="text-right cursor-pointer text-xs uppercase">
-              <a v-if="!exportLoading"
-                @click.prevent="downloadAsCsv" href="#"
+            <p
+              v-if="!exportLoading"
+              class="text-right cursor-pointer text-xs uppercase"
+            >
+              <a
+                href="#"
+                @click.prevent="downloadAsCsv"
               >Export as CSV</a>
-              <p v-else><loader class="w-3 h-3 text-blue-500" /></p>
+            </p>
+            <p v-else>
+              <loader class="w-3 h-3 text-blue-500" />
             </p>
           </div>
         </div>
-
       </div>
     </div>
     <div class="px-4 pb-4 flex justify-center">
@@ -88,7 +136,8 @@
         :shadow-top-offset="0"
         :hide-scrollbar="true"
       >
-        <open-table v-if="form"
+        <open-table
+          v-if="form"
           ref="table"
           class="max-h-full"
           :columns="properties"
@@ -247,7 +296,7 @@ export default {
           this.recordStore.stopLoading()
           this.fullyLoaded = true
         }
-      }).catch((error) => {
+      }).catch(() => {
         this.recordStore.startLoading()
       })
     },
@@ -268,11 +317,11 @@ export default {
       })
     },
     onUpdateRecord(submission) {
-      this.recordStore.save(submission);
+      this.recordStore.save(submission)
       this.dataChanged()
     },
     onDeleteRecord(submission) {
-      this.recordStore.remove(submission);
+      this.recordStore.remove(submission)
       this.dataChanged()
     },
     downloadAsCsv() {
@@ -283,7 +332,7 @@ export default {
       opnFetch(this.exportUrl, {responseType: "blob"})
         .then(blob => {
           const filename = `${this.form.slug}-${Date.now()}-submissions.csv`
-          let a = document.createElement("a")
+          const a = document.createElement("a")
           document.body.appendChild(a)
           a.style = "display: none"
           const url = window.URL.createObjectURL(blob)
diff --git a/client/components/open/forms/components/FormUrlPrefill.vue b/client/components/open/forms/components/FormUrlPrefill.vue
index 7b9573b94..0d72ac726 100644
--- a/client/components/open/forms/components/FormUrlPrefill.vue
+++ b/client/components/open/forms/components/FormUrlPrefill.vue
@@ -3,13 +3,26 @@
     class="border border-nt-blue-light bg-blue-50 dark:bg-notion-dark-light shadow rounded-md p-4 mb-5 w-full mx-auto mt-4 select-all"
   >
     <div class="flex items-center">
-      <p class="select-all flex-grow break-all" v-html="preFillUrl" />
-      <div class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer" @click="copyToClipboard">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-nt-blue" fill="none" viewBox="0 0 24 24"
-             stroke="currentColor"
+      <p
+        class="select-all flex-grow break-all"
+        v-html="preFillUrl"
+      />
+      <div
+        class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer"
+        @click="copyToClipboard"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 text-nt-blue"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
         >
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
           />
         </svg>
       </div>
@@ -18,50 +31,57 @@
 </template>
 
 <script setup>
-import { defineProps, computed } from 'vue'
-import { default as _has } from 'lodash/has'
+import { defineProps, computed } from "vue"
+import { default as _has } from "lodash/has"
 const { copy } = useClipboard()
 
 const props = defineProps({
   form: {
     type: Object,
-    required: true
+    required: true,
   },
   formData: {
     type: Object,
-    required: true
+    required: true,
   },
   extraQueryParam: {
     type: String,
-    default: ''
-  }
+    default: "",
+  },
 })
 
 const preFillUrl = computed(() => {
   const url = props.form.share_url
   const uriComponents = new URLSearchParams()
-  props.form.properties.filter((property) => {
-    return _has(props.formData, property.id) && props.formData[property.id] !== null
-  }).forEach((property) => {
-    if (Array.isArray(props.formData[property.id])) {
-      props.formData[property.id].forEach((value) => {
-        uriComponents.append(property.id + '[]', value)
-      })
-    } else {
-      uriComponents.append(property.id, props.formData[property.id])
-    }
-  })
+  props.form.properties
+    .filter((property) => {
+      return (
+        _has(props.formData, property.id) &&
+        props.formData[property.id] !== null
+      )
+    })
+    .forEach((property) => {
+      if (Array.isArray(props.formData[property.id])) {
+        props.formData[property.id].forEach((value) => {
+          uriComponents.append(property.id + "[]", value)
+        })
+      } else {
+        uriComponents.append(property.id, props.formData[property.id])
+      }
+    })
 
-  if(uriComponents.toString() !== ""){
-    return (props.extraQueryParam) ? url + '?' + uriComponents + '&' + props.extraQueryParam : url + '?' + uriComponents
-  }else{
-    return (props.extraQueryParam) ? url + '?' + props.extraQueryParam : url
+  if (uriComponents.toString() !== "") {
+    return props.extraQueryParam
+      ? url + "?" + uriComponents + "&" + props.extraQueryParam
+      : url + "?" + uriComponents
+  } else {
+    return props.extraQueryParam ? url + "?" + props.extraQueryParam : url
   }
 })
 
 const copyToClipboard = () => {
   if (import.meta.server) return
   copy(preFillUrl.value)
-  useAlert().success('Copied!')
+  useAlert().success("Copied!")
 }
 </script>
diff --git a/client/components/open/forms/components/FormWorkspaceModal.vue b/client/components/open/forms/components/FormWorkspaceModal.vue
index d4528530c..66d44dfca 100644
--- a/client/components/open/forms/components/FormWorkspaceModal.vue
+++ b/client/components/open/forms/components/FormWorkspaceModal.vue
@@ -1,103 +1,141 @@
 <template>
-    <modal :show="show" @close="emit('close')">
-        <template #icon>
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z" />
-            </svg>
-        </template>
-        <template #title>        
-            Change form workspace
-        </template>
-        <div class="p-4">
-            <div class="flex space-x-4 items-center">
-                <p>Current workspace:</p>
-                <div class="flex items-center cursor group p-2 rounded border">
-                    <div class="rounded-full h-8 8">
-                        <img v-if="isUrl(workspace.icon)"
-                            :src="workspace.icon"
-                            :alt="workspace.name + ' icon'" class="flex-shrink-0 h-8 w-8 rounded-full shadow"
-                        />
-                        <div v-else class="rounded-full pt-2 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow"
-                            v-text="workspace.icon"
-                        />
-                    </div>
-                    <p class="lg:block max-w-10 truncate ml-2 text-gray-800 dark:text-gray-200">
-                        {{ workspace.name }}
-                    </p>
-                </div>
-            </div>
-            <form @submit.prevent="onSubmit">
-                <div class=" my-4">
-                    <select-input name="workspace" class=""
-                            :options="workspacesSelectOptions"
-                            v-model="selectedWorkspace"
-                            :required="true"
-                            label="Select workspace"
-                    />
-                </div>
-                <div class="flex justify-end mt-4 pb-5">
-                    <v-button class="mr-2" :loading="loading">
-                        Change workspace
-                    </v-button>
-                    <v-button color="white" @click.prevent="emit('close')">
-                        Close
-                    </v-button>
-                </div>
-            </form>
+  <modal
+    :show="show"
+    @close="emit('close')"
+  >
+    <template #icon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="w-8 h-8"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z"
+        />
+      </svg>
+    </template>
+    <template #title>
+      Change form workspace
+    </template>
+    <div class="p-4">
+      <div class="flex space-x-4 items-center">
+        <p>Current workspace:</p>
+        <div class="flex items-center cursor group p-2 rounded border">
+          <div class="rounded-full h-8 8">
+            <img
+              v-if="isUrl(workspace.icon)"
+              :src="workspace.icon"
+              :alt="workspace.name + ' icon'"
+              class="flex-shrink-0 h-8 w-8 rounded-full shadow"
+            >
+            <div
+              v-else
+              class="rounded-full pt-2 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow"
+              v-text="workspace.icon"
+            />
+          </div>
+          <p
+            class="lg:block max-w-10 truncate ml-2 text-gray-800 dark:text-gray-200"
+          >
+            {{ workspace.name }}
+          </p>
         </div>
-    </modal>
+      </div>
+      <form @submit.prevent="onSubmit">
+        <div class="my-4">
+          <select-input
+            v-model="selectedWorkspace"
+            name="workspace"
+            class=""
+            :options="workspacesSelectOptions"
+            :required="true"
+            label="Select workspace"
+          />
+        </div>
+        <div class="flex justify-end mt-4 pb-5">
+          <v-button
+            class="mr-2"
+            :loading="loading"
+          >
+            Change workspace
+          </v-button>
+          <v-button
+            color="white"
+            @click.prevent="emit('close')"
+          >
+            Close
+          </v-button>
+        </div>
+      </form>
+    </div>
+  </modal>
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits, computed } from 'vue'
-const emit = defineEmits(['close'])
+import { ref, defineProps, defineEmits, computed } from "vue"
+const emit = defineEmits(["close"])
 const workspacesStore = useWorkspacesStore()
 const formsStore = useFormsStore()
 
-const  selectedWorkspace = ref(null);
+const selectedWorkspace = ref(null)
 const props = defineProps({
-    show: { type: Boolean, required: true },
-    form: { type: Object, required: true },
+  show: { type: Boolean, required: true },
+  form: { type: Object, required: true },
 })
 const workspaces = computed(() => workspacesStore.getAll)
-const workspace = computed(() => workspacesStore.getByKey(props.form?.workspace_id))
+const workspace = computed(() =>
+  workspacesStore.getByKey(props.form?.workspace_id),
+)
 const loading = ref(false)
-const workspacesSelectOptions = computed(()=> workspaces.value.filter((w)=>{
-    return w.id !== workspace.value.id
-}).map(workspace => ({ name: workspace.name, value: workspace.id })))
-
+const workspacesSelectOptions = computed(() =>
+  workspaces.value
+    .filter((w) => {
+      return w.id !== workspace.value.id
+    })
+    .map((workspace) => ({ name: workspace.name, value: workspace.id })),
+)
 
 const onSubmit = () => {
-    const endpoint = '/open/forms/' + props.form.id + '/workspace/' + selectedWorkspace.value
-    if(! selectedWorkspace.value) {
-        useAlert().error('Please select a workspace!') 
-        return;
-    }
-    opnFetch(endpoint, { method: 'POST' }).then(data => {
-        loading.value = false;
-        emit('close')
-        useAlert().success('Form workspace updated successfully.')
-        workspacesStore.setCurrentId(selectedWorkspace.value)
-        formsStore.resetState()
-        formsStore.loadAll(selectedWorkspace.value)
-        const router = useRouter()
-        const route = useRoute()
-        if (route.name !== 'home') {
-            router.push({ name: 'home' })
-        }
-        formsStore.loadAll(selectedWorkspace.value)
-    }).catch((error) => {
-        useAlert().error(error?.data?.message ??   'Something went wrong, please try again!') 
-        loading.value = false;
+  const endpoint =
+    "/open/forms/" + props.form.id + "/workspace/" + selectedWorkspace.value
+  if (!selectedWorkspace.value) {
+    useAlert().error("Please select a workspace!")
+    return
+  }
+  opnFetch(endpoint, { method: "POST" })
+    .then(() => {
+      loading.value = false
+      emit("close")
+      useAlert().success("Form workspace updated successfully.")
+      workspacesStore.setCurrentId(selectedWorkspace.value)
+      formsStore.resetState()
+      formsStore.loadAll(selectedWorkspace.value)
+      const router = useRouter()
+      const route = useRoute()
+      if (route.name !== "home") {
+        router.push({ name: "home" })
+      }
+      formsStore.loadAll(selectedWorkspace.value)
+    })
+    .catch((error) => {
+      useAlert().error(
+        error?.data?.message ?? "Something went wrong, please try again!",
+      )
+      loading.value = false
     })
 }
 
 const isUrl = (str) => {
-    try {
-        new URL(str)
-    } catch (_) {
-        return false
-    }
-    return true
+  try {
+    new URL(str)
+  } catch (_) {
+    return false
+  }
+  return true
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/components/open/forms/components/form-components/AddFormBlock.vue b/client/components/open/forms/components/form-components/AddFormBlock.vue
index 6dfccb4a2..20403bef9 100644
--- a/client/components/open/forms/components/form-components/AddFormBlock.vue
+++ b/client/components/open/forms/components/form-components/AddFormBlock.vue
@@ -2,10 +2,23 @@
   <div>
     <div class="p-4 border-b sticky top-0 z-10 bg-white">
       <div class="flex">
-        <button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
-          <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-              stroke-linejoin="round" />
+        <button
+          class="text-gray-500 hover:text-gray-900 cursor-pointer"
+          @click.prevent="closeSidebar"
+        >
+          <svg
+            class="h-6 w-6"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M18 6L6 18M6 6L18 18"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </button>
         <div class="font-semibold inline ml-2 truncate flex-grow truncate">
@@ -20,14 +33,27 @@
           Input Blocks
         </p>
         <div class="grid grid-cols-2 gap-2">
-          <div v-for="(block, i) in inputBlocks" :key="block.name"
+          <div
+            v-for="(block) in inputBlocks"
+            :key="block.name"
             class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
-            role="button" @click.prevent="addBlock(block.name)">
+            role="button"
+            @click.prevent="addBlock(block.name)"
+          >
             <div class="mx-auto">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
-                stroke="currentColor" stroke-width="2" v-html="block.icon"></svg>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 text-gray-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
+                v-html="block.icon"
+              />
             </div>
-            <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
+            <p
+              class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1"
+            >
               {{ block.title }}
             </p>
           </div>
@@ -38,14 +64,27 @@
           Layout Blocks
         </p>
         <div class="grid grid-cols-2 gap-2">
-          <div v-for="(block, i) in layoutBlocks" :key="block.name"
+          <div
+            v-for="(block) in layoutBlocks"
+            :key="block.name"
             class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
-            role="button" @click.prevent="addBlock(block.name)">
+            role="button"
+            @click.prevent="addBlock(block.name)"
+          >
             <div class="mx-auto">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
-                stroke="currentColor" stroke-width="2" v-html="block.icon"></svg>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 text-gray-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
+                v-html="block.icon"
+              />
             </div>
-            <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
+            <p
+              class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1"
+            >
               {{ block.title }}
             </p>
           </div>
@@ -56,11 +95,11 @@
 </template>
 
 <script>
-import clonedeep from 'clone-deep'
-import { computed } from 'vue'
+import clonedeep from "clone-deep"
+import { computed } from "vue"
 
 export default {
-  name: 'AddFormBlock',
+  name: "AddFormBlock",
   components: {},
   props: {},
 
@@ -70,140 +109,139 @@ export default {
     return {
       form,
       workingFormStore,
-      selectedFieldIndex: computed(() => workingFormStore.selectedFieldIndex)
+      selectedFieldIndex: computed(() => workingFormStore.selectedFieldIndex),
     }
   },
 
-
   data() {
     return {
       blockForm: null,
       inputBlocks: [
         {
-          name: 'text',
-          title: 'Text Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7"/>'
+          name: "text",
+          title: "Text Input",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7"/>',
         },
         {
-          name: 'date',
-          title: 'Date Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>'
+          name: "date",
+          title: "Date Input",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>',
         },
         {
-          name: 'url',
-          title: 'URL Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>'
+          name: "url",
+          title: "URL Input",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>',
         },
         {
-          name: 'phone_number',
-          title: 'Phone Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>'
+          name: "phone_number",
+          title: "Phone Input",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>',
         },
         {
-          name: 'email',
-          title: 'Email Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>'
+          name: "email",
+          title: "Email Input",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>',
         },
         {
-          name: 'checkbox',
-          title: 'Checkbox Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>'
+          name: "checkbox",
+          title: "Checkbox Input",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>',
         },
         {
-          name: 'select',
-          title: 'Select Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>'
+          name: "select",
+          title: "Select Input",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>',
         },
         {
-          name: 'multi_select',
-          title: 'Multi-select Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>'
+          name: "multi_select",
+          title: "Multi-select Input",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4"/>',
         },
         {
-          name: 'number',
-          title: 'Number Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>'
+          name: "number",
+          title: "Number Input",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>',
         },
         {
-          name: 'rating',
-          title: 'Rating Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />'
+          name: "rating",
+          title: "Rating Input",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />',
         },
         {
-          name: 'scale',
-          title: 'Scale Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />'
+          name: "scale",
+          title: "Scale Input",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />',
         },
         {
-          name: 'slider',
-          title: 'Slider Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />'
+          name: "slider",
+          title: "Slider Input",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />',
         },
         {
-          name: 'files',
-          title: 'File Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />'
+          name: "files",
+          title: "File Input",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />',
         },
         {
-          name: 'signature',
-          title: 'Signature Input',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />'
-        }
+          name: "signature",
+          title: "Signature Input",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />',
+        },
       ],
       layoutBlocks: [
         {
-          name: 'nf-text',
-          title: 'Text Block',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h8m-8 6h16" />'
+          name: "nf-text",
+          title: "Text Block",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h8m-8 6h16" />',
         },
         {
-          name: 'nf-page-break',
-          title: 'Page-break Block',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />'
+          name: "nf-page-break",
+          title: "Page-break Block",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />',
         },
         {
-          name: 'nf-divider',
-          title: 'Divider Block',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4" />'
+          name: "nf-divider",
+          title: "Divider Block",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4" />',
         },
         {
-          name: 'nf-image',
-          title: 'Image Block',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />'
+          name: "nf-image",
+          title: "Image Block",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />',
         },
         {
-          name: 'nf-code',
-          title: 'Code Block',
-          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />'
-        }
-      ]
+          name: "nf-code",
+          title: "Code Block",
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />',
+        },
+      ],
     }
   },
 
   computed: {
     defaultBlockNames() {
       return {
-        text: 'Your name',
-        date: 'Date',
-        url: 'Link',
-        phone_number: 'Phone Number',
-        number: 'Number',
-        rating: 'Rating',
-        scale: 'Scale',
-        slider: 'Slider',
-        email: 'Email',
-        checkbox: 'Checkbox',
-        select: 'Select',
-        multi_select: 'Multi Select',
-        files: 'Files',
-        signature: 'Signature',
-        'nf-text': 'Text Block',
-        'nf-page-break': 'Page Break',
-        'nf-divider': 'Divider',
-        'nf-image': 'Image',
-        'nf-code': 'Code Block'
+        text: "Your name",
+        date: "Date",
+        url: "Link",
+        phone_number: "Phone Number",
+        number: "Number",
+        rating: "Rating",
+        scale: "Scale",
+        slider: "Slider",
+        email: "Email",
+        checkbox: "Checkbox",
+        select: "Select",
+        multi_select: "Multi Select",
+        files: "Files",
+        signature: "Signature",
+        "nf-text": "Text Block",
+        "nf-page-break": "Page Break",
+        "nf-divider": "Divider",
+        "nf-image": "Image",
+        "nf-code": "Code Block",
       }
-    }
+    },
   },
 
   watch: {},
@@ -219,7 +257,7 @@ export default {
     reset() {
       this.blockForm = useForm({
         type: null,
-        name: null
+        name: null,
       })
     },
     addBlock(type) {
@@ -228,28 +266,33 @@ export default {
       const newBlock = this.prefillDefault(this.blockForm.data())
       newBlock.id = this.generateUUID()
       newBlock.hidden = false
-      if (['select', 'multi_select'].includes(this.blockForm.type)) {
+      if (["select", "multi_select"].includes(this.blockForm.type)) {
         newBlock[this.blockForm.type] = { options: [] }
       }
-      if (this.blockForm.type === 'rating') {
+      if (this.blockForm.type === "rating") {
         newBlock.rating_max_value = 5
       }
-      if (this.blockForm.type === 'scale') {
+      if (this.blockForm.type === "scale") {
         newBlock.scale_min_value = 1
         newBlock.scale_max_value = 5
         newBlock.scale_step_value = 1
       }
-      if (this.blockForm.type === 'slider') {
+      if (this.blockForm.type === "slider") {
         newBlock.slider_min_value = 0
         newBlock.slider_max_value = 50
         newBlock.slider_step_value = 1
       }
-      newBlock.help_position = 'below_input'
-      if (this.selectedFieldIndex === null || this.selectedFieldIndex === undefined) {
+      newBlock.help_position = "below_input"
+      if (
+        this.selectedFieldIndex === null ||
+        this.selectedFieldIndex === undefined
+      ) {
         const newFields = clonedeep(this.form.properties)
         newFields.push(newBlock)
         this.form.properties = newFields
-        this.workingFormStore.openSettingsForField(this.form.properties.length - 1)
+        this.workingFormStore.openSettingsForField(
+          this.form.properties.length - 1,
+        )
       } else {
         const newFields = clonedeep(this.form.properties)
         newFields.splice(this.selectedFieldIndex + 1, 0, newBlock)
@@ -259,33 +302,43 @@ export default {
       this.reset()
     },
     generateUUID() {
-      let d = new Date().getTime()// Timestamp
-      let d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now() * 1000)) || 0// Time in microseconds since page-load or 0 if unsupported
-      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        let r = Math.random() * 16// random number between 0 and 16
-        if (d > 0) { // Use timestamp until depleted
-          r = (d + r) % 16 | 0
-          d = Math.floor(d / 16)
-        } else { // Use microseconds since page-load if supported
-          r = (d2 + r) % 16 | 0
-          d2 = Math.floor(d2 / 16)
-        }
-        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
-      })
+      let d = new Date().getTime() // Timestamp
+      let d2 =
+        (typeof performance !== "undefined" &&
+          performance.now &&
+          performance.now() * 1000) ||
+        0 // Time in microseconds since page-load or 0 if unsupported
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function (c) {
+          let r = Math.random() * 16 // random number between 0 and 16
+          if (d > 0) {
+            // Use timestamp until depleted
+            r = (d + r) % 16 | 0
+            d = Math.floor(d / 16)
+          } else {
+            // Use microseconds since page-load if supported
+            r = (d2 + r) % 16 | 0
+            d2 = Math.floor(d2 / 16)
+          }
+          return (c === "x" ? r : (r & 0x3) | 0x8).toString(16)
+        },
+      )
     },
     prefillDefault(data) {
-      if (data.type === 'nf-text') {
-        data.content = '<p>This is a text block.</p>'
-      } else if (data.type === 'nf-page-break') {
-        data.next_btn_text = 'Next'
-        data.previous_btn_text = 'Previous'
-      } else if (data.type === 'nf-code') {
-        data.content = '<div class="text-blue-500 italic">This is a code block.</div>'
-      } else if (data.type === 'signature') {
-        data.help = 'Draw your signature above'
+      if (data.type === "nf-text") {
+        data.content = "<p>This is a text block.</p>"
+      } else if (data.type === "nf-page-break") {
+        data.next_btn_text = "Next"
+        data.previous_btn_text = "Previous"
+      } else if (data.type === "nf-code") {
+        data.content =
+          '<div class="text-blue-500 italic">This is a code block.</div>'
+      } else if (data.type === "signature") {
+        data.help = "Draw your signature above"
       }
       return data
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/open/forms/components/form-components/FormAboutSubmission.vue b/client/components/open/forms/components/form-components/FormAboutSubmission.vue
index 829974f8c..f4f594550 100644
--- a/client/components/open/forms/components/form-components/FormAboutSubmission.vue
+++ b/client/components/open/forms/components/form-components/FormAboutSubmission.vue
@@ -1,55 +1,91 @@
 <template>
-  <editor-options-panel name="About Submissions" :already-opened="true">
+  <editor-options-panel
+    name="About Submissions"
+    :already-opened="true"
+  >
     <template #icon>
-      <svg class="h-5 w-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        class="h-5 w-5"
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M4.83333 6.08333H9M4.83333 9H11.5M4.83333 14V15.9463C4.83333 16.3903 4.83333 16.6123 4.92436 16.7263C5.00352 16.8255 5.12356 16.8832 5.25045 16.8831C5.39636 16.8829 5.56973 16.7442 5.91646 16.4668L7.90434 14.8765C8.31043 14.5517 8.51347 14.3892 8.73957 14.2737C8.94017 14.1712 9.15369 14.0963 9.37435 14.051C9.62306 14 9.88308 14 10.4031 14H12.5C13.9001 14 14.6002 14 15.135 13.7275C15.6054 13.4878 15.9878 13.1054 16.2275 12.635C16.5 12.1002 16.5 11.4001 16.5 10V5.5C16.5 4.09987 16.5 3.3998 16.2275 2.86502C15.9878 2.39462 15.6054 2.01217 15.135 1.77248C14.6002 1.5 13.9001 1.5 12.5 1.5H5.5C4.09987 1.5 3.3998 1.5 2.86502 1.77248C2.39462 2.01217 2.01217 2.39462 1.77248 2.86502C1.5 3.3998 1.5 4.09987 1.5 5.5V10.6667C1.5 11.4416 1.5 11.8291 1.58519 12.147C1.81635 13.0098 2.49022 13.6836 3.35295 13.9148C3.67087 14 4.05836 14 4.83333 14Z"
-          stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+          stroke="currentColor"
+          stroke-width="1.67"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
       </svg>
     </template>
 
-    <text-input name="submit_button_text" class="mt-4"
-                :form="form"
-                label="Text of Submit Button"
-                :required="true"
+    <text-input
+      name="submit_button_text"
+      class="mt-4"
+      :form="form"
+      label="Text of Submit Button"
+      :required="true"
     />
 
-    <toggle-switch-input name="editable_submissions" :form="form" class="mt-4"
-                         help="Gives user a unique url to update their submission"
+    <toggle-switch-input
+      name="editable_submissions"
+      :form="form"
+      class="mt-4"
+      help="Gives user a unique url to update their submission"
     >
       <template #label>
         Editable submissions
         <pro-tag class="ml-1" />
       </template>
     </toggle-switch-input>
-    <text-input v-if="form.editable_submissions" name="editable_submissions_button_text"
-                :form="form"
-                label="Text of editable submissions button"
-                :required="true"
+    <text-input
+      v-if="form.editable_submissions"
+      name="editable_submissions_button_text"
+      :form="form"
+      label="Text of editable submissions button"
+      :required="true"
     />
 
-    <flat-select-input :form="submissionOptions" name="databaseAction" label="Database Submission Action"
-                       :options="[
-                         {name:'Create new record (default)', value:'create'},
-                         {name:'Update Record (or create if no match)', value:'update'}
-                       ]" :required="true" help="Create a new record or update an existing one"
+    <flat-select-input
+      :form="submissionOptions"
+      name="databaseAction"
+      label="Database Submission Action"
+      :options="[
+        { name: 'Create new record (default)', value: 'create' },
+        { name: 'Update Record (or create if no match)', value: 'update' },
+      ]"
+      :required="true"
+      help="Create a new record or update an existing one"
     >
-      <template #selected="{option,optionName}">
+      <template #selected="{ option, optionName }">
         <div class="flex items-center truncate mr-6">
           {{ optionName }}
-          <pro-tag v-if="option === 'update'" class="ml-2" />
+          <pro-tag
+            v-if="option === 'update'"
+            class="ml-2"
+          />
         </div>
       </template>
-      <template #option="{option, selected}">
+      <template #option="{ option, selected }">
         <span class="flex hover:text-white">
           <p class="flex-grow hover:text-white">
-            {{ option.name }} <template v-if="option.value === 'update'"><pro-tag /></template>
+            {{ option.name }}
+            <template v-if="option.value === 'update'"><pro-tag /></template>
           </p>
-          <span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-4 dark:text-white">
-            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-              <path fill-rule="evenodd"
-                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                    clip-rule="evenodd"
+          <span
+            v-if="selected"
+            class="absolute inset-y-0 right-0 flex items-center pr-4 dark:text-white"
+          >
+            <svg
+              class="h-5 w-5"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
               />
             </svg>
           </span>
@@ -58,45 +94,77 @@
     </flat-select-input>
 
     <v-transition>
-      <div v-if="submissionOptions.databaseAction == 'update' && filterableFields.length">
-        <select-input v-if="filterableFields.length" :form="form" name="database_fields_update"
-                      label="Properties to check on update" :options="filterableFields" :required="true"
-                      :multiple="true"
+      <div
+        v-if="
+          submissionOptions.databaseAction == 'update' &&
+            filterableFields.length
+        "
+      >
+        <select-input
+          v-if="filterableFields.length"
+          :form="form"
+          name="database_fields_update"
+          label="Properties to check on update"
+          :options="filterableFields"
+          :required="true"
+          :multiple="true"
         />
         <div class="-mt-3 mb-3 text-gray-400 dark:text-gray-500">
-          <small>If the submission has the same value(s) as a previous one for the selected
-            column(s), we will update it, instead of creating a new one.
-            <a href="#"
-               @click.prevent="crisp.openHelpdeskArticle('how-to-update-a-page-on-form-submission-1t1jwmn')"
-            >More
-              info here.</a>
+          <small>If the submission has the same value(s) as a previous one for the
+            selected column(s), we will update it, instead of creating a new
+            one.
+            <a
+              href="#"
+              @click.prevent="
+                crisp.openHelpdeskArticle(
+                  'how-to-update-a-page-on-form-submission-1t1jwmn',
+                )
+              "
+            >More info here.</a>
           </small>
         </div>
       </div>
     </v-transition>
 
-    <select-input :form="submissionOptions" name="submissionMode" label="Post Submission Action"
-                  :options="[
-                    {name:'Show Success page', value:'default'},
-                    {name:'Redirect', value:'redirect'}
-                  ]" :required="true" help="Show a message, or redirect to a URL"
+    <select-input
+      :form="submissionOptions"
+      name="submissionMode"
+      label="Post Submission Action"
+      :options="[
+        { name: 'Show Success page', value: 'default' },
+        { name: 'Redirect', value: 'redirect' },
+      ]"
+      :required="true"
+      help="Show a message, or redirect to a URL"
     >
-      <template #selected="{option,optionName}">
+      <template #selected="{ option, optionName }">
         <div class="flex items-center truncate mr-6">
           {{ optionName }}
-          <pro-tag v-if="option === 'redirect'" class="ml-2" />
+          <pro-tag
+            v-if="option === 'redirect'"
+            class="ml-2"
+          />
         </div>
       </template>
-      <template #option="{option, selected}">
+      <template #option="{ option, selected }">
         <span class="flex hover:text-white">
           <p class="flex-grow hover:text-white">
-            {{ option.name }} <template v-if="option.value === 'redirect'"><pro-tag /></template>
+            {{ option.name }}
+            <template v-if="option.value === 'redirect'"><pro-tag /></template>
           </p>
-          <span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-4">
-            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-              <path fill-rule="evenodd"
-                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                    clip-rule="evenodd"
+          <span
+            v-if="selected"
+            class="absolute inset-y-0 right-0 flex items-center pr-4"
+          >
+            <svg
+              class="h-5 w-5"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
               />
             </svg>
           </span>
@@ -104,105 +172,111 @@
       </template>
     </select-input>
     <template v-if="submissionOptions.submissionMode === 'redirect'">
-      <text-input name="redirect_url"
-                  :form="form"
-                  label="Redirect URL"
-                  :required="true" help="On submit, redirects to that URL"
+      <text-input
+        name="redirect_url"
+        :form="form"
+        label="Redirect URL"
+        :required="true"
+        help="On submit, redirects to that URL"
       />
     </template>
     <template v-else>
-      <toggle-switch-input name="re_fillable" :form="form" class="mt-4"
-                           label="Allow users to fill the form again"
+      <toggle-switch-input
+        name="re_fillable"
+        :form="form"
+        class="mt-4"
+        label="Allow users to fill the form again"
       />
-      <text-input v-if="form.re_fillable" name="re_fill_button_text"
-                  :form="form"
-                  label="Text of re-start button"
-                  :required="true"
+      <text-input
+        v-if="form.re_fillable"
+        name="re_fill_button_text"
+        :form="form"
+        label="Text of re-start button"
+        :required="true"
       />
-      <rich-text-area-input name="submitted_text"
-                            :form="form"
-                            label="Text After Submission"
-                            :required="false"
+      <rich-text-area-input
+        name="submitted_text"
+        :form="form"
+        label="Text After Submission"
+        :required="false"
       />
     </template>
   </editor-options-panel>
 </template>
 
 <script>
-import { useWorkingFormStore } from '../../../../../stores/working_form'
-import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
-import ProTag from '~/components/global/ProTag.vue'
-import VTransition from '~/components/global/transitions/VTransition.vue'
+import { useWorkingFormStore } from "../../../../../stores/working_form"
+import EditorOptionsPanel from "../../../editors/EditorOptionsPanel.vue"
+import ProTag from "~/components/global/ProTag.vue"
+import VTransition from "~/components/global/transitions/VTransition.vue"
 
 export default {
-  components: {EditorOptionsPanel, ProTag, VTransition},
+  components: { EditorOptionsPanel, ProTag, VTransition },
   props: {},
-  setup () {
+  setup() {
     const workingFormStore = useWorkingFormStore()
-    const {content: form} = storeToRefs(workingFormStore)
+    const { content: form } = storeToRefs(workingFormStore)
     return {
       form,
       workingFormStore,
-      crisp: useCrisp()
+      crisp: useCrisp(),
     }
   },
-  data () {
+  data() {
     return {
-      submissionOptions: {}
+      submissionOptions: {},
     }
   },
 
   computed: {
-    form: {
-      get () {
-        return this.workingFormStore.content
-      },
-      /* We add a setter */
-      set (value) {
-        this.workingFormStore.set(value)
-      }
-    },
     /**
      * Used for the update record on submission. Lists all visible fields on which you can filter records to update
      * on submission instead of creating
      */
-    filterableFields () {
-      if (this.submissionOptions.databaseAction !== 'update') return []
-      return this.form.properties.filter((field) => {
-        return !field.hidden && !['files', 'signature', 'multi_select'].includes(field.type)
-      }).map((field) => {
-        return {
-          name: field.name,
-          value: field.id
-        }
-      })
-    }
+    filterableFields() {
+      if (this.submissionOptions.databaseAction !== "update") return []
+      return this.form.properties
+        .filter((field) => {
+          return (
+            !field.hidden &&
+            !["files", "signature", "multi_select"].includes(field.type)
+          )
+        })
+        .map((field) => {
+          return {
+            name: field.name,
+            value: field.id,
+          }
+        })
+    },
   },
 
   watch: {
     form: {
-      handler () {
+      handler() {
         if (this.form) {
           this.submissionOptions = {
-            submissionMode: this.form.redirect_url ? 'redirect' : 'default',
-            databaseAction: this.form.database_fields_update ? 'update' : 'create'
+            submissionMode: this.form.redirect_url ? "redirect" : "default",
+            databaseAction: this.form.database_fields_update
+              ? "update"
+              : "create",
           }
         }
       },
-      deep: true
+      deep: true,
     },
     submissionOptions: {
       deep: true,
       handler: function (val) {
-        if (val.submissionMode === 'default') {
+        if (val.submissionMode === "default") {
           this.form.redirect_url = null
         }
 
-        if (val.databaseAction === 'create') {
+        if (val.databaseAction === "create") {
           this.form.database_fields_update = null
         }
-      }
-    }
-  }
+      },
+    },
+  },
 }
 </script>
diff --git a/client/components/open/forms/components/form-components/FormAccess.vue b/client/components/open/forms/components/form-components/FormAccess.vue
index 356fd73c2..9e05e96ed 100644
--- a/client/components/open/forms/components/form-components/FormAccess.vue
+++ b/client/components/open/forms/components/form-components/FormAccess.vue
@@ -1,73 +1,101 @@
 <template>
-  <editor-options-panel name="Form Access" :already-opened="false">
+  <editor-options-panel
+    name="Form Access"
+    :already-opened="false"
+  >
     <template #icon>
-      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round"
-              d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
+      <svg
+        class="h-5 w-5"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
         />
       </svg>
     </template>
-    <text-input name="password" :form="form" class="mt-4"
-                label="Form Password" help="Leave empty to disable password"
+    <text-input
+      name="password"
+      :form="form"
+      class="mt-4"
+      label="Form Password"
+      help="Leave empty to disable password"
     />
-    <date-input :with-time="true" name="closes_at" class="mt-4"
-                :form="form"
-                label="Close form on a scheduled date"
-                help="Leave empty to keep the form open"
-                :required="false"
+    <date-input
+      :with-time="true"
+      name="closes_at"
+      class="mt-4"
+      :form="form"
+      label="Close form on a scheduled date"
+      help="Leave empty to keep the form open"
+      :required="false"
     />
-    <rich-text-area-input v-if="form.closes_at || form.visibility=='closed'" name="closed_text"
-                          :form="form" class="mt-4"
-                          label="Closed form text"
-                          help="This message will be shown when the form will be closed"
-                          :required="false"
+    <rich-text-area-input
+      v-if="form.closes_at || form.visibility == 'closed'"
+      name="closed_text"
+      :form="form"
+      class="mt-4"
+      label="Closed form text"
+      help="This message will be shown when the form will be closed"
+      :required="false"
     />
-    <text-input name="max_submissions_count" native-type="number" :min="1" :form="form"
-                label="Limit number of submissions" placeholder="Max submissions" class="mt-4"
-                help="Leave empty for unlimited submissions"
-                :required="false"
+    <text-input
+      name="max_submissions_count"
+      native-type="number"
+      :min="1"
+      :form="form"
+      label="Limit number of submissions"
+      placeholder="Max submissions"
+      class="mt-4"
+      help="Leave empty for unlimited submissions"
+      :required="false"
     />
-    <rich-text-area-input v-if="form.max_submissions_count && form.max_submissions_count > 0"
-                          name="max_submissions_reached_text" class="mt-4"
-                          :form="form"
-                          label="Max Submissions reached text"
-                          help="This message will be shown when the form will have the maximum number of submissions"
-                          :required="false"
+    <rich-text-area-input
+      v-if="form.max_submissions_count && form.max_submissions_count > 0"
+      name="max_submissions_reached_text"
+      class="mt-4"
+      :form="form"
+      label="Max Submissions reached text"
+      help="This message will be shown when the form will have the maximum number of submissions"
+      :required="false"
     />
   </editor-options-panel>
 </template>
 
 <script>
-import { useWorkingFormStore } from '../../../../../stores/working_form'
-import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
+import { useWorkingFormStore } from "../../../../../stores/working_form"
+import EditorOptionsPanel from "../../../editors/EditorOptionsPanel.vue"
 
 export default {
   components: { EditorOptionsPanel },
   props: {},
-  setup () {
+  setup() {
     const workingFormStore = useWorkingFormStore()
     return {
-      workingFormStore
+      workingFormStore,
     }
   },
-  data () {
-    return {
-    }
+  data() {
+    return {}
   },
   computed: {
     form: {
-      get () {
+      get() {
         return this.workingFormStore.content
       },
       /* We add a setter */
-      set (value) {
+      set(value) {
         this.workingFormStore.set(value)
-      }
-    }
+      },
+    },
   },
   watch: {},
-  mounted () {
-  },
-  methods: {}
+  mounted() {},
+  methods: {},
 }
 </script>
diff --git a/client/components/open/forms/components/form-components/FormCustomCode.vue b/client/components/open/forms/components/form-components/FormCustomCode.vue
index ad9bad725..669e1fe92 100644
--- a/client/components/open/forms/components/form-components/FormCustomCode.vue
+++ b/client/components/open/forms/components/form-components/FormCustomCode.vue
@@ -1,51 +1,58 @@
 <template>
-  <editor-options-panel name="Custom Code" :already-opened="false" :has-pro-tag="true">
+  <editor-options-panel
+    name="Custom Code"
+    :already-opened="false"
+    :has-pro-tag="true"
+  >
     <template #icon>
-      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        class="h-5 w-5"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M14 17.5L16.5 15L14 12.5M10 12.5L7.5 15L10 17.5M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z"
-          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
       </svg>
     </template>
     <p class="mt-4">
-      The code will be injected in the <span class="font-semibold">head</span> section of your form page.
+      The code will be injected in the
+      <span class="font-semibold">head</span> section of your form page.
     </p>
-    <code-input name="custom_code" class="mt-4"
-                :form="form" help="Custom code cannot be previewed in our editor. Please test your code using
+    <code-input
+      name="custom_code"
+      class="mt-4"
+      :form="form"
+      help="Custom code cannot be previewed in our editor. Please test your code using
                      your actual form page (save changes beforehand)."
-                label="Custom Code"
+      label="Custom Code"
     />
   </editor-options-panel>
 </template>
 
 <script>
-import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
+import EditorOptionsPanel from "../../../editors/EditorOptionsPanel.vue"
 
 export default {
-  components: {EditorOptionsPanel},
+  components: { EditorOptionsPanel },
   props: {},
   setup() {
     const workingFormStore = useWorkingFormStore()
-    const {content: form} = storeToRefs(workingFormStore)
+    const { content: form } = storeToRefs(workingFormStore)
     return {
       form,
-      workingFormStore
+      workingFormStore,
     }
   },
   data() {
     return {}
   },
 
-  computed: {
-    form: {
-      get() {
-        return this.workingFormStore.content
-      },
-      /* We add a setter */
-      set(value) {
-        this.workingFormStore.set(value)
-      }
-    }
-  },
+  computed: {},
 }
 </script>
diff --git a/client/components/open/forms/components/form-components/FormCustomSeo.vue b/client/components/open/forms/components/form-components/FormCustomSeo.vue
index 12a460b6d..b1c9bd719 100644
--- a/client/components/open/forms/components/form-components/FormCustomSeo.vue
+++ b/client/components/open/forms/components/form-components/FormCustomSeo.vue
@@ -1,44 +1,75 @@
 <template>
-  <editor-options-panel name="Link Settings - SEO" :already-opened="false" :has-pro-tag="true">
+  <editor-options-panel
+    name="Link Settings - SEO"
+    :already-opened="false"
+    :has-pro-tag="true"
+  >
     <template #icon>
-      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-           stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round"
-              d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+      <svg
+        class="h-5 w-5"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
         />
       </svg>
     </template>
     <p class="mt-4 text-gray-500 text-sm">
-      Customize the link, images and text that appear when you share your form on other sites (Open Graph).
+      Customize the link, images and text that appear when you share your form
+      on other sites (Open Graph).
     </p>
-    <select-input v-if="customDomainAllowed" v-model="form.custom_domain" :disabled="customDomainOptions.length <= 0"
-                  :options="customDomainOptions" name="type"
-                  class="mt-4" label="Form Domain" placeholder="yourdomain.com"
+    <select-input
+      v-if="customDomainAllowed"
+      v-model="form.custom_domain"
+      :disabled="customDomainOptions.length <= 0"
+      :options="customDomainOptions"
+      name="type"
+      class="mt-4"
+      label="Form Domain"
+      placeholder="yourdomain.com"
     />
-    <text-input v-model="form.seo_meta.page_title" name="page_title" class="mt-4"
-                label="Page Title" help="Under or approximately 60 characters"
+    <text-input
+      v-model="form.seo_meta.page_title"
+      name="page_title"
+      class="mt-4"
+      label="Page Title"
+      help="Under or approximately 60 characters"
     />
-    <text-area-input v-model="form.seo_meta.page_description" name="page_description" class="mt-4"
-                     label="Page Description" help="Between 150 and 160 characters"
+    <text-area-input
+      v-model="form.seo_meta.page_description"
+      name="page_description"
+      class="mt-4"
+      label="Page Description"
+      help="Between 150 and 160 characters"
     />
-    <image-input v-model="form.seo_meta.page_thumbnail" name="page_thumbnail" class="mt-4"
-                 label="Page Thumbnail Image" help="Also know as og:image - 1200 X 630"
+    <image-input
+      v-model="form.seo_meta.page_thumbnail"
+      name="page_thumbnail"
+      class="mt-4"
+      label="Page Thumbnail Image"
+      help="Also know as og:image - 1200 X 630"
     />
   </editor-options-panel>
 </template>
 
 <script>
-import {useWorkingFormStore} from '../../../../../stores/working_form'
-import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
+import { useWorkingFormStore } from "../../../../../stores/working_form"
+import EditorOptionsPanel from "../../../editors/EditorOptionsPanel.vue"
 
 export default {
-  components: {EditorOptionsPanel},
+  components: { EditorOptionsPanel },
   props: {},
   setup() {
     const workingFormStore = useWorkingFormStore()
     return {
       workspacesStore: useWorkspacesStore(),
-      workingFormStore
+      workingFormStore,
     }
   },
   data() {
@@ -52,31 +83,33 @@ export default {
       /* We add a setter */
       set(value) {
         this.workingFormStore.set(value)
-      }
+      },
     },
     workspace() {
       return this.workspacesStore.getCurrent
     },
     customDomainOptions() {
-      return this.workspace.custom_domains ? this.workspace.custom_domains.map((domain) => {
-        return {
-          name: domain,
-          value: domain
-        }
-      }) : []
+      return this.workspace.custom_domains
+        ? this.workspace.custom_domains.map((domain) => {
+            return {
+              name: domain,
+              value: domain,
+            }
+          })
+        : []
     },
     customDomainAllowed() {
       return useRuntimeConfig().public.customDomainsEnabled
-    }
+    },
   },
   watch: {},
   mounted() {
-    ['page_title', 'page_description', 'page_thumbnail'].forEach((keyname) => {
+    ["page_title", "page_description", "page_thumbnail"].forEach((keyname) => {
       if (this.form.seo_meta[keyname] === undefined) {
         this.form.seo_meta[keyname] = null
       }
     })
   },
-  methods: {}
+  methods: {},
 }
 </script>
diff --git a/client/components/open/forms/components/form-components/FormCustomization.vue b/client/components/open/forms/components/form-components/FormCustomization.vue
index f193cd130..77f76a580 100644
--- a/client/components/open/forms/components/form-components/FormCustomization.vue
+++ b/client/components/open/forms/components/form-components/FormCustomization.vue
@@ -1,93 +1,166 @@
 <template>
-  <editor-options-panel name="Customization" :already-opened="true">
+  <editor-options-panel
+    name="Customization"
+    :already-opened="true"
+  >
     <template #icon>
-      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M1.66667 9.99984C1.66667 14.6022 5.39763 18.3332 10 18.3332C11.3807 18.3332 12.5 17.2139 12.5 15.8332V15.4165C12.5 15.0295 12.5 14.836 12.5214 14.6735C12.6691 13.5517 13.5519 12.6689 14.6737 12.5212C14.8361 12.4998 15.0297 12.4998 15.4167 12.4998H15.8333C17.214 12.4998 18.3333 11.3805 18.3333 9.99984C18.3333 5.39746 14.6024 1.6665 10 1.6665C5.39763 1.6665 1.66667 5.39746 1.66667 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M5.83333 10.8332C6.29357 10.8332 6.66667 10.4601 6.66667 9.99984C6.66667 9.5396 6.29357 9.1665 5.83333 9.1665C5.3731 9.1665 5 9.5396 5 9.99984C5 10.4601 5.3731 10.8332 5.83333 10.8332Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M13.3333 7.49984C13.7936 7.49984 14.1667 7.12674 14.1667 6.6665C14.1667 6.20627 13.7936 5.83317 13.3333 5.83317C12.8731 5.83317 12.5 6.20627 12.5 6.6665C12.5 7.12674 12.8731 7.49984 13.3333 7.49984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M8.33333 6.6665C8.79357 6.6665 9.16667 6.29341 9.16667 5.83317C9.16667 5.37293 8.79357 4.99984 8.33333 4.99984C7.8731 4.99984 7.5 5.37293 7.5 5.83317C7.5 6.29341 7.8731 6.6665 8.33333 6.6665Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+      <svg
+        class="h-5 w-5"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M1.66667 9.99984C1.66667 14.6022 5.39763 18.3332 10 18.3332C11.3807 18.3332 12.5 17.2139 12.5 15.8332V15.4165C12.5 15.0295 12.5 14.836 12.5214 14.6735C12.6691 13.5517 13.5519 12.6689 14.6737 12.5212C14.8361 12.4998 15.0297 12.4998 15.4167 12.4998H15.8333C17.214 12.4998 18.3333 11.3805 18.3333 9.99984C18.3333 5.39746 14.6024 1.6665 10 1.6665C5.39763 1.6665 1.66667 5.39746 1.66667 9.99984Z"
+          stroke="currentColor"
+          stroke-width="1.67"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M5.83333 10.8332C6.29357 10.8332 6.66667 10.4601 6.66667 9.99984C6.66667 9.5396 6.29357 9.1665 5.83333 9.1665C5.3731 9.1665 5 9.5396 5 9.99984C5 10.4601 5.3731 10.8332 5.83333 10.8332Z"
+          stroke="currentColor"
+          stroke-width="1.67"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M13.3333 7.49984C13.7936 7.49984 14.1667 7.12674 14.1667 6.6665C14.1667 6.20627 13.7936 5.83317 13.3333 5.83317C12.8731 5.83317 12.5 6.20627 12.5 6.6665C12.5 7.12674 12.8731 7.49984 13.3333 7.49984Z"
+          stroke="currentColor"
+          stroke-width="1.67"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M8.33333 6.6665C8.79357 6.6665 9.16667 6.29341 9.16667 5.83317C9.16667 5.37293 8.79357 4.99984 8.33333 4.99984C7.8731 4.99984 7.5 5.37293 7.5 5.83317C7.5 6.29341 7.8731 6.6665 8.33333 6.6665Z"
+          stroke="currentColor"
+          stroke-width="1.67"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
       </svg>
     </template>
 
-    <select-input name="theme" class="mt-4"
-                  :options="[
-                    {name:'Default',value:'default'},
-                    {name:'Simple',value:'simple'},
-                    {name:'Notion',value:'notion'},
-                  ]"
-                  :form="form" label="Form Theme"
+    <select-input
+      name="theme"
+      class="mt-4"
+      :options="[
+        { name: 'Default', value: 'default' },
+        { name: 'Simple', value: 'simple' },
+        { name: 'Notion', value: 'notion' },
+      ]"
+      :form="form"
+      label="Form Theme"
     />
 
-    <select-input name="dark_mode" class="mt-4"
-                  help="To see changes, save your form and open it"
-                  :options="[
-                    {name:'Auto - use Device System Preferences',value:'auto'},
-                    {name:'Light Mode',value:'light'},
-                    {name:'Dark Mode',value:'dark'}
-                  ]"
-                  :form="form" label="Dark Mode"
+    <select-input
+      name="dark_mode"
+      class="mt-4"
+      help="To see changes, save your form and open it"
+      :options="[
+        { name: 'Auto - use Device System Preferences', value: 'auto' },
+        { name: 'Light Mode', value: 'light' },
+        { name: 'Dark Mode', value: 'dark' },
+      ]"
+      :form="form"
+      label="Dark Mode"
     />
 
-    <select-input name="width" class="mt-4"
-                  :options="[
-                    {name:'Centered',value:'centered'},
-                    {name:'Full Width',value:'full'},
-                  ]"
-                  :form="form" label="Form Width" help="Useful when embedding your form"
+    <select-input
+      name="width"
+      class="mt-4"
+      :options="[
+        { name: 'Centered', value: 'centered' },
+        { name: 'Full Width', value: 'full' },
+      ]"
+      :form="form"
+      label="Form Width"
+      help="Useful when embedding your form"
     />
 
-    <image-input name="cover_picture" class="mt-4"
-                 :form="form" label="Cover Picture" help="Not visible when form is embedded"
-                 :required="false"
+    <image-input
+      name="cover_picture"
+      class="mt-4"
+      :form="form"
+      label="Cover Picture"
+      help="Not visible when form is embedded"
+      :required="false"
     />
 
-    <image-input name="logo_picture" class="mt-4"
-                 :form="form" label="Logo" help="Not visible when form is embedded"
-                 :required="false"
+    <image-input
+      name="logo_picture"
+      class="mt-4"
+      :form="form"
+      label="Logo"
+      help="Not visible when form is embedded"
+      :required="false"
     />
 
-    <color-input name="color" class="mt-4"
-                 :form="form"
-                 label="Color (for buttons & inputs border)"
+    <color-input
+      name="color"
+      class="mt-4"
+      :form="form"
+      label="Color (for buttons & inputs border)"
     />
-    <toggle-switch-input name="hide_title" :form="form" class="mt-4"
-                         label="Hide Title"
+    <toggle-switch-input
+      name="hide_title"
+      :form="form"
+      class="mt-4"
+      label="Hide Title"
     />
-    <toggle-switch-input name="no_branding" :form="form" class="mt-4">
+    <toggle-switch-input
+      name="no_branding"
+      :form="form"
+      class="mt-4"
+    >
       <template #label>
         Remove OpnForm Branding
         <pro-tag class="ml-1" />
       </template>
     </toggle-switch-input>
-    <toggle-switch-input name="show_progress_bar" :form="form" class="mt-4"
-                         label="Show progress bar"
+    <toggle-switch-input
+      name="show_progress_bar"
+      :form="form"
+      class="mt-4"
+      label="Show progress bar"
     />
-    <toggle-switch-input name="uppercase_labels" :form="form" class="mt-4"
-                         label="Uppercase Input Labels"
+    <toggle-switch-input
+      name="uppercase_labels"
+      :form="form"
+      class="mt-4"
+      label="Uppercase Input Labels"
     />
-    <toggle-switch-input name="transparent_background" :form="form" class="mt-4"
-                         label="Transparent Background" help="Only applies when form is embedded"
+    <toggle-switch-input
+      name="transparent_background"
+      :form="form"
+      class="mt-4"
+      label="Transparent Background"
+      help="Only applies when form is embedded"
     />
-    <toggle-switch-input name="confetti_on_submission" :form="form" class="mt-4"
-                         label="Confetti on successful submisison"
-                         @update:model-value="onChangeConfettiOnSubmission"
+    <toggle-switch-input
+      name="confetti_on_submission"
+      :form="form"
+      class="mt-4"
+      label="Confetti on successful submisison"
+      @update:model-value="onChangeConfettiOnSubmission"
     />
-    <toggle-switch-input name="auto_save" :form="form"
-                         label="Auto save form response"
-                         help="Will save data in browser, if user not submit the form then next time will auto prefill last entered data"
+    <toggle-switch-input
+      name="auto_save"
+      :form="form"
+      label="Auto save form response"
+      help="Will save data in browser, if user not submit the form then next time will auto prefill last entered data"
     />
   </editor-options-panel>
 </template>
 
 <script setup>
-import { useWorkingFormStore } from '../../../../../stores/working_form'
-import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
-import ProTag from '~/components/global/ProTag.vue'
+import { useWorkingFormStore } from "../../../../../stores/working_form"
+import EditorOptionsPanel from "../../../editors/EditorOptionsPanel.vue"
+import ProTag from "~/components/global/ProTag.vue"
 
 const workingFormStore = useWorkingFormStore()
 const form = storeToRefs(workingFormStore).content
-const isMounted =  ref(false)
-const crisp = useCrisp()
+const isMounted = ref(false)
 const confetti = useConfetti()
 
 onMounted(() => {
diff --git a/client/components/open/forms/components/form-components/FormEditorPreview.vue b/client/components/open/forms/components/form-components/FormEditorPreview.vue
index 277928e61..c1ddb7e46 100644
--- a/client/components/open/forms/components/form-components/FormEditorPreview.vue
+++ b/client/components/open/forms/components/form-components/FormEditorPreview.vue
@@ -1,56 +1,78 @@
 <template>
   <!--   Form Preview (desktop only)   -->
-  <div ref="parent"
+  <div
+    ref="parent"
     class="bg-gray-50 dark:bg-notion-dark-light hidden md:flex flex-grow p-5 flex-col items-center overflow-y-scroll"
   >
     <div class="border rounded-lg bg-white dark:bg-notion-dark w-full block transition-all max-w-5xl">
-      <transition enter-active-class="linear duration-100 overflow-hidden"
-                  enter-from-class="max-h-0"
-                  enter-to-class="max-h-56"
-                  leave-active-class="linear duration-100 overflow-hidden"
-                  leave-from-class="max-h-56"
-                  leave-to-class="max-h-0"
+      <transition
+        enter-active-class="linear duration-100 overflow-hidden"
+        enter-from-class="max-h-0"
+        enter-to-class="max-h-56"
+        leave-active-class="linear duration-100 overflow-hidden"
+        leave-from-class="max-h-56"
+        leave-to-class="max-h-0"
       >
         <div v-if="(form.logo_picture || form.cover_picture)">
           <div v-if="form.cover_picture">
-            <div id="cover-picture"
-                 class="max-h-56 rounded-t-lg w-full overflow-hidden flex items-center justify-center"
+            <div
+              id="cover-picture"
+              class="max-h-56 rounded-t-lg w-full overflow-hidden flex items-center justify-center"
             >
-              <img alt="Cover Picture" :src="coverPictureSrc(form.cover_picture)" class="w-full"/>
+              <img
+                alt="Cover Picture"
+                :src="coverPictureSrc(form.cover_picture)"
+                class="w-full"
+              >
             </div>
           </div>
-          <div v-if="form.logo_picture" class="w-full mx-auto p-5 relative"
-               :class="{'pt-20':!form.cover_picture, 'max-w-lg': form && (form.width === 'centered')}"
+          <div
+            v-if="form.logo_picture"
+            class="w-full mx-auto p-5 relative"
+            :class="{'pt-20':!form.cover_picture, 'max-w-lg': form && (form.width === 'centered')}"
           >
-            <img alt="Logo Picture" :src="coverPictureSrc(form.logo_picture)"
-                 :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
-                 class="max-w-60 h-20 object-contain absolute left-5 transition-all"
-            />
+            <img
+              alt="Logo Picture"
+              :src="coverPictureSrc(form.logo_picture)"
+              :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
+              class="max-w-60 h-20 object-contain absolute left-5 transition-all"
+            >
           </div>
         </div>
       </transition>
-      <open-complete-form ref="form-preview" class="w-full mx-auto py-5 px-3" :class="{'max-w-lg': form && (form.width === 'centered')}"
-                          :creating="creating"
-                          :form="form"
-                          :dark-mode="darkMode"
-                          :admin-preview="true"
-                          @restarted="previewFormSubmitted=false"
-                          @submitted="previewFormSubmitted=true"
+      <open-complete-form
+        ref="form-preview"
+        class="w-full mx-auto py-5 px-3"
+        :class="{'max-w-lg': form && (form.width === 'centered')}"
+        :creating="creating"
+        :form="form"
+        :dark-mode="darkMode"
+        :admin-preview="true"
+        @restarted="previewFormSubmitted=false"
+        @submitted="previewFormSubmitted=true"
       />
     </div>
     <p class="text-center text-xs text-gray-400 dark:text-gray-600 mt-1">
-      Form Preview <span v-if="creating"
-                         class="font-normal text-gray-400 dark:text-gray-600 text-xs"
+      Form Preview <span
+        v-if="creating"
+        class="font-normal text-gray-400 dark:text-gray-600 text-xs"
       >- Answers won't be saved</span>
       <br>
       <span v-if="previewFormSubmitted && !form.re_fillable">
-        <a href="#" @click.prevent="$refs['form-preview'].restart()">Restart Form
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-nt-blue inline" viewBox="0 0 20 20"
-               fill="currentColor"
+        <a
+          href="#"
+          @click.prevent="$refs['form-preview'].restart()"
+        >Restart Form
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-4 w-4 text-nt-blue inline"
+            viewBox="0 0 20 20"
+            fill="currentColor"
           >
-            <path fill-rule="evenodd"
-                  d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                  clip-rule="evenodd"
+            <path
+              fill-rule="evenodd"
+              d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+              clip-rule="evenodd"
             />
           </svg>
         </a>
@@ -60,13 +82,12 @@
 </template>
 
 <script>
-import VSwitch from '../../../../forms/components/VSwitch.vue'
 import OpenCompleteForm from '../../OpenCompleteForm.vue'
 import {handleDarkMode, useDarkMode} from "~/lib/forms/public-page.js"
 import { default as _has } from 'lodash/has'
 
 export default {
-  components: { OpenCompleteForm, VSwitch },
+  components: { OpenCompleteForm },
   props: {},
   setup () {
     const workingFormStore = useWorkingFormStore()
diff --git a/client/components/open/forms/components/form-components/FormEditorSidebar.vue b/client/components/open/forms/components/form-components/FormEditorSidebar.vue
index dcd8d3481..cc8fc0e99 100644
--- a/client/components/open/forms/components/form-components/FormEditorSidebar.vue
+++ b/client/components/open/forms/components/form-components/FormEditorSidebar.vue
@@ -1,49 +1,59 @@
 <template>
-  <editor-right-sidebar :show="form && (showEditFieldSidebar || showAddFieldSidebar)">
+  <editor-right-sidebar
+    :show="form && (showEditFieldSidebar || showAddFieldSidebar)"
+  >
     <transition mode="out-in">
-      <form-field-edit v-if="showEditFieldSidebar" :key="editFieldIndex" v-motion-fade="'fade'" />
-      <add-form-block v-else-if="showAddFieldSidebar" v-motion-fade="'fade'" />
+      <form-field-edit
+        v-if="showEditFieldSidebar"
+        :key="editFieldIndex"
+        v-motion-fade="'fade'"
+      />
+      <add-form-block
+        v-else-if="showAddFieldSidebar"
+        v-motion-fade="'fade'"
+      />
     </transition>
   </editor-right-sidebar>
 </template>
 
 <script>
-import { computed } from 'vue'
-import { useWorkingFormStore } from '../../../../../stores/working_form'
-import EditorRightSidebar from '../../../editors/EditorRightSidebar.vue'
-import FormFieldEdit from '../../fields/FormFieldEdit.vue'
-import AddFormBlock from './AddFormBlock.vue'
+import { computed } from "vue"
+import { useWorkingFormStore } from "../../../../../stores/working_form"
+import EditorRightSidebar from "../../../editors/EditorRightSidebar.vue"
+import FormFieldEdit from "../../fields/FormFieldEdit.vue"
+import AddFormBlock from "./AddFormBlock.vue"
 
 export default {
-  name: 'FormEditorSidebar',
+  name: "FormEditorSidebar",
   components: { EditorRightSidebar, AddFormBlock, FormFieldEdit },
   props: {},
-  setup () {
+  setup() {
     const workingFormStore = useWorkingFormStore()
     return {
       workingFormStore,
       editFieldIndex: computed(() => workingFormStore.selectedFieldIndex),
-      showEditFieldSidebar: computed(() => workingFormStore.showEditFieldSidebar),
-      showAddFieldSidebar: computed(() => workingFormStore.showAddFieldSidebar)
+      showEditFieldSidebar: computed(
+        () => workingFormStore.showEditFieldSidebar,
+      ),
+      showAddFieldSidebar: computed(() => workingFormStore.showAddFieldSidebar),
     }
   },
-  data () {
+  data() {
     return {}
   },
   computed: {
     form: {
-      get () {
+      get() {
         return this.workingFormStore.content
       },
       /* We add a setter */
-      set (value) {
+      set(value) {
         this.workingFormStore.set(value)
-      }
-    }
+      },
+    },
   },
   watch: {},
-  mounted () {
-  },
-  methods: {}
+  mounted() {},
+  methods: {},
 }
 </script>
diff --git a/client/components/open/forms/components/form-components/FormErrorModal.vue b/client/components/open/forms/components/form-components/FormErrorModal.vue
index 85fe78eb7..98a10e1ac 100644
--- a/client/components/open/forms/components/form-components/FormErrorModal.vue
+++ b/client/components/open/forms/components/form-components/FormErrorModal.vue
@@ -1,21 +1,37 @@
 <template>
-  <modal :show="show" @close="$emit('close')">
+  <modal
+    :show="show"
+    @close="$emit('close')"
+  >
     <div class="-mx-5">
       <h2 class="text-red-400 text-2xl font-bold mb-4 px-4">
         Error saving your form
       </h2>
 
-      <div v-if="form.errors" class="p-4 border-b border-t">
-        <p v-if="form.errors.message" v-text="form.errors.message" />
+      <div
+        v-if="form.errors"
+        class="p-4 border-b border-t"
+      >
+        <p
+          v-if="form.errors.message"
+          v-text="form.errors.message"
+        />
         <ul class="list-disc list-inside">
-          <li v-for="err, key in form.errors.errors" :key="key">
-            {{ Array.isArray(err)?err[0]:err }}
+          <li
+            v-for="(err, key) in form.errors.errors"
+            :key="key"
+          >
+            {{ Array.isArray(err) ? err[0] : err }}
           </li>
         </ul>
       </div>
 
       <div class="px-4 pt-4 text-right">
-        <v-button color="gray" shade="light" @click="$emit('close')">
+        <v-button
+          color="gray"
+          shade="light"
+          @click="$emit('close')"
+        >
           Close
         </v-button>
       </div>
@@ -25,16 +41,17 @@
 
 <script>
 export default {
-  name: 'FormErrorModal',
+  name: "FormErrorModal",
   components: {},
   props: {
     show: { type: Boolean, required: true },
-    form: { type: Object, required: false }
+    form: { type: Object, required: false },
   },
+  emits: ['close'],
   data: () => ({}),
 
   computed: {},
 
-  methods: {}
+  methods: {},
 }
 </script>
diff --git a/client/components/open/forms/components/form-components/FormInformation.vue b/client/components/open/forms/components/form-components/FormInformation.vue
index 1c4c0b4ee..c4c9ac67f 100644
--- a/client/components/open/forms/components/form-components/FormInformation.vue
+++ b/client/components/open/forms/components/form-components/FormInformation.vue
@@ -1,41 +1,100 @@
 <template>
-  <editor-options-panel name="Information" :already-opened="true">
+  <editor-options-panel
+    name="Information"
+    :already-opened="true"
+  >
     <template #icon>
-      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M10 13.3332V9.99984M10 6.6665H10.0083M18.3333 9.99984C18.3333 14.6022 14.6024 18.3332 10 18.3332C5.39763 18.3332 1.66667 14.6022 1.66667 9.99984C1.66667 5.39746 5.39763 1.6665 10 1.6665C14.6024 1.6665 18.3333 5.39746 18.3333 9.99984Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+      <svg
+        class="h-5 w-5"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M10 13.3332V9.99984M10 6.6665H10.0083M18.3333 9.99984C18.3333 14.6022 14.6024 18.3332 10 18.3332C5.39763 18.3332 1.66667 14.6022 1.66667 9.99984C1.66667 5.39746 5.39763 1.6665 10 1.6665C14.6024 1.6665 18.3333 5.39746 18.3333 9.99984Z"
+          stroke="currentColor"
+          stroke-width="1.67"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
       </svg>
     </template>
-    <text-input name="title" class="mt-4"
-                :form="form"
-                label="Form Title"
-                :required="true"
+    <text-input
+      name="title"
+      class="mt-4"
+      :form="form"
+      label="Form Title"
+      :required="true"
     />
-    <rich-text-area-input name="description"
-                          :form="form"
-                          label="Description"
-                          :required="false"
+    <rich-text-area-input
+      name="description"
+      :form="form"
+      label="Description"
+      :required="false"
     />
-    <select-input name="tags" label="Tags" :form="form" class="mt-4"
-                  help="To organize your forms (hidden to respondents)"
-                  placeholder="Select Tag(s)" :multiple="true" :allow-creation="true"
-                  :options="allTagsOptions"
+    <select-input
+      name="tags"
+      label="Tags"
+      :form="form"
+      class="mt-4"
+      help="To organize your forms (hidden to respondents)"
+      placeholder="Select Tag(s)"
+      :multiple="true"
+      :allow-creation="true"
+      :options="allTagsOptions"
     />
-    <select-input name="visibility" label="Visibility" :form="form" class="mt-4"
-                  help="Only public form will be accessible"
-                  placeholder="Select Visibility" :required="true"
-                  :options="visibilityOptions"
+    <select-input
+      name="visibility"
+      label="Visibility"
+      :form="form"
+      class="mt-4"
+      help="Only public form will be accessible"
+      placeholder="Select Visibility"
+      :required="true"
+      :options="visibilityOptions"
     />
-    <v-button v-if="copyFormOptions.length > 0" color="light-gray" class="w-full mt-4" @click="showCopyFormSettingsModal=true">
-      <svg class="h-5 w-5 -mt-1 text-nt-blue inline mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M4.16667 12.4998C3.3901 12.4998 3.00182 12.4998 2.69553 12.373C2.28715 12.2038 1.9627 11.8794 1.79354 11.471C1.66667 11.1647 1.66667 10.7764 1.66667 9.99984V4.33317C1.66667 3.39975 1.66667 2.93304 1.84833 2.57652C2.00812 2.26292 2.26308 2.00795 2.57669 1.84816C2.93321 1.6665 3.39992 1.6665 4.33334 1.6665H10C10.7766 1.6665 11.1649 1.6665 11.4711 1.79337C11.8795 1.96253 12.204 2.28698 12.3731 2.69536C12.5 3.00165 12.5 3.38993 12.5 4.1665M10.1667 18.3332H15.6667C16.6001 18.3332 17.0668 18.3332 17.4233 18.1515C17.7369 17.9917 17.9919 17.7368 18.1517 17.4232C18.3333 17.0666 18.3333 16.5999 18.3333 15.6665V10.1665C18.3333 9.23308 18.3333 8.76637 18.1517 8.40985C17.9919 8.09625 17.7369 7.84128 17.4233 7.68149C17.0668 7.49984 16.6001 7.49984 15.6667 7.49984H10.1667C9.23325 7.49984 8.76654 7.49984 8.41002 7.68149C8.09642 7.84128 7.84145 8.09625 7.68166 8.40985C7.50001 8.76637 7.50001 9.23308 7.50001 10.1665V15.6665C7.50001 16.5999 7.50001 17.0666 7.68166 17.4232C7.84145 17.7368 8.09642 17.9917 8.41002 18.1515C8.76654 18.3332 9.23325 18.3332 10.1667 18.3332Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+    <v-button
+      v-if="copyFormOptions.length > 0"
+      color="light-gray"
+      class="w-full mt-4"
+      @click="showCopyFormSettingsModal = true"
+    >
+      <svg
+        class="h-5 w-5 -mt-1 text-nt-blue inline mr-2"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.16667 12.4998C3.3901 12.4998 3.00182 12.4998 2.69553 12.373C2.28715 12.2038 1.9627 11.8794 1.79354 11.471C1.66667 11.1647 1.66667 10.7764 1.66667 9.99984V4.33317C1.66667 3.39975 1.66667 2.93304 1.84833 2.57652C2.00812 2.26292 2.26308 2.00795 2.57669 1.84816C2.93321 1.6665 3.39992 1.6665 4.33334 1.6665H10C10.7766 1.6665 11.1649 1.6665 11.4711 1.79337C11.8795 1.96253 12.204 2.28698 12.3731 2.69536C12.5 3.00165 12.5 3.38993 12.5 4.1665M10.1667 18.3332H15.6667C16.6001 18.3332 17.0668 18.3332 17.4233 18.1515C17.7369 17.9917 17.9919 17.7368 18.1517 17.4232C18.3333 17.0666 18.3333 16.5999 18.3333 15.6665V10.1665C18.3333 9.23308 18.3333 8.76637 18.1517 8.40985C17.9919 8.09625 17.7369 7.84128 17.4233 7.68149C17.0668 7.49984 16.6001 7.49984 15.6667 7.49984H10.1667C9.23325 7.49984 8.76654 7.49984 8.41002 7.68149C8.09642 7.84128 7.84145 8.09625 7.68166 8.40985C7.50001 8.76637 7.50001 9.23308 7.50001 10.1665V15.6665C7.50001 16.5999 7.50001 17.0666 7.68166 17.4232C7.84145 17.7368 8.09642 17.9917 8.41002 18.1515C8.76654 18.3332 9.23325 18.3332 10.1667 18.3332Z"
+          stroke="currentColor"
+          stroke-width="1.66667"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
       </svg>
       Copy another form's settings
     </v-button>
 
-    <modal :show="showCopyFormSettingsModal" max-width="md" @close="showCopyFormSettingsModal=false">
+    <modal
+      :show="showCopyFormSettingsModal"
+      max-width="md"
+      @close="showCopyFormSettingsModal = false"
+    >
       <template #icon>
-        <svg class="w-10 h-10 text-blue" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M17 27C16.0681 27 15.6022 27 15.2346 26.8478C14.7446 26.6448 14.3552 26.2554 14.1522 25.7654C14 25.3978 14 24.9319 14 24V17.2C14 16.0799 14 15.5198 14.218 15.092C14.4097 14.7157 14.7157 14.4097 15.092 14.218C15.5198 14 16.0799 14 17.2 14H24C24.9319 14 25.3978 14 25.7654 14.1522C26.2554 14.3552 26.6448 14.7446 26.8478 15.2346C27 15.6022 27 16.0681 27 17M24.2 34H30.8C31.9201 34 32.4802 34 32.908 33.782C33.2843 33.5903 33.5903 33.2843 33.782 32.908C34 32.4802 34 31.9201 34 30.8V24.2C34 23.0799 34 22.5198 33.782 22.092C33.5903 21.7157 33.2843 21.4097 32.908 21.218C32.4802 21 31.9201 21 30.8 21H24.2C23.0799 21 22.5198 21 22.092 21.218C21.7157 21.4097 21.4097 21.7157 21.218 22.092C21 22.5198 21 23.0799 21 24.2V30.8C21 31.9201 21 32.4802 21.218 32.908C21.4097 33.2843 21.7157 33.5903 22.092 33.782C22.5198 34 23.0799 34 24.2 34Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        <svg
+          class="w-10 h-10 text-blue"
+          viewBox="0 0 48 48"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M17 27C16.0681 27 15.6022 27 15.2346 26.8478C14.7446 26.6448 14.3552 26.2554 14.1522 25.7654C14 25.3978 14 24.9319 14 24V17.2C14 16.0799 14 15.5198 14.218 15.092C14.4097 14.7157 14.7157 14.4097 15.092 14.218C15.5198 14 16.0799 14 17.2 14H24C24.9319 14 25.3978 14 25.7654 14.1522C26.2554 14.3552 26.6448 14.7446 26.8478 15.2346C27 15.6022 27 16.0681 27 17M24.2 34H30.8C31.9201 34 32.4802 34 32.908 33.782C33.2843 33.5903 33.5903 33.2843 33.782 32.908C34 32.4802 34 31.9201 34 30.8V24.2C34 23.0799 34 22.5198 33.782 22.092C33.5903 21.7157 33.2843 21.4097 32.908 21.218C32.4802 21 31.9201 21 30.8 21H24.2C23.0799 21 22.5198 21 22.092 21.218C21.7157 21.4097 21.4097 21.7157 21.218 22.092C21 22.5198 21 23.0799 21 24.2V30.8C21 31.9201 21 32.4802 21.218 32.908C21.4097 33.2843 21.7157 33.5903 22.092 33.782C22.5198 34 23.0799 34 24.2 34Z"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
       </template>
       <template #title>
@@ -43,20 +102,33 @@
       </template>
       <div class="p-4 min-h-[450px]">
         <p class="text-gray-600">
-          If you already have another form that you like to use as a base for this form, you can do that here.
-          Select another form, confirm, and we will copy all of the other form settings (except the form structure)
+          If you already have another form that you like to use as a base for
+          this form, you can do that here. Select another form, confirm, and we
+          will copy all of the other form settings (except the form structure)
           to this form.
         </p>
-        <select-input v-model="copyFormId" name="copy_form_id"
-                      label="Copy Settings From" class="mt-3 mb-6"
-                      placeholder="Choose a form" :searchable="copyFormOptions.length > 5"
-                      :options="copyFormOptions"
+        <select-input
+          v-model="copyFormId"
+          name="copy_form_id"
+          label="Copy Settings From"
+          class="mt-3 mb-6"
+          placeholder="Choose a form"
+          :searchable="copyFormOptions.length > 5"
+          :options="copyFormOptions"
         />
         <div class="flex">
-          <v-button color="white" class="w-full mr-2" @click="showCopyFormSettingsModal=false">
+          <v-button
+            color="white"
+            class="w-full mr-2"
+            @click="showCopyFormSettingsModal = false"
+          >
             Cancel
           </v-button>
-          <v-button color="blue" class="w-full" @click="copySettings">
+          <v-button
+            color="blue"
+            class="w-full"
+            @click="copySettings"
+          >
             Confirm & Copy
           </v-button>
         </div>
@@ -66,19 +138,19 @@
 </template>
 
 <script>
-import clonedeep from 'clone-deep'
-import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
-import SelectInput from '../../../../forms/SelectInput.vue'
-import { default as _has } from 'lodash/has'
+import clonedeep from "clone-deep"
+import EditorOptionsPanel from "../../../editors/EditorOptionsPanel.vue"
+import SelectInput from "../../../../forms/SelectInput.vue"
+import { default as _has } from "lodash/has"
 
 export default {
   components: { SelectInput, EditorOptionsPanel },
   props: {},
 
-  setup () {
+  setup() {
     const formsStore = useFormsStore()
     const workingFormStore = useWorkingFormStore()
-    const {getAll: forms} = storeToRefs(formsStore)
+    const { getAll: forms } = storeToRefs(formsStore)
     return {
       forms,
       formsStore,
@@ -86,72 +158,93 @@ export default {
     }
   },
 
-  data () {
+  data() {
     return {
       showCopyFormSettingsModal: false,
       copyFormId: null,
       visibilityOptions: [
         {
           name: "Published",
-          value: "public"
+          value: "public",
         },
         {
           name: "Draft - not publicly accessible",
-          value: "draft"
+          value: "draft",
         },
         {
-          name: "Closed - won\'t accept new submissions",
-          value: "closed"
-        }
-      ]
+          name: "Closed - won't accept new submissions",
+          value: "closed",
+        },
+      ],
     }
   },
 
   computed: {
-    copyFormOptions () {
-      return this.forms.filter((form) => {
-        return this.form.id !== form.id
-      }).map((form) => {
-        return {
-          name: form.title,
-          value: form.id
-        }
-      })
+    copyFormOptions() {
+      return this.forms
+        .filter((form) => {
+          return this.form.id !== form.id
+        })
+        .map((form) => {
+          return {
+            name: form.title,
+            value: form.id,
+          }
+        })
     },
     form: {
-      get () {
+      get() {
         return this.workingFormStore.content
       },
       /* We add a setter */
-      set (value) {
+      set(value) {
         this.workingFormStore.set(value)
-      }
+      },
     },
-    allTagsOptions () {
+    allTagsOptions() {
       return this.formsStore.allTags.map((tagname) => {
         return {
           name: tagname,
-          value: tagname
+          value: tagname,
         }
       })
-    }
+    },
   },
 
   watch: {},
 
-  mounted () {
-  },
+  mounted() {},
 
   methods: {
-    copySettings () {
+    copySettings() {
       if (this.copyFormId == null) return
-      const copyForm = clonedeep(this.forms.find((form) => form.id === this.copyFormId))
-      if (!copyForm) return
+      const copyForm = clonedeep(
+        this.forms.find((form) => form.id === this.copyFormId),
+      )
+      if (!copyForm) return;
 
       // Clean copy from form
-      ['title', 'description', 'properties', 'cleanings', 'views_count', 'submissions_count', 'workspace', 'workspace_id', 'updated_at',
-        'share_url', 'slug', 'notion_database_url', 'id', 'database_id', 'database_fields_update', 'creator',
-        'created_at', 'deleted_at', 'last_edited_human'].forEach((property) => {
+      [
+        "title",
+        "description",
+        "properties",
+        "cleanings",
+        "views_count",
+        "submissions_count",
+        "workspace",
+        "workspace_id",
+        "updated_at",
+        "share_url",
+        "slug",
+        "notion_database_url",
+        "id",
+        "database_id",
+        "database_fields_update",
+        "creator",
+        "created_at",
+        "deleted_at",
+        "last_edited_human",
+      ].forEach((property) => {
         if (_has(copyForm, property)) {
           delete copyForm[property]
         }
@@ -162,7 +255,7 @@ export default {
         this.form[property] = copyForm[property]
       })
       this.showCopyFormSettingsModal = false
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/open/forms/components/form-components/FormSecurityPrivacy.vue b/client/components/open/forms/components/form-components/FormSecurityPrivacy.vue
index 884f1be26..09ab21354 100644
--- a/client/components/open/forms/components/form-components/FormSecurityPrivacy.vue
+++ b/client/components/open/forms/components/form-components/FormSecurityPrivacy.vue
@@ -1,48 +1,67 @@
 <template>
-  <editor-options-panel name="Security & Privacy" :already-opened="false">
+  <editor-options-panel
+    name="Security & Privacy"
+    :already-opened="false"
+  >
     <template #icon>
-      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+      <svg
+        class="h-5 w-5"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+        />
       </svg>
     </template>
-    <toggle-switch-input name="can_be_indexed" :form="form" class="mt-4"
-                    label="Indexable by Google"
-                    help="If enabled, your form can appear in the search results of Google"
+    <toggle-switch-input
+      name="can_be_indexed"
+      :form="form"
+      class="mt-4"
+      label="Indexable by Google"
+      help="If enabled, your form can appear in the search results of Google"
     />
-    <toggle-switch-input name="use_captcha" :form="form" class="mt-4"
-                    label="Protect your form with a Captcha"
-                    help="If enabled we will make sure respondant is a human"
+    <toggle-switch-input
+      name="use_captcha"
+      :form="form"
+      class="mt-4"
+      label="Protect your form with a Captcha"
+      help="If enabled we will make sure respondant is a human"
     />
   </editor-options-panel>
 </template>
 
 <script>
-import { useWorkingFormStore } from '../../../../../stores/working_form'
-import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
+import { useWorkingFormStore } from "../../../../../stores/working_form"
+import EditorOptionsPanel from "../../../editors/EditorOptionsPanel.vue"
 
 export default {
   components: { EditorOptionsPanel },
   props: {},
-  setup () {
+  setup() {
     const workingFormStore = useWorkingFormStore()
     return {
-      workingFormStore
+      workingFormStore,
     }
   },
-  data () {
-    return {
-    }
+  data() {
+    return {}
   },
   computed: {
     form: {
-      get () {
+      get() {
         return this.workingFormStore.content
       },
       /* We add a setter */
-      set (value) {
+      set(value) {
         this.workingFormStore.set(value)
-      }
-    }
+      },
+    },
   },
 }
 </script>
diff --git a/client/components/open/forms/components/form-components/FormStructure.vue b/client/components/open/forms/components/form-components/FormStructure.vue
index 56e5dd602..03443dea6 100644
--- a/client/components/open/forms/components/form-components/FormStructure.vue
+++ b/client/components/open/forms/components/form-components/FormStructure.vue
@@ -1,9 +1,29 @@
 <template>
-  <editor-options-panel name="Form Structure" :already-opened="true">
+  <editor-options-panel
+    name="Form Structure"
+    :already-opened="true"
+  >
     <template #icon>
-      <svg class="h-5 w-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M13.8333 7.33333C14.7668 7.33333 15.2335 7.33333 15.59 7.15168C15.9036 6.99189 16.1586 6.73692 16.3183 6.42332C16.5 6.0668 16.5 5.60009 16.5 4.66667V4.16667C16.5 3.23325 16.5 2.76654 16.3183 2.41002C16.1586 2.09641 15.9036 1.84145 15.59 1.68166C15.2335 1.5 14.7668 1.5 13.8333 1.5L4.16667 1.5C3.23325 1.5 2.76654 1.5 2.41002 1.68166C2.09641 1.84144 1.84144 2.09641 1.68166 2.41002C1.5 2.76654 1.5 3.23325 1.5 4.16667L1.5 4.66667C1.5 5.60009 1.5 6.0668 1.68166 6.42332C1.84144 6.73692 2.09641 6.99189 2.41002 7.15168C2.76654 7.33333 3.23325 7.33333 4.16667 7.33333L13.8333 7.33333Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M13.8333 16.5C14.7668 16.5 15.2335 16.5 15.59 16.3183C15.9036 16.1586 16.1586 15.9036 16.3183 15.59C16.5 15.2335 16.5 14.7668 16.5 13.8333V13.3333C16.5 12.3999 16.5 11.9332 16.3183 11.5767C16.1586 11.2631 15.9036 11.0081 15.59 10.8483C15.2335 10.6667 14.7668 10.6667 13.8333 10.6667L4.16667 10.6667C3.23325 10.6667 2.76654 10.6667 2.41002 10.8483C2.09641 11.0081 1.84144 11.2631 1.68166 11.5767C1.5 11.9332 1.5 12.3999 1.5 13.3333L1.5 13.8333C1.5 14.7668 1.5 15.2335 1.68166 15.59C1.84144 15.9036 2.09641 16.1586 2.41002 16.3183C2.76654 16.5 3.23325 16.5 4.16667 16.5H13.8333Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+      <svg
+        class="h-5 w-5"
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.8333 7.33333C14.7668 7.33333 15.2335 7.33333 15.59 7.15168C15.9036 6.99189 16.1586 6.73692 16.3183 6.42332C16.5 6.0668 16.5 5.60009 16.5 4.66667V4.16667C16.5 3.23325 16.5 2.76654 16.3183 2.41002C16.1586 2.09641 15.9036 1.84145 15.59 1.68166C15.2335 1.5 14.7668 1.5 13.8333 1.5L4.16667 1.5C3.23325 1.5 2.76654 1.5 2.41002 1.68166C2.09641 1.84144 1.84144 2.09641 1.68166 2.41002C1.5 2.76654 1.5 3.23325 1.5 4.16667L1.5 4.66667C1.5 5.60009 1.5 6.0668 1.68166 6.42332C1.84144 6.73692 2.09641 6.99189 2.41002 7.15168C2.76654 7.33333 3.23325 7.33333 4.16667 7.33333L13.8333 7.33333Z"
+          stroke="currentColor"
+          stroke-width="1.67"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M13.8333 16.5C14.7668 16.5 15.2335 16.5 15.59 16.3183C15.9036 16.1586 16.1586 15.9036 16.3183 15.59C16.5 15.2335 16.5 14.7668 16.5 13.8333V13.3333C16.5 12.3999 16.5 11.9332 16.3183 11.5767C16.1586 11.2631 15.9036 11.0081 15.59 10.8483C15.2335 10.6667 14.7668 10.6667 13.8333 10.6667L4.16667 10.6667C3.23325 10.6667 2.76654 10.6667 2.41002 10.8483C2.09641 11.0081 1.84144 11.2631 1.68166 11.5767C1.5 11.9332 1.5 12.3999 1.5 13.3333L1.5 13.8333C1.5 14.7668 1.5 15.2335 1.68166 15.59C1.84144 15.9036 2.09641 16.1586 2.41002 16.3183C2.76654 16.5 3.23325 16.5 4.16667 16.5H13.8333Z"
+          stroke="currentColor"
+          stroke-width="1.67"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
       </svg>
     </template>
     <form-fields-editor class="mt-5" />
@@ -11,34 +31,33 @@
 </template>
 
 <script>
-import { useWorkingFormStore } from '../../../../../stores/working_form'
-import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
-import FormFieldsEditor from '../FormFieldsEditor.vue'
+import { useWorkingFormStore } from "../../../../../stores/working_form"
+import EditorOptionsPanel from "../../../editors/EditorOptionsPanel.vue"
+import FormFieldsEditor from "../FormFieldsEditor.vue"
 
 export default {
   components: { EditorOptionsPanel, FormFieldsEditor },
   props: {},
-  setup () {
+  setup() {
     const workingFormStore = useWorkingFormStore()
     return {
-      workingFormStore
+      workingFormStore,
     }
   },
-  data () {
-    return {
-    }
+  data() {
+    return {}
   },
 
   computed: {
     form: {
-      get () {
+      get() {
         return this.workingFormStore.content
       },
       /* We add a setter */
-      set (value) {
+      set(value) {
         this.workingFormStore.set(value)
-      }
-    }
-  }
+      },
+    },
+  },
 }
 </script>
diff --git a/client/components/open/forms/components/form-logic-components/ColumnCondition.vue b/client/components/open/forms/components/form-logic-components/ColumnCondition.vue
index 7585b8945..bc541d75b 100644
--- a/client/components/open/forms/components/form-logic-components/ColumnCondition.vue
+++ b/client/components/open/forms/components/form-logic-components/ColumnCondition.vue
@@ -1,47 +1,64 @@
 <template>
-  <div v-if="content" class="flex flex-wrap">
+  <div
+    v-if="content"
+    class="flex flex-wrap"
+  >
     <div class="w-full font-semibold text-gray-700 dark:text-gray-300 mb-2">
       {{ property.name }}
     </div>
-    <SelectInput v-model="content.operator" class="w-full" :options="operators" :name="'operator_' + property.id"
-      placeholder="Comparison operator" @update:model-value="operatorChanged()" />
+    <SelectInput
+      v-model="content.operator"
+      class="w-full"
+      :options="operators"
+      :name="'operator_' + property.id"
+      placeholder="Comparison operator"
+      @update:model-value="operatorChanged()"
+    />
 
     <template v-if="needsInput">
-      <component v-bind="inputComponentData" :is="inputComponentData.component" v-model="content.value" class="w-full"
-        :name="'value_' + property.id" placeholder="Filter Value" @update:model-value="emitInput()" />
+      <component
+        v-bind="inputComponentData"
+        :is="inputComponentData.component"
+        v-model="content.value"
+        class="w-full"
+        :name="'value_' + property.id"
+        placeholder="Filter Value"
+        @update:model-value="emitInput()"
+      />
     </template>
   </div>
 </template>
 
 <script>
-import OpenFilters from '../../../../../data/open_filters.json'
+import OpenFilters from "../../../../../data/open_filters.json"
 
 export default {
   components: {},
   props: {
-    modelValue: { required: true }
+    modelValue: { type: Object, required: true },
   },
 
+  emits: ['update:modelValue'],
   data() {
     return {
       content: { ...this.modelValue },
       available_filters: OpenFilters,
       hasInput: false,
       inputComponent: {
-        text: 'TextInput',
-        number: 'TextInput',
-        rating: 'TextInput',
-        scale: 'TextInput',
-        slider: 'TextInput',
-        select: 'SelectInput',
-        multi_select: 'SelectInput',
-        date: 'DateInput',
-        files: 'FileInput',
-        checkbox: 'CheckboxInput',
-        url: 'TextInput',
-        email: 'TextInput',
-        phone_number: 'TextInput'
-      }
+        text: "TextInput",
+        number: "TextInput",
+        rating: "TextInput",
+        scale: "TextInput",
+        slider: "TextInput",
+        select: "SelectInput",
+        multi_select: "SelectInput",
+        date: "DateInput",
+        files: "FileInput",
+        checkbox: "CheckboxInput",
+        url: "TextInput",
+        email: "TextInput",
+        phone_number: "TextInput",
+      },
     }
   },
 
@@ -51,34 +68,41 @@ export default {
       const componentData = {
         component: this.inputComponent[this.property.type],
         name: this.property.id,
-        required: true
+        required: true,
       }
 
-      if (this.property.type === 'phone_number' && !this.property.use_simple_text_input) {
-        componentData.component = 'PhoneInput'
+      if (
+        this.property.type === "phone_number" &&
+        !this.property.use_simple_text_input
+      ) {
+        componentData.component = "PhoneInput"
       }
 
-      if (['select', 'multi_select'].includes(this.property.type)) {
+      if (["select", "multi_select"].includes(this.property.type)) {
         componentData.multiple = false
-        componentData.options = this.property[this.property.type].options.map(option => {
-          return {
-            name: option.name,
-            value: option.name
-          }
-        })
-      } else if (this.property.type === 'date') {
+        componentData.options = this.property[this.property.type].options.map(
+          (option) => {
+            return {
+              name: option.name,
+              value: option.name,
+            }
+          },
+        )
+      } else if (this.property.type === "date") {
         // componentData.withTime = true
-      } else if (this.property.type === 'checkbox') {
+      } else if (this.property.type === "checkbox") {
         componentData.label = this.property.name
       }
 
       return componentData
     },
     operators() {
-      return Object.keys(this.available_filters[this.property.type].comparators).map(key => {
+      return Object.keys(
+        this.available_filters[this.property.type].comparators,
+      ).map((key) => {
         return {
           value: key,
-          name: this.optionFilterNames(key, this.property.type)
+          name: this.optionFilterNames(key, this.property.type),
         }
       })
     },
@@ -90,9 +114,17 @@ export default {
       const operatorFormat = operator.format
       if (!operatorFormat) return true
 
-      if (operator.expected_type === 'boolean' && operatorFormat.type === 'enum' && operatorFormat.values.length === 1) {
+      if (
+        operator.expected_type === "boolean" &&
+        operatorFormat.type === "enum" &&
+        operatorFormat.values.length === 1
+      ) {
         return false
-      } else if (operator.expected_type === 'object' && operatorFormat.type === 'empty' && operatorFormat.values === '{}') {
+      } else if (
+        operator.expected_type === "object" &&
+        operatorFormat.type === "empty" &&
+        operatorFormat.values === "{}"
+      ) {
         return false
       }
 
@@ -104,21 +136,28 @@ export default {
     modelValue() {
       this.refreshContent()
     },
-    'content.operator': function (val) {
+    "content.operator": function (val) {
       if (val) {
         this.operatorChanged()
       }
-    }
+    },
+  },
+
+  mounted() {
+    this.refreshContent()
   },
 
   methods: {
     castContent(content) {
-      if (['number', 'rating', 'scale', 'slider'].includes(this.property.type) && content.value) {
+      if (
+        ["number", "rating", "scale", "slider"].includes(this.property.type) &&
+        content.value
+      ) {
         content.value = Number(content.value)
       }
 
       const operator = this.selectedOperator()
-      if (operator.expected_type === 'boolean') {
+      if (operator.expected_type === "boolean") {
         content.value = Boolean(content.value)
       }
 
@@ -132,11 +171,22 @@ export default {
       const operator = this.selectedOperator()
       const operatorFormat = operator.format
 
-      if (operator.expected_type === 'boolean' && operatorFormat.type === 'enum' && operatorFormat.values.length === 1) {
+      if (
+        operator.expected_type === "boolean" &&
+        operatorFormat.type === "enum" &&
+        operatorFormat.values.length === 1
+      ) {
         this.content.value = operator.format.values[0]
-      } else if (operator.expected_type === 'object' && operatorFormat.type === 'empty' && operatorFormat.values === '{}') {
+      } else if (
+        operator.expected_type === "object" &&
+        operatorFormat.type === "empty" &&
+        operatorFormat.values === "{}"
+      ) {
         this.content.value = {}
-      } else if (typeof this.content.value === 'boolean' || typeof this.content.value === 'object') {
+      } else if (
+        typeof this.content.value === "boolean" ||
+        typeof this.content.value === "object"
+      ) {
         this.content.value = null
       }
       this.emitInput()
@@ -145,21 +195,26 @@ export default {
       if (!this.content.operator) {
         return null
       }
-      return this.available_filters[this.property.type].comparators[this.content.operator]
+      return this.available_filters[this.property.type].comparators[
+        this.content.operator
+      ]
     },
     optionFilterNames(key, propertyType) {
-      if (propertyType === 'checkbox') {
+      if (propertyType === "checkbox") {
         return {
-          equals: 'Is checked',
-          does_not_equal: 'Is not checked'
+          equals: "Is checked",
+          does_not_equal: "Is not checked",
         }[key]
       }
-      return key.split('_').map(function (item) {
-        return item.charAt(0).toUpperCase() + item.substring(1)
-      }).join(' ')
+      return key
+        .split("_")
+        .map(function (item) {
+          return item.charAt(0).toUpperCase() + item.substring(1)
+        })
+        .join(" ")
     },
     emitInput() {
-      this.$emit('update:modelValue', this.castContent(this.content))
+      this.$emit("update:modelValue", this.castContent(this.content))
     },
     refreshContent() {
       this.content = {
@@ -167,14 +222,10 @@ export default {
         ...this.modelValue,
         property_meta: {
           id: this.property.id,
-          type: this.property.type
-        }
+          type: this.property.type,
+        },
       }
-    }
+    },
   },
-
-  mounted() {
-    this.refreshContent()
-  }
 }
 </script>
diff --git a/client/components/open/forms/components/form-logic-components/ConditionEditor.client.vue b/client/components/open/forms/components/form-logic-components/ConditionEditor.client.vue
index 7616f5575..8cb5b0649 100644
--- a/client/components/open/forms/components/form-logic-components/ConditionEditor.client.vue
+++ b/client/components/open/forms/components/form-logic-components/ConditionEditor.client.vue
@@ -1,7 +1,14 @@
 <template>
-  <query-builder v-model="query" :rules="rules" :config="config" @update:model-value="onChange">
+  <query-builder
+    v-model="query"
+    :rules="rules"
+    :config="config"
+    @update:model-value="onChange"
+  >
     <template #groupOperator="props">
-      <div class="query-builder-group-slot__group-selection flex items-center px-5 border-b py-1 mb-1 flex">
+      <div
+        class="query-builder-group-slot__group-selection flex items-center px-5 border-b py-1 mb-1 flex"
+      >
         <p class="mr-2 font-semibold">
           Operator
         </p>
@@ -30,91 +37,100 @@
   </query-builder>
 </template>
 
-<style src="query-builder-vue-3/dist/style.css" />
 <script>
-import { defineComponent } from 'vue'
-import QueryBuilder from 'query-builder-vue-3'
-import ColumnCondition from './ColumnCondition.vue'
-import GroupControlSlot from './GroupControlSlot.vue'
+/* eslint-disable vue/one-component-per-file */
+import { defineComponent } from "vue"
+import QueryBuilder from "query-builder-vue-3"
+import ColumnCondition from "./ColumnCondition.vue"
+import GroupControlSlot from "./GroupControlSlot.vue"
 
 export default {
-
   components: {
     GroupControlSlot,
     QueryBuilder,
-    ColumnCondition
+    ColumnCondition,
   },
 
   props: {
     form: { type: Object, required: true },
-    modelValue: { required: false }
+    modelValue: { type: Object, required: false },
   },
+  emits:  ['update:modelValue'],
 
-  data () {
+  data() {
     return {
-      query: this.modelValue
+      query: this.modelValue,
     }
   },
 
   computed: {
-    rules () {
-      return this.form.properties.filter((property) => {
-        return !property.type.startsWith('nf-')
-      }).map((property) => {
-        const workspaceId = this.form.workspace_id
-        const formSlug = this.form.slug
-        return {
-          identifier: property.id,
-          name: property.name,
-          component: (function () {
-            return defineComponent({
-              extends: ColumnCondition,
-              computed: {
-                property () {
-                  return property
+    rules() {
+      return this.form.properties
+        .filter((property) => {
+          return !property.type.startsWith("nf-")
+        })
+        .map((property) => {
+          const workspaceId = this.form.workspace_id
+          const formSlug = this.form.slug
+          return {
+            identifier: property.id,
+            name: property.name,
+            component: (function () {
+              return defineComponent({
+                extends: ColumnCondition,
+                computed: {
+                  property() {
+                    return property
+                  },
+                  viewContext() {
+                    return {
+                      form_slug: formSlug,
+                      workspace_id: workspaceId,
+                    }
+                  },
                 },
-                viewContext () {
-                  return {
-                    form_slug: formSlug,
-                    workspace_id: workspaceId
-                  }
-                }
-              }
-            })
-          })()
-        }
-      })
+              })
+            })(),
+          }
+        })
     },
 
-    config () {
+    config() {
       return {
         operators: [
           {
-            name: 'And',
-            identifier: 'and'
+            name: "And",
+            identifier: "and",
           },
           {
-            name: 'Or',
-            identifier: 'or'
-          }
+            name: "Or",
+            identifier: "or",
+          },
         ],
         rules: this.rules,
-        colors: ['#ef4444', '#22c55e', '#f97316', '#0ea5e9', '#8b5cf6', '#ec4899']
+        colors: [
+          "#ef4444",
+          "#22c55e",
+          "#f97316",
+          "#0ea5e9",
+          "#8b5cf6",
+          "#ec4899",
+        ],
       }
-    }
-
+    },
   },
 
   watch: {
-    modelValue () {
+    modelValue() {
       this.query = this.modelValue
-    }
+    },
   },
 
   methods: {
-    onChange () {
-      this.$emit('update:modelValue', this.query)
-    }
-  }
+    onChange() {
+      this.$emit("update:modelValue", this.query)
+    },
+  },
 }
 </script>
+<style src="query-builder-vue-3/dist/style.css" />
diff --git a/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue b/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
index 6a61d68bb..20e4040c8 100644
--- a/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
+++ b/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
@@ -1,24 +1,60 @@
 <template>
-  <div v-if="logic" :key="resetKey">
+  <div
+    v-if="logic"
+    :key="resetKey"
+  >
     <h3 class="font-semibold block text-lg">
       Logic
     </h3>
     <p class="text-gray-400 text-xs mb-3">
-      Add some logic to this block. Start by adding some conditions, and then add some actions.
+      Add some logic to this block. Start by adding some conditions, and then
+      add some actions.
     </p>
     <div class="relative flex">
       <div>
-        <v-button color="light-gray" size="small" @click="showCopyFormModal=true">
-          <svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        <v-button
+          color="light-gray"
+          size="small"
+          @click="showCopyFormModal = true"
+        >
+          <svg
+            class="h-4 w-4 text-blue-600 inline mr-1 -mt-1"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
           Copy from
         </v-button>
       </div>
       <div>
-        <v-button color="light-gray" shade="light" size="small" class="ml-1" @click="clearAll">
-          <svg class="text-red-600 h-4 w-4 inline -mt-1 mr-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M18 9L12 15M12 9L18 15M21 4H8L1 12L8 20H21C21.5304 20 22.0391 19.7893 22.4142 19.4142C22.7893 19.0391 23 18.5304 23 18V6C23 5.46957 22.7893 4.96086 22.4142 4.58579C22.0391 4.21071 21.5304 4 21 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        <v-button
+          color="light-gray"
+          shade="light"
+          size="small"
+          class="ml-1"
+          @click="clearAll"
+        >
+          <svg
+            class="text-red-600 h-4 w-4 inline -mt-1 mr-1"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M18 9L12 15M12 9L18 15M21 4H8L1 12L8 20H21C21.5304 20 22.0391 19.7893 22.4142 19.4142C22.7893 19.0391 23 18.5304 23 18V6C23 5.46957 22.7893 4.96086 22.4142 4.58579C22.0391 4.21071 21.5304 4 21 4Z"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
 
           Clear All
@@ -29,35 +65,64 @@
     <h5 class="font-semibold mt-3">
       1. Conditions
     </h5>
-    <condition-editor ref="filter-editor" v-model="logic.conditions" class="mt-1 border-t border rounded-md" :form="form" />
+    <condition-editor
+      ref="filter-editor"
+      v-model="logic.conditions"
+      class="mt-1 border-t border rounded-md"
+      :form="form"
+    />
 
     <h5 class="font-semibold mt-3">
       2. Actions
     </h5>
-    <select-input :key="resetKey" v-model="logic.actions" name="actions"
-                  :multiple="true" class="mt-1" placeholder="Actions..."
-                  help="Action(s) triggered when above conditions are true"
-                  :options="actionOptions"
-                  @update:model-value="onActionInput"
+    <select-input
+      :key="resetKey"
+      v-model="logic.actions"
+      name="actions"
+      :multiple="true"
+      class="mt-1"
+      placeholder="Actions..."
+      help="Action(s) triggered when above conditions are true"
+      :options="actionOptions"
+      @update:model-value="onActionInput"
     />
 
-    <modal :show="showCopyFormModal" @close="showCopyFormModal = false">
+    <modal
+      :show="showCopyFormModal"
+      @close="showCopyFormModal = false"
+    >
       <div class="min-h-[450px]">
         <h3 class="font-semibold block text-lg">
           Copy logic from another field
         </h3>
         <p class="text-gray-400 text-xs mb-5">
-          Select another field/block to copy its logic and apply it to "{{ field.name }}".
+          Select another field/block to copy its logic and apply it to "{{
+            field.name
+          }}".
         </p>
-        <select-input v-model="copyFrom" name="copy_from" emit-key="value"
-                      label="Copy logic from" placeholder="Choose a field/block..."
-                      :options="copyFromOptions" :searchable="copyFromOptions && copyFromOptions.options > 5"
+        <select-input
+          v-model="copyFrom"
+          name="copy_from"
+          emit-key="value"
+          label="Copy logic from"
+          placeholder="Choose a field/block..."
+          :options="copyFromOptions"
+          :searchable="copyFromOptions && copyFromOptions.options > 5"
         />
         <div class="flex justify-between mb-6">
-          <v-button color="blue" shade="light" @click="copyLogic">
+          <v-button
+            color="blue"
+            shade="light"
+            @click="copyLogic"
+          >
             Confirm & Copy
           </v-button>
-          <v-button color="gray" shade="light" class="ml-1" @click="showCopyFormModal=false">
+          <v-button
+            color="gray"
+            shade="light"
+            class="ml-1"
+            @click="showCopyFormModal = false"
+          >
             Close
           </v-button>
         </div>
@@ -67,136 +132,161 @@
 </template>
 
 <script>
-import ConditionEditor from './ConditionEditor.client.vue'
-import Modal from '../../../../global/Modal.vue'
-import clonedeep from 'clone-deep'
-import { default as _has } from 'lodash/has'
+import ConditionEditor from "./ConditionEditor.client.vue"
+import Modal from "../../../../global/Modal.vue"
+import clonedeep from "clone-deep"
+import { default as _has } from "lodash/has"
 
 export default {
-  name: 'FormBlockLogicEditor',
+  name: "FormBlockLogicEditor",
   components: { Modal, ConditionEditor },
   props: {
     field: {
       type: Object,
-      required: false
+      required: false,
     },
     form: {
       type: Object,
-      required: false
-    }
+      required: false,
+    },
   },
 
-  data () {
+  data() {
     return {
       resetKey: 0,
       logic: this.field.logic || {
         conditions: null,
-        actions: []
+        actions: [],
       },
       showCopyFormModal: false,
-      copyFrom: null
+      copyFrom: null,
     }
   },
 
   computed: {
-    copyFromOptions () {
-      return this.form.properties.filter((field) => {
-        return field.id !== this.field.id && _has(field, 'logic') && field.logic !== null && field.logic !== {}
-      }).map((field) => {
-        return { name: field.name, value: field.id }
-      })
+    copyFromOptions() {
+      return this.form.properties
+        .filter((field) => {
+          return (
+            field.id !== this.field.id &&
+            _has(field, "logic") &&
+            field.logic !== null &&
+            field.logic !== {}
+          )
+        })
+        .map((field) => {
+          return { name: field.name, value: field.id }
+        })
     },
-    actionOptions () {
-      if (['nf-text', 'nf-code', 'nf-page-break', 'nf-divider', 'nf-image'].includes(this.field.type)) {
+    actionOptions() {
+      if (
+        [
+          "nf-text",
+          "nf-code",
+          "nf-page-break",
+          "nf-divider",
+          "nf-image",
+        ].includes(this.field.type)
+      ) {
         if (this.field.hidden) {
-          return [{ name: 'Show Block', value: 'show-block' }]
+          return [{ name: "Show Block", value: "show-block" }]
         } else {
-          return [{ name: 'Hide Block', value: 'hide-block' }]
+          return [{ name: "Hide Block", value: "hide-block" }]
         }
       }
 
       if (this.field.hidden) {
         return [
-          { name: 'Show Block', value: 'show-block' },
-          { name: 'Require answer', value: 'require-answer' }
+          { name: "Show Block", value: "show-block" },
+          { name: "Require answer", value: "require-answer" },
         ]
       } else if (this.field.disabled) {
         return [
-          { name: 'Enable Block', value: 'enable-block' },
-          (this.field.required
-            ? { name: 'Make it optional', value: 'make-it-optional' }
+          { name: "Enable Block", value: "enable-block" },
+          this.field.required
+            ? { name: "Make it optional", value: "make-it-optional" }
             : {
-                name: 'Require answer',
-                value: 'require-answer'
-              })
+                name: "Require answer",
+                value: "require-answer",
+              },
         ]
       } else {
         return [
-          { name: 'Hide Block', value: 'hide-block' },
-          { name: 'Disable Block', value: 'disable-block' },
-          (this.field.required
-            ? { name: 'Make it optional', value: 'make-it-optional' }
+          { name: "Hide Block", value: "hide-block" },
+          { name: "Disable Block", value: "disable-block" },
+          this.field.required
+            ? { name: "Make it optional", value: "make-it-optional" }
             : {
-                name: 'Require answer',
-                value: 'require-answer'
-              })
+                name: "Require answer",
+                value: "require-answer",
+              },
         ]
       }
-    }
+    },
   },
 
   watch: {
     logic: {
-      handler () {
+      handler() {
         this.field.logic = this.logic
       },
-      deep: true
+      deep: true,
     },
-    'field.id': {
-      handler (field, oldField) {
+    "field.id": {
+      handler() {
         // On field change, reset logic
         this.logic = this.field.logic || {
           conditions: null,
-          actions: []
+          actions: [],
         }
-      }
+      },
     },
-    'field.required': 'cleanConditions',
-    'field.disabled': 'cleanConditions',
-    'field.hidden': 'cleanConditions'
+    "field.required": "cleanConditions",
+    "field.disabled": "cleanConditions",
+    "field.hidden": "cleanConditions",
   },
 
-  mounted () {
-    if (!_has(this.field, 'logic')) {
+  mounted() {
+    if (!_has(this.field, "logic")) {
       this.field.logic = this.logic
     }
   },
 
   methods: {
-    clearAll () {
+    clearAll() {
       this.logic.conditions = null
       this.logic.actions = []
       this.refreshActions()
     },
-    onActionInput () {
+    onActionInput() {
       if (this.logic.actions.length >= 2) {
-        if (this.logic.actions[1] === 'require-answer' && this.logic.actions[0] === 'hide-block') {
-          this.logic.actions = ['require-answer']
-        } else if (this.logic.actions[1] === 'hide-block' && this.logic.actions[0] === 'require-answer') {
-          this.logic.actions = ['hide-block']
+        if (
+          this.logic.actions[1] === "require-answer" &&
+          this.logic.actions[0] === "hide-block"
+        ) {
+          this.logic.actions = ["require-answer"]
+        } else if (
+          this.logic.actions[1] === "hide-block" &&
+          this.logic.actions[0] === "require-answer"
+        ) {
+          this.logic.actions = ["hide-block"]
         }
         this.refreshActions()
       }
     },
-    cleanConditions () {
-      const availableActions = this.actionOptions.map(function (op) { return op.value })
-      this.logic.actions = availableActions.filter(value => this.logic.actions.includes(value))
+    cleanConditions() {
+      const availableActions = this.actionOptions.map(function (op) {
+        return op.value
+      })
+      this.logic.actions = availableActions.filter((value) =>
+        this.logic.actions.includes(value),
+      )
       this.refreshActions()
     },
-    refreshActions () {
+    refreshActions() {
       this.resetKey++
     },
-    copyLogic () {
+    copyLogic() {
       if (this.copyFrom) {
         const property = this.form.properties.find((property) => {
           return property.id === this.copyFrom
@@ -207,7 +297,7 @@ export default {
         }
       }
       this.showCopyFormModal = false
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/open/forms/components/form-logic-components/GroupControlSlot.vue b/client/components/open/forms/components/form-logic-components/GroupControlSlot.vue
index 63817d0cd..60c62af4b 100644
--- a/client/components/open/forms/components/form-logic-components/GroupControlSlot.vue
+++ b/client/components/open/forms/components/form-logic-components/GroupControlSlot.vue
@@ -1,16 +1,33 @@
 <template>
   <div class="flex flex-wrap px-4 py-1 -ml-1 -mt-1">
-    <select-input ref="ruleSelect" v-model="selectedRule" class="flex-grow ml-1 mr-1 mt-1"
-                  wrapper-class="relative" placeholder="Add condition on input field"
-                  :options="groupCtrl.rules" margin-bottom="" :searchable="groupCtrl.rules.length > 5"
-                  emit-key="identifier"
-                  option-key="identifier"
-                  name="group-control-slot-rule"
+    <select-input
+      ref="ruleSelect"
+      v-model="selectedRule"
+      class="flex-grow ml-1 mr-1 mt-1"
+      wrapper-class="relative"
+      placeholder="Add condition on input field"
+      :options="groupCtrl.rules"
+      margin-bottom=""
+      :searchable="groupCtrl.rules.length > 5"
+      emit-key="identifier"
+      option-key="identifier"
+      name="group-control-slot-rule"
     />
-    <v-button class="ml-1 mt-1" color="blue" size="small" :disabled="(selectedRule === '')?true:null" @click="addRule">
+    <v-button
+      class="ml-1 mt-1"
+      color="blue"
+      size="small"
+      :disabled="selectedRule === '' ? true : null"
+      @click="addRule"
+    >
       Add Condition
     </v-button>
-    <v-button class="ml-1 mt-1" color="outline-blue" size="small" @click="groupCtrl.newGroup">
+    <v-button
+      class="ml-1 mt-1"
+      color="outline-blue"
+      size="small"
+      @click="groupCtrl.newGroup"
+    >
       Add Group
     </v-button>
   </div>
@@ -20,20 +37,19 @@
 export default {
   components: {},
   props: { groupCtrl: { type: Object, required: true } },
-  data () {
+  data() {
     return {
-      selectedRule: null
+      selectedRule: null,
     }
   },
   methods: {
-    addRule () {
+    addRule() {
       if (this.selectedRule) {
         this.groupCtrl.addRule(this.selectedRule)
         this.$refs.ruleSelect.content = null
         this.selectedRule = null
       }
-    }
-  }
-
+    },
+  },
 }
 </script>
diff --git a/client/components/open/forms/components/templates/FormTemplateModal.vue b/client/components/open/forms/components/templates/FormTemplateModal.vue
index 671608d0b..68778a247 100644
--- a/client/components/open/forms/components/templates/FormTemplateModal.vue
+++ b/client/components/open/forms/components/templates/FormTemplateModal.vue
@@ -1,10 +1,21 @@
 <template>
-  <modal :show="show" @close="emit('close')">
+  <modal
+    :show="show"
+    @close="emit('close')"
+  >
     <template #icon>
-      <svg class="w-10 h-10 text-blue" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        class="w-10 h-10 text-blue"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M17 27C16.0681 27 15.6022 27 15.2346 26.8478C14.7446 26.6448 14.3552 26.2554 14.1522 25.7654C14 25.3978 14 24.9319 14 24V17.2C14 16.0799 14 15.5198 14.218 15.092C14.4097 14.7157 14.7157 14.4097 15.092 14.218C15.5198 14 16.0799 14 17.2 14H24C24.9319 14 25.3978 14 25.7654 14.1522C26.2554 14.3552 26.6448 14.7446 26.8478 15.2346C27 15.6022 27 16.0681 27 17M24.2 34H30.8C31.9201 34 32.4802 34 32.908 33.782C33.2843 33.5903 33.5903 33.2843 33.782 32.908C34 32.4802 34 31.9201 34 30.8V24.2C34 23.0799 34 22.5198 33.782 22.092C33.5903 21.7157 33.2843 21.4097 32.908 21.218C32.4802 21 31.9201 21 30.8 21H24.2C23.0799 21 22.5198 21 22.092 21.218C21.7157 21.4097 21.4097 21.7157 21.218 22.092C21 22.5198 21 23.0799 21 24.2V30.8C21 31.9201 21 32.4802 21.218 32.908C21.4097 33.2843 21.7157 33.5903 22.092 33.782C22.5198 34 23.0799 34 24.2 34Z"
-          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
       </svg>
     </template>
@@ -18,37 +29,99 @@
     </template>
     <div class="p-4">
       <p v-if="!template">
-        New template will be create from your form: <span class="font-semibold">{{ form.title }}</span>.
+        New template will be create from your form:
+        <span class="font-semibold">{{ form.title }}</span>.
       </p>
 
-      <form v-if="templateForm" class="mt-6" @submit.prevent="onSubmit" @keydown="templateForm.onKeydown($event)">
+      <form
+        v-if="templateForm"
+        class="mt-6"
+        @submit.prevent="onSubmit"
+        @keydown="templateForm.onKeydown($event)"
+      >
         <div class="-m-6">
           <div class="border-t py-4 px-6">
-            <toggle-switch-input v-if="user && (user.admin || user.template_editor)" name="publicly_listed" :form="templateForm" class="mt-4" label="Publicly Listed?" />
-            <text-input name="name" :form="templateForm" class="mt-4" label="Title" :required="true" />
-            <text-input name="slug" :form="templateForm" class="mt-4" label="Slug" :required="true" />
-            <text-area-input name="short_description" :form="templateForm" class="mt-4" label="Short Description"
-                             :required="true"
+            <toggle-switch-input
+              v-if="user && (user.admin || user.template_editor)"
+              name="publicly_listed"
+              :form="templateForm"
+              class="mt-4"
+              label="Publicly Listed?"
             />
-            <rich-text-area-input name="description" :form="templateForm" class="mt-4" label="Description"
-                                  :required="true"
+            <text-input
+              name="name"
+              :form="templateForm"
+              class="mt-4"
+              label="Title"
+              :required="true"
             />
-            <text-input name="image_url" :form="templateForm" class="mt-4" label="Image" :required="true" />
-            <select-input name="types" :form="templateForm" class="mt-4" label="Types" :options="typesOptions"
-                          :multiple="true" :searchable="true"
+            <text-input
+              name="slug"
+              :form="templateForm"
+              class="mt-4"
+              label="Slug"
+              :required="true"
             />
-            <select-input name="industries" :form="templateForm" class="mt-4" label="Industries"
-                          :options="industriesOptions" :multiple="true" :searchable="true"
+            <text-area-input
+              name="short_description"
+              :form="templateForm"
+              class="mt-4"
+              label="Short Description"
+              :required="true"
             />
-            <select-input name="related_templates" :form="templateForm" class="mt-4" label="Related Templates"
-                          :options="templatesOptions" :multiple="true" :searchable="true"
+            <rich-text-area-input
+              name="description"
+              :form="templateForm"
+              class="mt-4"
+              label="Description"
+              :required="true"
             />
-            <questions-editor name="questions" :questions="templateForm.questions" class="mt-4"
-                              label="Frequently asked questions"
+            <text-input
+              name="image_url"
+              :form="templateForm"
+              class="mt-4"
+              label="Image"
+              :required="true"
+            />
+            <select-input
+              name="types"
+              :form="templateForm"
+              class="mt-4"
+              label="Types"
+              :options="typesOptions"
+              :multiple="true"
+              :searchable="true"
+            />
+            <select-input
+              name="industries"
+              :form="templateForm"
+              class="mt-4"
+              label="Industries"
+              :options="industriesOptions"
+              :multiple="true"
+              :searchable="true"
+            />
+            <select-input
+              name="related_templates"
+              :form="templateForm"
+              class="mt-4"
+              label="Related Templates"
+              :options="templatesOptions"
+              :multiple="true"
+              :searchable="true"
+            />
+            <questions-editor
+              name="questions"
+              :questions="templateForm.questions"
+              class="mt-4"
+              label="Frequently asked questions"
             />
           </div>
           <div class="flex justify-end mt-4 pb-5 px-6">
-            <v-button class="mr-2" :loading="templateForm.busy">
+            <v-button
+              class="mr-2"
+              :loading="templateForm.busy"
+            >
               <template v-if="template">
                 Update
               </template>
@@ -56,12 +129,23 @@
                 Create
               </template>
             </v-button>
-            <v-button v-if="template" color="red" class="mr-2"
-                      @click.prevent="useAlert().confirm('Do you really want to delete this template?', deleteFormTemplate)"
+            <v-button
+              v-if="template"
+              color="red"
+              class="mr-2"
+              @click.prevent="
+                useAlert().confirm(
+                  'Do you really want to delete this template?',
+                  deleteFormTemplate,
+                )
+              "
             >
               Delete
             </v-button>
-            <v-button color="white" @click.prevent="emit('close')">
+            <v-button
+              color="white"
+              @click.prevent="emit('close')"
+            >
               Close
             </v-button>
           </div>
@@ -72,68 +156,73 @@
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits, computed } from 'vue'
-import QuestionsEditor from './QuestionsEditor.vue'
+import { ref, defineProps, defineEmits, computed } from "vue"
+import QuestionsEditor from "./QuestionsEditor.vue"
 
 const props = defineProps({
   show: { type: Boolean, required: true },
   form: { type: Object, required: true },
-  template: { type: Object, required: false, default: () => {} }
+  template: { type: Object, required: false, default: () => {} },
 })
 
 const authStore = useAuthStore()
 const templatesStore = useTemplatesStore()
 const router = useRouter()
-let user = computed(() => authStore.user)
-let templates = computed(() => [...templatesStore.content.values()])
-let industries = computed(() => [...templatesStore.industries.values()])
-let types = computed(() => [...templatesStore.types.values()])
+const user = computed(() => authStore.user)
+const templates = computed(() => [...templatesStore.content.values()])
+const industries = computed(() => [...templatesStore.industries.values()])
+const types = computed(() => [...templatesStore.types.values()])
 
-let templateForm = ref(null)
-const emit = defineEmits(['close'])
+const templateForm = ref(null)
+const emit = defineEmits(["close"])
 
 onMounted(() => {
-  templateForm.value = useForm(props.template ?? {
-    publicly_listed: false,
-    name: '',
-    slug: '',
-    short_description: '',
-    description: '',
-    image_url: '',
-    types: null,
-    industries: null,
-    related_templates: null,
-    questions: []
-  })
+  templateForm.value = useForm(
+    props.template ?? {
+      publicly_listed: false,
+      name: "",
+      slug: "",
+      short_description: "",
+      description: "",
+      image_url: "",
+      types: null,
+      industries: null,
+      related_templates: null,
+      questions: [],
+    },
+  )
 })
 
-watch(() => props.show, () => {
-  if (props.show) {
-    loadAllTemplates(templatesStore)
-  }
-})
+watch(
+  () => props.show,
+  () => {
+    if (props.show) {
+      loadAllTemplates(templatesStore)
+    }
+  },
+)
 
-let typesOptions = computed(() => {
+const typesOptions = computed(() => {
   return Object.values(types.value).map((type) => {
     return {
       name: type.name,
-      value: type.slug
+      value: type.slug,
     }
   })
 })
-let industriesOptions = computed(() => {
+const industriesOptions = computed(() => {
   return Object.values(industries.value).map((industry) => {
     return {
       name: industry.name,
-      value: industry.slug
+      value: industry.slug,
     }
   })
 })
-let templatesOptions = computed(() => {
+const templatesOptions = computed(() => {
   return Object.values(templates.value).map((template) => {
     return {
       name: template.name,
-      value: template.slug
+      value: template.slug,
     }
   })
 })
@@ -147,33 +236,37 @@ const onSubmit = () => {
 }
 const createFormTemplate = async () => {
   templateForm.value.form = props.form
-  await templateForm.value.post('/templates').then((data) => {
+  await templateForm.value.post("/templates").then((data) => {
     if (data.message) {
       useAlert().success(data.message)
     }
     templatesStore.save(data.data)
-    emit('close')
+    emit("close")
   })
 }
 const updateFormTemplate = async () => {
   templateForm.value.form = props.form
-  await templateForm.value.put('/templates/' + props.template.id).then((data) => {
-    if (data.message) {
-      useAlert().success(data.message)
-    }
-    templatesStore.save(data.data)
-    emit('close')
-  })
+  await templateForm.value
+    .put("/templates/" + props.template.id)
+    .then((data) => {
+      if (data.message) {
+        useAlert().success(data.message)
+      }
+      templatesStore.save(data.data)
+      emit("close")
+    })
 }
 const deleteFormTemplate = async () => {
   if (!props.template) return
-  opnFetch('/templates/' + props.template.id, {method:'DELETE'}).then((data) => {
-    if (data.message) {
-      useAlert().success(data.message)
-    }
-    router.push({ name: 'templates' })
-    templatesStore.remove(props.template)
-    emit('close')
-  })
+  opnFetch("/templates/" + props.template.id, { method: "DELETE" }).then(
+    (data) => {
+      if (data.message) {
+        useAlert().success(data.message)
+      }
+      router.push({ name: "templates" })
+      templatesStore.remove(props.template)
+      emit("close")
+    },
+  )
 }
 </script>
diff --git a/client/components/open/forms/components/templates/QuestionsEditor.vue b/client/components/open/forms/components/templates/QuestionsEditor.vue
index 5e9b8f6a7..618f9f09f 100644
--- a/client/components/open/forms/components/templates/QuestionsEditor.vue
+++ b/client/components/open/forms/components/templates/QuestionsEditor.vue
@@ -1,77 +1,148 @@
 <template>
   <div :class="wrapperClass">
-    <label v-if="label" :for="id?id:name"
-           :class="[theme.default.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
+    <label
+      v-if="label"
+      :for="id ? id : name"
+      :class="[
+        theme.default.label,
+        { 'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels },
+      ]"
     >
       {{ label }}
-      <span v-if="required" class="text-red-500 required-dot">*</span>
+      <span
+        v-if="required"
+        class="text-red-500 required-dot"
+      >*</span>
     </label>
 
-    <Loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
-    <div v-else class="my-3">
-      <div v-for="(questionForm, quesKey) in allQuestions" :key="quesKey" class="bg-gray-100 p-2 mb-4">
-          <v-button color="red" size="small" class="mb-2" @click.prevent="onRemove(quesKey)">
-            <svg class="h-4 w-4 text-white inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-            Remove
-          </v-button>
-          <text-input name="question" :form="questionForm" placeholder="Question title" />
-          <rich-text-area-input name="answer" :form="questionForm" class="mt-4" placeholder="Question response" />
+    <Loader
+      v-if="loading"
+      key="loader"
+      class="h-6 w-6 text-nt-blue mx-auto"
+    />
+    <div
+      v-else
+      class="my-3"
+    >
+      <div
+        v-for="(questionForm, quesKey) in allQuestions"
+        :key="quesKey"
+        class="bg-gray-100 p-2 mb-4"
+      >
+        <v-button
+          color="red"
+          size="small"
+          class="mb-2"
+          @click.prevent="onRemove(quesKey)"
+        >
+          <svg
+            class="h-4 w-4 text-white inline mr-1 -mt-1"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          Remove
+        </v-button>
+        <text-input
+          name="question"
+          :form="questionForm"
+          placeholder="Question title"
+        />
+        <rich-text-area-input
+          name="answer"
+          :form="questionForm"
+          class="mt-4"
+          placeholder="Question response"
+        />
       </div>
-      <v-button v-if="addNew" color="green" size="small" nativeType="button" class="mt-2 flex" @click.prevent="onAdd">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-1 inline" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+      <v-button
+        v-if="addNew"
+        color="green"
+        size="small"
+        native-type="button"
+        class="mt-2 flex"
+        @click.prevent="onAdd"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 mr-1 inline"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
         </svg>
         Add New
       </v-button>
     </div>
 
-    <small v-if="help" :class="theme.SelectInput.help">
+    <small
+      v-if="help"
+      :class="theme.SelectInput.help"
+    >
       <slot name="help">{{ help }}</slot>
     </small>
-    <has-error v-if="hasValidation" :form="form" :field="name" />
+    <has-error
+      v-if="hasValidation"
+      :form="form"
+      :field="name"
+    />
   </div>
 </template>
 
 <script>
-import inputMixin from '~/mixins/forms/input.js'
+import inputMixin from "~/mixins/forms/input.js"
 
 export default {
-  name: 'QuestionsEditor',
+  name: "QuestionsEditor",
   mixins: [inputMixin],
 
   props: {
     loading: { type: Boolean, default: false },
     addNew: { type: Boolean, default: true },
-    questions: { type: Array, default: [] },
+    questions: { type: Array, default: ()=>[] },
   },
 
-  data () {
+  data() {
     return {
       allQuestions: null,
       newQuestion: {
-        question: '',
-        answer: '',
-      }
+        question: "",
+        answer: "",
+      },
     }
   },
 
-  mounted () {
-    this.allQuestions = (this.questions.length > 0) ? this.questions : [this.newQuestion]
-  },
+  computed: {},
 
-  watch: { },
+  watch: {},
 
-  computed: { },
+  mounted() {
+    this.allQuestions =
+      this.questions.length > 0 ? this.questions : [this.newQuestion]
+  },
 
   methods: {
     onAdd() {
       this.allQuestions.push(this.newQuestion)
     },
-    onRemove(key){
+    onRemove(key) {
       this.allQuestions.splice(key, 1)
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/open/forms/fields/FormFieldEdit.vue b/client/components/open/forms/fields/FormFieldEdit.vue
index bf88d9824..3a3011cb8 100644
--- a/client/components/open/forms/fields/FormFieldEdit.vue
+++ b/client/components/open/forms/fields/FormFieldEdit.vue
@@ -1,19 +1,44 @@
 <template>
   <div>
     <div class="p-4 border-b sticky top-0 z-10 bg-white">
-      <button v-if="!field" class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
-        <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                stroke-linejoin="round"
+      <button
+        v-if="!field"
+        class="text-gray-500 hover:text-gray-900 cursor-pointer"
+        @click.prevent="closeSidebar"
+      >
+        <svg
+          class="h-6 w-6"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18 6L6 18M6 6L18 18"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
           />
         </svg>
       </button>
       <template v-else>
         <div class="flex">
-          <button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
-            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                    stroke-linejoin="round"
+          <button
+            class="text-gray-500 hover:text-gray-900 cursor-pointer"
+            @click.prevent="closeSidebar"
+          >
+            <svg
+              class="h-6 w-6"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M18 6L6 18M6 6L18 18"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
               />
             </svg>
           </button>
@@ -22,120 +47,162 @@
           </div>
         </div>
         <div class="flex mt-2">
-          <v-button color="light-gray" class="border-r-0 rounded-r-none text-xs hover:bg-red-50" size="small"
-                    @click="removeBlock"
+          <v-button
+            color="light-gray"
+            class="border-r-0 rounded-r-none text-xs hover:bg-red-50"
+            size="small"
+            @click="removeBlock"
           >
-            <svg class="h-4 w-4 text-red-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
-                 xmlns="http://www.w3.org/2000/svg"
+            <svg
+              class="h-4 w-4 text-red-600 inline mr-1 -mt-1"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 d="M3 6H5M5 6H21M5 6V20C5 20.5304 5.21071 21.0391 5.58579 21.4142C5.96086 21.7893 6.46957 22 7 22H17C17.5304 22 18.0391 21.7893 18.4142 21.4142C18.7893 21.0391 19 20.5304 19 20V6H5ZM8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M10 11V17M14 11V17"
-                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
               />
             </svg>
             Remove
           </v-button>
-          <v-button size="small" class="text-xs" :class="{
-            'rounded-none border-r-0':!isBlockField && typeCanBeChanged,
-            'rounded-l-none':isBlockField || !typeCanBeChanged
-          }" color="light-gray" @click="duplicateBlock"
+          <v-button
+            size="small"
+            class="text-xs"
+            :class="{
+              'rounded-none border-r-0': !isBlockField && typeCanBeChanged,
+              'rounded-l-none': isBlockField || !typeCanBeChanged,
+            }"
+            color="light-gray"
+            @click="duplicateBlock"
           >
-            <svg class="h-4 w-4 text-blue-600 inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
-                 xmlns="http://www.w3.org/2000/svg"
+            <svg
+              class="h-4 w-4 text-blue-600 inline mr-1 -mt-1"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 d="M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5M11 9H20C21.1046 9 22 9.89543 22 11V20C22 21.1046 21.1046 22 20 22H11C9.89543 22 9 21.1046 9 20V11C9 9.89543 9.89543 9 11 9Z"
-                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
               />
             </svg>
             Duplicate
           </v-button>
-          <change-field-type v-if="!isBlockField" btn-classes="rounded-l-none text-xs" :field="field"
-                             @changeType="onChangeType"
+          <change-field-type
+            v-if="!isBlockField"
+            btn-classes="rounded-l-none text-xs"
+            :field="field"
+            @change-type="onChangeType"
           />
         </div>
       </template>
     </div>
 
     <template v-if="field">
-      <field-options v-if="!isBlockField" :form="form" :field="field" />
-      <block-options v-if="isBlockField" :form="form" :field="field" />
+      <field-options
+        v-if="!isBlockField"
+        :form="form"
+        :field="field"
+      />
+      <block-options
+        v-if="isBlockField"
+        :form="form"
+        :field="field"
+      />
     </template>
-    <div v-else class="text-center p-10">
+    <div
+      v-else
+      class="text-center p-10"
+    >
       Click on field's setting icon in your form to modify it
     </div>
   </div>
 </template>
 
 <script>
-import { computed } from 'vue'
-import clonedeep from 'clone-deep'
-import { useWorkingFormStore } from '../../../../stores/working_form'
-import ChangeFieldType from './components/ChangeFieldType.vue'
-import FieldOptions from './components/FieldOptions.vue'
-import BlockOptions from './components/BlockOptions.vue'
+import { computed } from "vue"
+import clonedeep from "clone-deep"
+import { useWorkingFormStore } from "../../../../stores/working_form"
+import ChangeFieldType from "./components/ChangeFieldType.vue"
+import FieldOptions from "./components/FieldOptions.vue"
+import BlockOptions from "./components/BlockOptions.vue"
 
 export default {
-  name: 'FormFieldEdit',
+  name: "FormFieldEdit",
   components: { ChangeFieldType, FieldOptions, BlockOptions },
   props: {},
-  setup () {
+  setup() {
     const workingFormStore = useWorkingFormStore()
     return {
       workingFormStore,
-      selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex)
+      selectedFieldIndex: computed(() => workingFormStore.selectedFieldIndex),
     }
   },
-  data () {
-    return {
-
-    }
+  data() {
+    return {}
   },
 
   computed: {
     form: {
-      get () {
+      get() {
         return this.workingFormStore.content
       },
       /* We add a setter */
-      set (value) {
+      set(value) {
         this.workingFormStore.set(value)
-      }
+      },
     },
-    field () {
-      return (this.form && this.selectedFieldIndex !== null) ? this.form.properties[this.selectedFieldIndex] : null
+    field() {
+      return this.form && this.selectedFieldIndex !== null
+        ? this.form.properties[this.selectedFieldIndex]
+        : null
     },
-    isBlockField () {
-      return this.field && this.field.type.startsWith('nf')
+    isBlockField() {
+      return this.field && this.field.type.startsWith("nf")
+    },
+    typeCanBeChanged() {
+      return [
+        "text",
+        "email",
+        "phone_number",
+        "number",
+        "select",
+        "multi_select",
+        "rating",
+        "scale",
+        "slider",
+      ].includes(this.field.type)
     },
-    typeCanBeChanged () {
-      return ['text', 'email', 'phone_number', 'number', 'select', 'multi_select', 'rating', 'scale', 'slider'].includes(this.field.type)
-    }
   },
 
   watch: {},
 
-  created () {
-  },
+  created() {},
 
-  mounted () {
-  },
+  mounted() {},
 
   methods: {
-    onChangeType (newType) {
-      if (['select', 'multi_select'].includes(this.field.type)) {
+    onChangeType(newType) {
+      if (["select", "multi_select"].includes(this.field.type)) {
         this.field[newType] = this.field[this.field.type] // Set new options with new type
         delete this.field[this.field.type] // remove old type options
       }
       this.field.type = newType
     },
-    removeBlock () {
+    removeBlock() {
       const newFields = clonedeep(this.form.properties)
       newFields.splice(this.selectedFieldIndex, 1)
       this.form.properties = newFields
       this.closeSidebar()
     },
-    duplicateBlock () {
+    duplicateBlock() {
       const newFields = clonedeep(this.form.properties)
       const newField = clonedeep(this.form.properties[this.selectedFieldIndex])
       newField.id = this.generateUUID()
@@ -143,24 +210,33 @@ export default {
       this.form.properties = newFields
       this.closeSidebar()
     },
-    closeSidebar () {
+    closeSidebar() {
       this.workingFormStore.closeEditFieldSidebar()
     },
-    generateUUID () {
-      let d = new Date().getTime()// Timestamp
-      let d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now() * 1000)) || 0// Time in microseconds since page-load or 0 if unsupported
-      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        let r = Math.random() * 16// random number between 0 and 16
-        if (d > 0) { // Use timestamp until depleted
-          r = (d + r) % 16 | 0
-          d = Math.floor(d / 16)
-        } else { // Use microseconds since page-load if supported
-          r = (d2 + r) % 16 | 0
-          d2 = Math.floor(d2 / 16)
-        }
-        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
-      })
-    }
-  }
+    generateUUID() {
+      let d = new Date().getTime() // Timestamp
+      let d2 =
+        (typeof performance !== "undefined" &&
+          performance.now &&
+          performance.now() * 1000) ||
+        0 // Time in microseconds since page-load or 0 if unsupported
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function (c) {
+          let r = Math.random() * 16 // random number between 0 and 16
+          if (d > 0) {
+            // Use timestamp until depleted
+            r = (d + r) % 16 | 0
+            d = Math.floor(d / 16)
+          } else {
+            // Use microseconds since page-load if supported
+            r = (d2 + r) % 16 | 0
+            d2 = Math.floor(d2 / 16)
+          }
+          return (c === "x" ? r : (r & 0x3) | 0x8).toString(16)
+        },
+      )
+    },
+  },
 }
 </script>
diff --git a/client/components/open/forms/fields/components/BlockOptions.vue b/client/components/open/forms/fields/components/BlockOptions.vue
index 49781adcf..412c36d16 100644
--- a/client/components/open/forms/fields/components/BlockOptions.vue
+++ b/client/components/open/forms/fields/components/BlockOptions.vue
@@ -8,153 +8,196 @@
       <p class="text-gray-400 mb-3 text-xs">
         Exclude this field or make it required.
       </p>
-      <v-checkbox v-model="field.hidden" class="mb-3"
-                  :name="field.id+'_hidden'"
-                  @update:model-value="onFieldHiddenChange"
+      <v-checkbox
+        v-model="field.hidden"
+        class="mb-3"
+        :name="field.id + '_hidden'"
+        @update:model-value="onFieldHiddenChange"
       >
         Hidden
       </v-checkbox>
-      <select-input name="width" class="mt-3"
-                    :options="[
-                      {name:'Full',value:'full'},
-                      {name:'1/2 (half width)',value:'1/2'},
-                      {name:'1/3 (a third of the width)',value:'1/3'},
-                      {name:'2/3 (two thirds of the width)',value:'2/3'},
-                      {name:'1/4 (a quarter of the width)',value:'1/4'},
-                      {name:'3/4 (three quarters of the width)',value:'3/4'}
-                    ]"
-                    :form="field" label="Field Width"
+      <select-input
+        name="width"
+        class="mt-3"
+        :options="[
+          { name: 'Full', value: 'full' },
+          { name: '1/2 (half width)', value: '1/2' },
+          { name: '1/3 (a third of the width)', value: '1/3' },
+          { name: '2/3 (two thirds of the width)', value: '2/3' },
+          { name: '1/4 (a quarter of the width)', value: '1/4' },
+          { name: '3/4 (three quarters of the width)', value: '3/4' },
+        ]"
+        :form="field"
+        label="Field Width"
       />
-      <select-input v-if="['nf-text','nf-image'].includes(field.type)" name="align" class="mt-3"
-                    :options="[
-                      {name:'Left',value:'left'},
-                      {name:'Center',value:'center'},
-                      {name:'Right',value:'right'},
-                      {name:'Justify',value:'justify'}
-                    ]"
-                    :form="field" label="Field Alignment"
+      <select-input
+        v-if="['nf-text', 'nf-image'].includes(field.type)"
+        name="align"
+        class="mt-3"
+        :options="[
+          { name: 'Left', value: 'left' },
+          { name: 'Center', value: 'center' },
+          { name: 'Right', value: 'right' },
+          { name: 'Justify', value: 'justify' },
+        ]"
+        :form="field"
+        label="Field Alignment"
       />
     </div>
 
-    <div v-if="field.type == 'nf-text'" class="border-b py-2 px-4">
-      <rich-text-area-input name="content"
-                            :form="field"
-                            label="Content"
-                            :required="false"
+    <div
+      v-if="field.type == 'nf-text'"
+      class="border-b py-2 px-4"
+    >
+      <rich-text-area-input
+        name="content"
+        :form="field"
+        label="Content"
+        :required="false"
       />
     </div>
 
-    <div v-else-if="field.type == 'nf-page-break'" class="border-b py-2 px-4">
-      <text-input name="next_btn_text"
-                  :form="field"
-                  label="Text of next button"
-                  :required="true"
+    <div
+      v-else-if="field.type == 'nf-page-break'"
+      class="border-b py-2 px-4"
+    >
+      <text-input
+        name="next_btn_text"
+        :form="field"
+        label="Text of next button"
+        :required="true"
       />
-      <text-input name="previous_btn_text"
-                  :form="field"
-                  label="Text of previous button"
-                  help="Shown on the next page"
-                  :required="true"
+      <text-input
+        name="previous_btn_text"
+        :form="field"
+        label="Text of previous button"
+        help="Shown on the next page"
+        :required="true"
       />
     </div>
 
-    <div v-else-if="field.type == 'nf-divider'" class="border-b py-2 px-4">
-      <text-input name="name"
-                  :form="field" :required="true"
-                  label="Field Name"
+    <div
+      v-else-if="field.type == 'nf-divider'"
+      class="border-b py-2 px-4"
+    >
+      <text-input
+        name="name"
+        :form="field"
+        :required="true"
+        label="Field Name"
       />
     </div>
 
-    <div v-else-if="field.type == 'nf-image'" class="border-b py-2 px-4">
-      <text-input name="name"
-                  :form="field" :required="true"
-                  label="Field Name"
+    <div
+      v-else-if="field.type == 'nf-image'"
+      class="border-b py-2 px-4"
+    >
+      <text-input
+        name="name"
+        :form="field"
+        :required="true"
+        label="Field Name"
       />
-      <image-input name="image_block" class="mt-3"
-                   :form="field" label="Upload Image" :required="false"
+      <image-input
+        name="image_block"
+        class="mt-3"
+        :form="field"
+        label="Upload Image"
+        :required="false"
       />
     </div>
 
-    <div v-else-if="field.type == 'nf-code'" class="border-b py-2 px-4">
-      <code-input name="content" :form="field" label="Content"
-                  help="You can add any html code, including iframes"
+    <div
+      v-else-if="field.type == 'nf-code'"
+      class="border-b py-2 px-4"
+    >
+      <code-input
+        name="content"
+        :form="field"
+        label="Content"
+        help="You can add any html code, including iframes"
       />
     </div>
 
-    <div v-else class="border-b py-2 px-4">
+    <div
+      v-else
+      class="border-b py-2 px-4"
+    >
       <p>No settings found.</p>
     </div>
 
     <!--  Logic Block -->
-    <form-block-logic-editor class="py-2 px-4 border-b" :form="form" :field="field" />
+    <form-block-logic-editor
+      class="py-2 px-4 border-b"
+      :form="form"
+      :field="field"
+    />
   </div>
 </template>
 
 <script>
-import FormBlockLogicEditor from '../../components/form-logic-components/FormBlockLogicEditor.vue'
+import FormBlockLogicEditor from "../../components/form-logic-components/FormBlockLogicEditor.vue"
 
 export default {
-  name: 'BlockOptions',
-  components: {FormBlockLogicEditor},
+  name: "BlockOptions",
+  components: { FormBlockLogicEditor },
   props: {
     field: {
       type: Object,
-      required: false
+      required: false,
     },
     form: {
       type: Object,
-      required: false
-    }
+      required: false,
+    },
   },
-  data () {
+  data() {
     return {
-      editorToolbarCustom: [
-        ['bold', 'italic', 'underline', 'link']
-      ]
+      editorToolbarCustom: [["bold", "italic", "underline", "link"]],
     }
   },
 
   computed: {},
 
   watch: {
-    'field.width': {
-      handler (val) {
+    "field.width": {
+      handler(val) {
         if (val === undefined || val === null) {
-          this.field.width = 'full'
+          this.field.width = "full"
         }
       },
-      immediate: true
+      immediate: true,
     },
-    'field.align': {
-      handler (val) {
+    "field.align": {
+      handler(val) {
         if (val === undefined || val === null) {
-          this.field.align = 'left'
+          this.field.align = "left"
         }
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
 
-  created () {
+  created() {
     if (this.field?.width === undefined || this.field?.width === null) {
-      this.field.width = 'full'
+      this.field.width = "full"
     }
   },
 
-  mounted () {},
+  mounted() {},
 
   methods: {
-    onFieldHiddenChange (val) {
+    onFieldHiddenChange(val) {
       this.field.hidden = val
       if (this.field.hidden) {
         this.field.required = false
       }
     },
-    onFieldHelpPositionChange (val) {
+    onFieldHelpPositionChange(val) {
       if (!val) {
-        this.field.help_position = 'below_input'
+        this.field.help_position = "below_input"
       }
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/open/forms/fields/components/ChangeFieldType.vue b/client/components/open/forms/fields/components/ChangeFieldType.vue
index 85735211d..5d6332963 100644
--- a/client/components/open/forms/fields/components/ChangeFieldType.vue
+++ b/client/components/open/forms/fields/components/ChangeFieldType.vue
@@ -1,17 +1,41 @@
 <template>
-  <dropdown ref="newTypeDropdown" v-if="changeTypeOptions.length > 0" dusk="nav-dropdown">
-    <template #trigger="{toggle}">
-      <v-button class="relative" :class="btnClasses" size="small" color="light-gray" @click.stop="toggle">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-4 w-4 text-blue-600 inline mr-1 -mt-1">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
+  <dropdown
+    v-if="changeTypeOptions.length > 0"
+    ref="newTypeDropdown"
+    dusk="nav-dropdown"
+  >
+    <template #trigger="{ toggle }">
+      <v-button
+        class="relative"
+        :class="btnClasses"
+        size="small"
+        color="light-gray"
+        @click.stop="toggle"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="h-4 w-4 text-blue-600 inline mr-1 -mt-1"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
+          />
         </svg>
         <span class="whitespace-nowrap">Change Type</span>
       </v-button>
     </template>
 
-    <a v-for="(op, index) in changeTypeOptions" :key="index" href="#"
-       class="block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
-       @click.prevent="changeType(op.value)"
+    <a
+      v-for="(op, index) in changeTypeOptions"
+      :key="index"
+      href="#"
+      class="block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
+      @click.prevent="changeType(op.value)"
     >
       {{ op.name }}
     </a>
@@ -19,68 +43,80 @@
 </template>
 
 <script>
-import Dropdown from '~/components/global/Dropdown.vue'
+import Dropdown from "~/components/global/Dropdown.vue"
 
 export default {
-  name: 'ChangeFieldType',
+  name: "ChangeFieldType",
   components: { Dropdown },
   props: {
     field: {
       type: Object,
-      required: true
+      required: true,
     },
     btnClasses: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
-  data () {
+  emits:  ['changeType'],
+  data() {
     return {}
   },
 
   computed: {
-    changeTypeOptions () {
+    changeTypeOptions() {
       let newTypes = []
-      if (['text', 'email', 'phone_number', 'number','slider','rating','scale'].includes(this.field.type)) {
+      if (
+        [
+          "text",
+          "email",
+          "phone_number",
+          "number",
+          "slider",
+          "rating",
+          "scale",
+        ].includes(this.field.type)
+      ) {
         newTypes = [
-          { name: 'Text Input', value: 'text' },
-          { name: 'Email Input', value: 'email' },
-          { name: 'Phone Input', value: 'phone_number' },
-          { name: 'Number Input', value: 'number' },
-          { name: 'Slider Input', value: 'slider' },
-          { name: 'Rating Input', value: 'rating' },
-          { name: 'Scale Input', value: 'scale' },
+          { name: "Text Input", value: "text" },
+          { name: "Email Input", value: "email" },
+          { name: "Phone Input", value: "phone_number" },
+          { name: "Number Input", value: "number" },
+          { name: "Slider Input", value: "slider" },
+          { name: "Rating Input", value: "rating" },
+          { name: "Scale Input", value: "scale" },
         ]
       }
-      if (['select', 'multi_select'].includes(this.field.type)) {
+      if (["select", "multi_select"].includes(this.field.type)) {
         newTypes = [
-          { name: 'Select Input', value: 'select' },
-          { name: 'Multi-Select Input', value: 'multi_select' }
+          { name: "Select Input", value: "select" },
+          { name: "Multi-Select Input", value: "multi_select" },
         ]
       }
-      return newTypes.filter((item) => {
-        return item.value !== this.field.type
-      }).map((item) => {
-        return {
-          name: item.name,
-          value: item.value
-        }
-      })
-    }
+      return newTypes
+        .filter((item) => {
+          return item.value !== this.field.type
+        })
+        .map((item) => {
+          return {
+            name: item.name,
+            value: item.value,
+          }
+        })
+    },
   },
 
   watch: {},
 
-  mounted () {
-  },
+  mounted() {},
 
   methods: {
-    changeType (newType) {
+    changeType(newType) {
       if (newType) {
-        this.$emit('changeType', newType)
+        this.$emit("changeType", newType)
         this.$refs.newTypeDropdown.close()
       }
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/open/forms/fields/components/FieldOptions.vue b/client/components/open/forms/fields/components/FieldOptions.vue
index 0a9f62121..58fb64c1b 100644
--- a/client/components/open/forms/fields/components/FieldOptions.vue
+++ b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-if="field" class="py-2">
+  <div
+    v-if="field"
+    class="py-2"
+  >
     <!-- General -->
     <div class="border-b px-4">
       <h3 class="font-semibold block text-lg">
@@ -8,23 +11,43 @@
       <p class="text-gray-400 mb-2 text-xs">
         Exclude this field or make it required.
       </p>
-      <toggle-switch-input :form="field" name="required" label="Required"
-        @update:model-value="onFieldRequiredChange"/>
-      <toggle-switch-input :form="field" name="hidden" label="Hidden"
-        @update:model-value="onFieldHiddenChange"/>
-      <toggle-switch-input :form="field" name="disabled" label="Disabled"
-        @update:model-value="onFieldDisabledChange"/>
+      <toggle-switch-input
+        :form="field"
+        name="required"
+        label="Required"
+        @update:model-value="onFieldRequiredChange"
+      />
+      <toggle-switch-input
+        :form="field"
+        name="hidden"
+        label="Hidden"
+        @update:model-value="onFieldHiddenChange"
+      />
+      <toggle-switch-input
+        :form="field"
+        name="disabled"
+        label="Disabled"
+        @update:model-value="onFieldDisabledChange"
+      />
     </div>
 
     <!-- Checkbox -->
-    <div v-if="field.type === 'checkbox'" class="border-b py-2 px-4">
+    <div
+      v-if="field.type === 'checkbox'"
+      class="border-b py-2 px-4"
+    >
       <h3 class="font-semibold block text-lg">
         Checkbox
       </h3>
       <p class="text-gray-400 mb-3 text-xs">
         Advanced options for checkbox.
       </p>
-      <v-checkbox v-model="field.use_toggle_switch" class="mt-3" name="use_toggle_switch" help="">
+      <v-checkbox
+        v-model="field.use_toggle_switch"
+        class="mt-3"
+        name="use_toggle_switch"
+        help=""
+      >
         Use toggle switch
       </v-checkbox>
       <p class="text-gray-400 mb-3 text-xs">
@@ -33,83 +56,172 @@
     </div>
 
     <!-- File Uploads -->
-    <div v-if="field.type === 'files'" class="border-b py-2 px-4">
+    <div
+      v-if="field.type === 'files'"
+      class="border-b py-2 px-4"
+    >
       <h3 class="font-semibold block text-lg">
         File uploads
       </h3>
-      <v-checkbox v-model="field.multiple" class="mt-3" :name="field.id + '_multiple'">
+      <v-checkbox
+        v-model="field.multiple"
+        class="mt-3"
+        :name="field.id + '_multiple'"
+      >
         Allow multiple files
       </v-checkbox>
-      <v-checkbox v-model="field.camera_upload" class="mt-3"
-                  :name="field.id+'_camera_upload'"
+      <v-checkbox
+        v-model="field.camera_upload"
+        class="mt-3"
+        :name="field.id+'_camera_upload'"
       >
         Allow Camera uploads
       </v-checkbox>
-      <text-input name="allowed_file_types" class="mt-3" :form="field" label="Allowed file types"
-        placeholder="jpg,jpeg,png,gif" help="Comma separated values, leave blank to allow all file types" />
+      <text-input
+        name="allowed_file_types"
+        class="mt-3"
+        :form="field"
+        label="Allowed file types"
+        placeholder="jpg,jpeg,png,gif"
+        help="Comma separated values, leave blank to allow all file types"
+      />
 
-      <text-input name="max_file_size" class="mt-3" :form="field" native-type="number" :min="1" :max="mbLimit"
-        label="Maximum file size (in MB)" :placeholder="`1MB - ${mbLimit}MB`"
-        help="Set the maximum file size that can be uploaded" />
+      <text-input
+        name="max_file_size"
+        class="mt-3"
+        :form="field"
+        native-type="number"
+        :min="1"
+        :max="mbLimit"
+        label="Maximum file size (in MB)"
+        :placeholder="`1MB - ${mbLimit}MB`"
+        help="Set the maximum file size that can be uploaded"
+      />
     </div>
 
-    <div v-if="field.type === 'rating'" class="border-b py-2 px-4">
+    <div
+      v-if="field.type === 'rating'"
+      class="border-b py-2 px-4"
+    >
       <h3 class="font-semibold block text-lg">
         Rating
       </h3>
       <p class="text-gray-400 mb-3 text-xs">
         Advanced options for rating.
       </p>
-      <text-input name="rating_max_value" native-type="number" :min="1" class="mt-3" :form="field" required
-        label="Max rating value" />
+      <text-input
+        name="rating_max_value"
+        native-type="number"
+        :min="1"
+        class="mt-3"
+        :form="field"
+        required
+        label="Max rating value"
+      />
     </div>
 
-    <div v-if="field.type === 'scale'" class="border-b py-2 px-4">
+    <div
+      v-if="field.type === 'scale'"
+      class="border-b py-2 px-4"
+    >
       <h3 class="font-semibold block text-lg">
         Scale
       </h3>
       <p class="text-gray-400 mb-3 text-xs">
         Advanced options for scale.
       </p>
-      <text-input name="scale_min_value" native-type="number" class="mt-4" :form="field" required
-        label="Min scale value" />
-      <text-input name="scale_max_value" native-type="number" :min="1" class="mt-4" :form="field" required
-        label="Max scale value" />
-      <text-input name="scale_step_value" native-type="number" :min="1" class="mt-4" :form="field" required
-        label="Scale steps value" />
+      <text-input
+        name="scale_min_value"
+        native-type="number"
+        class="mt-4"
+        :form="field"
+        required
+        label="Min scale value"
+      />
+      <text-input
+        name="scale_max_value"
+        native-type="number"
+        :min="1"
+        class="mt-4"
+        :form="field"
+        required
+        label="Max scale value"
+      />
+      <text-input
+        name="scale_step_value"
+        native-type="number"
+        :min="1"
+        class="mt-4"
+        :form="field"
+        required
+        label="Scale steps value"
+      />
     </div>
 
-    <div v-if="field.type === 'slider'" class="border-b py-2 px-4">
+    <div
+      v-if="field.type === 'slider'"
+      class="border-b py-2 px-4"
+    >
       <h3 class="font-semibold block text-lg">
         Slider
       </h3>
       <p class="text-gray-400 mb-3 text-xs">
         Advanced options for slider.
       </p>
-      <text-input name="slider_min_value" native-type="number" class="mt-4" :form="field" required
-        label="Min slider value" />
-      <text-input name="slider_max_value" native-type="number" :min="1" class="mt-4" :form="field" required
-        label="Max slider value" />
-      <text-input name="slider_step_value" native-type="number" :min="1" class="mt-4" :form="field" required
-        label="Slider steps value" />
+      <text-input
+        name="slider_min_value"
+        native-type="number"
+        class="mt-4"
+        :form="field"
+        required
+        label="Min slider value"
+      />
+      <text-input
+        name="slider_max_value"
+        native-type="number"
+        :min="1"
+        class="mt-4"
+        :form="field"
+        required
+        label="Max slider value"
+      />
+      <text-input
+        name="slider_step_value"
+        native-type="number"
+        :min="1"
+        class="mt-4"
+        :form="field"
+        required
+        label="Slider steps value"
+      />
     </div>
 
     <!--   Text Options   -->
-    <div v-if="field.type === 'text' && displayBasedOnAdvanced" class="border-b py-2 px-4">
+    <div
+      v-if="field.type === 'text' && displayBasedOnAdvanced"
+      class="border-b py-2 px-4"
+    >
       <h3 class="font-semibold block text-lg">
         Text Options
       </h3>
       <p class="text-gray-400 mb-3 text-xs">
         Keep it simple or make it a multi-lines input.
       </p>
-      <v-checkbox v-model="field.multi_lines" class="mb-2" :name="field.id + '_multi_lines'"
-        @update:model-value="field.multi_lines = $event">
+      <v-checkbox
+        v-model="field.multi_lines"
+        class="mb-2"
+        :name="field.id + '_multi_lines'"
+        @update:model-value="field.multi_lines = $event"
+      >
         Multi-lines input
       </v-checkbox>
     </div>
 
     <!--   Date Options   -->
-    <div v-if="field.type === 'date'" class="border-b py-2 px-4">
+    <div
+      v-if="field.type === 'date'"
+      class="border-b py-2 px-4"
+    >
       <h3 class="font-semibold block text-lg">
         Date Options
       </h3>
@@ -163,21 +275,39 @@
     </div>
 
     <!-- select/multiselect Options   -->
-    <div v-if="['select', 'multi_select'].includes(field.type)" class="border-b py-2 px-4">
+    <div
+      v-if="['select', 'multi_select'].includes(field.type)"
+      class="border-b py-2 px-4"
+    >
       <h3 class="font-semibold block text-lg">
         Select Options
       </h3>
       <p class="text-gray-400 mb-3 text-xs">
         Advanced options for your select/multiselect fields.
       </p>
-      <text-area-input v-model="optionsText" :name="field.id + '_options_text'" class="mt-3"
-        label="Set selection options" help="Add one option per line" @update:model-value="onFieldOptionsChange" />
-      <v-checkbox v-model="field.allow_creation" name="allow_creation" help=""
-        @update:model-value="onFieldAllowCreationChange">
+      <text-area-input
+        v-model="optionsText"
+        :name="field.id + '_options_text'"
+        class="mt-3"
+        label="Set selection options"
+        help="Add one option per line"
+        @update:model-value="onFieldOptionsChange"
+      />
+      <v-checkbox
+        v-model="field.allow_creation"
+        name="allow_creation"
+        help=""
+        @update:model-value="onFieldAllowCreationChange"
+      >
         Allow respondent to create new options
       </v-checkbox>
-      <v-checkbox v-model="field.without_dropdown" class="mt-3" name="without_dropdown" help=""
-        @update:model-value="onFieldWithoutDropdownChange">
+      <v-checkbox
+        v-model="field.without_dropdown"
+        class="mt-3"
+        name="without_dropdown"
+        help=""
+        @update:model-value="onFieldWithoutDropdownChange"
+      >
         Always show all select options
       </v-checkbox>
       <p class="text-gray-400 mb-3 text-xs">
@@ -186,7 +316,10 @@
     </div>
 
     <!-- Customization - Placeholder, Prefill, Relabel, Field Help    -->
-    <div v-if="displayBasedOnAdvanced" class="border-b py-2 px-4">
+    <div
+      v-if="displayBasedOnAdvanced"
+      class="border-b py-2 px-4"
+    >
       <h3 class="font-semibold block text-lg">
         Customization
       </h3>
@@ -195,110 +328,243 @@
         Change your form field name, pre-fill a value, add hints, etc.
       </p>
 
-      <text-input name="name" class="mt-3" :form="field" :required="true" label="Field Name" />
+      <text-input
+        name="name"
+        class="mt-3"
+        :form="field"
+        :required="true"
+        label="Field Name"
+      />
 
-      <v-checkbox v-model="field.hide_field_name" class="mt-3" :name="field.id + '_hide_field_name'">
+      <v-checkbox
+        v-model="field.hide_field_name"
+        class="mt-3"
+        :name="field.id + '_hide_field_name'"
+      >
         Hide field name
       </v-checkbox>
 
-      <v-checkbox v-if="field.type === 'phone_number'" v-model="field.use_simple_text_input" class="mt-3"
-        :name="field.id + '_use_simple_text_input'">
+      <v-checkbox
+        v-if="field.type === 'phone_number'"
+        v-model="field.use_simple_text_input"
+        class="mt-3"
+        :name="field.id + '_use_simple_text_input'"
+      >
         Use simple text input
       </v-checkbox>
       <template v-if="field.type === 'phone_number' && !field.use_simple_text_input">
-        <select-input v-model="field.unavailable_countries" class="mt-4" wrapper-class="relative"
-          :options="allCountries" :multiple="true" :searchable="true" :search-keys="['name']" :option-key="'code'"
-          :emit-key="'code'" label="Disabled countries" :placeholder="'Select a country'"
-          help="Remove countries from the phone input">
-          <template #selected="{ option, selected }">
+        <select-input
+          v-model="field.unavailable_countries"
+          class="mt-4"
+          wrapper-class="relative"
+          :options="allCountries"
+          :multiple="true"
+          :searchable="true"
+          :search-keys="['name']"
+          :option-key="'code'"
+          :emit-key="'code'"
+          label="Disabled countries"
+          :placeholder="'Select a country'"
+          help="Remove countries from the phone input"
+        >
+          <template #selected="{ option }">
             <div class="flex items-center space-x-2 justify-center overflow-hidden">
               {{ option.length }} selected
             </div>
           </template>
           <template #option="{ option, selected }">
             <div class="flex items-center space-x-2 hover:text-white">
-              <country-flag size="normal" class="!-mt-[9px]" :country="option.code" />
+              <country-flag
+                size="normal"
+                class="!-mt-[9px]"
+                :country="option.code"
+              />
               <span class="grow">{{ option.name }}</span>
               <span>{{ option.dial_code }}</span>
             </div>
-            <span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-2 dark:text-white">
-              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd"
+            <span
+              v-if="selected"
+              class="absolute inset-y-0 right-0 flex items-center pr-2 dark:text-white"
+            >
+              <svg
+                class="h-5 w-5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
                   d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                  clip-rule="evenodd" />
+                  clip-rule="evenodd"
+                />
               </svg>
             </span>
           </template>
         </select-input>
         <small class="flex -mt-2">
-          <a href="#" class="grow" @click.prevent="selectAllCountries">Select All</a>
-          <a href="#" @click.prevent="field.unavailable_countries = null">Un-select All</a>
+          <a
+            href="#"
+            class="grow"
+            @click.prevent="selectAllCountries"
+          >Select All</a>
+          <a
+            href="#"
+            @click.prevent="field.unavailable_countries = null"
+          >Un-select All</a>
         </small>
       </template>
 
       <!-- Pre-fill depends on type -->
-      <v-checkbox v-if="field.type == 'checkbox'" v-model="field.prefill" class="mt-3" :name="field.id + '_prefill'"
-        @update:model-value="field.prefill = $event">
+      <v-checkbox
+        v-if="field.type == 'checkbox'"
+        v-model="field.prefill"
+        class="mt-3"
+        :name="field.id + '_prefill'"
+        @update:model-value="field.prefill = $event"
+      >
         Pre-filled value
       </v-checkbox>
-      <select-input v-else-if="['select', 'multi_select'].includes(field.type)" name="prefill" class="mt-3"
-        :form="field" :options="prefillSelectsOptions" label="Pre-filled value"
-        :multiple="field.type === 'multi_select'" />
-      <date-input v-else-if="field.type === 'date' && field.prefill_today !== true" name="prefill" class="mt-3"
-        :form="field" :with-time="field.with_time === true" :date-range="field.date_range === true"
-        label="Pre-filled value" />
-      <phone-input v-else-if="field.type === 'phone_number' && !field.use_simple_text_input" name="prefill" class="mt-3"
-        :form="field" :can-only-country="true" :unavailable-countries="field.unavailable_countries ?? []"
-        label="Pre-filled value" />
-      <text-area-input v-else-if="field.type === 'text' && field.multi_lines" name="prefill" class="mt-3" :form="field"
-        label="Pre-filled value" />
-      <file-input v-else-if="field.type === 'files'" name="prefill" class="mt-4" :form="field" label="Pre-filled file"
-        :multiple="field.multiple === true" :move-to-form-assets="true" />
-      <text-input v-else-if="!['files', 'signature'].includes(field.type)" name="prefill" class="mt-3" :form="field"
-        label="Pre-filled value" />
-      <div v-if="['select', 'multi_select'].includes(field.type)" class="-mt-3 mb-3 text-gray-400 dark:text-gray-500">
+      <select-input
+        v-else-if="['select', 'multi_select'].includes(field.type)"
+        name="prefill"
+        class="mt-3"
+        :form="field"
+        :options="prefillSelectsOptions"
+        label="Pre-filled value"
+        :multiple="field.type === 'multi_select'"
+      />
+      <date-input
+        v-else-if="field.type === 'date' && field.prefill_today !== true"
+        name="prefill"
+        class="mt-3"
+        :form="field"
+        :with-time="field.with_time === true"
+        :date-range="field.date_range === true"
+        label="Pre-filled value"
+      />
+      <phone-input
+        v-else-if="field.type === 'phone_number' && !field.use_simple_text_input"
+        name="prefill"
+        class="mt-3"
+        :form="field"
+        :can-only-country="true"
+        :unavailable-countries="field.unavailable_countries ?? []"
+        label="Pre-filled value"
+      />
+      <text-area-input
+        v-else-if="field.type === 'text' && field.multi_lines"
+        name="prefill"
+        class="mt-3"
+        :form="field"
+        label="Pre-filled value"
+      />
+      <file-input
+        v-else-if="field.type === 'files'"
+        name="prefill"
+        class="mt-4"
+        :form="field"
+        label="Pre-filled file"
+        :multiple="field.multiple === true"
+        :move-to-form-assets="true"
+      />
+      <text-input
+        v-else-if="!['files', 'signature'].includes(field.type)"
+        name="prefill"
+        class="mt-3"
+        :form="field"
+        label="Pre-filled value"
+      />
+      <div
+        v-if="['select', 'multi_select'].includes(field.type)"
+        class="-mt-3 mb-3 text-gray-400 dark:text-gray-500"
+      >
         <small>
-          A problem? <a href="#" @click.prevent="field.prefill = null">Click here to clear your pre-fill</a>
+          A problem? <a
+            href="#"
+            @click.prevent="field.prefill = null"
+          >Click here to clear your pre-fill</a>
         </small>
       </div>
 
       <!--    Placeholder    -->
-      <text-input v-if="hasPlaceholder" name="placeholder" class="mt-3" :form="field"
-        label="Empty Input Text (Placeholder)" />
+      <text-input
+        v-if="hasPlaceholder"
+        name="placeholder"
+        class="mt-3"
+        :form="field"
+        label="Empty Input Text (Placeholder)"
+      />
 
-      <select-input name="width" class="mt-3" :options="[
-    { name: 'Full', value: 'full' },
-    { name: '1/2 (half width)', value: '1/2' },
-    { name: '1/3 (a third of the width)', value: '1/3' },
-    { name: '2/3 (two thirds of the width)', value: '2/3' },
-    { name: '1/4 (a quarter of the width)', value: '1/4' },
-    { name: '3/4 (three quarters of the width)', value: '3/4' },
-  ]" :form="field" label="Field Width" />
+      <select-input
+        name="width"
+        class="mt-3"
+        :options="[
+          { name: 'Full', value: 'full' },
+          { name: '1/2 (half width)', value: '1/2' },
+          { name: '1/3 (a third of the width)', value: '1/3' },
+          { name: '2/3 (two thirds of the width)', value: '2/3' },
+          { name: '1/4 (a quarter of the width)', value: '1/4' },
+          { name: '3/4 (three quarters of the width)', value: '3/4' },
+        ]"
+        :form="field"
+        label="Field Width"
+      />
 
       <!--   Help  -->
-      <rich-text-area-input name="help" class="mt-3" :form="field" :editor-toolbar="editorToolbarCustom"
-        label="Field Help" help="Your field help will be shown below/above the field, just like this text."
-        :help-position="field.help_position" />
-      <select-input name="help_position" class="mt-3" :options="[
-    { name: 'Below input', value: 'below_input' },
-    { name: 'Above input', value: 'above_input' },
-  ]" :form="field" label="Field Help Position" @update:model-value="onFieldHelpPositionChange" />
+      <rich-text-area-input
+        name="help"
+        class="mt-3"
+        :form="field"
+        :editor-toolbar="editorToolbarCustom"
+        label="Field Help"
+        help="Your field help will be shown below/above the field, just like this text."
+        :help-position="field.help_position"
+      />
+      <select-input
+        name="help_position"
+        class="mt-3"
+        :options="[
+          { name: 'Below input', value: 'below_input' },
+          { name: 'Above input', value: 'above_input' },
+        ]"
+        :form="field"
+        label="Field Help Position"
+        @update:model-value="onFieldHelpPositionChange"
+      />
 
       <template v-if="['text', 'number', 'url', 'email'].includes(field.type)">
-        <text-input name="max_char_limit" native-type="number" :min="1" :max="2000" :form="field"
-          label="Max character limit" help="Maximum character limit of 2000" :required="false" />
-        <checkbox-input name="show_char_limit" :form="field" class="mt-3" label="Always show character limit" />
+        <text-input
+          name="max_char_limit"
+          native-type="number"
+          :min="1"
+          :max="2000"
+          :form="field"
+          label="Max character limit"
+          help="Maximum character limit of 2000"
+          :required="false"
+        />
+        <checkbox-input
+          name="show_char_limit"
+          :form="field"
+          class="mt-3"
+          label="Always show character limit"
+        />
       </template>
     </div>
 
     <!--  Advanced Options   -->
-    <div v-if="field.type === 'text'" class="border-b py-2 px-4">
+    <div
+      v-if="field.type === 'text'"
+      class="border-b py-2 px-4"
+    >
       <h3 class="font-semibold block text-lg mb-3">
         Advanced Options
       </h3>
 
-      <v-checkbox v-model="field.generates_uuid" :name="field.id + '_generates_uuid'"
-        @update:model-value="onFieldGenUIdChange">
+      <v-checkbox
+        v-model="field.generates_uuid"
+        :name="field.id + '_generates_uuid'"
+        @update:model-value="onFieldGenUIdChange"
+      >
         Generates a unique id
       </v-checkbox>
       <p class="text-gray-400 mb-3 text-xs">
@@ -306,8 +572,11 @@
         submission
       </p>
 
-      <v-checkbox v-model="field.generates_auto_increment_id" :name="field.id + '_generates_auto_increment_id'"
-        @update:model-value="onFieldGenAutoIdChange">
+      <v-checkbox
+        v-model="field.generates_auto_increment_id"
+        :name="field.id + '_generates_auto_increment_id'"
+        @update:model-value="onFieldGenAutoIdChange"
+      >
         Generates an auto-incremented id
       </v-checkbox>
       <p class="text-gray-400 mb-3 text-xs">
@@ -316,7 +585,11 @@
     </div>
 
     <!--  Logic Block -->
-    <form-block-logic-editor class="py-2 px-4 border-b" :form="form" :field="field" />
+    <form-block-logic-editor
+      class="py-2 px-4 border-b"
+      :form="form"
+      :field="field"
+    />
   </div>
 </template>
 
diff --git a/client/components/open/integrations/DiscordIntegration.vue b/client/components/open/integrations/DiscordIntegration.vue
index 99493dde9..55fcba2cb 100644
--- a/client/components/open/integrations/DiscordIntegration.vue
+++ b/client/components/open/integrations/DiscordIntegration.vue
@@ -1,21 +1,37 @@
 <template>
-  <IntegrationWrapper :integration="props.integration" :form="form" v-model="props.integrationData">
-    <text-input :form="integrationData" name="settings.discord_webhook_url"
-                label="Discord webhook url" help="help" required>
+  <IntegrationWrapper
+    v-model="props.integrationData"
+    :integration="props.integration"
+    :form="form"
+  >
+    <text-input
+      :form="integrationData"
+      name="settings.discord_webhook_url"
+      label="Discord webhook url"
+      help="help"
+      required
+    >
       <template #help>
         <InputHelp>
           <template #help>
             <span>
-            Receive a discord message on each form submission.
-            <a href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks" target="_blank"> Click
-              here </a> to learn how to get a discord webhook url.
+              Receive a discord message on each form submission.
+              <a
+                href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks"
+                target="_blank"
+              >
+                Click here
+              </a>
+              to learn how to get a discord webhook url.
             </span>
           </template>
         </InputHelp>
       </template>
     </text-input>
-    <h4 class="font-bold mt-4">Discord message options</h4>
-    <notifications-message-actions v-model="integrationData.settings"/>
+    <h4 class="font-bold mt-4">
+      Discord message options
+    </h4>
+    <notifications-message-actions v-model="integrationData.settings" />
   </IntegrationWrapper>
 </template>
 
@@ -24,9 +40,9 @@ import IntegrationWrapper from "./components/IntegrationWrapper.vue"
 import NotificationsMessageActions from "./components/NotificationsMessageActions.vue"
 
 const props = defineProps({
-  integration: {type: Object, required: true},
-  form: {type: Object, required: true},
-  integrationData: {type: Object, required: true},
-  formIntegrationId: {type: Number, required: false, default: null}
+  integration: { type: Object, required: true },
+  form: { type: Object, required: true },
+  integrationData: { type: Object, required: true },
+  formIntegrationId: { type: Number, required: false, default: null },
 })
 </script>
diff --git a/client/components/open/integrations/EmailIntegration.vue b/client/components/open/integrations/EmailIntegration.vue
index 3b6cd749d..679bf67d2 100644
--- a/client/components/open/integrations/EmailIntegration.vue
+++ b/client/components/open/integrations/EmailIntegration.vue
@@ -1,25 +1,38 @@
 <template>
-  <IntegrationWrapper :integration="props.integration" :form="form" v-model="props.integrationData">
-    <text-area-input :form="integrationData" name="settings.notification_emails" required
-                      label="Notification Emails" help="Add one email per line" />
-    <text-input :form="integrationData" name="settings.notification_reply_to"
-                label="Notification Reply To" :help="notifiesHelp" />
+  <IntegrationWrapper
+    v-model="props.integrationData"
+    :integration="props.integration"
+    :form="form"
+  >
+    <text-area-input
+      :form="integrationData"
+      name="settings.notification_emails"
+      required
+      label="Notification Emails"
+      help="Add one email per line"
+    />
+    <text-input
+      :form="integrationData"
+      name="settings.notification_reply_to"
+      label="Notification Reply To"
+      :help="notifiesHelp"
+    />
   </IntegrationWrapper>
 </template>
 
 <script setup>
-import IntegrationWrapper from './components/IntegrationWrapper.vue'
+import IntegrationWrapper from "./components/IntegrationWrapper.vue"
 
 const props = defineProps({
   integration: { type: Object, required: true },
   form: { type: Object, required: true },
   integrationData: { type: Object, required: true },
-  formIntegrationId: { type: Number, required: false, default: null }
+  formIntegrationId: { type: Number, required: false, default: null },
 })
 
 const replayToEmailField = computed(() => {
   const emailFields = props.form.properties.filter((field) => {
-    return field.type === 'email' && !field.hidden
+    return field.type === "email" && !field.hidden
   })
   if (emailFields.length === 1) return emailFields[0]
   return null
@@ -27,8 +40,12 @@ const replayToEmailField = computed(() => {
 
 const notifiesHelp = computed(() => {
   if (replayToEmailField.value) {
-    return 'If empty, Reply-to for this notification will be the email filled in the field "' + replayToEmailField.value.name + '".'
+    return (
+      'If empty, Reply-to for this notification will be the email filled in the field "' +
+      replayToEmailField.value.name +
+      '".'
+    )
   }
-  return 'If empty, Reply-to for this notification will be your own email. Add a single email field to your form, and it will automatically become the reply to value.'
+  return "If empty, Reply-to for this notification will be your own email. Add a single email field to your form, and it will automatically become the reply to value."
 })
 </script>
diff --git a/client/components/open/integrations/GoogleSheetsIntegration.vue b/client/components/open/integrations/GoogleSheetsIntegration.vue
index a23f100f4..af540480a 100644
--- a/client/components/open/integrations/GoogleSheetsIntegration.vue
+++ b/client/components/open/integrations/GoogleSheetsIntegration.vue
@@ -1,5 +1,9 @@
 <template>
-  <IntegrationWrapper :integration="props.integration" :form="form" v-model="props.integrationData">
+  <IntegrationWrapper
+    v-model="props.integrationData"
+    :integration="props.integration"
+    :form="form"
+  >
     <div class="my-5">
       Coming Soon...
     </div>
@@ -7,12 +11,12 @@
 </template>
 
 <script setup>
-import IntegrationWrapper from './components/IntegrationWrapper.vue'
+import IntegrationWrapper from "./components/IntegrationWrapper.vue"
 
 const props = defineProps({
   integration: { type: Object, required: true },
   form: { type: Object, required: true },
   integrationData: { type: Object, required: true },
-  formIntegrationId: { type: Number, required: false, default: null }
+  formIntegrationId: { type: Number, required: false, default: null },
 })
 </script>
diff --git a/client/components/open/integrations/SlackIntegration.vue b/client/components/open/integrations/SlackIntegration.vue
index bbc4786a6..ec43649a2 100644
--- a/client/components/open/integrations/SlackIntegration.vue
+++ b/client/components/open/integrations/SlackIntegration.vue
@@ -1,20 +1,37 @@
 <template>
-  <IntegrationWrapper :integration="props.integration" :form="form" v-model="props.integrationData">
-    <text-input :form="integrationData" name="settings.slack_webhook_url"
-                label="Slack webhook url" help="help" required>
+  <IntegrationWrapper
+    v-model="props.integrationData"
+    :integration="props.integration"
+    :form="form"
+  >
+    <text-input
+      :form="integrationData"
+      name="settings.slack_webhook_url"
+      label="Slack webhook url"
+      help="help"
+      required
+    >
       <template #help>
         <InputHelp>
           <template #help>
             <span>
-            Receive slack message on each form submission. <a href="https://api.slack.com/messaging/webhooks" target="_blank"> Click here </a>
-            to learn how to get a slack webhook url
-              </span>
+              Receive slack message on each form submission.
+              <a
+                href="https://api.slack.com/messaging/webhooks"
+                target="_blank"
+              >
+                Click here
+              </a>
+              to learn how to get a slack webhook url
+            </span>
           </template>
         </InputHelp>
       </template>
     </text-input>
-    <h4 class="font-bold mt-4">Slack message actions</h4>
-    <notifications-message-actions v-model="integrationData.settings"/>
+    <h4 class="font-bold mt-4">
+      Slack message actions
+    </h4>
+    <notifications-message-actions v-model="integrationData.settings" />
   </IntegrationWrapper>
 </template>
 
@@ -23,9 +40,9 @@ import IntegrationWrapper from "./components/IntegrationWrapper.vue"
 import NotificationsMessageActions from "./components/NotificationsMessageActions.vue"
 
 const props = defineProps({
-  integration: {type: Object, required: true},
-  form: {type: Object, required: true},
-  integrationData: {type: Object, required: true},
-  formIntegrationId: {type: Number, required: false, default: null}
+  integration: { type: Object, required: true },
+  form: { type: Object, required: true },
+  integrationData: { type: Object, required: true },
+  formIntegrationId: { type: Number, required: false, default: null },
 })
 </script>
diff --git a/client/components/open/integrations/SubmissionConfirmationIntegration.vue b/client/components/open/integrations/SubmissionConfirmationIntegration.vue
index fad3cd4d7..b7c3362fa 100644
--- a/client/components/open/integrations/SubmissionConfirmationIntegration.vue
+++ b/client/components/open/integrations/SubmissionConfirmationIntegration.vue
@@ -1,19 +1,50 @@
 <template>
-  <IntegrationWrapper :integration="props.integration" :form="form" v-model="props.integrationData">
+  <IntegrationWrapper
+    v-model="props.integrationData"
+    :integration="props.integration"
+    :form="form"
+  >
     <div>{{ emailSubmissionConfirmationHelp }}</div>
 
     <div v-if="emailSubmissionConfirmationField">
-      <text-input :form="integrationData" name="settings.notification_sender" class="mt-4" required
+      <text-input
+        :form="integrationData"
+        name="settings.notification_sender"
+        class="mt-4"
+        required
         label="Confirmation Email Sender Name"
-        help="Emails will be sent from our email address but you can customize the name of the Sender" />
-      <text-input :form="integrationData" name="settings.notification_subject" class="mt-4" required
-        label="Confirmation email subject" help="Subject of the confirmation email that will be sent" />
-      <rich-text-area-input :form="integrationData" name="settings.notification_body" class="mt-4" required
-        label="Confirmation email content" help="Content of the confirmation email that will be sent" />
-      <text-input :form="integrationData" name="settings.confirmation_reply_to" class="mt-4"
-                  label="Confirmation Reply To" help="If empty, Reply-to will be your own email."/>
-      <toggle-switch-input :form="integrationData" name="settings.notifications_include_submission" class="mt-4"
-        label="Include submission data" help="If enabled the confirmation email will contain form submission answers" />
+        help="Emails will be sent from our email address but you can customize the name of the Sender"
+      />
+      <text-input
+        :form="integrationData"
+        name="settings.notification_subject"
+        class="mt-4"
+        required
+        label="Confirmation email subject"
+        help="Subject of the confirmation email that will be sent"
+      />
+      <rich-text-area-input
+        :form="integrationData"
+        name="settings.notification_body"
+        class="mt-4"
+        required
+        label="Confirmation email content"
+        help="Content of the confirmation email that will be sent"
+      />
+      <text-input
+        :form="integrationData"
+        name="settings.confirmation_reply_to"
+        class="mt-4"
+        label="Confirmation Reply To"
+        help="If empty, Reply-to will be your own email."
+      />
+      <toggle-switch-input
+        :form="integrationData"
+        name="settings.notifications_include_submission"
+        class="mt-4"
+        label="Include submission data"
+        help="If enabled the confirmation email will contain form submission answers"
+      />
     </div>
   </IntegrationWrapper>
 </template>
@@ -25,30 +56,36 @@ const props = defineProps({
   integration: { type: Object, required: true },
   form: { type: Object, required: true },
   integrationData: { type: Object, required: true },
-  formIntegrationId: { type: Number, required: false, default: null }
+  formIntegrationId: { type: Number, required: false, default: null },
 })
 
 const emailSubmissionConfirmationField = computed(() => {
-  if (!props.form.properties || !Array.isArray(props.form.properties)) return null
+  if (!props.form.properties || !Array.isArray(props.form.properties))
+    return null
   const emailFields = props.form.properties.filter((field) => {
-    return field.type === 'email' && !field.hidden
+    return field.type === "email" && !field.hidden
   })
   if (emailFields.length === 1) return emailFields[0]
   return null
 })
 const emailSubmissionConfirmationHelp = computed(() => {
   if (emailSubmissionConfirmationField.value) {
-    return 'Confirmation will be sent to the email in the "' + emailSubmissionConfirmationField.value.name + '" field.'
+    return (
+      'Confirmation will be sent to the email in the "' +
+      emailSubmissionConfirmationField.value.name +
+      '" field.'
+    )
   }
-  return 'Only available if your form contains 1 email field.'
+  return "Only available if your form contains 1 email field."
 })
 
 onBeforeMount(() => {
   for (const [keyname, defaultValue] of Object.entries({
-    'notification_sender': 'OpnForm',
-    'notification_subject': 'We saved your answers',
-    'notification_body': 'Hello there 👋 <br>This is a confirmation that your submission was successfully saved.',
-    'notifications_include_submission': true,
+    notification_sender: "OpnForm",
+    notification_subject: "We saved your answers",
+    notification_body:
+      "Hello there 👋 <br>This is a confirmation that your submission was successfully saved.",
+    notifications_include_submission: true,
   })) {
     if (props.integrationData.settings[keyname] === undefined) {
       props.integrationData.settings[keyname] = defaultValue
diff --git a/client/components/open/integrations/WebhookIntegration.vue b/client/components/open/integrations/WebhookIntegration.vue
index 73681a719..69ce7a7e9 100644
--- a/client/components/open/integrations/WebhookIntegration.vue
+++ b/client/components/open/integrations/WebhookIntegration.vue
@@ -1,7 +1,17 @@
 <template>
-  <IntegrationWrapper :integration="props.integration" :form="form" v-model="props.integrationData">
-    <text-input :form="integrationData" name="settings.webhook_url" class="mt-4" label="Webhook url"
-                help="We will post form submissions to this endpoint" required />
+  <IntegrationWrapper
+    v-model="props.integrationData"
+    :integration="props.integration"
+    :form="form"
+  >
+    <text-input
+      :form="integrationData"
+      name="settings.webhook_url"
+      class="mt-4"
+      label="Webhook url"
+      help="We will post form submissions to this endpoint"
+      required
+    />
   </IntegrationWrapper>
 </template>
 
@@ -12,6 +22,6 @@ const props = defineProps({
   integration: { type: Object, required: true },
   form: { type: Object, required: true },
   integrationData: { type: Object, required: true },
-  formIntegrationId: { type: Number, required: false, default: null }
+  formIntegrationId: { type: Number, required: false, default: null },
 })
 </script>
diff --git a/client/components/open/integrations/ZapierIntegration.vue b/client/components/open/integrations/ZapierIntegration.vue
index a23f100f4..af540480a 100644
--- a/client/components/open/integrations/ZapierIntegration.vue
+++ b/client/components/open/integrations/ZapierIntegration.vue
@@ -1,5 +1,9 @@
 <template>
-  <IntegrationWrapper :integration="props.integration" :form="form" v-model="props.integrationData">
+  <IntegrationWrapper
+    v-model="props.integrationData"
+    :integration="props.integration"
+    :form="form"
+  >
     <div class="my-5">
       Coming Soon...
     </div>
@@ -7,12 +11,12 @@
 </template>
 
 <script setup>
-import IntegrationWrapper from './components/IntegrationWrapper.vue'
+import IntegrationWrapper from "./components/IntegrationWrapper.vue"
 
 const props = defineProps({
   integration: { type: Object, required: true },
   form: { type: Object, required: true },
   integrationData: { type: Object, required: true },
-  formIntegrationId: { type: Number, required: false, default: null }
+  formIntegrationId: { type: Number, required: false, default: null },
 })
 </script>
diff --git a/client/components/open/integrations/components/IntegrationCard.vue b/client/components/open/integrations/components/IntegrationCard.vue
index 918a8ee59..025ed197b 100644
--- a/client/components/open/integrations/components/IntegrationCard.vue
+++ b/client/components/open/integrations/components/IntegrationCard.vue
@@ -1,106 +1,194 @@
 <template>
-  <div class="text-gray-500 border shadow rounded-md p-5 mt-4 relative flex items-center">
+  <div
+    class="text-gray-500 border shadow rounded-md p-5 mt-4 relative flex items-center"
+  >
     <div class="flex-grow flex items-center">
-      <div class="mr-4"
-           :class="{ 'text-blue-500': integration.status === 'active', 'text-gray-400': integration.status !== 'active' }">
-        <Icon :name="integrationTypeInfo.icon" size="32px"/>
+      <div
+        class="mr-4"
+        :class="{
+          'text-blue-500': integration.status === 'active',
+          'text-gray-400': integration.status !== 'active',
+        }"
+      >
+        <Icon
+          :name="integrationTypeInfo.icon"
+          size="32px"
+        />
       </div>
       <div>
-        <div class="flex space-x-3 font-semibold mr-2">{{ integrationTypeInfo.name }}</div>
-        <Badge :color="integration.status === 'active' ? 'green' : 'gray'"
-               :before-icon="integration.status === 'active' ? 'solar:play-bold' : 'solar:pause-bold'"
+        <div class="flex space-x-3 font-semibold mr-2">
+          {{ integrationTypeInfo.name }}
+        </div>
+        <Badge
+          :color="integration.status === 'active' ? 'green' : 'gray'"
+          :before-icon="
+            integration.status === 'active'
+              ? 'solar:play-bold'
+              : 'solar:pause-bold'
+          "
         >
-          {{ integration.status === 'active' ? 'Active' : 'Paused' }}
+          {{ integration.status === "active" ? "Active" : "Paused" }}
         </Badge>
       </div>
     </div>
 
-    <div v-if="loadingDelete" class="pr-4 pt-2">
-      <Loader class="h-6 w-6 mx-auto"/>
+    <div
+      v-if="loadingDelete"
+      class="pr-4 pt-2"
+    >
+      <Loader class="h-6 w-6 mx-auto" />
     </div>
-    <dropdown v-else class="inline">
+    <dropdown
+      v-else
+      class="inline"
+    >
       <template #trigger="{ toggle }">
-        <v-button color="white" @click="toggle">
-          <svg class="w-4 h-4 inline -mt-1" viewBox="0 0 16 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <v-button
+          color="white"
+          @click="toggle"
+        >
+          <svg
+            class="w-4 h-4 inline -mt-1"
+            viewBox="0 0 16 4"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
             <path
               d="M8.00016 2.83366C8.4604 2.83366 8.8335 2.46056 8.8335 2.00033C8.8335 1.54009 8.4604 1.16699 8.00016 1.16699C7.53993 1.16699 7.16683 1.54009 7.16683 2.00033C7.16683 2.46056 7.53993 2.83366 8.00016 2.83366Z"
-              stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+              stroke="#344054"
+              stroke-width="1.66667"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
             <path
               d="M13.8335 2.83366C14.2937 2.83366 14.6668 2.46056 14.6668 2.00033C14.6668 1.54009 14.2937 1.16699 13.8335 1.16699C13.3733 1.16699 13.0002 1.54009 13.0002 2.00033C13.0002 2.46056 13.3733 2.83366 13.8335 2.83366Z"
-              stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+              stroke="#344054"
+              stroke-width="1.66667"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
             <path
               d="M2.16683 2.83366C2.62707 2.83366 3.00016 2.46056 3.00016 2.00033C3.00016 1.54009 2.62707 1.16699 2.16683 1.16699C1.70659 1.16699 1.3335 1.54009 1.3335 2.00033C1.3335 2.46056 1.70659 2.83366 2.16683 2.83366Z"
-              stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+              stroke="#344054"
+              stroke-width="1.66667"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </v-button>
       </template>
-      <a v-track.edit_form_integration_click="{ form_slug: form.slug, form_integration_id: integration.id }" href="#"
-         @click.prevent="showIntegrationModal = true"
-         class="flex px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:no-underline hover:text-gray-900 items-center">
-        <Icon name="heroicons:pencil" class="w-5 h-5 mr-2"/>
+      <a
+        v-track.edit_form_integration_click="{
+          form_slug: form.slug,
+          form_integration_id: integration.id,
+        }"
+        href="#"
+        class="flex px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:no-underline hover:text-gray-900 items-center"
+        @click.prevent="showIntegrationModal = true"
+      >
+        <Icon
+          name="heroicons:pencil"
+          class="w-5 h-5 mr-2"
+        />
         Edit
       </a>
-      <a v-track.past_events_form_integration_click="{ form_slug: form.slug, form_integration_id: integration.id }"
-         href="#"
-         @click.prevent="showIntegrationEventsModal = true"
-         class="flex px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:no-underline hover:text-gray-900 items-center">
-        <Icon name="heroicons:clock" class="w-5 h-5 mr-2"/>
+      <a
+        v-track.past_events_form_integration_click="{
+          form_slug: form.slug,
+          form_integration_id: integration.id,
+        }"
+        href="#"
+        class="flex px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:no-underline hover:text-gray-900 items-center"
+        @click.prevent="showIntegrationEventsModal = true"
+      >
+        <Icon
+          name="heroicons:clock"
+          class="w-5 h-5 mr-2"
+        />
         Past Events
       </a>
-      <a v-track.delete_form_integration_click="{ form_integration_id: integration.id }" href="#"
-         class="flex px-4 py-2 text-md text-red-600 hover:bg-red-50 hover:no-underline items-center"
-         @click.prevent="deleteFormIntegration(integration.id)">
-        <Icon name="heroicons:trash" class="w-5 h-5 mr-2"/>
+      <a
+        v-track.delete_form_integration_click="{
+          form_integration_id: integration.id,
+        }"
+        href="#"
+        class="flex px-4 py-2 text-md text-red-600 hover:bg-red-50 hover:no-underline items-center"
+        @click.prevent="deleteFormIntegration(integration.id)"
+      >
+        <Icon
+          name="heroicons:trash"
+          class="w-5 h-5 mr-2"
+        />
 
         Delete Integration
       </a>
     </dropdown>
-    <IntegrationModal v-if="form && integration && integrationTypeInfo" :form="form" :integration="integrationTypeInfo"
-                      :integrationKey="integration.integration_id" :formIntegrationId="integration.id"
-                      :show="showIntegrationModal"
-                      @close="showIntegrationModal = false"/>
+    <IntegrationModal
+      v-if="form && integration && integrationTypeInfo"
+      :form="form"
+      :integration="integrationTypeInfo"
+      :integration-key="integration.integration_id"
+      :form-integration-id="integration.id"
+      :show="showIntegrationModal"
+      @close="showIntegrationModal = false"
+    />
 
-    <IntegrationEventsModal v-if="form && integration" :form="form" :formIntegrationId="integration.id"
-                            :show="showIntegrationEventsModal"
-                            @close="showIntegrationEventsModal = false"/>
+    <IntegrationEventsModal
+      v-if="form && integration"
+      :form="form"
+      :form-integration-id="integration.id"
+      :show="showIntegrationEventsModal"
+      @close="showIntegrationEventsModal = false"
+    />
   </div>
 </template>
 
 <script setup>
-import {computed} from "vue";
+import { computed } from "vue"
 
 const props = defineProps({
   integration: {
     type: Object,
-    required: true
+    required: true,
   },
   form: {
     type: Object,
-    required: true
-  }
+    required: true,
+  },
 })
 
 const alert = useAlert()
 const formIntegrationsStore = useFormIntegrationsStore()
-const integrations = computed(() => formIntegrationsStore.availableIntegrations)
-const integrationTypeInfo = computed(() => integrations.value.get(props.integration.integration_id))
+const integrations = computed(
+  () => formIntegrationsStore.availableIntegrations,
+)
+const integrationTypeInfo = computed(() =>
+  integrations.value.get(props.integration.integration_id),
+)
 
-let showIntegrationModal = ref(false)
-let showIntegrationEventsModal = ref(false)
-let loadingDelete = ref(false)
+const showIntegrationModal = ref(false)
+const showIntegrationEventsModal = ref(false)
+const loadingDelete = ref(false)
 
 const deleteFormIntegration = (integrationid) => {
-  alert.confirm('Do you really want to delete this form integration?', () => {
-    opnFetch('/open/forms/{formid}/integration/{integrationid}'.replace('{formid}', props.form.id).replace('{integrationid}', integrationid), {method: 'DELETE'}).then((data) => {
-      if (data.type === 'success') {
-        alert.success(data.message)
-        formIntegrationsStore.remove(integrationid)
-      } else {
-        alert.error('Something went wrong!')
-      }
-    }).catch((error) => {
-      alert.error(error.data.message)
-    })
+  alert.confirm("Do you really want to delete this form integration?", () => {
+    opnFetch(
+      "/open/forms/{formid}/integration/{integrationid}"
+        .replace("{formid}", props.form.id)
+        .replace("{integrationid}", integrationid),
+      { method: "DELETE" },
+    )
+      .then((data) => {
+        if (data.type === "success") {
+          alert.success(data.message)
+          formIntegrationsStore.remove(integrationid)
+        } else {
+          alert.error("Something went wrong!")
+        }
+      })
+      .catch((error) => {
+        alert.error(error.data.message)
+      })
   })
 }
 </script>
diff --git a/client/components/open/integrations/components/IntegrationEventsModal.vue b/client/components/open/integrations/components/IntegrationEventsModal.vue
index c45daba93..ce2707645 100644
--- a/client/components/open/integrations/components/IntegrationEventsModal.vue
+++ b/client/components/open/integrations/components/IntegrationEventsModal.vue
@@ -1,27 +1,48 @@
 <template>
-  <modal :show="show" @close="emit('close')" compact-header inner-padding="">
+  <modal
+    :show="show"
+    compact-header
+    inner-padding=""
+    @close="emit('close')"
+  >
     <template #icon>
-      <Icon name="heroicons:clock" size="40px"/>
+      <Icon
+        name="heroicons:clock"
+        size="40px"
+      />
     </template>
     <template #title>
       Past Events
     </template>
 
-    <UTable :loading="integrationEventsLoading" :columns="columns" :rows="integrationEvents">
+    <UTable
+      :loading="integrationEventsLoading"
+      :columns="columns"
+      :rows="integrationEvents"
+    >
       <template #status-data="{ row }">
-        <Badge :color="(row.status==='Success') ? 'green' : 'red'">
-          {{row.status}}
+        <Badge :color="row.status === 'Success' ? 'green' : 'red'">
+          {{ row.status }}
         </Badge>
       </template>
       <template #data-data="{ row }">
-        <vue-json-pretty v-if="row.data && Object.keys(row.data).length > 0" :data="row.data" :collapsedNodeLength="0" :showLength="true" :showIcon="true" />
+        <vue-json-pretty
+          v-if="row.data && Object.keys(row.data).length > 0"
+          :data="row.data"
+          :collapsed-node-length="0"
+          :show-length="true"
+          :show-icon="true"
+        />
         <span v-else>-</span>
       </template>
     </UTable>
 
     <template #footer>
       <div class="flex justify-center gap-x-2">
-        <v-button color="white" @click.prevent="emit('close')">
+        <v-button
+          color="white"
+          @click.prevent="emit('close')"
+        >
           Close
         </v-button>
       </div>
@@ -30,35 +51,43 @@
 </template>
 
 <script setup>
-import VueJsonPretty from 'vue-json-pretty'
-import 'vue-json-pretty/lib/styles.css'
+import VueJsonPretty from "vue-json-pretty"
+import "vue-json-pretty/lib/styles.css"
 
 const props = defineProps({
   show: { type: Boolean, required: true },
-  form: {type: Object, required: true},
-  formIntegrationId: {type: Number, required: true}
+  form: { type: Object, required: true },
+  formIntegrationId: { type: Number, required: true },
 })
 
-const emit = defineEmits(['close'])
-const formIntegrationEventEndpoint = '/open/forms/{formid}/integration/{integrationid}/events'
+const emit = defineEmits(["close"])
+const formIntegrationEventEndpoint =
+  "/open/forms/{formid}/integration/{integrationid}/events"
 const columns = [
-  { key: 'date', label: 'Date', sortable: true },
-  { key: 'status', label: 'Status', sortable: true },
-  { key: 'data', label: 'Info'}
+  { key: "date", label: "Date", sortable: true },
+  { key: "status", label: "Status", sortable: true },
+  { key: "data", label: "Info" },
 ]
-let integrationEvents = ref([])
-let integrationEventsLoading = ref(false)
+const integrationEvents = ref([])
+const integrationEventsLoading = ref(false)
 
-watch(() => props.show, () => {
-  fetchEvents()
-})
+watch(
+  () => props.show,
+  () => {
+    fetchEvents()
+  },
+)
 
 const fetchEvents = () => {
   if (props.show) {
     nextTick(() => {
       integrationEventsLoading.value = true
       integrationEvents.value = []
-      opnFetch(formIntegrationEventEndpoint.replace('{formid}', props.form.id).replace('{integrationid}', props.formIntegrationId)).then((data) => {
+      opnFetch(
+        formIntegrationEventEndpoint
+          .replace("{formid}", props.form.id)
+          .replace("{integrationid}", props.formIntegrationId),
+      ).then((data) => {
         integrationEvents.value = data
         integrationEventsLoading.value = false
       })
diff --git a/client/components/open/integrations/components/IntegrationListOption.vue b/client/components/open/integrations/components/IntegrationListOption.vue
index b70318f2d..b4b729c20 100644
--- a/client/components/open/integrations/components/IntegrationListOption.vue
+++ b/client/components/open/integrations/components/IntegrationListOption.vue
@@ -1,49 +1,72 @@
 <template>
-  <UTooltip :text="tooltipText" :prevent="!unavailable">
-    <div role="button" @click="onClick"
-         v-track.new_integration_click="{ name: integration.id }"
-         :class="{'hover:bg-blue-50 group cursor-pointer': !unavailable, 'cursor-not-allowed': unavailable}"
-         class="bg-gray-50 border border-gray-200 rounded-md transition-colors p-4 pb-2 items-center justify-center w-[170px] h-[110px] flex flex-col relative">
+  <UTooltip
+    :text="tooltipText"
+    :prevent="!unavailable"
+  >
+    <div
+      v-track.new_integration_click="{ name: integration.id }"
+      role="button"
+      :class="{
+        'hover:bg-blue-50 group cursor-pointer': !unavailable,
+        'cursor-not-allowed': unavailable,
+      }"
+      class="bg-gray-50 border border-gray-200 rounded-md transition-colors p-4 pb-2 items-center justify-center w-[170px] h-[110px] flex flex-col relative"
+      @click="onClick"
+    >
       <div class="flex justify-center">
-        <div class="h-10 w-10 text-gray-500 group-hover:text-blue-500 transition-colors flex items-center">
-          <Icon :name="integration.icon" size="40px"/>
+        <div
+          class="h-10 w-10 text-gray-500 group-hover:text-blue-500 transition-colors flex items-center"
+        >
+          <Icon
+            :name="integration.icon"
+            size="40px"
+          />
         </div>
       </div>
       <div class="flex-grow flex items-center">
         <div class="text-gray-400 font-medium text-sm text-center">
-          {{ integration.name }}<span class="text-xs" v-if="integration.coming_soon"> (coming soon)</span>
+          {{ integration.name
+          }}<span
+            v-if="integration.coming_soon"
+            class="text-xs"
+          >
+            (coming soon)</span>
         </div>
       </div>
-      <pro-tag v-if="integration?.is_pro === true" class="absolute top-0 right-1"/>
+      <pro-tag
+        v-if="integration?.is_pro === true"
+        class="absolute top-0 right-1"
+      />
     </div>
   </UTooltip>
 </template>
 
 <script setup>
-
-const emit = defineEmits(['select'])
+const emit = defineEmits(["select"])
 
 const props = defineProps({
   integration: {
     type: Object,
-    required: true
-  }
+    required: true,
+  },
 })
 
 const unavailable = computed(() => {
-  return props.integration.coming_soon || props.integration.requires_subscription
+  return (
+    props.integration.coming_soon || props.integration.requires_subscription
+  )
 })
 
 const tooltipText = computed(() => {
-  if (props.integration.coming_soon) return 'This integration is coming soon'
-  if (props.integration.requires_subscription) return 'You need a subscription to use this integration.'
-  return ''
+  if (props.integration.coming_soon) return "This integration is coming soon"
+  if (props.integration.requires_subscription)
+    return "You need a subscription to use this integration."
+  return ""
 })
 
 const onClick = () => {
-  if (props.integration.coming_soon || props.integration.requires_subscription) return
-  emit('select', props.integration.id)
+  if (props.integration.coming_soon || props.integration.requires_subscription)
+    return
+  emit("select", props.integration.id)
 }
-
-
 </script>
diff --git a/client/components/open/integrations/components/IntegrationModal.vue b/client/components/open/integrations/components/IntegrationModal.vue
index e2d394f61..61d2a5c5e 100644
--- a/client/components/open/integrations/components/IntegrationModal.vue
+++ b/client/components/open/integrations/components/IntegrationModal.vue
@@ -1,22 +1,40 @@
 <template>
-  <modal :show="show" @close="emit('close')" compact-header>
+  <modal
+    :show="show"
+    compact-header
+    @close="emit('close')"
+  >
     <template #icon>
-      <Icon :name="integration?.icon" size="40px"/>
+      <Icon
+        :name="integration?.icon"
+        size="40px"
+      />
     </template>
     <template #title>
       {{ integration?.name }}
-      <pro-tag v-if="integration?.is_pro === true"/>
+      <pro-tag v-if="integration?.is_pro === true" />
     </template>
 
-    <component v-if="integration && component" :is="component" :form="form" :integration="integration"
-               :integrationData="integrationData"/>
+    <component
+      :is="component"
+      v-if="integration && component"
+      :form="form"
+      :integration="integration"
+      :integration-data="integrationData"
+    />
 
     <template #footer>
       <div class="flex justify-center gap-x-2">
-        <v-button class="px-8" @click.prevent="save">
+        <v-button
+          class="px-8"
+          @click.prevent="save"
+        >
           Save
         </v-button>
-        <v-button color="white" @click.prevent="emit('close')">
+        <v-button
+          color="white"
+          @click.prevent="emit('close')"
+        >
           Close
         </v-button>
       </div>
@@ -25,21 +43,25 @@
 </template>
 
 <script setup>
-import {computed} from 'vue'
+import { computed } from "vue"
 
 const props = defineProps({
-  show: {type: Boolean, required: true},
-  form: {type: Object, required: true},
-  integrationKey: {type: String, required: true},
-  integration: {type: Object, required: true},
-  formIntegrationId: {type: Number, required: false, default: null}
+  show: { type: Boolean, required: true },
+  form: { type: Object, required: true },
+  integrationKey: { type: String, required: true },
+  integration: { type: Object, required: true },
+  formIntegrationId: { type: Number, required: false, default: null },
 })
 
 const alert = useAlert()
-const emit = defineEmits(['close'])
+const emit = defineEmits(["close"])
 
 const formIntegrationsStore = useFormIntegrationsStore()
-const formIntegration = computed(() => (props.formIntegrationId) ? formIntegrationsStore.getByKey(props.formIntegrationId) : null)
+const formIntegration = computed(() =>
+  props.formIntegrationId
+    ? formIntegrationsStore.getByKey(props.formIntegrationId)
+    : null,
+)
 
 const component = computed(() => {
   if (!props.integration) return null
@@ -48,35 +70,51 @@ const component = computed(() => {
 
 const integrationData = ref(null)
 
-watch(() => props.integrationKey, () => {
-  initIntegrationData()
-})
+watch(
+  () => props.integrationKey,
+  () => {
+    initIntegrationData()
+  },
+)
 
 const initIntegrationData = () => {
   integrationData.value = useForm({
-    integration_id: (props.formIntegrationId) ? formIntegration.value.integration_id : props.integrationKey,
-    status: (props.formIntegrationId) ? formIntegration.value.status === 'active' : true,
-    settings: (props.formIntegrationId) ? formIntegration.value.data ?? {} : {},
-    logic: (props.formIntegrationId) ? (!Array.isArray(formIntegration.value.logic) && formIntegration.value.logic) ? formIntegration.value.logic : null : null
+    integration_id: props.formIntegrationId
+      ? formIntegration.value.integration_id
+      : props.integrationKey,
+    status: props.formIntegrationId
+      ? formIntegration.value.status === "active"
+      : true,
+    settings: props.formIntegrationId ? formIntegration.value.data ?? {} : {},
+    logic: props.formIntegrationId
+      ? !Array.isArray(formIntegration.value.logic) &&
+        formIntegration.value.logic
+        ? formIntegration.value.logic
+        : null
+      : null,
   })
 }
 initIntegrationData()
 
 const save = () => {
   if (!integrationData.value) return
-  integrationData.value.submit(
-    (props.formIntegrationId) ? 'PUT' : 'POST',
-    '/open/forms/{formid}/integration'.replace('{formid}', props.form.id) + ((props.formIntegrationId) ? '/' + props.formIntegrationId : '')
-  ).then(data => {
-    alert.success(data.message)
-    formIntegrationsStore.save(data.form_integration)
-    emit('close')
-  }).catch((error) => {
-    try {
-      alert.error(error.data.message)
-    } catch (e) {
-      alert.error('An error occurred while saving the integration')
-    }
-  })
+  integrationData.value
+    .submit(
+      props.formIntegrationId ? "PUT" : "POST",
+      "/open/forms/{formid}/integration".replace("{formid}", props.form.id) +
+        (props.formIntegrationId ? "/" + props.formIntegrationId : ""),
+    )
+    .then((data) => {
+      alert.success(data.message)
+      formIntegrationsStore.save(data.form_integration)
+      emit("close")
+    })
+    .catch((error) => {
+      try {
+        alert.error(error.data.message)
+      } catch (e) {
+        alert.error("An error occurred while saving the integration")
+      }
+    })
 }
 </script>
diff --git a/client/components/open/integrations/components/IntegrationWrapper.vue b/client/components/open/integrations/components/IntegrationWrapper.vue
index 156966574..ea848ff73 100644
--- a/client/components/open/integrations/components/IntegrationWrapper.vue
+++ b/client/components/open/integrations/components/IntegrationWrapper.vue
@@ -1,28 +1,53 @@
 <template>
-  <div :class="wrapperClass" :style="inputStyle">
+  <div
+    :class="wrapperClass"
+    :style="inputStyle"
+  >
     <div class="flex justify-between">
       <slot name="status">
-        <toggle-switch-input name="status" v-model="modelValue.status" label="Enabled"/>
+        <toggle-switch-input
+          v-model="modelValue.status"
+          name="status"
+          label="Enabled"
+        />
       </slot>
       <slot name="help">
-        <v-button class="flex" color="white" size="small" @click="openHelp">
-          <Icon name="heroicons:question-mark-circle-16-solid" class="w-4 h-4 text-gray-500 -mt-[3px]"/>
-          <span class="text-gray-500">
-          Help
-            </span>
+        <v-button
+          class="flex"
+          color="white"
+          size="small"
+          @click="openHelp"
+        >
+          <Icon
+            name="heroicons:question-mark-circle-16-solid"
+            class="w-4 h-4 text-gray-500 -mt-[3px]"
+          />
+          <span class="text-gray-500"> Help </span>
         </v-button>
       </slot>
     </div>
 
-    <slot/>
+    <slot />
 
     <slot name="logic">
       <div class="-mx-6 px-6 border-t pt-6">
-        <collapse class="w-full" v-model="showLogic">
+        <collapse
+          v-model="showLogic"
+          class="w-full"
+        >
           <template #title>
             <div class="flex gap-x-3 items-start pr-8">
-              <div class="transition-colors" :class="{ 'text-blue-600': showLogic, 'text-gray-300': !showLogic }">
-                <Icon name="material-symbols:settings" size="30px"/>
+              <div
+                class="transition-colors"
+                :class="{
+                  'text-blue-600': showLogic,
+                  'text-gray-300': !showLogic,
+                }"
+              >
+                <Icon
+                  name="material-symbols:settings"
+                  size="30px"
+                />
               </div>
               <div class="flex-grow">
                 <h3 class="font-semibold">
@@ -34,8 +59,12 @@
               </div>
             </div>
           </template>
-          <condition-editor ref="filter-editor" v-model="modelValue.logic" class="mt-4 border-t border rounded-md integration-logic"
-                            :form="form"/>
+          <condition-editor
+            ref="filter-editor"
+            v-model="modelValue.logic"
+            class="mt-4 border-t border rounded-md integration-logic"
+            :form="form"
+          />
         </collapse>
       </div>
     </slot>
@@ -43,18 +72,18 @@
 </template>
 
 <script setup>
-import ConditionEditor from '~/components/open/forms/components/form-logic-components/ConditionEditor.client.vue'
+import ConditionEditor from "~/components/open/forms/components/form-logic-components/ConditionEditor.client.vue"
 
 const props = defineProps({
-  integration: {type: Object, required: true},
-  modelValue: {required: false},
-  wrapperClass: {type: String, required: false},
-  inputStyle: {type: Object, required: false},
-  form: {type: Object, required: false}
+  integration: { type: Object, required: true },
+  modelValue: { type: Object, required: false },
+  wrapperClass: { type: String, required: false },
+  inputStyle: { type: Object, required: false },
+  form: { type: Object, required: false },
 })
 
 const crisp = useCrisp()
-const emit = defineEmits(['close'])
+defineEmits(["close"])
 const showLogic = ref(!!props.modelValue.logic)
 
 const openHelp = () => {
diff --git a/client/components/open/integrations/components/NotificationsMessageActions.vue b/client/components/open/integrations/components/NotificationsMessageActions.vue
index 6a66d0f8d..6dc6fabf6 100644
--- a/client/components/open/integrations/components/NotificationsMessageActions.vue
+++ b/client/components/open/integrations/components/NotificationsMessageActions.vue
@@ -1,68 +1,91 @@
 <template>
   <div>
-    <toggle-switch-input name="include_submission_data" v-model="compVal.include_submission_data" class="mt-4"
-                        label="Include submission data"
-                        help="With form submission answers"
+    <toggle-switch-input
+      v-model="compVal.include_submission_data"
+      name="include_submission_data"
+      class="mt-4"
+      label="Include submission data"
+      help="With form submission answers"
     />
-    <toggle-switch-input name="link_open_form" v-model="compVal.link_open_form" class="mt-4"
-                        label="'Open Form' Link"
-                        help="Link to the form public page"
+    <toggle-switch-input
+      v-model="compVal.link_open_form"
+      name="link_open_form"
+      class="mt-4"
+      label="'Open Form' Link"
+      help="Link to the form public page"
     />
-    <toggle-switch-input name="link_edit_form" v-model="compVal.link_edit_form" class="mt-4"
-                        label="'Edit Form' Link"
-                        help="Link to the form admin page"
+    <toggle-switch-input
+      v-model="compVal.link_edit_form"
+      name="link_edit_form"
+      class="mt-4"
+      label="'Edit Form' Link"
+      help="Link to the form admin page"
     />
-    <toggle-switch-input name="views_submissions_count" v-model="compVal.views_submissions_count" class="mt-4"
-                        label="Form Analytics" help="Form views and submissions count"
+    <toggle-switch-input
+      v-model="compVal.views_submissions_count"
+      name="views_submissions_count"
+      class="mt-4"
+      label="Form Analytics"
+      help="Form views and submissions count"
     />
-    <toggle-switch-input name="link_edit_submission" v-model="compVal.link_edit_submission" class="mt-4"
-                        label="Edit Submission Link"
+    <toggle-switch-input
+      v-model="compVal.link_edit_submission"
+      name="link_edit_submission"
+      class="mt-4"
+      label="Edit Submission Link"
     />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'NotificationsMessageActions',
-  components: { },
+  name: "NotificationsMessageActions",
+  components: {},
   props: {
-    modelValue: { required: false }
+    modelValue: { type: Object, required: false },
   },
-  data () {
+  emits:  ['modelValue',  'input'],
+  data() {
     return {
-      content: this.modelValue ?? {}
+      content: this.modelValue ?? {},
     }
   },
 
   computed: {
     compVal: {
-      set (val) {
+      set(val) {
         this.content = val
-        this.$emit('input', this.compVal)
+        this.$emit("input", this.compVal)
       },
-      get () {
+      get() {
         return this.content
-      }
-    }
+      },
+    },
   },
 
   watch: {
-    modelValue (val) {
+    modelValue(val) {
       this.content = val
-    }
+    },
   },
 
-  created () {
-    if(this.compVal === undefined || this.compVal === null){
+  created() {
+    if (this.compVal === undefined || this.compVal === null) {
       this.compVal = {}
     }
-    ['include_submission_data', 'link_open_form', 'link_edit_form', 'views_submissions_count', 'link_edit_submission'].forEach((keyname) => {
+    [
+      "include_submission_data",
+      "link_open_form",
+      "link_edit_form",
+      "views_submissions_count",
+      "link_edit_submission",
+    ].forEach((keyname) => {
       if (this.compVal[keyname] === undefined) {
         this.compVal[keyname] = true
       }
     })
   },
 
-  methods: { }
+  methods: {},
 }
 </script>
diff --git a/client/components/open/tables/OpenTable.vue b/client/components/open/tables/OpenTable.vue
index cac6f2a44..d2e18301f 100644
--- a/client/components/open/tables/OpenTable.vue
+++ b/client/components/open/tables/OpenTable.vue
@@ -1,57 +1,133 @@
 <template>
-  <table :id="'table-' + tableHash" ref="table"
-    class="notion-table n-table whitespace-no-wrap bg-white dark:bg-notion-dark-light relative">
-    <thead :id="'table-header-' + tableHash" ref="header" class="n-table-head top-0"
-      :class="{ 'absolute': data.length !== 0 }" style="will-change: transform; transform: translate3d(0px, 0px, 0px)">
+  <table
+    :id="'table-' + tableHash"
+    ref="table"
+    class="notion-table n-table whitespace-no-wrap bg-white dark:bg-notion-dark-light relative"
+  >
+    <thead
+      :id="'table-header-' + tableHash"
+      ref="header"
+      class="n-table-head top-0"
+      :class="{ absolute: data.length !== 0 }"
+      style="will-change: transform; transform: translate3d(0px, 0px, 0px)"
+    >
       <tr class="n-table-row overflow-x-hidden">
-        <resizable-th v-for="col, index in columns" :id="'table-head-cell-' + col.id" :key="col.id" scope="col"
-          :allow-resize="allowResize" :width="(col.cell_width ? col.cell_width + 'px' : 'auto')"
-          class="n-table-cell p-0 relative" @resize-width="resizeCol(col, $event)">
+        <resizable-th
+          v-for="(col) in columns"
+          :id="'table-head-cell-' + col.id"
+          :key="col.id"
+          scope="col"
+          :allow-resize="allowResize"
+          :width="col.cell_width ? col.cell_width + 'px' : 'auto'"
+          class="n-table-cell p-0 relative"
+          @resize-width="resizeCol(col, $event)"
+        >
           <p
-            class="bg-gray-50 border-r dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs">
+            class="bg-gray-50 border-r dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
+          >
             {{ col.name }}
           </p>
         </resizable-th>
-        <th class="n-table-cell p-0 relative" style="width: 100px">
+        <th
+          class="n-table-cell p-0 relative"
+          style="width: 100px"
+        >
           <p
-            class="bg-gray-50 dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs">
+            class="bg-gray-50 dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
+          >
             Actions
           </p>
         </th>
       </tr>
     </thead>
-    <tbody v-if="data.length > 0" class="n-table-body bg-white dark:bg-notion-dark-light">
-      <tr v-if="objectHas($slots,'actions')" :id="'table-actions-' + tableHash" ref="actions-row"
-        class="action-row absolute w-full" style="will-change: transform; transform: translate3d(0px, 32px, 0px)">
-        <td :colspan="columns.length" class="p-1">
+    <tbody
+      v-if="data.length > 0"
+      class="n-table-body bg-white dark:bg-notion-dark-light"
+    >
+      <tr
+        v-if="objectHas($slots, 'actions')"
+        :id="'table-actions-' + tableHash"
+        ref="actions-row"
+        class="action-row absolute w-full"
+        style="will-change: transform; transform: translate3d(0px, 32px, 0px)"
+      >
+        <td
+          :colspan="columns.length"
+          class="p-1"
+        >
           <slot name="actions" />
         </td>
       </tr>
-      <tr v-for="row, index in data" :key="row.id" class="n-table-row" :class="{ 'first': index === 0 }">
-        <td v-for="col, colIndex in columns" :key="col.id" :style="{ width: col.cell_width + 'px' }"
-          class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 overflow-hidden" :class="[{ 'border-b': index !== data.length - 1, 'border-r': colIndex !== columns.length - 1 || hasActions },
-  colClasses(col)]">
-          <component :is="fieldComponents[col.type]" class="border-gray-100 dark:border-gray-900" :property="col"
-            :value="row[col.id]" />
+      <tr
+        v-for="(row, index) in data"
+        :key="row.id"
+        class="n-table-row"
+        :class="{ first: index === 0 }"
+      >
+        <td
+          v-for="(col, colIndex) in columns"
+          :key="col.id"
+          :style="{ width: col.cell_width + 'px' }"
+          class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 overflow-hidden"
+          :class="[
+            {
+              'border-b': index !== data.length - 1,
+              'border-r': colIndex !== columns.length - 1 || hasActions,
+            },
+            colClasses(col),
+          ]"
+        >
+          <component
+            :is="fieldComponents[col.type]"
+            class="border-gray-100 dark:border-gray-900"
+            :property="col"
+            :value="row[col.id]"
+          />
         </td>
-        <td v-if="hasActions" class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 border-b"
-          style="width: 100px">
-          <record-operations :form="form" :structure="columns" :submission="row"
+        <td
+          v-if="hasActions"
+          class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 border-b"
+          style="width: 100px"
+        >
+          <record-operations
+            :form="form"
+            :structure="columns"
+            :submission="row"
             @deleted="(submission) => $emit('deleted', submission)"
-            @updated="(submission) => $emit('updated', submission)" />
+            @updated="(submission) => $emit('updated', submission)"
+          />
         </td>
       </tr>
-      <tr v-if="loading" class="n-table-row border-t bg-gray-50 dark:bg-gray-900">
-        <td :colspan="columns.length" class="p-8 w-full">
+      <tr
+        v-if="loading"
+        class="n-table-row border-t bg-gray-50 dark:bg-gray-900"
+      >
+        <td
+          :colspan="columns.length"
+          class="p-8 w-full"
+        >
           <Loader class="w-4 h-4 mx-auto" />
         </td>
       </tr>
     </tbody>
-    <tbody v-else key="body-content" class="n-table-body">
+    <tbody
+      v-else
+      key="body-content"
+      class="n-table-body"
+    >
       <tr class="n-table-row loader w-full">
-        <td :colspan="columns.length" class="n-table-cell w-full p-8">
-          <Loader v-if="loading" class="w-4 h-4 mx-auto" />
-          <p v-else class="text-gray-500 text-center">
+        <td
+          :colspan="columns.length"
+          class="n-table-cell w-full p-8"
+        >
+          <Loader
+            v-if="loading"
+            class="w-4 h-4 mx-auto"
+          />
+          <p
+            v-else
+            class="text-gray-500 text-center"
+          >
             No data found.
           </p>
         </td>
@@ -61,41 +137,43 @@
 </template>
 
 <script>
-import OpenText from './components/OpenText.vue'
-import OpenUrl from './components/OpenUrl.vue'
-import OpenSelect from './components/OpenSelect.vue'
-import OpenDate from './components/OpenDate.vue'
-import OpenFile from './components/OpenFile.vue'
-import OpenCheckbox from './components/OpenCheckbox.vue'
-import ResizableTh from './components/ResizableTh.vue'
-import RecordOperations from '../components/RecordOperations.vue'
-import clonedeep from 'clone-deep'
-import { hash } from "~/lib/utils.js";
-import { default as _has } from 'lodash/has'
+import OpenText from "./components/OpenText.vue"
+import OpenUrl from "./components/OpenUrl.vue"
+import OpenSelect from "./components/OpenSelect.vue"
+import OpenDate from "./components/OpenDate.vue"
+import OpenFile from "./components/OpenFile.vue"
+import OpenCheckbox from "./components/OpenCheckbox.vue"
+import ResizableTh from "./components/ResizableTh.vue"
+import RecordOperations from "../components/RecordOperations.vue"
+import clonedeep from "clone-deep"
+import { hash } from "~/lib/utils.js"
+import { default as _has } from "lodash/has"
 
 export default {
   components: { ResizableTh, RecordOperations },
-  emits: ["updated", "deleted", "resize", "update-columns"],
   props: {
     columns: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     data: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     loading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     allowResize: {
       required: false,
       default: true,
-      type: Boolean
+      type: Boolean,
+    },
+    scrollParent: {
+      type: [Boolean]
     },
-    scrollParent: {},
   },
+  emits: ["updated", "deleted", "resize", "update-columns"],
 
   setup() {
     const workingFormStore = useWorkingFormStore()
@@ -126,68 +204,68 @@ export default {
         url: shallowRef(OpenUrl),
         email: shallowRef(OpenText),
         phone_number: shallowRef(OpenText),
-        signature: shallowRef(OpenFile)
-      }
+        signature: shallowRef(OpenFile),
+      },
     }
   },
 
   watch: {
-    'columns': {
+    columns: {
       handler() {
         this.internalColumns = clonedeep(this.columns)
         this.onStructureChange()
       },
-      deep: true
+      deep: true,
     },
     data() {
       this.$nextTick(() => {
         this.handleScroll()
       })
-    }
+    },
   },
 
   mounted() {
     this.internalColumns = clonedeep(this.columns)
-    const parent = this.scrollParent ?? document.getElementById('table-page')
+    const parent = this.scrollParent ?? document.getElementById("table-page")
     this.tableHash = hash(JSON.stringify(this.form.properties))
     if (parent) {
-      parent.addEventListener('scroll', this.handleScroll, { passive: false })
+      parent.addEventListener("scroll", this.handleScroll, { passive: false })
     }
-    window.addEventListener('resize', this.handleScroll)
+    window.addEventListener("resize", this.handleScroll)
     this.onStructureChange()
     this.handleScroll()
   },
 
   beforeUnmount() {
-    const parent = this.scrollParent ?? document.getElementById('table-page')
+    const parent = this.scrollParent ?? document.getElementById("table-page")
     if (parent) {
-      parent.removeEventListener('scroll', this.handleScroll)
+      parent.removeEventListener("scroll", this.handleScroll)
     }
-    window.removeEventListener('resize', this.handleScroll)
+    window.removeEventListener("resize", this.handleScroll)
   },
 
   methods: {
     colClasses(col) {
-      let colAlign, colColor, colFontWeight, colWrap
+      let  colColor, colFontWeight, colWrap
 
       // Column align
-      colAlign = `text-${col.alignment ? col.alignment : 'left'}`
+      const colAlign = `text-${col.alignment ? col.alignment : "left"}`
 
       // Column color
       colColor = null
-      if (!_has(col, 'color') || col.color === 'default') {
-        colColor = 'text-gray-700 dark:text-gray-300'
+      if (!_has(col, "color") || col.color === "default") {
+        colColor = "text-gray-700 dark:text-gray-300"
       }
       colColor = `text-${col.color}`
 
       // Column font weight
-      if (_has(col, 'bold') && col.bold) {
-        colFontWeight = 'font-semibold'
+      if (_has(col, "bold") && col.bold) {
+        colFontWeight = "font-semibold"
       }
 
       // Column wrapping
-      if (!_has(col, 'wrap_text') || !col.wrap_text) {
-        colWrap = 'truncate'
+      if (!_has(col, "wrap_text") || !col.wrap_text) {
+        colWrap = "truncate"
       }
 
       return [colAlign, colColor, colWrap, colFontWeight]
@@ -195,11 +273,19 @@ export default {
     onStructureChange() {
       if (this.internalColumns) {
         this.$nextTick(() => {
-          this.internalColumns.forEach(col => {
-            if (!_has(col, 'cell_width')) {
-              if (this.allowResize && this.internalColumns.length && document.getElementById('table-head-cell-' + col.id)) {
+          this.internalColumns.forEach((col) => {
+            if (!_has(col, "cell_width")) {
+              if (
+                this.allowResize &&
+                this.internalColumns.length &&
+                document.getElementById("table-head-cell-" + col.id)
+              ) {
                 // Within editor
-                this.resizeCol(col, document.getElementById('table-head-cell-' + col.id).offsetWidth)
+                this.resizeCol(
+                  col,
+                  document.getElementById("table-head-cell-" + col.id)
+                    .offsetWidth,
+                )
               }
             }
           })
@@ -208,60 +294,65 @@ export default {
     },
     resizeCol(col, width) {
       if (!this.form) return
-      const index = this.internalColumns.findIndex(c => c.id === col.id)
+      const index = this.internalColumns.findIndex((c) => c.id === col.id)
       this.internalColumns[index].cell_width = width
       this.setColumns(this.internalColumns)
       this.$nextTick(() => {
-        this.$emit('resize')
+        this.$emit("resize")
       })
     },
     handleScroll() {
-
       if (this.rafId) {
-        cancelAnimationFrame(this.rafId);
+        cancelAnimationFrame(this.rafId)
       }
 
       this.rafId = requestAnimationFrame(() => {
-        const table = this.$refs.table;
-        const tableHeader = document.getElementById('table-header-' + this.tableHash);
-        const tableActionsRow = document.getElementById('table-actions-' + this.tableHash);
+        const table = this.$refs.table
+        const tableHeader = document.getElementById(
+          "table-header-" + this.tableHash,
+        )
+        const tableActionsRow = document.getElementById(
+          "table-actions-" + this.tableHash,
+        )
 
-        if (!table || !tableHeader) return;
+        if (!table || !tableHeader) return
 
-        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        const tableRect = table.getBoundingClientRect();
+        const scrollTop =
+          window.pageYOffset || document.documentElement.scrollTop
+        const tableRect = table.getBoundingClientRect()
 
         // The starting point of the table relative to the viewport
-        const tableStart = tableRect.top + scrollTop;
+        const tableStart = tableRect.top + scrollTop
         // The end point of the table relative to the viewport
-        const tableEnd = tableStart + tableRect.height;
+        const tableEnd = tableStart + tableRect.height
 
-        let headerY = scrollTop - tableStart;
-        let actionsY = scrollTop + window.innerHeight - tableEnd;
+        let headerY = scrollTop - tableStart
+        let actionsY = scrollTop + window.innerHeight - tableEnd
 
-        if (headerY < 0) headerY = 0;
+        if (headerY < 0) headerY = 0
         if (scrollTop + window.innerHeight > tableEnd) {
-          actionsY = tableRect.height - (scrollTop + window.innerHeight - tableEnd);
+          actionsY =
+            tableRect.height - (scrollTop + window.innerHeight - tableEnd)
         } else {
-          actionsY = tableRect.height;
+          actionsY = tableRect.height
         }
 
         if (tableHeader) {
-          tableHeader.style.transform = `translate3d(0px, ${headerY}px, 0px)`;
+          tableHeader.style.transform = `translate3d(0px, ${headerY}px, 0px)`
         }
 
         if (tableActionsRow) {
-          tableActionsRow.style.transform = `translate3d(0px, ${actionsY}px, 0px)`;
+          tableActionsRow.style.transform = `translate3d(0px, ${actionsY}px, 0px)`
         }
-      });
+      })
     },
     setColumns(val) {
-      this.$emit('update-columns', val)
+      this.$emit("update-columns", val)
     },
     objectHas(object, key) {
       return _has(object, key)
-    }
-  }
+    },
+  },
 }
 </script>
 
diff --git a/client/components/open/tables/components/OpenCheckbox.vue b/client/components/open/tables/components/OpenCheckbox.vue
index 21b2c1ebd..8d7a26233 100644
--- a/client/components/open/tables/components/OpenCheckbox.vue
+++ b/client/components/open/tables/components/OpenCheckbox.vue
@@ -1,11 +1,33 @@
 <template>
-  <svg v-if="value===true" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-auto" fill="none"
-       viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
+  <svg
+    v-if="value === true"
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-4 w-4 mx-auto"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M5 13l4 4L19 7"
+    />
   </svg>
-  <svg v-else-if="value===false" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-auto" fill="none"
-       viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+  <svg
+    v-else-if="value === false"
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-4 w-4 mx-auto"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M6 18L18 6M6 6l12 12"
+    />
   </svg>
 </template>
 
@@ -14,19 +36,17 @@ export default {
   components: {},
   props: {
     value: {
-      required: true
+      type: Boolean,
+      required: true,
     },
-
-  },
-  mounted() {
   },
 
   data() {
     return {}
   },
 
-  computed: {
-  },
+  computed: {},
+  mounted() {},
 
   methods: {},
 }
diff --git a/client/components/open/tables/components/OpenFile.vue b/client/components/open/tables/components/OpenFile.vue
index d22daf5f5..5390356be 100644
--- a/client/components/open/tables/components/OpenFile.vue
+++ b/client/components/open/tables/components/OpenFile.vue
@@ -1,22 +1,44 @@
 <template>
   <p class="text-xs">
-    <span v-for="file in parsedFiles" :key="file.file_url"
-          class="whitespace-nowrap rounded-md transition-colors hover:decoration-none"
-          :class="{'open-file text-gray-700 dark:text-gray-300 truncate':!file.is_image, 'open-file-img':file.is_image}"
+    <span
+      v-for="file in parsedFiles"
+      :key="file.file_url"
+      class="whitespace-nowrap rounded-md transition-colors hover:decoration-none"
+      :class="{
+        'open-file text-gray-700 dark:text-gray-300 truncate': !file.is_image,
+        'open-file-img': file.is_image,
+      }"
     >
-      <a class="text-gray-700 dark:text-gray-300" :href="file.file_url" target="_blank"
-         rel="nofollow"
+      <a
+        class="text-gray-700 dark:text-gray-300"
+        :href="file.file_url"
+        target="_blank"
+        rel="nofollow"
       >
-  <div v-if="file.is_image" class="w-8 h-8">
-    <img class="object-cover h-full w-full rounded" :src="file.file_url" @error="failedImages.push(file.file_url)"/>
-  </div>
-  <span v-else
-        class="py-1 px-2"
-  >
-      <a :href="file.file_url" target="_blank" download>{{ file.displayed_file_name }}</a>
+        <div
+          v-if="file.is_image"
+          class="w-8 h-8"
+        >
+          <img
+            class="object-cover h-full w-full rounded"
+            :src="file.file_url"
+            @error="failedImages.push(file.file_url)"
+          >
+        </div>
+        <span
+          v-else
+          class="py-1 px-2"
+        >
+          <a
+            :href="file.file_url"
+            target="_blank"
+            download
+          >{{
+            file.displayed_file_name
+          }}</a>
+        </span>
+      </a>
     </span>
-  </a>
-  </span>
   </p>
 </template>
 
@@ -26,32 +48,36 @@ export default {
   props: {
     value: {
       type: Array,
-      required: false
-    }
+      required: false,
+    },
   },
 
   data() {
     return {
-      failedImages: []
+      failedImages: [],
     }
   },
 
   computed: {
     parsedFiles() {
-      return this.value ? this.value.map((file) => {
-        return {
-          file_name: file.file_name,
-          file_url: file.file_url,
-          displayed_file_name: this.displayedFileName(file.file_name),
-          is_image: !this.failedImages.includes(file.file_url) && this.isImage(file.file_name)
-        }
-      }): []
-    }
+      return this.value
+        ? this.value.map((file) => {
+            return {
+              file_name: file.file_name,
+              file_url: file.file_url,
+              displayed_file_name: this.displayedFileName(file.file_name),
+              is_image:
+                !this.failedImages.includes(file.file_url) &&
+                this.isImage(file.file_name),
+            }
+          })
+        : []
+    },
   },
 
   methods: {
     isImage(fileName) {
-      return ['png', 'gif', 'jpg', 'jpeg', 'tif'].some((suffix) => {
+      return ["png", "gif", "jpg", "jpeg", "tif"].some((suffix) => {
         return fileName && fileName.endsWith(suffix)
       })
     },
@@ -60,11 +86,11 @@ export default {
       const filename = fileName.substr(0, fileName.lastIndexOf("."))
 
       if (filename.length > 10) {
-        return filename.substr(0, 10) + '[...].' + extension
+        return filename.substr(0, 10) + "[...]." + extension
       }
-      return filename + '.' + extension
-    }
-  }
+      return filename + "." + extension
+    },
+  },
 }
 </script>
 
diff --git a/client/components/open/tables/components/OpenSelect.vue b/client/components/open/tables/components/OpenSelect.vue
index 92dc058db..4ba466da6 100644
--- a/client/components/open/tables/components/OpenSelect.vue
+++ b/client/components/open/tables/components/OpenSelect.vue
@@ -1,32 +1,44 @@
 <template>
-  <span v-if="value" class="-mb-2">
+  <span
+    v-if="value"
+    class="-mb-2"
+  >
     <template v-if="valueIsObject">
-      <open-tag v-for="(val,index) in value" :key="index+val" :opt="val" />
+      <open-tag
+        v-for="(val, index) in value"
+        :key="index + val"
+        :opt="val"
+      />
     </template>
-    <open-tag v-else :opt="value" />
+    <open-tag
+      v-else
+      :opt="value"
+    />
   </span>
 </template>
 
 <script>
-import OpenTag from './OpenTag.vue'
+import OpenTag from "./OpenTag.vue"
 
 export default {
   components: { OpenTag },
   props: {
-    value: {}
+    value: {
+      type: Object,
+    },
   },
 
-  data () {
+  data() {
     return {}
   },
 
   computed: {
-    valueIsObject () {
-      if (typeof this.value === 'object' && this.value !== null) {
+    valueIsObject() {
+      if (typeof this.value === "object" && this.value !== null) {
         return true
       }
       return false
-    }
+    },
   },
 }
 </script>
diff --git a/client/components/open/tables/components/OpenTag.vue b/client/components/open/tables/components/OpenTag.vue
index 800a5a7f2..8718deb6c 100644
--- a/client/components/open/tables/components/OpenTag.vue
+++ b/client/components/open/tables/components/OpenTag.vue
@@ -1,6 +1,7 @@
 <template>
-  <span :id="opt"
-        class="py-1 px-2 mb-1 open-tag default mr-2 text-gray-700 dark:text-gray-300 text-xs whitespace-nowrap rounded-md transition-colors"
+  <span
+    :id="opt"
+    class="py-1 px-2 mb-1 open-tag default mr-2 text-gray-700 dark:text-gray-300 text-xs whitespace-nowrap rounded-md transition-colors"
   >
     {{ opt }}
   </span>
@@ -12,20 +13,18 @@ export default {
   props: {
     opt: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
 
-  data () {
+  data() {
     return {}
   },
 
-  computed: {
-  },
-  mounted () {
-  },
+  computed: {},
+  mounted() {},
 
-  methods: {}
+  methods: {},
 }
 </script>
 
@@ -35,7 +34,8 @@ export default {
   &.gray {
     background-color: #e3e2e0;
   }
-  &.light-gray,&.default {
+  &.light-gray,
+  &.default {
     background-color: #e3e2e080;
   }
   &.brown {
@@ -69,7 +69,8 @@ export default {
     &.gray {
       background-color: #5a5a5a;
     }
-    &.light-gray,&.default {
+    &.light-gray,
+    &.default {
       background-color: #ffffff21;
     }
     &.brown {
@@ -98,4 +99,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/components/open/tables/components/OpenText.vue b/client/components/open/tables/components/OpenText.vue
index 27cde12c9..09d00796d 100644
--- a/client/components/open/tables/components/OpenText.vue
+++ b/client/components/open/tables/components/OpenText.vue
@@ -9,8 +9,9 @@ export default {
   components: {},
   props: {
     value: {
-      required: true
-    }
+      type: String,
+      required: true,
+    },
   },
 }
 </script>
diff --git a/client/components/open/tables/components/OpenUrl.vue b/client/components/open/tables/components/OpenUrl.vue
index 5f488df86..c0a613ffb 100644
--- a/client/components/open/tables/components/OpenUrl.vue
+++ b/client/components/open/tables/components/OpenUrl.vue
@@ -1,5 +1,10 @@
 <template>
-  <a class="text-gray-700 dark:text-gray-300 hover:underline" :href="value" target="_blank" rel="nofollow">{{ value }}</a>
+  <a
+    class="text-gray-700 dark:text-gray-300 hover:underline"
+    :href="value"
+    target="_blank"
+    rel="nofollow"
+  >{{ value }}</a>
 </template>
 
 <script>
@@ -7,19 +12,17 @@ export default {
   components: {},
   props: {
     value: {
-      required: true
+      type: String,
+      required: true,
     },
-
-  },
-  mounted() {
   },
 
   data() {
     return {}
   },
 
-  computed: {
-  },
+  computed: {},
+  mounted() {},
 
   methods: {},
 }
diff --git a/client/components/open/tables/components/ResizableTh.vue b/client/components/open/tables/components/ResizableTh.vue
index 86b69761d..9cbe5f11e 100644
--- a/client/components/open/tables/components/ResizableTh.vue
+++ b/client/components/open/tables/components/ResizableTh.vue
@@ -1,9 +1,16 @@
 <template>
-  <th ref="th" :style="{width: width}">
-    <slot/>
-    <div v-if="allowResize" class="absolute right-0 top-0 w-0 z-10">
-      <div class="resize-handler bg-transparent cursor-move	 hover:bg-blue-500 opacity-80 transition-colors"
-           @mousedown="mouseDownHandler"
+  <th
+    ref="th"
+    :style="{ width: width }"
+  >
+    <slot />
+    <div
+      v-if="allowResize"
+      class="absolute right-0 top-0 w-0 z-10"
+    >
+      <div
+        class="resize-handler bg-transparent cursor-move hover:bg-blue-500 opacity-80 transition-colors"
+        @mousedown="mouseDownHandler"
       />
     </div>
   </th>
@@ -14,19 +21,22 @@ export default {
   components: {},
   props: {
     allowResize: {
-      required: true
+      type: Boolean,
+      required: true,
     },
     width: {
-      required: true
-    }
+      type: [String, Number],
+      required: true,
+    },
   },
+  emits: ['resize-width'],
 
   data() {
     return {
       x: 0,
       w: 0,
       lastEmit: Date.now(),
-      throttlePeriod: 50 // milliseconds
+      throttlePeriod: 50, // milliseconds
     }
   },
 
@@ -41,22 +51,22 @@ export default {
       this.w = parseInt(styles.width, 10)
 
       // Attach the listeners to `document`
-      document.addEventListener('mousemove', this.mouseMoveHandler)
-      document.addEventListener('mouseup', this.mouseUpHandler)
+      document.addEventListener("mousemove", this.mouseMoveHandler)
+      document.addEventListener("mouseup", this.mouseUpHandler)
     },
     mouseMoveHandler(e) {
       const now = Date.now()
       if (now - this.lastEmit > this.throttlePeriod) {
         const dx = e.clientX - this.x
-        this.$emit('resize-width', this.w + dx)
+        this.$emit("resize-width", this.w + dx)
         this.lastEmit = now
       }
     },
     mouseUpHandler() {
       // Remove the handlers of `mousemove` and `mouseup`
-      document.removeEventListener('mousemove', this.mouseMoveHandler)
-      document.removeEventListener('mouseup', this.mouseUpHandler)
-    }
-  }
+      document.removeEventListener("mousemove", this.mouseMoveHandler)
+      document.removeEventListener("mouseup", this.mouseUpHandler)
+    },
+  },
 }
 </script>
diff --git a/client/components/pages/OpenFormFooter.vue b/client/components/pages/OpenFormFooter.vue
index 940bde26b..88c28bfc8 100644
--- a/client/components/pages/OpenFormFooter.vue
+++ b/client/components/pages/OpenFormFooter.vue
@@ -7,34 +7,52 @@
         </p>
       </div>
       <div class="flex justify-center mt-5 md:mt-0">
-        <router-link :to="{ name: user ? 'home' : 'index' }" class="flex-shrink-0 font-semibold flex items-center">
-          <img src="/img/logo.svg" alt="notion tools logo" class="w-10 h-10">
-          <span class="ml-2 text-xl text-black dark:text-white">
-            OpnForm
-          </span>
+        <router-link
+          :to="{ name: user ? 'home' : 'index' }"
+          class="flex-shrink-0 font-semibold flex items-center"
+        >
+          <img
+            src="/img/logo.svg"
+            alt="notion tools logo"
+            class="w-10 h-10"
+          >
+          <span class="ml-2 text-xl text-black dark:text-white"> OpnForm </span>
         </router-link>
       </div>
       <div class="flex justify-center mt-5 md:mt-0">
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-4 gap-y-2">
-          <router-link :to="{name:'privacy-policy'}"
-                       class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue">
+          <router-link
+            :to="{ name: 'privacy-policy' }"
+            class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+          >
             Privacy Policy
           </router-link>
 
-          <router-link :to="{name:'terms-conditions'}"
-                       class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue">
+          <router-link
+            :to="{ name: 'terms-conditions' }"
+            class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+          >
             Terms & Conditions
           </router-link>
-          <a :href="opnformConfig.links.feature_requests" target="_blank"
-             class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue">
+          <a
+            :href="opnformConfig.links.feature_requests"
+            target="_blank"
+            class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+          >
             Feature Requests
           </a>
-          <a :href="opnformConfig.links.roadmap" target="_blank"
-             class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue">
+          <a
+            :href="opnformConfig.links.roadmap"
+            target="_blank"
+            class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+          >
             Roadmap
           </a>
-          <a :href="opnformConfig.links.discord" target="_blank"
-             class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue">
+          <a
+            :href="opnformConfig.links.discord"
+            target="_blank"
+            class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+          >
             Discord
           </a>
         </div>
@@ -44,21 +62,20 @@
 </template>
 
 <script>
-import { computed } from 'vue'
-import opnformConfig from "~/opnform.config.js";
+import { computed } from "vue"
+import opnformConfig from "~/opnform.config.js"
 
 export default {
-  setup () {
+  setup() {
     const authStore = useAuthStore()
     return {
-      user : computed(() => authStore.user),
-      opnformConfig
+      user: computed(() => authStore.user),
+      opnformConfig,
     }
   },
 
   data: () => ({
     currYear: new Date().getFullYear(),
   }),
-
 }
 </script>
diff --git a/client/components/pages/auth/ForgotPasswordModal.vue b/client/components/pages/auth/ForgotPasswordModal.vue
index d437db3e9..a92c9995a 100644
--- a/client/components/pages/auth/ForgotPasswordModal.vue
+++ b/client/components/pages/auth/ForgotPasswordModal.vue
@@ -1,76 +1,162 @@
 <template>
-    <!--  Forgot password modal  -->
-    <modal :show="show" @close="close" max-width="lg">
-      <template #icon>
-        <template v-if="isMailSent">
-          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect class="text-blue-50" width="56" height="56" rx="28" fill="currentColor"/>
-            <path d="M16.3333 22.1666L25.859 28.8346C26.6304 29.3746 27.016 29.6446 27.4356 29.7492C27.8061 29.8415 28.1937 29.8415 28.5643 29.7492C28.9838 29.6446 29.3695 29.3746 30.1408 28.8346L39.6666 22.1666M21.9333 37.3333H34.0666C36.0268 37.3333 37.0069 37.3333 37.7556 36.9518C38.4141 36.6163 38.9496 36.0808 39.2851 35.4223C39.6666 34.6736 39.6666 33.6935 39.6666 31.7333V24.2666C39.6666 22.3064 39.6666 21.3264 39.2851 20.5777C38.9496 19.9191 38.4141 19.3837 37.7556 19.0481C37.0069 18.6666 36.0268 18.6666 34.0666 18.6666H21.9333C19.9731 18.6666 18.993 18.6666 18.2443 19.0481C17.5857 19.3837 17.0503 19.9191 16.7147 20.5777C16.3333 21.3264 16.3333 22.3064 16.3333 24.2666V31.7333C16.3333 33.6935 16.3333 34.6736 16.7147 35.4223C17.0503 36.0808 17.5857 36.6163 18.2443 36.9518C18.993 37.3333 19.9731 37.3333 21.9333 37.3333Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </template>
-        <template v-else>
-          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect class="text-blue-50" width="56" height="56" rx="28" fill="currentColor"/>
-            <path d="M33.8333 24.4999C33.8333 23.9028 33.6055 23.3057 33.1499 22.8501C32.6943 22.3945 32.0972 22.1667 31.5 22.1667M31.5 31.5C35.366 31.5 38.5 28.366 38.5 24.5C38.5 20.634 35.366 17.5 31.5 17.5C27.634 17.5 24.5 20.634 24.5 24.5C24.5 24.8193 24.5214 25.1336 24.5628 25.4415C24.6309 25.948 24.6649 26.2013 24.642 26.3615C24.6181 26.5284 24.5877 26.6184 24.5055 26.7655C24.4265 26.9068 24.2873 27.046 24.009 27.3243L18.0467 33.2866C17.845 33.4884 17.7441 33.5893 17.6719 33.707C17.608 33.8114 17.5608 33.9252 17.5322 34.0442C17.5 34.1785 17.5 34.3212 17.5 34.6065V36.6333C17.5 37.2867 17.5 37.6134 17.6272 37.863C17.739 38.0825 17.9175 38.261 18.137 38.3728C18.3866 38.5 18.7133 38.5 19.3667 38.5H22.1667V36.1667H24.5V33.8333H26.8333L28.6757 31.991C28.954 31.7127 29.0932 31.5735 29.2345 31.4945C29.3816 31.4123 29.4716 31.3819 29.6385 31.358C29.7987 31.3351 30.052 31.3691 30.5585 31.4372C30.8664 31.4786 31.1807 31.5 31.5 31.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </template>
+  <!--  Forgot password modal  -->
+  <modal
+    :show="show"
+    max-width="lg"
+    @close="close"
+  >
+    <template #icon>
+      <template v-if="isMailSent">
+        <svg
+          width="56"
+          height="56"
+          viewBox="0 0 56 56"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            class="text-blue-50"
+            width="56"
+            height="56"
+            rx="28"
+            fill="currentColor"
+          />
+          <path
+            d="M16.3333 22.1666L25.859 28.8346C26.6304 29.3746 27.016 29.6446 27.4356 29.7492C27.8061 29.8415 28.1937 29.8415 28.5643 29.7492C28.9838 29.6446 29.3695 29.3746 30.1408 28.8346L39.6666 22.1666M21.9333 37.3333H34.0666C36.0268 37.3333 37.0069 37.3333 37.7556 36.9518C38.4141 36.6163 38.9496 36.0808 39.2851 35.4223C39.6666 34.6736 39.6666 33.6935 39.6666 31.7333V24.2666C39.6666 22.3064 39.6666 21.3264 39.2851 20.5777C38.9496 19.9191 38.4141 19.3837 37.7556 19.0481C37.0069 18.6666 36.0268 18.6666 34.0666 18.6666H21.9333C19.9731 18.6666 18.993 18.6666 18.2443 19.0481C17.5857 19.3837 17.0503 19.9191 16.7147 20.5777C16.3333 21.3264 16.3333 22.3064 16.3333 24.2666V31.7333C16.3333 33.6935 16.3333 34.6736 16.7147 35.4223C17.0503 36.0808 17.5857 36.6163 18.2443 36.9518C18.993 37.3333 19.9731 37.3333 21.9333 37.3333Z"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
       </template>
-      <template #title>
-        <template v-if="isMailSent">Check your email</template>
-        <template v-else>Forgot password?</template>
+      <template v-else>
+        <svg
+          width="56"
+          height="56"
+          viewBox="0 0 56 56"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            class="text-blue-50"
+            width="56"
+            height="56"
+            rx="28"
+            fill="currentColor"
+          />
+          <path
+            d="M33.8333 24.4999C33.8333 23.9028 33.6055 23.3057 33.1499 22.8501C32.6943 22.3945 32.0972 22.1667 31.5 22.1667M31.5 31.5C35.366 31.5 38.5 28.366 38.5 24.5C38.5 20.634 35.366 17.5 31.5 17.5C27.634 17.5 24.5 20.634 24.5 24.5C24.5 24.8193 24.5214 25.1336 24.5628 25.4415C24.6309 25.948 24.6649 26.2013 24.642 26.3615C24.6181 26.5284 24.5877 26.6184 24.5055 26.7655C24.4265 26.9068 24.2873 27.046 24.009 27.3243L18.0467 33.2866C17.845 33.4884 17.7441 33.5893 17.6719 33.707C17.608 33.8114 17.5608 33.9252 17.5322 34.0442C17.5 34.1785 17.5 34.3212 17.5 34.6065V36.6333C17.5 37.2867 17.5 37.6134 17.6272 37.863C17.739 38.0825 17.9175 38.261 18.137 38.3728C18.3866 38.5 18.7133 38.5 19.3667 38.5H22.1667V36.1667H24.5V33.8333H26.8333L28.6757 31.991C28.954 31.7127 29.0932 31.5735 29.2345 31.4945C29.3816 31.4123 29.4716 31.3819 29.6385 31.358C29.7987 31.3351 30.052 31.3691 30.5585 31.4372C30.8664 31.4786 31.1807 31.5 31.5 31.5Z"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
       </template>
+    </template>
+    <template #title>
       <template v-if="isMailSent">
-        <div class="text-center">We sent a password reset link to <br/><span>{{form.email}}</span></div>
-        <div class="w-full p-4 text-center">
-          <span class="mt-4">Didn't receive the email? <a href="#" class="ml-1" @click.prevent="send">Click to resend</a></span>
-        </div>
+        Check your email
       </template>
       <template v-else>
-        <div class="text-center">No worries, we'll send you reset instructions.</div>
-        <form @submit.prevent="send" @keydown="form.onKeydown($event)" class="p-4">
-          <text-input name="email" :form="form" label="Email" placeholder="Your email address" :required="true" />
-
-          <div class="w-full mt-6">
-            <v-button :loading="form.busy" class="w-full my-3">Reset password</v-button>
-          </div>
-        </form>
+        Forgot password?
       </template>
-      <div class="w-full text-center">
-        <a href="#" @click.prevent="close" class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700">
-          <svg class="inline mr-1" width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M13.3334 6.99996H1.66669M1.66669 6.99996L7.50002 12.8333M1.66669 6.99996L7.50002 1.16663" stroke="#475467" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-          Back to log in
-        </a>
+    </template>
+    <template v-if="isMailSent">
+      <div class="text-center">
+        We sent a password reset link to <br><span>{{ form.email }}</span>
+      </div>
+      <div class="w-full p-4 text-center">
+        <span class="mt-4">Didn't receive the email?
+          <a
+            href="#"
+            class="ml-1"
+            @click.prevent="send"
+          >Click to resend</a></span>
       </div>
-    </modal>
-  </template>
+    </template>
+    <template v-else>
+      <div class="text-center">
+        No worries, we'll send you reset instructions.
+      </div>
+      <form
+        class="p-4"
+        @submit.prevent="send"
+        @keydown="form.onKeydown($event)"
+      >
+        <text-input
+          name="email"
+          :form="form"
+          label="Email"
+          placeholder="Your email address"
+          :required="true"
+        />
+
+        <div class="w-full mt-6">
+          <v-button
+            :loading="form.busy"
+            class="w-full my-3"
+          >
+            Reset password
+          </v-button>
+        </div>
+      </form>
+    </template>
+    <div class="w-full text-center">
+      <a
+        href="#"
+        class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700"
+        @click.prevent="close"
+      >
+        <svg
+          class="inline mr-1"
+          width="15"
+          height="14"
+          viewBox="0 0 15 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13.3334 6.99996H1.66669M1.66669 6.99996L7.50002 12.8333M1.66669 6.99996L7.50002 1.16663"
+            stroke="#475467"
+            stroke-width="1.66667"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        Back to log in
+      </a>
+    </div>
+  </modal>
+</template>
 
-  <script>
-  export default {
-    name: 'ForgotPasswordModal',
-    components: { },
-    props: {
-      show: {
-        type: Boolean,
-        required: true
-      }
+<script>
+export default {
+  name: "ForgotPasswordModal",
+  components: {},
+  props: {
+    show: {
+      type: Boolean,
+      required: true,
     },
-    data: () => ({
-      isMailSent: false,
-      form: useForm({
-        email: ''
-      })
+  },
+  emits: ['close'],
+  data: () => ({
+    isMailSent: false,
+    form: useForm({
+      email: "",
     }),
-    methods: {
-      async send () {
-        const { data } = await this.form.post('/password/email')
-        this.isMailSent = true
-      },
-      close () {
-        this.$emit('close')
-        this.isMailSent = false
-      }
-    }
-  }
-  </script>
+  }),
+  methods: {
+    async send() {
+      await this.form.post("/password/email")
+      this.isMailSent = true
+    },
+    close() {
+      this.$emit("close")
+      this.isMailSent = false
+    },
+  },
+}
+</script>
diff --git a/client/components/pages/auth/components/LoginForm.vue b/client/components/pages/auth/components/LoginForm.vue
index 4e130a085..e0c4b9642 100644
--- a/client/components/pages/auth/components/LoginForm.vue
+++ b/client/components/pages/auth/components/LoginForm.vue
@@ -1,39 +1,77 @@
 <template>
   <div>
-    <forgot-password-modal :show="showForgotModal" @close="showForgotModal=false"/>
-
-    <form class="mt-4" @submit.prevent="login" @keydown="form.onKeydown($event)">
+    <forgot-password-modal
+      :show="showForgotModal"
+      @close="showForgotModal = false"
+    />
+
+    <form
+      class="mt-4"
+      @submit.prevent="login"
+      @keydown="form.onKeydown($event)"
+    >
       <!-- Email -->
-      <text-input name="email" :form="form" label="Email" :required="true" placeholder="Your email address"/>
+      <text-input
+        name="email"
+        :form="form"
+        label="Email"
+        :required="true"
+        placeholder="Your email address"
+      />
 
       <!-- Password -->
-      <text-input native-type="password" placeholder="Your password"
-                  name="password" :form="form" label="Password" :required="true"
+      <text-input
+        native-type="password"
+        placeholder="Your password"
+        name="password"
+        :form="form"
+        label="Password"
+        :required="true"
       />
 
       <!-- Remember Me -->
       <div class="relative flex items-center my-5">
-        <v-checkbox v-model="remember" class="w-full md:w-1/2" name="remember" size="small">
+        <v-checkbox
+          v-model="remember"
+          class="w-full md:w-1/2"
+          name="remember"
+          size="small"
+        >
           Remember me
         </v-checkbox>
 
         <div class="w-full md:w-1/2 text-right">
-          <a href="#" class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700"
-             @click.prevent="showForgotModal=true">
+          <a
+            href="#"
+            class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700"
+            @click.prevent="showForgotModal = true"
+          >
             Forgot your password?
           </a>
         </div>
       </div>
 
       <!-- Submit Button -->
-      <v-button dusk="btn_login" :loading="form.busy || loading">
+      <v-button
+        dusk="btn_login"
+        :loading="form.busy || loading"
+      >
         Log in to continue
       </v-button>
 
       <p class="text-gray-500 mt-4">
         Don't have an account?
-        <a v-if="isQuick" href="#" class="font-semibold ml-1" @click.prevent="$emit('openRegister')">Sign Up</a>
-        <NuxtLink v-else :to="{name:'register'}" class="font-semibold ml-1">
+        <a
+          v-if="isQuick"
+          href="#"
+          class="font-semibold ml-1"
+          @click.prevent="$emit('openRegister')"
+        >Sign Up</a>
+        <NuxtLink
+          v-else
+          :to="{ name: 'register' }"
+          class="font-semibold ml-1"
+        >
           Sign Up
         </NuxtLink>
       </p>
@@ -42,81 +80,89 @@
 </template>
 
 <script>
-import ForgotPasswordModal from '../ForgotPasswordModal.vue'
-import {opnFetch} from "~/composables/useOpnApi.js"
-import {fetchAllWorkspaces} from "~/stores/workspaces.js"
+import ForgotPasswordModal from "../ForgotPasswordModal.vue"
+import { opnFetch } from "~/composables/useOpnApi.js"
+import { fetchAllWorkspaces } from "~/stores/workspaces.js"
 
 export default {
-  name: 'LoginForm',
+  name: "LoginForm",
   components: {
-    ForgotPasswordModal
+    ForgotPasswordModal,
   },
   props: {
     isQuick: {
       type: Boolean,
       required: false,
-      default: false
-    }
+      default: false,
+    },
   },
 
+  emits: ['afterQuickLogin', 'openRegister'],
   setup() {
     return {
       authStore: useAuthStore(),
       formsStore: useFormsStore(),
-      workspaceStore: useWorkspacesStore()
+      workspaceStore: useWorkspacesStore(),
     }
   },
 
   data: () => ({
     form: useForm({
-      email: '',
-      password: ''
+      email: "",
+      password: "",
     }),
     loading: false,
     remember: false,
-    showForgotModal: false
+    showForgotModal: false,
   }),
 
   methods: {
     login() {
       // Submit the form.
       this.loading = true
-      this.form.post('login').then(async (data) => {
-        // Save the token.
-        this.authStore.setToken(data.token)
-
-        const [userDataResponse, workspacesResponse] = await Promise.all([opnFetch('user'), fetchAllWorkspaces()]);
-        this.authStore.setUser(userDataResponse)
-        this.workspaceStore.set(workspacesResponse.data.value)
-
-        // Load forms
-        this.formsStore.loadAll(this.workspaceStore.currentId)
-
-        // Redirect home.
-        this.redirect()
-      }).catch((error) => {
-        console.error(error)
-      }).finally(() => {
-        this.loading = false
-      })
+      this.form
+        .post("login")
+        .then(async (data) => {
+          // Save the token.
+          this.authStore.setToken(data.token)
+
+          const [userDataResponse, workspacesResponse] = await Promise.all([
+            opnFetch("user"),
+            fetchAllWorkspaces(),
+          ])
+          this.authStore.setUser(userDataResponse)
+          this.workspaceStore.set(workspacesResponse.data.value)
+
+          // Load forms
+          this.formsStore.loadAll(this.workspaceStore.currentId)
+
+          // Redirect home.
+          this.redirect()
+        })
+        .catch((error) => {
+          console.error(error)
+        })
+        .finally(() => {
+          this.loading = false
+        })
     },
 
     redirect() {
       if (this.isQuick) {
-        this.$emit('afterQuickLogin')
+        this.$emit("afterQuickLogin")
         return
       }
 
-      const intendedUrlCookie = useCookie('intended_url')
+      const intendedUrlCookie = useCookie("intended_url")
       const router = useRouter()
 
       if (intendedUrlCookie.value) {
-        router.push({path: intendedUrlCookie.value})
-        useCookie('intended_url').value = null
+        router.push({ path: intendedUrlCookie.value })
+        useCookie("intended_url").value = null
       } else {
-        router.push({name: 'home'})
+        router.push({ name: "home" })
       }
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/pages/auth/components/QuickRegister.vue b/client/components/pages/auth/components/QuickRegister.vue
index 41a152fd0..29aa3299b 100644
--- a/client/components/pages/auth/components/QuickRegister.vue
+++ b/client/components/pages/auth/components/QuickRegister.vue
@@ -1,76 +1,112 @@
 <template>
   <div>
     <!--  Login modal  -->
-    <modal :show="showLoginModal" @close="showLoginModal=false" max-width="lg">
+    <modal
+      :show="showLoginModal"
+      max-width="lg"
+      @close="showLoginModal = false"
+    >
       <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-8 h-8"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
+          />
         </svg>
       </template>
       <template #title>
         Login to OpnForm
       </template>
       <div class="px-4">
-        <login-form :isQuick="true" @openRegister="openRegister" @afterQuickLogin="afterQuickLogin" />
+        <login-form
+          :is-quick="true"
+          @open-register="openRegister"
+          @after-quick-login="afterQuickLogin"
+        />
       </div>
     </modal>
 
-
     <!--  Register modal  -->
-    <modal :show="showRegisterModal" @close="$emit('close')" max-width="lg">
+    <modal
+      :show="showRegisterModal"
+      max-width="lg"
+      @close="$emit('close')"
+    >
       <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-8 h-8"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
+          />
         </svg>
       </template>
       <template #title>
         Create an account
       </template>
       <div class="px-4">
-        <register-form :isQuick="true" @openLogin="openLogin" @afterQuickLogin="afterQuickLogin" />
+        <register-form
+          :is-quick="true"
+          @open-login="openLogin"
+          @after-quick-login="afterQuickLogin"
+        />
       </div>
     </modal>
-
   </div>
 </template>
 
 <script>
-import LoginForm from './LoginForm.vue'
-import RegisterForm from './RegisterForm.vue'
+import LoginForm from "./LoginForm.vue"
+import RegisterForm from "./RegisterForm.vue"
 
 export default {
-  name: 'QuickRegister',
+  name: "QuickRegister",
   components: {
     LoginForm,
-    RegisterForm
+    RegisterForm,
   },
   props: {
     showRegisterModal: {
       type: Boolean,
-      required: true
-    }
+      required: true,
+    },
   },
+  emits: ['afterLogin', 'close', 'reopen'],
 
   data: () => ({
     showLoginModal: false,
   }),
 
-  mounted() {
-  },
+  mounted() {},
 
   methods: {
-    openLogin(){
+    openLogin() {
       this.showLoginModal = true
-      this.$emit('close')
+      this.$emit("close")
     },
-    openRegister(){
+    openRegister() {
       this.showLoginModal = false
-      this.$emit('reopen')
+      this.$emit("reopen")
     },
-    afterQuickLogin(){
+    afterQuickLogin() {
       this.showLoginModal = false
-      this.$emit('afterLogin')
-    }
-  }
+      this.$emit("afterLogin")
+    },
+  },
 }
 </script>
diff --git a/client/components/pages/auth/components/RegisterForm.vue b/client/components/pages/auth/components/RegisterForm.vue
index 6020abac9..32d9b26f8 100644
--- a/client/components/pages/auth/components/RegisterForm.vue
+++ b/client/components/pages/auth/components/RegisterForm.vue
@@ -1,34 +1,75 @@
 <template>
   <div>
-    <form class="mt-4" @submit.prevent="register" @keydown="form.onKeydown($event)">
+    <form
+      class="mt-4"
+      @submit.prevent="register"
+      @keydown="form.onKeydown($event)"
+    >
       <!-- Name -->
-      <text-input name="name" :form="form" label="Name" placeholder="Your name" :required="true"/>
+      <text-input
+        name="name"
+        :form="form"
+        label="Name"
+        placeholder="Your name"
+        :required="true"
+      />
 
       <!-- Email -->
-      <text-input name="email" :form="form" label="Email" :required="true" placeholder="Your email address"/>
+      <text-input
+        name="email"
+        :form="form"
+        label="Email"
+        :required="true"
+        placeholder="Your email address"
+      />
 
-      <select-input name="hear_about_us" :options="hearAboutUsOptions" :form="form" placeholder="Select option"
-                    label="How did you hear about us?" :required="true"
+      <select-input
+        name="hear_about_us"
+        :options="hearAboutUsOptions"
+        :form="form"
+        placeholder="Select option"
+        label="How did you hear about us?"
+        :required="true"
       />
 
       <!-- Password -->
-      <text-input native-type="password" placeholder="Enter password"
-                  name="password" :form="form" label="Password" :required="true"
+      <text-input
+        native-type="password"
+        placeholder="Enter password"
+        name="password"
+        :form="form"
+        label="Password"
+        :required="true"
       />
 
       <!-- Password Confirmation-->
-      <text-input native-type="password" :form="form" :required="true" placeholder="Enter confirm password"
-                  name="password_confirmation" label="Confirm Password"
+      <text-input
+        native-type="password"
+        :form="form"
+        :required="true"
+        placeholder="Enter confirm password"
+        name="password_confirmation"
+        label="Confirm Password"
       />
 
-      <checkbox-input :form="form" name="agree_terms" :required="true">
+      <checkbox-input
+        :form="form"
+        name="agree_terms"
+        :required="true"
+      >
         <template #label>
           I agree with the
-          <NuxtLink :to="{name:'terms-conditions'}" target="_blank">
+          <NuxtLink
+            :to="{ name: 'terms-conditions' }"
+            target="_blank"
+          >
             Terms and conditions
           </NuxtLink>
           and
-          <NuxtLink :to="{name:'privacy-policy'}" target="_blank">
+          <NuxtLink
+            :to="{ name: 'privacy-policy' }"
+            target="_blank"
+          >
             Privacy policy
           </NuxtLink>
           of the website and I accept them.
@@ -42,8 +83,17 @@
 
       <p class="text-gray-500 mt-4">
         Already have an account?
-        <a v-if="isQuick" href="#" class="font-semibold ml-1" @click.prevent="$emit('openLogin')">Log In</a>
-        <NuxtLink v-else :to="{name:'login'}" class="font-semibold ml-1">
+        <a
+          v-if="isQuick"
+          href="#"
+          class="font-semibold ml-1"
+          @click.prevent="$emit('openLogin')"
+        >Log In</a>
+        <NuxtLink
+          v-else
+          :to="{ name: 'login' }"
+          class="font-semibold ml-1"
+        >
           Log In
         </NuxtLink>
       </p>
@@ -52,61 +102,69 @@
 </template>
 
 <script>
-import {opnFetch} from "~/composables/useOpnApi.js";
-import {fetchAllWorkspaces} from "~/stores/workspaces.js";
+import { opnFetch } from "~/composables/useOpnApi.js"
+import { fetchAllWorkspaces } from "~/stores/workspaces.js"
 
 export default {
-  name: 'RegisterForm',
+  name: "RegisterForm",
   components: {},
   props: {
     isQuick: {
       type: Boolean,
       required: false,
-      default: false
-    }
+      default: false,
+    },
   },
+  emits: ['afterQuickLogin', 'openLogin'],
 
   setup() {
     return {
       authStore: useAuthStore(),
       formsStore: useFormsStore(),
       workspaceStore: useWorkspacesStore(),
-      logEvent: useAmplitude().logEvent
+      logEvent: useAmplitude().logEvent,
     }
   },
 
   data: () => ({
     form: useForm({
-      name: '',
-      email: '',
-      password: '',
-      password_confirmation: '',
+      name: "",
+      email: "",
+      password: "",
+      password_confirmation: "",
       agree_terms: false,
-      appsumo_license: null
+      appsumo_license: null,
     }),
   }),
 
   computed: {
     hearAboutUsOptions() {
       const options = [
-        {name: 'Facebook', value: 'facebook'},
-        {name: 'Twitter', value: 'twitter'},
-        {name: 'Reddit', value: 'reddit'},
-        {name: 'Github', value: 'github'},
-        {name: 'Search Engine (Google, DuckDuckGo...)', value: 'search_engine'},
-        {name: 'Friend or Colleague', value: 'friend_colleague'},
-        {name: 'Blog/Article', value: 'blog_article'}
-      ].map((value) => ({value, sort: Math.random()}))
+        { name: "Facebook", value: "facebook" },
+        { name: "Twitter", value: "twitter" },
+        { name: "Reddit", value: "reddit" },
+        { name: "Github", value: "github" },
+        {
+          name: "Search Engine (Google, DuckDuckGo...)",
+          value: "search_engine",
+        },
+        { name: "Friend or Colleague", value: "friend_colleague" },
+        { name: "Blog/Article", value: "blog_article" },
+      ]
+        .map((value) => ({ value, sort: Math.random() }))
         .sort((a, b) => a.sort - b.sort)
-        .map(({value}) => value)
-      options.push({name: 'Other', value: 'other'})
+        .map(({ value }) => value)
+      options.push({ name: "Other", value: "other" })
       return options
-    }
+    },
   },
 
   mounted() {
     // Set appsumo license
-    if (this.$route.query.appsumo_license !== undefined && this.$route.query.appsumo_license) {
+    if (
+      this.$route.query.appsumo_license !== undefined &&
+      this.$route.query.appsumo_license
+    ) {
       this.form.appsumo_license = this.$route.query.appsumo_license
     }
   },
@@ -114,15 +172,15 @@ export default {
   methods: {
     async register() {
       // Register the user.
-      const data = await this.form.post('/register')
+      const data = await this.form.post("/register")
 
       // Log in the user.
-      const tokenData = await this.form.post('/login')
+      const tokenData = await this.form.post("/login")
 
       // Save the token.
       this.authStore.setToken(tokenData.token)
 
-      const userData = await opnFetch('user')
+      const userData = await opnFetch("user")
       this.authStore.setUser(userData)
 
       const workspaces = await fetchAllWorkspaces()
@@ -131,24 +189,28 @@ export default {
       // Load forms
       this.formsStore.loadAll(this.workspaceStore.currentId)
 
-      this.logEvent('register', {source: this.form.hear_about_us})
+      this.logEvent("register", { source: this.form.hear_about_us })
 
       // AppSumo License
       if (data.appsumo_license === false) {
-        useAlert().error('Invalid AppSumo license. This probably happened because this license was already' +
-          ' attached to another OpnForm account. Please contact support.')
+        useAlert().error(
+          "Invalid AppSumo license. This probably happened because this license was already" +
+            " attached to another OpnForm account. Please contact support.",
+        )
       } else if (data.appsumo_license === true) {
-        useAlert().success('Your AppSumo license was successfully activated! You now have access to all the' +
-          ' features of the AppSumo deal.')
+        useAlert().success(
+          "Your AppSumo license was successfully activated! You now have access to all the" +
+            " features of the AppSumo deal.",
+        )
       }
 
       // Redirect
       if (this.isQuick) {
-        this.$emit('afterQuickLogin')
+        this.$emit("afterQuickLogin")
       } else {
-        this.$router.push({name: 'forms-create'})
+        this.$router.push({ name: "forms-create" })
       }
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/pages/forms/NewFeatures.vue b/client/components/pages/forms/NewFeatures.vue
index 7b2d65e33..c4d83fea5 100644
--- a/client/components/pages/forms/NewFeatures.vue
+++ b/client/components/pages/forms/NewFeatures.vue
@@ -1,18 +1,28 @@
 <template>
-  <div id="new-features"
-       class="w-full bg-gray-50 dark:bg-gray-800 border rounded-lg mt-4"
+  <div
+    id="new-features"
+    class="w-full bg-gray-50 dark:bg-gray-800 border rounded-lg mt-4"
   >
     <div class="border-b">
-      <div v-track.new_in_notionforms_click
-           class="relative flex items-center cursor-pointer hover:bg-gray-100 p-4" role="button"
-           @click.prevent="showNewFeatures=!showNewFeatures"
+      <div
+        v-track.new_in_notionforms_click
+        class="relative flex items-center cursor-pointer hover:bg-gray-100 p-4"
+        role="button"
+        @click.prevent="showNewFeatures = !showNewFeatures"
       >
         <div class="text-gray-700 dark:text-gray-300 pr-4">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-               stroke="currentColor" stroke-width="2"
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2"
           >
-            <path stroke-linecap="round" stroke-linejoin="round"
-                  d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
             />
           </svg>
         </div>
@@ -26,26 +36,57 @@
         </div>
       </div>
       <v-transition>
-        <ul v-if="showNewFeatures" class="list-disc list-inside border-t pt-2 p-4">
-          <li v-for="changelog in changelogEntries" :key="changelog.id" v-track.new_feature_click class="text-sm">
-            <a :href="changelog.url" target="_blank" class="text-gray-700 dark:text-gray-300">{{ changelog.title }}</a>
+        <ul
+          v-if="showNewFeatures"
+          class="list-disc list-inside border-t pt-2 p-4"
+        >
+          <li
+            v-for="changelog in changelogEntries"
+            :key="changelog.id"
+            v-track.new_feature_click
+            class="text-sm"
+          >
+            <a
+              :href="changelog.url"
+              target="_blank"
+              class="text-gray-700 dark:text-gray-300"
+            >{{ changelog.title }}</a>
           </li>
-          <li v-track.new_feature_read_more_click class="text-sm">
-            <a class="text-gray-700 dark:text-gray-300" :href="changelogLink" target="_blank">Read more</a>
+          <li
+            v-track.new_feature_read_more_click
+            class="text-sm"
+          >
+            <a
+              class="text-gray-700 dark:text-gray-300"
+              :href="changelogLink"
+              target="_blank"
+            >Read more</a>
           </li>
         </ul>
       </v-transition>
     </div>
-    <div class="relative flex items-center cursor-pointer hover:bg-gray-100 p-4">
-      <a v-track.feature_request_click="{user_has_forms:user.has_forms}" :href="requestFeatureLink"
-         class="absolute inset-0" target="_blank"
+    <div
+      class="relative flex items-center cursor-pointer hover:bg-gray-100 p-4"
+    >
+      <a
+        v-track.feature_request_click="{ user_has_forms: user.has_forms }"
+        :href="requestFeatureLink"
+        class="absolute inset-0"
+        target="_blank"
       />
       <div class="text-gray-700 dark:text-gray-300 pr-4">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
-             stroke-width="2"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="2"
         >
-          <path stroke-linecap="round" stroke-linejoin="round"
-                d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
           />
         </svg>
       </div>
@@ -62,45 +103,45 @@
 </template>
 
 <script>
-import { computed } from 'vue'
-import { useAuthStore } from '../../../stores/auth';
-import VTransition from '~/components/global/transitions/VTransition.vue'
+import { computed } from "vue"
+import { useAuthStore } from "../../../stores/auth"
+import VTransition from "~/components/global/transitions/VTransition.vue"
 
 export default {
   components: { VTransition },
   props: {},
 
-  setup () {
+  setup() {
     const authStore = useAuthStore()
     return {
-      user : computed(() => authStore.user)
+      user: computed(() => authStore.user),
     }
   },
 
   data: () => ({
     changelogEntries: [],
-    showNewFeatures: false
+    showNewFeatures: false,
   }),
 
-  mounted () {
-    this.loadChangelogEntries()
-  },
-
   computed: {
-    requestFeatureLink () {
+    requestFeatureLink() {
       return this.$config.links.feature_requests
     },
-    changelogLink () {
+    changelogLink() {
       return this.$config.links.changelog_url
-    }
+    },
+  },
+
+  mounted() {
+    this.loadChangelogEntries()
   },
 
   methods: {
-    loadChangelogEntries () {
-      opnFetch('/content/changelog/entries').then(data => {
+    loadChangelogEntries() {
+      opnFetch("/content/changelog/entries").then((data) => {
         this.changelogEntries = data.splice(0, 3)
       })
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/pages/forms/create/CreateFormBaseModal.vue b/client/components/pages/forms/create/CreateFormBaseModal.vue
index 3bcf15e83..03d77ce91 100644
--- a/client/components/pages/forms/create/CreateFormBaseModal.vue
+++ b/client/components/pages/forms/create/CreateFormBaseModal.vue
@@ -1,18 +1,36 @@
 <template>
-  <Modal :show="show" :closeable="!aiForm.busy" @close="$emit('close')">
+  <Modal
+    :show="show"
+    :closeable="!aiForm.busy"
+    @close="$emit('close')"
+  >
     <template #icon>
       <template v-if="state == 'default'">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-10 h-10 text-blue">
-          <path fill-rule="evenodd"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          class="w-10 h-10 text-blue"
+        >
+          <path
+            fill-rule="evenodd"
             d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
-            clip-rule="evenodd" />
+            clip-rule="evenodd"
+          />
         </svg>
       </template>
       <template v-else-if="state == 'ai'">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 text-blue-500">
-          <path fill-rule="evenodd"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          class="w-8 h-8 text-blue-500"
+        >
+          <path
+            fill-rule="evenodd"
             d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z"
-            clip-rule="evenodd" />
+            clip-rule="evenodd"
+          />
         </svg>
       </template>
     </template>
@@ -24,27 +42,54 @@
         AI-powered form generator
       </template>
     </template>
-    <div v-if="state == 'default'" class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8">
-      <div v-track.select_form_base="{ base: 'contact-form' }" role="button"
-        class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50" @click="$emit('close')">
+    <div
+      v-if="state == 'default'"
+      class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8"
+    >
+      <div
+        v-track.select_form_base="{ base: 'contact-form' }"
+        role="button"
+        class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50"
+        @click="$emit('close')"
+      >
         <div class="p-4">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 text-blue-500">
-            <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
-            <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="w-8 h-8 text-blue-500"
+          >
+            <path
+              d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z"
+            />
+            <path
+              d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z"
+            />
           </svg>
         </div>
         <p class="font-medium">
           Start from a simple contact form
         </p>
       </div>
-      <div v-if="aiFeaturesEnabled" v-track.select_form_base="{ base: 'ai' }"
-        class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50" role="button"
-        @click="state = 'ai'">
+      <div
+        v-if="aiFeaturesEnabled"
+        v-track.select_form_base="{ base: 'ai' }"
+        class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50"
+        role="button"
+        @click="state = 'ai'"
+      >
         <div class="p-4 relative">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 text-blue-500">
-            <path fill-rule="evenodd"
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="w-8 h-8 text-blue-500"
+          >
+            <path
+              fill-rule="evenodd"
               d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z"
-              clip-rule="evenodd" />
+              clip-rule="evenodd"
+            />
           </svg>
         </div>
         <p class="font-medium text-blue-700">
@@ -52,32 +97,65 @@
         </p>
         <span class="text-xs text-gray-500">(1 min)</span>
       </div>
-      <div class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50 relative">
+      <div
+        class="rounded-md border p-4 flex flex-col items-center cursor-pointer hover:bg-gray-50 relative"
+      >
         <div class="p-4 relative">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 text-blue-500">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="w-8 h-8 text-blue-500"
+          >
             <path
-              d="M11.25 5.337c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.036 1.007-1.875 2.25-1.875S15 2.34 15 3.375c0 .369-.128.713-.349 1.003-.215.283-.401.604-.401.959 0 .332.278.598.61.578 1.91-.114 3.79-.342 5.632-.676a.75.75 0 01.878.645 49.17 49.17 0 01.376 5.452.657.657 0 01-.66.664c-.354 0-.675-.186-.958-.401a1.647 1.647 0 00-1.003-.349c-1.035 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401.31 0 .557.262.534.571a48.774 48.774 0 01-.595 4.845.75.75 0 01-.61.61c-1.82.317-3.673.533-5.555.642a.58.58 0 01-.611-.581c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.035-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959a.641.641 0 01-.658.643 49.118 49.118 0 01-4.708-.36.75.75 0 01-.645-.878c.293-1.614.504-3.257.629-4.924A.53.53 0 005.337 15c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.036 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.369 0 .713.128 1.003.349.283.215.604.401.959.401a.656.656 0 00.659-.663 47.703 47.703 0 00-.31-4.82.75.75 0 01.83-.832c1.343.155 2.703.254 4.077.294a.64.64 0 00.657-.642z" />
+              d="M11.25 5.337c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.036 1.007-1.875 2.25-1.875S15 2.34 15 3.375c0 .369-.128.713-.349 1.003-.215.283-.401.604-.401.959 0 .332.278.598.61.578 1.91-.114 3.79-.342 5.632-.676a.75.75 0 01.878.645 49.17 49.17 0 01.376 5.452.657.657 0 01-.66.664c-.354 0-.675-.186-.958-.401a1.647 1.647 0 00-1.003-.349c-1.035 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401.31 0 .557.262.534.571a48.774 48.774 0 01-.595 4.845.75.75 0 01-.61.61c-1.82.317-3.673.533-5.555.642a.58.58 0 01-.611-.581c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.035-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959a.641.641 0 01-.658.643 49.118 49.118 0 01-4.708-.36.75.75 0 01-.645-.878c.293-1.614.504-3.257.629-4.924A.53.53 0 005.337 15c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.036 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.369 0 .713.128 1.003.349.283.215.604.401.959.401a.656.656 0 00.659-.663 47.703 47.703 0 00-.31-4.82.75.75 0 01.83-.832c1.343.155 2.703.254 4.077.294a.64.64 0 00.657-.642z"
+            />
           </svg>
         </div>
         <p class="font-medium">
           Start from a template
         </p>
-        <NuxtLink v-track.select_form_base="{ base: 'template' }" :to="{ name: 'templates' }" class="absolute inset-0" />
+        <NuxtLink
+          v-track.select_form_base="{ base: 'template' }"
+          :to="{ name: 'templates' }"
+          class="absolute inset-0"
+        />
       </div>
     </div>
     <div v-else-if="state == 'ai'">
-      <a class="absolute top-4 left-4" href="#" role="button" @click.prevent="state = 'default'">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 inline -mt-1">
-          <path fill-rule="evenodd"
+      <a
+        class="absolute top-4 left-4"
+        href="#"
+        role="button"
+        @click.prevent="state = 'default'"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          class="w-4 h-4 inline -mt-1"
+        >
+          <path
+            fill-rule="evenodd"
             d="M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z"
-            clip-rule="evenodd" />
+            clip-rule="evenodd"
+          />
         </svg>
         Back
       </a>
-      <text-area-input label="Form Description" :disabled="loading ? true : null" :form="aiForm" name="form_prompt"
+      <text-area-input
+        label="Form Description"
+        :disabled="loading ? true : null"
+        :form="aiForm"
+        name="form_prompt"
         help="Give us a description of the form you want to build (the more details the better)"
-        placeholder="A simple contact form, with a name, email and message field" />
-      <v-button class="w-full" :loading="loading" @click.prevent="generateForm">
+        placeholder="A simple contact form, with a name, email and message field"
+      />
+      <v-button
+        class="w-full"
+        :loading="loading"
+        @click.prevent="generateForm"
+      >
         Generate a form
       </v-button>
       <p class="text-gray-500 text-xs text-center mt-1">
@@ -89,28 +167,28 @@
 
 <script>
 export default {
-  emits: ['close', 'form-generated'],
   props: {
-    show: { type: Boolean, required: true }
+    show: { type: Boolean, required: true },
   },
+  emits: ["close", "form-generated"],
   setup() {
     return {
       useAlert: useAlert(),
-      runtimeConfig: useRuntimeConfig()
+      runtimeConfig: useRuntimeConfig(),
     }
   },
   data: () => ({
-    state: 'default',
+    state: "default",
     aiForm: useForm({
-      form_prompt: ''
+      form_prompt: "",
     }),
-    loading: false
+    loading: false,
   }),
 
   computed: {
     aiFeaturesEnabled() {
       return this.runtimeConfig.public.aiFeaturesEnabled
-    }
+    },
   },
 
   methods: {
@@ -118,39 +196,47 @@ export default {
       if (this.loading) return
 
       this.loading = true
-      this.aiForm.post('/forms/ai/generate').then(response => {
-        this.useAlert.success(response.message)
-        this.fetchGeneratedForm(response.ai_form_completion_id)
-      }).catch(error => {
-        console.error(error)
-        this.loading = false
-        this.state = 'ai'
-      })
+      this.aiForm
+        .post("/forms/ai/generate")
+        .then((response) => {
+          this.useAlert.success(response.message)
+          this.fetchGeneratedForm(response.ai_form_completion_id)
+        })
+        .catch((error) => {
+          console.error(error)
+          this.loading = false
+          this.state = "ai"
+        })
     },
     fetchGeneratedForm(generationId) {
       // check every 4 seconds if form is generated
       setTimeout(() => {
-        opnFetch('/forms/ai/' + generationId).then(data => {
-          if (data.ai_form_completion.status === 'completed') {
-            this.useAlert.success(data.message)
-            this.$emit('form-generated', JSON.parse(data.ai_form_completion.result))
-            this.$emit('close')
-          } else if (data.ai_form_completion.status === 'failed') {
-            this.useAlert.error('Something went wrong, please try again.')
-            this.state = 'default'
+        opnFetch("/forms/ai/" + generationId)
+          .then((data) => {
+            if (data.ai_form_completion.status === "completed") {
+              this.useAlert.success(data.message)
+              this.$emit(
+                "form-generated",
+                JSON.parse(data.ai_form_completion.result),
+              )
+              this.$emit("close")
+            } else if (data.ai_form_completion.status === "failed") {
+              this.useAlert.error("Something went wrong, please try again.")
+              this.state = "default"
+              this.loading = false
+            } else {
+              this.fetchGeneratedForm(generationId)
+            }
+          })
+          .catch((error) => {
+            if (error?.data?.message) {
+              this.useAlert.error(error.data.message)
+            }
+            this.state = "default"
             this.loading = false
-          } else {
-            this.fetchGeneratedForm(generationId)
-          }
-        }).catch(error => {
-          if (error?.data?.message) {
-            this.useAlert.error(error.data.message)
-          }
-          this.state = 'default'
-          this.loading = false
-        })
+          })
       }, 4000)
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/pages/forms/show/EmbedCode.vue b/client/components/pages/forms/show/EmbedCode.vue
index d16ef808a..8500a9af1 100644
--- a/client/components/pages/forms/show/EmbedCode.vue
+++ b/client/components/pages/forms/show/EmbedCode.vue
@@ -1,14 +1,27 @@
 <template>
   <div>
-    <h3 class="font-semibold text-xl">Embed</h3>
+    <h3 class="font-semibold text-xl">
+      Embed
+    </h3>
     <p>Embed your form on your website by copying the HTML code below.</p>
-    <copy-content :content="embedCode" buttonText="Copy Code">
+    <copy-content
+      :content="embedCode"
+      button-text="Copy Code"
+    >
       <template #icon>
-        <svg class="h-4 w-4 -mt-1 text-blue-600 inline mr-1" viewBox="0 0 18 18" fill="none"
-             xmlns="http://www.w3.org/2000/svg">
+        <svg
+          class="h-4 w-4 -mt-1 text-blue-600 inline mr-1"
+          viewBox="0 0 18 18"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path
             d="M11.0833 11.5L13.5833 9L11.0833 6.5M6.91667 6.5L4.41667 9L6.91667 11.5M5.5 16.5H12.5C13.9001 16.5 14.6002 16.5 15.135 16.2275C15.6054 15.9878 15.9878 15.6054 16.2275 15.135C16.5 14.6002 16.5 13.9001 16.5 12.5V5.5C16.5 4.09987 16.5 3.3998 16.2275 2.86502C15.9878 2.39462 15.6054 2.01217 15.135 1.77248C14.6002 1.5 13.9001 1.5 12.5 1.5H5.5C4.09987 1.5 3.3998 1.5 2.86502 1.77248C2.39462 2.01217 2.01217 2.39462 1.77248 2.86502C1.5 3.3998 1.5 4.09987 1.5 5.5V12.5C1.5 13.9001 1.5 14.6002 1.77248 15.135C2.01217 15.6054 2.39462 15.9878 2.86502 16.2275C3.3998 16.5 4.09987 16.5 5.5 16.5Z"
-            stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+            stroke="currentColor"
+            stroke-width="1.66667"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
       </template>
       Copy Code
@@ -17,38 +30,48 @@
 </template>
 
 <script>
-import CopyContent from '../../../open/forms/components/CopyContent.vue'
-import {appUrl} from "~/lib/utils.js";
+/* eslint-disable */
+import CopyContent from "../../../open/forms/components/CopyContent.vue"
+import { appUrl } from "~/lib/utils.js"
 
 export default {
-  name: 'EmbedCode',
-  components: {CopyContent},
+  name: "EmbedCode",
+  components: { CopyContent },
   props: {
-    form: {type: Object, required: true},
-    extraQueryParam: {type: String, default: ''}
+    form: { type: Object, required: true },
+    extraQueryParam: { type: String, default: "" },
   },
 
   data: () => ({
-    autoresizeIframe: false
+    autoresizeIframe: false,
   }),
 
   computed: {
     embedCode() {
+      // eslint-disable no-useless-escape
       return `
-        <script type="text/javascript" src="${appUrl('/widgets/iframeResize.min.js')}"><\/script>
+        <script type="text/javascript" src="${appUrl("/widgets/iframeResize.min.js")}"><\/script>
         ${this.iframeCode}
         <script type="text/javascript">iFrameResize({log: false, checkOrigin: false}, "#${this.iframeId}");<\/script>
 `
     },
     iframeCode() {
-      const share_url = (this.extraQueryParam) ? this.form.share_url + "?" + this.extraQueryParam : this.form.share_url + this.extraQueryParam
-      return '<iframe style="border:none;width:100%;" id="' + this.iframeId + '" src="' + share_url + '"></iframe>'
+      const share_url = this.extraQueryParam
+        ? this.form.share_url + "?" + this.extraQueryParam
+        : this.form.share_url + this.extraQueryParam
+      return (
+        '<iframe style="border:none;width:100%;" id="' +
+        this.iframeId +
+        '" src="' +
+        share_url +
+        '"></iframe>'
+      )
     },
     iframeId() {
-      return 'form-' + this.form.slug
-    }
+      return "form-" + this.form.slug
+    },
   },
 
-  methods: {}
+  methods: {},
 }
 </script>
diff --git a/client/components/pages/forms/show/EmbedFormAsPopupModal.vue b/client/components/pages/forms/show/EmbedFormAsPopupModal.vue
index 05430cac9..ec6554a66 100644
--- a/client/components/pages/forms/show/EmbedFormAsPopupModal.vue
+++ b/client/components/pages/forms/show/EmbedFormAsPopupModal.vue
@@ -1,24 +1,47 @@
 <template>
   <div>
     <v-button
-      v-track.share_embed_form_popup_click="{form_id:form.id, form_slug:form.slug}"
+      v-track.share_embed_form_popup_click="{
+        form_id: form.id,
+        form_slug: form.slug,
+      }"
       class="w-full"
       color="light-gray"
-      @click="showEmbedFormAsPopupModal=true"
+      @click="showEmbedFormAsPopupModal = true"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-600 inline" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round"
-              d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6 mr-2 text-blue-600 inline"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
         />
       </svg>
       Embed as popup
     </v-button>
 
-    <modal :show="showEmbedFormAsPopupModal" @close="onClose">
+    <modal
+      :show="showEmbedFormAsPopupModal"
+      @close="onClose"
+    >
       <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round"
-                d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="w-10 h-10 text-blue"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
           />
         </svg>
       </template>
@@ -31,14 +54,18 @@
           Demo
         </h3>
         <p class="pb-6">
-          A live preview of your form popup was just added to this page. <span class="font-semibold text-blue-800">Click on the button on the bottom
+          A live preview of your form popup was just added to this page.
+          <span class="font-semibold text-blue-800">Click on the button on the bottom
             {{ advancedOptions.position }} corner to try it</span>.
         </p>
 
         <h3 class="border-t text-xl font-semibold mb-2 pt-6">
           How does it work?
         </h3>
-        <p>Paste the following code snippet in the <b>&lt;head&gt;</b> section of your website.</p>
+        <p>
+          Paste the following code snippet in the <b>&lt;head&gt;</b> section of
+          your website.
+        </p>
 
         <div
           class="border border-nt-blue-light bg-blue-50 dark:bg-notion-dark-light rounded-md p-4 mb-5 w-full mx-auto mt-4 select-all"
@@ -47,19 +74,32 @@
             <p class="select-all text-nt-blue flex-grow break-all">
               {{ embedPopupCode }}
             </p>
-            <div class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer" @click="copyToClipboard">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-nt-blue" fill="none" viewBox="0 0 24 24"
-                   stroke="currentColor"
+            <div
+              class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer"
+              @click="copyToClipboard"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 text-nt-blue"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
               >
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
                 />
               </svg>
             </div>
           </div>
         </div>
 
-        <collapse class="py-5 w-full border rounded-md px-4" :model-value="true">
+        <collapse
+          class="py-5 w-full border rounded-md px-4"
+          :model-value="true"
+        >
           <template #title>
             <div class="flex">
               <h3 class="font-semibold block text-lg">
@@ -68,31 +108,52 @@
             </div>
           </template>
           <div class="border-t mt-4 -mx-4" />
-          <toggle-switch-input v-model="advancedOptions.hide_title" name="hide_title" class="mt-4"
-                               label="Hide Form Title"
-                               :disabled="(form.hide_title===true)?true:null"
-                               :help="hideTitleHelp"
+          <toggle-switch-input
+            v-model="advancedOptions.hide_title"
+            name="hide_title"
+            class="mt-4"
+            label="Hide Form Title"
+            :disabled="form.hide_title === true ? true : null"
+            :help="hideTitleHelp"
           />
-          <color-input v-model="advancedOptions.bgcolor" name="bgcolor" class="mt-4"
-                       label="Circle Background Color"
+          <color-input
+            v-model="advancedOptions.bgcolor"
+            name="bgcolor"
+            class="mt-4"
+            label="Circle Background Color"
           />
-          <text-input v-model="advancedOptions.emoji" name="emoji" class="mt-4"
-                      label="Emoji" :max-char-limit="2"
+          <text-input
+            v-model="advancedOptions.emoji"
+            name="emoji"
+            class="mt-4"
+            label="Emoji"
+            :max-char-limit="2"
           />
-          <flat-select-input v-model="advancedOptions.position" name="position" class="mt-4"
-                             label="Position"
-                             :options="[
-                               {name:'Bottom Right',value:'right'},
-                               {name:'Bottom Left',value:'left'},
-                             ]"
+          <flat-select-input
+            v-model="advancedOptions.position"
+            name="position"
+            class="mt-4"
+            label="Position"
+            :options="[
+              { name: 'Bottom Right', value: 'right' },
+              { name: 'Bottom Left', value: 'left' },
+            ]"
           />
-          <text-input v-model="advancedOptions.width" name="width" class="mt-4"
-                      label="Form pop max width (px)" native-type="number"
+          <text-input
+            v-model="advancedOptions.width"
+            name="width"
+            class="mt-4"
+            label="Form pop max width (px)"
+            native-type="number"
           />
         </collapse>
 
         <div class="flex justify-end mt-4">
-          <v-button color="gray" shade="light" @click="onClose">
+          <v-button
+            color="gray"
+            shade="light"
+            @click="onClose"
+          >
             Close
           </v-button>
         </div>
@@ -102,48 +163,58 @@
 </template>
 
 <script setup>
-import { ref, defineProps, computed } from 'vue'
-import {appUrl} from "~/lib/utils.js";
+import { ref, defineProps, computed } from "vue"
+import { appUrl } from "~/lib/utils.js"
 
 const { copy } = useClipboard()
 const crisp = useCrisp()
 const props = defineProps({
-  form: { type: Object, required: true }
+  form: { type: Object, required: true },
 })
 
-const embedScriptUrl = '/widgets/embed-min.js'
-let showEmbedFormAsPopupModal = ref(false)
-let advancedOptions = ref({
+const embedScriptUrl = "/widgets/embed-min.js"
+const showEmbedFormAsPopupModal = ref(false)
+const advancedOptions = ref({
   hide_title: false,
-  emoji: '💬',
-  position: 'right',
-  bgcolor: '#3B82F6',
-  width: '500'
+  emoji: "💬",
+  position: "right",
+  bgcolor: "#3B82F6",
+  width: "500",
 })
 
-let hideTitleHelp = computed(() => {
-  return props.form.hide_title ? 'This option is disabled because the form title is already hidden' : null
+const hideTitleHelp = computed(() => {
+  return props.form.hide_title
+    ? "This option is disabled because the form title is already hidden"
+    : null
 })
-let shareUrl = computed(() => {
-  return (advancedOptions.value.hide_title) ? props.form.share_url + '?hide_title=true' : props.form.share_url
+const shareUrl = computed(() => {
+  return advancedOptions.value.hide_title
+    ? props.form.share_url + "?hide_title=true"
+    : props.form.share_url
 })
-let embedPopupCode = computed(() => {
+const embedPopupCode = computed(() => {
   const nfData = {
     formurl: shareUrl.value,
     emoji: advancedOptions.value.emoji,
     position: advancedOptions.value.position,
     bgcolor: advancedOptions.value.bgcolor,
-    width: advancedOptions.value.width
+    width: advancedOptions.value.width,
   }
   previewPopup(nfData)
-  return '<script async data-nf=\'' + JSON.stringify(nfData) + '\' src=\'' + appUrl(embedScriptUrl) + '\'></scrip' + 't>'
+  return (
+    "<script async data-nf='" +
+    JSON.stringify(nfData) +
+    "' src='" +
+    appUrl(embedScriptUrl) +
+    "'></scrip" +
+    "t>"
+  )
 })
 
 onMounted(() => {
   advancedOptions.value.bgcolor = props.form.color
 })
 
-
 const onClose = () => {
   removePreview()
   crisp.showChat()
@@ -152,15 +223,15 @@ const onClose = () => {
 const copyToClipboard = () => {
   if (import.meta.server) return
   copy(embedPopupCode.value)
-  useAlert().success('Copied!')
+  useAlert().success("Copied!")
 }
 const removePreview = () => {
   if (import.meta.server) return
-  const oldP = document.head.querySelector('#nf-popup-preview')
+  const oldP = document.head.querySelector("#nf-popup-preview")
   if (oldP) {
     oldP.remove()
   }
-  const oldM = document.body.querySelector('.nf-main')
+  const oldM = document.body.querySelector(".nf-main")
   if (oldM) {
     oldM.remove()
   }
@@ -178,11 +249,11 @@ const previewPopup = (nfData) => {
   crisp.hideChat()
 
   // Add new preview
-  const el = document.createElement('script')
-  el.id = 'nf-popup-preview'
+  const el = document.createElement("script")
+  el.id = "nf-popup-preview"
   el.async = true
   el.src = embedScriptUrl
-  el.setAttribute('data-nf', JSON.stringify(nfData))
+  el.setAttribute("data-nf", JSON.stringify(nfData))
   document.head.appendChild(el)
 }
 </script>
diff --git a/client/components/pages/forms/show/ExtraMenu.vue b/client/components/pages/forms/show/ExtraMenu.vue
index 2c5d0e962..cae38f8ba 100644
--- a/client/components/pages/forms/show/ExtraMenu.vue
+++ b/client/components/pages/forms/show/ExtraMenu.vue
@@ -1,120 +1,278 @@
 <template>
   <div>
-    <div v-if="loadingDuplicate || loadingDelete" class="pr-4 pt-2">
+    <div
+      v-if="loadingDuplicate || loadingDelete"
+      class="pr-4 pt-2"
+    >
       <Loader class="h-6 w-6 mx-auto" />
     </div>
-    <dropdown v-else class="inline">
+    <dropdown
+      v-else
+      class="inline"
+    >
       <template #trigger="{ toggle }">
-        <v-button color="white" @click="toggle">
-          <svg class="w-4 h-4 inline -mt-1" viewBox="0 0 16 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <v-button
+          color="white"
+          @click="toggle"
+        >
+          <svg
+            class="w-4 h-4 inline -mt-1"
+            viewBox="0 0 16 4"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
             <path
               d="M8.00016 2.83366C8.4604 2.83366 8.8335 2.46056 8.8335 2.00033C8.8335 1.54009 8.4604 1.16699 8.00016 1.16699C7.53993 1.16699 7.16683 1.54009 7.16683 2.00033C7.16683 2.46056 7.53993 2.83366 8.00016 2.83366Z"
-              stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+              stroke="#344054"
+              stroke-width="1.66667"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
             <path
               d="M13.8335 2.83366C14.2937 2.83366 14.6668 2.46056 14.6668 2.00033C14.6668 1.54009 14.2937 1.16699 13.8335 1.16699C13.3733 1.16699 13.0002 1.54009 13.0002 2.00033C13.0002 2.46056 13.3733 2.83366 13.8335 2.83366Z"
-              stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+              stroke="#344054"
+              stroke-width="1.66667"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
             <path
               d="M2.16683 2.83366C2.62707 2.83366 3.00016 2.46056 3.00016 2.00033C3.00016 1.54009 2.62707 1.16699 2.16683 1.16699C1.70659 1.16699 1.3335 1.54009 1.3335 2.00033C1.3335 2.46056 1.70659 2.83366 2.16683 2.83366Z"
-              stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+              stroke="#344054"
+              stroke-width="1.66667"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </v-button>
       </template>
-      <span v-if="isMainPage && form.visibility === 'draft'"
+      <span
+        v-if="isMainPage && form.visibility === 'draft'"
         class="block px-4 py-2 text-md text-gray-700 cursor-pointer dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
-        @click="showDraftFormWarningNotification">
-        <svg class="w-4 h-4 mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" stroke="currentColor"
-            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        @click="showDraftFormWarningNotification"
+      >
+        <svg
+          class="w-4 h-4 mr-2"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
           <path
             d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
         View form
       </span>
 
-      <a v-else-if="isMainPage" v-track.view_form_click="{ form_id: form.id, form_slug: form.slug }"
-        :href="form.share_url" target="_blank"
-        class="block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center">
-        <svg class="w-4 h-4 mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" stroke="currentColor"
-            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      <a
+        v-else-if="isMainPage"
+        v-track.view_form_click="{ form_id: form.id, form_slug: form.slug }"
+        :href="form.share_url"
+        target="_blank"
+        class="block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
+      >
+        <svg
+          class="w-4 h-4 mr-2"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
           <path
             d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
         View form
       </a>
-      <nuxt-link v-if="isMainPage" v-track.edit_form_click="{ form_id: form.id, form_slug: form.slug }"
+      <nuxt-link
+        v-if="isMainPage"
+        v-track.edit_form_click="{ form_id: form.id, form_slug: form.slug }"
         :to="{ name: 'forms-slug-edit', params: { slug: form.slug } }"
-        class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center">
-        <svg class="w-4 h-4 mr-2" width="18" height="17" viewBox="0 0 18 17" fill="none"
-          xmlns="http://www.w3.org/2000/svg">
+        class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
+      >
+        <svg
+          class="w-4 h-4 mr-2"
+          width="18"
+          height="17"
+          viewBox="0 0 18 17"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path
             d="M8.99998 15.6662H16.5M1.5 15.6662H2.89545C3.3031 15.6662 3.50693 15.6662 3.69874 15.6202C3.8688 15.5793 4.03138 15.512 4.1805 15.4206C4.34869 15.3175 4.49282 15.1734 4.78107 14.8852L15.25 4.4162C15.9404 3.72585 15.9404 2.60656 15.25 1.9162C14.5597 1.22585 13.4404 1.22585 12.75 1.9162L2.28105 12.3852C1.9928 12.6734 1.84867 12.8175 1.7456 12.9857C1.65422 13.1348 1.58688 13.2974 1.54605 13.4675C1.5 13.6593 1.5 13.8631 1.5 14.2708V15.6662Z"
-            stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+            stroke="currentColor"
+            stroke-width="1.67"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
         Edit
       </nuxt-link>
-      <a v-if="isMainPage" href="#"
+      <a
+        v-if="isMainPage"
+        href="#"
         class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
-        @click.prevent="copyLink">
-        <svg class="w-4 h-4 mr-2" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+        @click.prevent="copyLink"
+      >
+        <svg
+          class="w-4 h-4 mr-2"
+          viewBox="0 0 16 10"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path
             d="M6.00016 8.33317H4.66683C2.82588 8.33317 1.3335 6.84079 1.3335 4.99984C1.3335 3.15889 2.82588 1.6665 4.66683 1.6665H6.00016M10.0002 8.33317H11.3335C13.1744 8.33317 14.6668 6.84079 14.6668 4.99984C14.6668 3.15889 13.1744 1.6665 11.3335 1.6665H10.0002M4.66683 4.99984L11.3335 4.99984"
-            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
         Copy link to share
       </a>
-      <a v-track.duplicate_form_click="{ form_id: form.id, form_slug: form.slug }" href="#"
+      <a
+        v-track.duplicate_form_click="{
+          form_id: form.id,
+          form_slug: form.slug,
+        }"
+        href="#"
         class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
-        @click.prevent="duplicateForm">
-        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-          stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
+        @click.prevent="duplicateForm"
+      >
+        <svg
+          class="w-4 h-4 mr-2"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
+          />
         </svg>
         Duplicate form
       </a>
-      <a v-if="!isMainPage" v-track.create_template_click="{ form_id: form.id, form_slug: form.slug }" href="#"
+      <a
+        v-if="!isMainPage"
+        v-track.create_template_click="{
+          form_id: form.id,
+          form_slug: form.slug,
+        }"
+        href="#"
         class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
-        @click.prevent="showFormTemplateModal = true">
-        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-          stroke="currentColor" stroke-width="2">
-          <path stroke-linecap="round" stroke-linejoin="round"
-            d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z" />
+        @click.prevent="showFormTemplateModal = true"
+      >
+        <svg
+          class="w-4 h-4 mr-2"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"
+          />
         </svg>
         Create Template
       </a>
 
-      <a v-track.change_workspace_click="{ form_id: form.id, form_slug: form.slug }" href="#"
+      <a
+        v-track.change_workspace_click="{
+          form_id: form.id,
+          form_slug: form.slug,
+        }"
+        href="#"
         class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
-        @click.prevent="showFormWorkspaceModal = true">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-          class="w-4 h-4 mr-2">
-          <path stroke-linecap="round" stroke-linejoin="round"
-            d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z" />
+        @click.prevent="showFormWorkspaceModal = true"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-4 h-4 mr-2"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z"
+          />
         </svg>
 
         Change workspace
       </a>
-      <a v-track.delete_form_click="{ form_id: form.id, form_slug: form.slug }" href="#"
+      <a
+        v-track.delete_form_click="{ form_id: form.id, form_slug: form.slug }"
+        href="#"
         class="block block px-4 py-2 text-md text-red-600 hover:bg-red-50 flex items-center"
-        @click.prevent="showDeleteFormModal = true">
-        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-          stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+        @click.prevent="showDeleteFormModal = true"
+      >
+        <svg
+          class="w-4 h-4 mr-2"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+          />
         </svg>
         Delete form
       </a>
     </dropdown>
 
     <!-- Delete Form Modal -->
-    <modal :show="showDeleteFormModal" icon-color="red" max-width="sm" @close="showDeleteFormModal = false">
+    <modal
+      :show="showDeleteFormModal"
+      icon-color="red"
+      max-width="sm"
+      @close="showDeleteFormModal = false"
+    >
       <template #icon>
-        <svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+        <svg
+          class="w-10 h-10"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+          />
         </svg>
       </template>
       <template #title>
@@ -122,83 +280,111 @@
       </template>
       <div class="p-3">
         <p>
-          If you want to permanently delete this form and all of its data, you can do so below.
+          If you want to permanently delete this form and all of its data, you
+          can do so below.
         </p>
         <div class="flex mt-4">
-          <v-button class="sm:w-1/2 mr-4" color="white" @click.prevent="showDeleteFormModal = false">
+          <v-button
+            class="sm:w-1/2 mr-4"
+            color="white"
+            @click.prevent="showDeleteFormModal = false"
+          >
             Cancel
           </v-button>
-          <v-button class="sm:w-1/2" color="red" :loading="loadingDelete" @click.prevent="deleteForm">
+          <v-button
+            class="sm:w-1/2"
+            color="red"
+            :loading="loadingDelete"
+            @click.prevent="deleteForm"
+          >
             Yes, delete it
           </v-button>
         </div>
       </div>
     </modal>
-    <form-template-modal v-if="!isMainPage && user" :form="form" :show="showFormTemplateModal"
-      @close="showFormTemplateModal = false" />
-    <form-workspace-modal v-if="user" :form="form" :show="showFormWorkspaceModal"
-      @close="showFormWorkspaceModal = false" />
-
+    <form-template-modal
+      v-if="!isMainPage && user"
+      :form="form"
+      :show="showFormTemplateModal"
+      @close="showFormTemplateModal = false"
+    />
+    <form-workspace-modal
+      v-if="user"
+      :form="form"
+      :show="showFormWorkspaceModal"
+      @close="showFormWorkspaceModal = false"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, defineProps, computed } from 'vue'
-import Dropdown from '~/components/global/Dropdown.vue'
-import FormTemplateModal from '../../../open/forms/components/templates/FormTemplateModal.vue'
-import FormWorkspaceModal from '../../../open/forms/components/FormWorkspaceModal.vue'
+import { ref, defineProps, computed } from "vue"
+import Dropdown from "~/components/global/Dropdown.vue"
+import FormTemplateModal from "../../../open/forms/components/templates/FormTemplateModal.vue"
+import FormWorkspaceModal from "../../../open/forms/components/FormWorkspaceModal.vue"
 
 const { copy } = useClipboard()
 const router = useRouter()
 
 const props = defineProps({
   form: { type: Object, required: true },
-  isMainPage: { type: Boolean, required: false, default: false }
+  isMainPage: { type: Boolean, required: false, default: false },
 })
 
 const authStore = useAuthStore()
 const formsStore = useFormsStore()
-const formEndpoint = '/open/forms/{id}'
-let user = computed(() => authStore.user)
+const formEndpoint = "/open/forms/{id}"
+const user = computed(() => authStore.user)
 
-let loadingDuplicate = ref(false)
-let loadingDelete = ref(false)
-let showDeleteFormModal = ref(false)
-let showFormTemplateModal = ref(false)
-let showFormWorkspaceModal = ref(false)
+const loadingDuplicate = ref(false)
+const loadingDelete = ref(false)
+const showDeleteFormModal = ref(false)
+const showFormTemplateModal = ref(false)
+const showFormWorkspaceModal = ref(false)
 
 const copyLink = () => {
   copy(props.form.share_url)
-  useAlert().success('Copied!')
+  useAlert().success("Copied!")
 }
 const duplicateForm = () => {
   if (loadingDuplicate.value) return
   loadingDuplicate.value = true
-  opnFetch(formEndpoint.replace('{id}', props.form.id) + '/duplicate', { method: 'POST' }).then((data) => {
-    formsStore.save(data.new_form)
-    router.push({ name: 'forms-slug-show', params: { slug: data.new_form.slug } })
-    useAlert().success(data.message)
-    loadingDuplicate.value = false
-  }).catch((error) => {
-    useAlert().error(error.data.message)
-    loadingDuplicate.value = false
+  opnFetch(formEndpoint.replace("{id}", props.form.id) + "/duplicate", {
+    method: "POST",
   })
+    .then((data) => {
+      formsStore.save(data.new_form)
+      router.push({
+        name: "forms-slug-show",
+        params: { slug: data.new_form.slug },
+      })
+      useAlert().success(data.message)
+      loadingDuplicate.value = false
+    })
+    .catch((error) => {
+      useAlert().error(error.data.message)
+      loadingDuplicate.value = false
+    })
 }
 const deleteForm = () => {
   if (loadingDelete.value) return
   loadingDelete.value = true
-  opnFetch(formEndpoint.replace('{id}', props.form.id), { method: 'DELETE' }).then((data) => {
-    formsStore.remove(props.form)
-    router.push({ name: 'home' })
-    useAlert().success(data.message)
-    loadingDelete.value = false
-  }).catch((error) => {
-    useAlert().error(error.data.message)
-    loadingDelete.value = false
-  })
+  opnFetch(formEndpoint.replace("{id}", props.form.id), { method: "DELETE" })
+    .then((data) => {
+      formsStore.remove(props.form)
+      router.push({ name: "home" })
+      useAlert().success(data.message)
+      loadingDelete.value = false
+    })
+    .catch((error) => {
+      useAlert().error(error.data.message)
+      loadingDelete.value = false
+    })
 }
 
 const showDraftFormWarningNotification = () => {
-  useAlert().warning('This form is currently in Draft mode and is not publicly accessible, You can change the form status on the edit form page.')
+  useAlert().warning(
+    "This form is currently in Draft mode and is not publicly accessible, You can change the form status on the edit form page.",
+  )
 }
 </script>
diff --git a/client/components/pages/forms/show/FormCleanings.vue b/client/components/pages/forms/show/FormCleanings.vue
index fe174e1f7..d7add53cd 100644
--- a/client/components/pages/forms/show/FormCleanings.vue
+++ b/client/components/pages/forms/show/FormCleanings.vue
@@ -1,46 +1,93 @@
 <template>
   <v-transition>
-    <div v-if="hasCleanings && !hideWarning" class="border border-gray-300 dark:border-gray-600 rounded-md bg-white p-2"
-         :class="{'hover:bg-yellow-50 dark:hover:bg-yellow-900':!collapseOpened}"
+    <div
+      v-if="hasCleanings && !hideWarning"
+      class="border border-gray-300 dark:border-gray-600 rounded-md bg-white p-2"
+      :class="{
+        'hover:bg-yellow-50 dark:hover:bg-yellow-900': !collapseOpened,
+      }"
     >
       <collapse v-model="collapseOpened">
         <template #title>
-          <p class="text-yellow-500 dark:text-yellow-400 font-semibold text-sm p-1 pr-4">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                 stroke="currentColor" class="w-6 h-6 inline"
+          <p
+            class="text-yellow-500 dark:text-yellow-400 font-semibold text-sm p-1 pr-4"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="w-6 h-6 inline"
             >
-              <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
               />
             </svg>
-            Some features that are included in our {{ form.is_pro ? 'Enterprise' : 'Pro' }} plan are disabled when
-            publicly sharing this form<span v-if="specifyFormOwner"> (only owners of this form can see this)</span>.
+            Some features that are included in our
+            {{ form.is_pro ? "Enterprise" : "Pro" }} plan are disabled when
+            publicly sharing this form<span v-if="specifyFormOwner">
+              (only owners of this form can see this)</span>.
           </p>
         </template>
 
         <div class="border-t mt-1 p-4 pb-2 -mx-2">
-          <p class="text-gray-500 text-sm" v-html="cleaningContent" />
+          <p
+            class="text-gray-500 text-sm"
+            v-html="cleaningContent"
+          />
           <p class="text-gray-500 text-sm mb-4 font-semibold">
-            <NuxtLink :to="{name:'pricing'}">
-              {{ form.is_pro ? 'Upgrade your OpnForms plan today' : 'Start your free OpnForms trial' }}
+            <NuxtLink :to="{ name: 'pricing' }">
+              {{
+                form.is_pro
+                  ? "Upgrade your OpnForms plan today"
+                  : "Start your free OpnForms trial"
+              }}
             </NuxtLink>
             to unlock all of our features and build powerful forms.
           </p>
           <div class="flex flex-wrap items-end w-full">
             <div class="flex-grow flex pr-2">
-              <v-button v-track.upgrade_from_form_cleanings_click size="small" class="inline-block" :to="{name:'pricing'}">
-                {{ form.is_pro ? 'Upgrade plan' : 'Start free trial' }}
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                     stroke="currentColor" class="w-4 h-4 inline -mt-[2px]"
+              <v-button
+                v-track.upgrade_from_form_cleanings_click
+                size="small"
+                class="inline-block"
+                :to="{ name: 'pricing' }"
+              >
+                {{ form.is_pro ? "Upgrade plan" : "Start free trial" }}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="w-4 h-4 inline -mt-[2px]"
                 >
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+                  />
                 </svg>
               </v-button>
-              <v-button color="white" size="small" class="ml-2" @click.prevent="openCrisp">
+              <v-button
+                color="white"
+                size="small"
+                class="ml-2"
+                @click.prevent="openCrisp"
+              >
                 Contact us
               </v-button>
             </div>
-            <v-button v-if="hideable" color="white" size="small" class="mt-2" @click.prevent="hideWarning=true">
+            <v-button
+              v-if="hideable"
+              color="white"
+              size="small"
+              class="mt-2"
+              @click.prevent="hideWarning = true"
+            >
               Hide warning
             </v-button>
           </div>
@@ -50,57 +97,58 @@
   </v-transition>
 </template>
 <script>
-
-import Collapse from '~/components/global/Collapse.vue'
-import VButton from '~/components/global/VButton.vue'
-import VTransition from '~/components/global/transitions/VTransition.vue'
+import Collapse from "~/components/global/Collapse.vue"
+import VButton from "~/components/global/VButton.vue"
+import VTransition from "~/components/global/transitions/VTransition.vue"
 
 export default {
-  name: 'FormCleanings',
+  name: "FormCleanings",
   components: { VTransition, VButton, Collapse },
   props: {
     form: { type: Object, required: true },
     specifyFormOwner: { type: Boolean, default: false },
-    hideable: { type: Boolean, default: false }
+    hideable: { type: Boolean, default: false },
   },
-  data () {
+  data() {
     return {
       collapseOpened: false,
-      hideWarning: false
+      hideWarning: false,
     }
   },
   computed: {
-    hasCleanings () {
+    hasCleanings() {
       return this.form.cleanings && Object.keys(this.form.cleanings).length > 0
     },
-    cleanings () {
+    cleanings() {
       return this.form.cleanings
     },
-    cleaningContent () {
-      let message = ''
+    cleaningContent() {
+      let message = ""
       Object.keys(this.cleanings).forEach((key) => {
         let fieldName = key.charAt(0).toUpperCase() + key.slice(1)
-        if (fieldName !== 'Form') {
+        if (fieldName !== "Form") {
           fieldName = '"' + fieldName + '" field'
         }
-        let fieldInfo = '<span class="font-semibold">' + fieldName + '</span><br/><ul class=\'list-disc list-inside\'>'
+        let fieldInfo =
+          '<span class="font-semibold">' +
+          fieldName +
+          "</span><br/><ul class='list-disc list-inside'>"
         this.cleanings[key].forEach((msg) => {
-          fieldInfo = fieldInfo + '<li>' + msg + '</li>'
+          fieldInfo = fieldInfo + "<li>" + msg + "</li>"
         })
         if (fieldInfo) {
-          message = message + fieldInfo + '<ul/><br/>'
+          message = message + fieldInfo + "<ul/><br/>"
         }
       })
       return message
-    }
+    },
   },
   watch: {},
-  mounted () {
-  },
+  mounted() {},
   methods: {
-    openCrisp () {
+    openCrisp() {
       useCrisp().openAndShowChat()
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/pages/forms/show/FormQrCode.vue b/client/components/pages/forms/show/FormQrCode.vue
index 081d8d49c..0e52706ab 100644
--- a/client/components/pages/forms/show/FormQrCode.vue
+++ b/client/components/pages/forms/show/FormQrCode.vue
@@ -1,50 +1,58 @@
 <template>
   <div>
-    <h3 class="font-semibold text-xl">QR Code</h3>
+    <h3 class="font-semibold text-xl">
+      QR Code
+    </h3>
     <p>Scan the QR code to open the form (Right click to copy the image)</p>
     <div class="flex items-center">
-      <img v-if="QrUrl" :src="QrUrl" class="m-auto" />
+      <img
+        v-if="QrUrl"
+        :src="QrUrl"
+        class="m-auto"
+      >
     </div>
   </div>
 </template>
 
 <script>
-import QRCode from 'qrcode'
+import QRCode from "qrcode"
 export default {
-  name: 'FormQrCode',
+  name: "FormQrCode",
   props: {
     form: { type: Object, required: true },
-    extraQueryParam: { type: String, default: '' }
+    extraQueryParam: { type: String, default: "" },
   },
 
-  data () {
+  data() {
     return {
-      QrUrl: null
+      QrUrl: null,
     }
   },
 
   computed: {
-    shareUrl () {
-      return (this.extraQueryParam) ? this.form.share_url + "?" + this.extraQueryParam : this.form.share_url + this.extraQueryParam
-    }
+    shareUrl() {
+      return this.extraQueryParam
+        ? this.form.share_url + "?" + this.extraQueryParam
+        : this.form.share_url + this.extraQueryParam
+    },
   },
 
   watch: {
-    shareUrl () {
+    shareUrl() {
       this.generateQR()
-    }
+    },
   },
 
-  mounted () {
+  mounted() {
     this.generateQR()
   },
 
   methods: {
-    generateQR () {
-      QRCode.toDataURL(this.shareUrl).then(url => {
+    generateQR() {
+      QRCode.toDataURL(this.shareUrl).then((url) => {
         this.QrUrl = url
       })
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/pages/forms/show/RegenerateFormLink.vue b/client/components/pages/forms/show/RegenerateFormLink.vue
index 2c0c78f4a..1a3b6220b 100644
--- a/client/components/pages/forms/show/RegenerateFormLink.vue
+++ b/client/components/pages/forms/show/RegenerateFormLink.vue
@@ -1,27 +1,49 @@
 <template>
   <div>
     <v-button
+      v-track.regenerate_form_link_click="{
+        form_id: form.id,
+        form_slug: form.slug,
+      }"
       class="w-full"
       color="light-gray"
-      v-track.regenerate_form_link_click="{form_id:form.id, form_slug:form.slug}"
-      @click="showGenerateFormLinkModal=true"
+      @click="showGenerateFormLinkModal = true"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-600 inline" fill="none"
-            viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-              d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6 mr-2 text-blue-600 inline"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
         />
       </svg>
       Regenerate link
     </v-button>
 
     <!--  Regenerate form link modal  -->
-    <modal :show="showGenerateFormLinkModal" @close="showGenerateFormLinkModal=false">
+    <modal
+      :show="showGenerateFormLinkModal"
+      @close="showGenerateFormLinkModal = false"
+    >
       <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-blue-600" fill="none" viewBox="0 0 24 24"
-              stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="w-10 h-10 text-blue-600"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
           />
         </svg>
       </template>
@@ -31,19 +53,26 @@
       <div class="p-4">
         <p>
           You can choose between two different URL formats for your form.
-          <span class="font-semibold">Be careful, changing your form URL is not a reversible operation</span>.
-          Make sure to udpate your form URL everywhere where it's used.
+          <span class="font-semibold">Be careful, changing your form URL is not a reversible
+            operation</span>. Make sure to udpate your form URL everywhere where it's used.
         </p>
         <div class="border-t py-4 mt-4">
           <h3 class="text-xl text-gray-700 font-semibold">
             Human Readable URL
           </h3>
-          <p>If your users are going to see this url, you might want to make nice and readable. Example:</p>
+          <p>
+            If your users are going to see this url, you might want to make nice
+            and readable. Example:
+          </p>
           <p class="text-gray-600 border p-4 bg-gray-50 rounded-md mt-4">
             https://opnform.com/forms/contact
           </p>
           <div class="text-center mt-4">
-            <v-button :loading="loadingNewLink" color="outline-blue" @click="regenerateLink('slug')">
+            <v-button
+              :loading="loadingNewLink"
+              color="outline-blue"
+              @click="regenerateLink('slug')"
+            >
               Generate a Human Readable URL
             </v-button>
           </div>
@@ -53,41 +82,43 @@
             Random ID URL
           </h3>
           <p>
-            If your user are not going to see your form url (if it's embedded), and if you prefer to have a random
-            non-guessable URL. Example:
+            If your user are not going to see your form url (if it's embedded),
+            and if you prefer to have a random non-guessable URL. Example:
           </p>
           <p class="text-gray-600 p-4 border bg-gray-50 rounded-md mt-4">
             https://opnform.com/forms/b4417f9c-34ae-4421-8006-832ee47786e7
           </p>
           <div class="text-center mt-4">
-            <v-button :loading="loadingNewLink" color="outline-blue" @click="regenerateLink('uuid')">
+            <v-button
+              :loading="loadingNewLink"
+              color="outline-blue"
+              @click="regenerateLink('uuid')"
+            >
               Generate a Random ID URL
             </v-button>
           </div>
         </div>
       </div>
     </modal>
-
   </div>
 </template>
 
 <script>
-import { computed } from 'vue'
-import { useFormsStore } from '../../../../stores/forms'
+import { useFormsStore } from "../../../../stores/forms"
 
 export default {
-  name: 'RegenerateFormLink',
+  name: "RegenerateFormLink",
   components: {},
   props: {
-    form: { type: Object, required: true }
+    form: { type: Object, required: true },
   },
 
-  setup () {
-      const formsStore = useFormsStore()
-      return {
-        formsStore
-      }
-    },
+  setup() {
+    const formsStore = useFormsStore()
+    return {
+      formsStore,
+    }
+  },
 
   data: () => ({
     loadingNewLink: false,
@@ -95,22 +126,32 @@ export default {
   }),
 
   computed: {
-    formEndpoint: () => '/open/forms/{id}',
+    formEndpoint: () => "/open/forms/{id}",
   },
 
   methods: {
     regenerateLink(option) {
       if (this.loadingNewLink) return
       this.loadingNewLink = true
-      opnFetch(this.formEndpoint.replace('{id}', this.form.id) + '/regenerate-link/' + option, {method:'PUT'}).then((data) => {
-        this.formsStore.save(data.form)
-        this.$router.push({name: 'forms-slug-show-share', params: {slug: data.form.slug}})
-        useAlert().success(data.message)
-        this.loadingNewLink = false
-      }).finally(() => {
-        this.showGenerateFormLinkModal = false
-      })
+      opnFetch(
+        this.formEndpoint.replace("{id}", this.form.id) +
+          "/regenerate-link/" +
+          option,
+        { method: "PUT" },
+      )
+        .then((data) => {
+          this.formsStore.save(data.form)
+          this.$router.push({
+            name: "forms-slug-show-share",
+            params: { slug: data.form.slug },
+          })
+          useAlert().success(data.message)
+          this.loadingNewLink = false
+        })
+        .finally(() => {
+          this.showGenerateFormLinkModal = false
+        })
     },
-  }
+  },
 }
 </script>
diff --git a/client/components/pages/forms/show/ShareLink.vue b/client/components/pages/forms/show/ShareLink.vue
index b9e0f88a9..6d5fdfc0e 100644
--- a/client/components/pages/forms/show/ShareLink.vue
+++ b/client/components/pages/forms/show/ShareLink.vue
@@ -1,44 +1,58 @@
 <template>
   <div>
-      <h3 class="font-semibold text-xl">Share Link</h3>
-      <p>Your form is now published and ready to be shared with the world! Copy this link to share your form
-          on social media, messaging apps or via email.</p>
-      <copy-content :content="share_url" :is-draft="form.visibility=='draft'">
-        <template #icon>
-          <svg class="h-4 w-4 -mt-1 text-blue-600 inline mr-1" viewBox="0 0 20 10" fill="none"
-                  xmlns="http://www.w3.org/2000/svg">
-              <path
-              d="M7.49984 9.16634H5.83317C3.53198 9.16634 1.6665 7.30086 1.6665 4.99967C1.6665 2.69849 3.53198 0.833008 5.83317 0.833008H7.49984M12.4998 9.16634H14.1665C16.4677 9.16634 18.3332 7.30086 18.3332 4.99967C18.3332 2.69849 16.4677 0.833008 14.1665 0.833008H12.4998M5.83317 4.99967L14.1665 4.99968"
-              stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </template>
-        Copy Link
-      </copy-content>
+    <h3 class="font-semibold text-xl">
+      Share Link
+    </h3>
+    <p>
+      Your form is now published and ready to be shared with the world! Copy
+      this link to share your form on social media, messaging apps or via email.
+    </p>
+    <copy-content
+      :content="share_url"
+      :is-draft="form.visibility == 'draft'"
+    >
+      <template #icon>
+        <svg
+          class="h-4 w-4 -mt-1 text-blue-600 inline mr-1"
+          viewBox="0 0 20 10"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7.49984 9.16634H5.83317C3.53198 9.16634 1.6665 7.30086 1.6665 4.99967C1.6665 2.69849 3.53198 0.833008 5.83317 0.833008H7.49984M12.4998 9.16634H14.1665C16.4677 9.16634 18.3332 7.30086 18.3332 4.99967C18.3332 2.69849 16.4677 0.833008 14.1665 0.833008H12.4998M5.83317 4.99967L14.1665 4.99968"
+            stroke="currentColor"
+            stroke-width="1.66667"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </template>
+      Copy Link
+    </copy-content>
   </div>
 </template>
-    
+
 <script>
-import CopyContent from '../../../open/forms/components/CopyContent.vue'
+import CopyContent from "../../../open/forms/components/CopyContent.vue"
 
 export default {
-    name: 'ShareLink',
-    components: { CopyContent },
-    props: {
-      form: { type: Object, required: true },
-      extraQueryParam: { type: String, default: '' }
-    },
+  name: "ShareLink",
+  components: { CopyContent },
+  props: {
+    form: { type: Object, required: true },
+    extraQueryParam: { type: String, default: "" },
+  },
 
-    data: () => ({
-      
-    }),
+  data: () => ({}),
 
-    computed: {
-      share_url () {
-        return (this.extraQueryParam) ? this.form.share_url + '?' + this.extraQueryParam : this.form.share_url + this.extraQueryParam
-      }
+  computed: {
+    share_url() {
+      return this.extraQueryParam
+        ? this.form.share_url + "?" + this.extraQueryParam
+        : this.form.share_url + this.extraQueryParam
     },
+  },
 
-    methods: {}
+  methods: {},
 }
 </script>
-    
\ No newline at end of file
diff --git a/client/components/pages/forms/show/UrlFormPrefill.vue b/client/components/pages/forms/show/UrlFormPrefill.vue
index f7cff8df6..c5378d648 100644
--- a/client/components/pages/forms/show/UrlFormPrefill.vue
+++ b/client/components/pages/forms/show/UrlFormPrefill.vue
@@ -1,25 +1,48 @@
 <template>
   <div class="flex">
     <v-button
+      v-track.url_form_prefill_click="{
+        form_id: form.id,
+        form_slug: form.slug,
+      }"
       class="w-full"
       color="light-gray"
-      v-track.url_form_prefill_click="{form_id:form.id, form_slug:form.slug}"
-      @click="showUrlFormPrefillModal=true"
+      @click="showUrlFormPrefillModal = true"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-600 inline" fill="none"
-            viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-              d="M17 16v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-7a2 2 0 012-2h2m3-4H9a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-1m-1 4l-3 3m0 0l-3-3m3 3V3"
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6 mr-2 text-blue-600 inline"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M17 16v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-7a2 2 0 012-2h2m3-4H9a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-1m-1 4l-3 3m0 0l-3-3m3 3V3"
         />
       </svg>
       Url pre-fill
     </v-button>
 
-    <modal :show="showUrlFormPrefillModal" @close="showUrlFormPrefillModal=false">
+    <modal
+      :show="showUrlFormPrefillModal"
+      @close="showUrlFormPrefillModal = false"
+    >
       <template #icon>
-        <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="M17 16v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-7a2 2 0 012-2h2m3-4H9a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-1m-1 4l-3 3m0 0l-3-3m3 3V3"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="w-10 h-10 text-blue"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M17 16v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-7a2 2 0 012-2h2m3-4H9a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-1m-1 4l-3 3m0 0l-3-3m3 3V3"
           />
         </svg>
       </template>
@@ -27,10 +50,15 @@
         <span>Url Form Prefill</span>
       </template>
 
-      <div class="p-4" ref="content">
+      <div
+        ref="content"
+        class="p-4"
+      >
         <p>
-          Create dynamic links when sharing your form (whether it's embedded or not), that allows you to prefill
-          your form fields. You can use this to personalize the form when sending it to multiple contacts for instance.
+          Create dynamic links when sharing your form (whether it's embedded or
+          not), that allows you to prefill your form fields. You can use this to
+          personalize the form when sending it to multiple contacts for
+          instance.
         </p>
 
         <h3 class="mt-6 border-t text-xl font-semibold mb-4 pt-6">
@@ -38,13 +66,25 @@
         </h3>
 
         <p>
-          Complete your form below and fill only the fields you want to prefill. You can even leave the required fields empty.
+          Complete your form below and fill only the fields you want to prefill.
+          You can even leave the required fields empty.
         </p>
 
         <div class="rounded-lg p-5 bg-gray-100 dark:bg-gray-900 mt-4">
-          <open-form v-if="form" :theme="theme" :loading="false" :show-hidden="true" :form="form" :fields="form.properties" @submit="generateUrl">
-            <template #submit-btn="{submitForm}">
-              <v-button class="mt-2 px-8 mx-1" @click.prevent="submitForm">
+          <open-form
+            v-if="form"
+            :theme="theme"
+            :loading="false"
+            :show-hidden="true"
+            :form="form"
+            :fields="form.properties"
+            @submit="generateUrl"
+          >
+            <template #submit-btn="{ submitForm }">
+              <v-button
+                class="mt-2 px-8 mx-1"
+                @click.prevent="submitForm"
+              >
                 Generate Pre-filled URL
               </v-button>
             </template>
@@ -55,26 +95,28 @@
           <h3 class="mt-6 text-xl font-semibold mb-4 pt-6">
             Your Prefill url
           </h3>
-          <form-url-prefill :form="form" :form-data="prefillFormData" :extra-query-param="extraQueryParam" />
+          <form-url-prefill
+            :form="form"
+            :form-data="prefillFormData"
+            :extra-query-param="extraQueryParam"
+          />
         </template>
-
       </div>
     </modal>
   </div>
 </template>
 
 <script>
-import FormUrlPrefill from '../../../open/forms/components/FormUrlPrefill.vue'
-import ProTag from '~/components/global/ProTag.vue'
-import OpenForm from '../../../open/forms/OpenForm.vue'
-import { themes } from '~/lib/forms/form-themes.js'
+import FormUrlPrefill from "../../../open/forms/components/FormUrlPrefill.vue"
+import OpenForm from "../../../open/forms/OpenForm.vue"
+import { themes } from "~/lib/forms/form-themes.js"
 
 export default {
-  name: 'UrlFormPrefill',
-  components: { FormUrlPrefill, ProTag, OpenForm },
+  name: "UrlFormPrefill",
+  components: { FormUrlPrefill, OpenForm },
   props: {
     form: { type: Object, required: true },
-    extraQueryParam: { type: String, default: '' }
+    extraQueryParam: { type: String, default: "" },
   },
 
   data: () => ({
@@ -86,14 +128,15 @@ export default {
   computed: {},
 
   methods: {
-    generateUrl (formData, onFailure) {
+    generateUrl(formData) {
       this.prefillFormData = formData
       this.$nextTick().then(() => {
         if (this.$refs.content) {
-          this.$refs.content.parentElement.parentElement.parentElement.scrollTop = this.$refs.content.offsetHeight
+          this.$refs.content.parentElement.parentElement.parentElement.scrollTop =
+            this.$refs.content.offsetHeight
         }
       })
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/pages/pricing/CheckoutDetailsModal.vue b/client/components/pages/pricing/CheckoutDetailsModal.vue
index 67b5203c1..9627fa391 100644
--- a/client/components/pages/pricing/CheckoutDetailsModal.vue
+++ b/client/components/pages/pricing/CheckoutDetailsModal.vue
@@ -1,9 +1,31 @@
 <template>
-  <modal :show="show" max-width="lg" @close="close">
-    <text-input ref="companyName" label="Company Name" name="name" :required="true" :form="form" help="Name that will appear on invoices" />
-    <text-input label="Email" name="email" native-type="email" :required="true" :form="form" help="Where invoices will be sent" />
-    <v-button :loading="form.busy || loading" :disabled="(form.busy || loading)?true:null" class="mt-6 block mx-auto"
-              :arrow="true" @click="saveDetails"
+  <modal
+    :show="show"
+    max-width="lg"
+    @close="close"
+  >
+    <text-input
+      ref="companyName"
+      label="Company Name"
+      name="name"
+      :required="true"
+      :form="form"
+      help="Name that will appear on invoices"
+    />
+    <text-input
+      label="Email"
+      name="email"
+      native-type="email"
+      :required="true"
+      :form="form"
+      help="Where invoices will be sent"
+    />
+    <v-button
+      :loading="form.busy || loading"
+      :disabled="form.busy || loading ? true : null"
+      class="mt-6 block mx-auto"
+      :arrow="true"
+      @click="saveDetails"
     >
       Go to checkout
     </v-button>
@@ -11,88 +33,98 @@
 </template>
 
 <script>
-import { computed } from 'vue'
-import TextInput from '../../forms/TextInput.vue'
-import VButton from '~/components/global/VButton.vue'
+import { computed } from "vue"
+import TextInput from "../../forms/TextInput.vue"
+import VButton from "~/components/global/VButton.vue"
 
 export default {
   components: { VButton, TextInput },
   props: {
     show: {
       type: Boolean,
-      default: false
+      default: false,
     },
     plan: {
       type: String,
-      default: 'pro'
+      default: "pro",
     },
     yearly: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
+  emits: ['close'],
 
-  setup () {
+  setup() {
     const authStore = useAuthStore()
     return {
-      user: computed(() => authStore.user)
+      user: computed(() => authStore.user),
     }
   },
 
   data: () => ({
     form: useForm({
-      name: '',
-      email: ''
+      name: "",
+      email: "",
     }),
-    loading: false
+    loading: false,
   }),
 
   computed: {},
 
   watch: {
-    user () {
+    user() {
       this.updateUser()
     },
-    show () {
+    show() {
       // Wait for modal to open and focus on first field
       setTimeout(() => {
         if (this.$refs.companyName) {
-          this.$refs.companyName.$el.querySelector('input').focus()
+          this.$refs.companyName.$el.querySelector("input").focus()
         }
       }, 300)
 
       this.loading = false
-    }
+    },
   },
 
-  mounted () {
+  mounted() {
     this.updateUser()
   },
 
   methods: {
-    updateUser () {
+    updateUser() {
       if (this.user) {
         this.form.name = this.user.name
         this.form.email = this.user.email
       }
     },
-    saveDetails () {
+    saveDetails() {
       if (this.form.busy) return
-      this.form.put('subscription/update-customer-details').then(() => {
+      this.form.put("subscription/update-customer-details").then(() => {
         this.loading = true
-        opnFetch('/subscription/new/' + this.plan + '/' + (!this.yearly ? 'monthly' : 'yearly') + '/checkout/with-trial').then((data) => {
-          window.location = data.checkout_url
-        }).catch((error) => {
-          useAlert().error(error.data.message)
-        }).finally(() => {
-          this.loading = false
-          this.close()
-        })
+        opnFetch(
+          "/subscription/new/" +
+            this.plan +
+            "/" +
+            (!this.yearly ? "monthly" : "yearly") +
+            "/checkout/with-trial",
+        )
+          .then((data) => {
+            window.location = data.checkout_url
+          })
+          .catch((error) => {
+            useAlert().error(error.data.message)
+          })
+          .finally(() => {
+            this.loading = false
+            this.close()
+          })
       })
     },
-    close () {
-      this.$emit('close')
-    }
-  }
+    close() {
+      this.$emit("close")
+    },
+  },
 }
 </script>
diff --git a/client/components/pages/pricing/CustomPlan.vue b/client/components/pages/pricing/CustomPlan.vue
index 29fc2f44f..81dd8e885 100644
--- a/client/components/pages/pricing/CustomPlan.vue
+++ b/client/components/pages/pricing/CustomPlan.vue
@@ -1,17 +1,27 @@
 <template>
   <div class="border relative max-w-5xl mx-auto mt-4 lg:mt-10">
     <div class="w-full">
-      <div class="rounded-lg bg-gray-50 dark:bg-gray-800 px-6 py-8 sm:p-10 lg:flex lg:items-center">
+      <div
+        class="rounded-lg bg-gray-50 dark:bg-gray-800 px-6 py-8 sm:p-10 lg:flex lg:items-center"
+      >
         <div class="flex-1">
-          <h3 class="inline-flex px-4 py-1 rounded-full text-md font-bold tracking-wide uppercase bg-white text-gray-800">
+          <h3
+            class="inline-flex px-4 py-1 rounded-full text-md font-bold tracking-wide uppercase bg-white text-gray-800"
+          >
             Custom plan
           </h3>
           <div class="mt-4 text-md text-gray-600 dark:text-gray-400">
-            Get a custom file upload limit, enterprise-level support, custom contract, dedicated application instance in a specific region, payment via invoice/PO etc.
+            Get a custom file upload limit, enterprise-level support, custom
+            contract, dedicated application instance in a specific region,
+            payment via invoice/PO etc.
           </div>
         </div>
         <div class="mt-6 rounded-md lg:mt-0 lg:ml-10 lg:flex-shrink-0">
-          <v-button color="white" class="w-full mt-4" @click.prevent="customPlanClick">
+          <v-button
+            color="white"
+            class="w-full mt-4"
+            @click.prevent="customPlanClick"
+          >
             Contact us
           </v-button>
         </div>
@@ -22,7 +32,7 @@
 
 <script>
 export default {
-  name: 'CustomPlan',
+  name: "CustomPlan",
   components: {},
   props: {},
 
@@ -31,9 +41,11 @@ export default {
   computed: {},
 
   methods: {
-    customPlanClick () {
-      useCrisp().sendTextMessage('Hi, I would like to discuss about a custom plan')
-    }
-  }
+    customPlanClick() {
+      useCrisp().sendTextMessage(
+        "Hi, I would like to discuss about a custom plan",
+      )
+    },
+  },
 }
 </script>
diff --git a/client/components/pages/pricing/MonthlyYearlySelector.vue b/client/components/pages/pricing/MonthlyYearlySelector.vue
index fdf5be7b1..9b8bede3a 100644
--- a/client/components/pages/pricing/MonthlyYearlySelector.vue
+++ b/client/components/pages/pricing/MonthlyYearlySelector.vue
@@ -3,16 +3,19 @@
     <button class="font-semibold block flex-grow cursor-pointer">
       <div
         class="p-2 px-3 rounded-lg transition-colors"
-        :class="{'bg-blue-500 text-white': !modelValue}"
+        :class="{ 'bg-blue-500 text-white': !modelValue }"
         @click="set(false)"
       >
         Monthly
       </div>
     </button>
-    <button class="font-semibold block flex-grow cursor-pointer" @click="set(true)">
+    <button
+      class="font-semibold block flex-grow cursor-pointer"
+      @click="set(true)"
+    >
       <div
         class="p-2 px-4 rounded-lg transition-colors"
-        :class="{'bg-blue-500 text-white': modelValue}"
+        :class="{ 'bg-blue-500 text-white': modelValue }"
       >
         Yearly
       </div>
@@ -24,14 +27,14 @@
 </template>
 
 <script setup>
-import { defineEmits, defineProps } from 'vue'
+import { defineEmits, defineProps } from "vue"
 
 defineProps({
-  modelValue: { type: Boolean, required: true }
+  modelValue: { type: Boolean, required: true },
 })
-const emit = defineEmits()
+const emit = defineEmits(['update:modelValue'])
 
 const set = (value) => {
-  emit('update:modelValue', value)
+  emit("update:modelValue", value)
 }
 </script>
diff --git a/client/components/pages/pricing/PricingTable.vue b/client/components/pages/pricing/PricingTable.vue
index 559496da4..151c6903f 100644
--- a/client/components/pages/pricing/PricingTable.vue
+++ b/client/components/pages/pricing/PricingTable.vue
@@ -1,54 +1,99 @@
 <template>
   <div class="w-full">
     <section class="relative">
-      <div v-if="!homePage" class="absolute inset-0 grid" aria-hidden="true">
+      <div
+        v-if="!homePage"
+        class="absolute inset-0 grid"
+        aria-hidden="true"
+      >
         <div class="bg-gray-100" />
         <div class="bg-white" />
       </div>
 
       <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
-        <div class="max-w-5xl mx-auto bg-white shadow-xl rounded-3xl ring-1 ring-gray-200 lg:flex isolate">
+        <div
+          class="max-w-5xl mx-auto bg-white shadow-xl rounded-3xl ring-1 ring-gray-200 lg:flex isolate"
+        >
           <div class="p-8 sm:p-8 lg:flex-auto">
-            <h3 v-if="homePage" class="text-3xl font-semibold tracking-tight text-gray-950">
+            <h3
+              v-if="homePage"
+              class="text-3xl font-semibold tracking-tight text-gray-950"
+            >
               Check out our
               <span class="ml-2 text-nt-blue">
-                <svg class="inline w-10 h-10" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <svg
+                  class="inline w-10 h-10"
+                  viewBox="0 0 32 32"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
                   <g opacity="0.12">
-                    <path d="M15.9998 27.3333L10.6665 12H21.3332L15.9998 27.3333Z" fill="currentColor" />
-                    <path d="M13.3332 4H9.33317L2.6665 12L10.6665 12L13.3332 4Z" fill="currentColor" />
-                    <path d="M18.6665 4H22.6665L29.3332 12L21.3332 12L18.6665 4Z" fill="currentColor" />
+                    <path
+                      d="M15.9998 27.3333L10.6665 12H21.3332L15.9998 27.3333Z"
+                      fill="currentColor"
+                    />
+                    <path
+                      d="M13.3332 4H9.33317L2.6665 12L10.6665 12L13.3332 4Z"
+                      fill="currentColor"
+                    />
+                    <path
+                      d="M18.6665 4H22.6665L29.3332 12L21.3332 12L18.6665 4Z"
+                      fill="currentColor"
+                    />
                   </g>
                   <path
                     d="M3.33345 12H28.6668M13.3334 4L10.6668 12L16.0001 27.3333L21.3334 12L18.6668 4M16.8195 27.0167L28.7644 12.6829C28.9668 12.4399 29.0681 12.3185 29.1067 12.1829C29.1408 12.0633 29.1408 11.9367 29.1067 11.8171C29.0681 11.6815 28.9668 11.5601 28.7644 11.3171L22.9866 4.3838C22.8691 4.24273 22.8103 4.17219 22.7382 4.12148C22.6744 4.07654 22.6031 4.04318 22.5277 4.02289C22.4426 4 22.3508 4 22.1672 4H9.83305C9.64941 4 9.55758 4 9.4725 4.02289C9.39711 4.04318 9.32586 4.07654 9.26202 4.12148C9.18996 4.17219 9.13118 4.24273 9.01361 4.3838L3.23583 11.3171C3.0334 11.5601 2.93218 11.6815 2.8935 11.8171C2.85939 11.9366 2.85939 12.0633 2.8935 12.1829C2.93218 12.3185 3.0334 12.4399 3.23583 12.6829L15.1807 27.0167C15.4621 27.3544 15.6028 27.5232 15.7713 27.5848C15.919 27.6388 16.0812 27.6388 16.229 27.5848C16.3974 27.5232 16.5381 27.3544 16.8195 27.0167Z"
-                    stroke="currentColor" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"
+                    stroke="currentColor"
+                    stroke-width="2.66667"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
                   />
                 </svg>
                 Pro Features
               </span>
             </h3>
-            <h3 v-else class="text-3xl font-semibold tracking-tight text-gray-950">
+            <h3
+              v-else
+              class="text-3xl font-semibold tracking-tight text-gray-950"
+            >
               Pro Plan
             </h3>
             <p class="mt-2 text-base font-medium leading-7 text-gray-600">
-              OpnForm Pro offers empowering features tailored to the advanced needs of teams and creators. Enjoy our
-              free 3-day trial!
+              OpnForm Pro offers empowering features tailored to the advanced
+              needs of teams and creators. Enjoy our free 3-day trial!
             </p>
 
             <div class="flex items-center mt-6 gap-x-4">
-              <h4 class="flex-none text-sm font-semibold leading-6 tracking-widest text-gray-400 uppercase">
+              <h4
+                class="flex-none text-sm font-semibold leading-6 tracking-widest text-gray-400 uppercase"
+              >
                 What's included
               </h4>
               <div class="flex-auto h-px bg-gray-200" />
             </div>
 
-            <ul role="list"
-                class="grid grid-cols-1 gap-4 mt-4 text-sm font-medium leading-6 text-gray-900 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-2"
+            <ul
+              role="list"
+              class="grid grid-cols-1 gap-4 mt-4 text-sm font-medium leading-6 text-gray-900 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-2"
             >
-              <li v-for="(title, i) in pricingInfo" :key="i" class="flex gap-x-3">
-                <svg aria-hidden="true" class="w-5 h-5 shrink-0 stroke-blue-600" viewBox="0 0 24 24" fill="none"
-                     xmlns="http://www.w3.org/2000/svg"
+              <li
+                v-for="(title, i) in pricingInfo"
+                :key="i"
+                class="flex gap-x-3"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="w-5 h-5 shrink-0 stroke-blue-600"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path d="M20 6L9 17L4 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                  <path
+                    d="M20 6L9 17L4 12"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
                 </svg>
                 {{ title }}
               </li>
@@ -56,17 +101,22 @@
             </ul>
           </div>
 
-          <div class="p-2 -mt-2 flex-col lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
+          <div
+            class="p-2 -mt-2 flex-col lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0"
+          >
             <div
               class="grow h-full py-10 text-center rounded-2xl bg-gray-50 ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-12"
             >
               <div class="max-w-xs px-8 mx-auto space-y-6">
                 <div class="flex items-center justify-center mb-10">
                   <monthly-yearly-selector v-model="isYearly" />
-                </div><!-- lg+ -->
+                </div>
+                <!-- lg+ -->
 
                 <p class="flex flex-col items-center">
-                  <span class="text-6xl font-semibold tracking-tight text-gray-950">
+                  <span
+                    class="text-6xl font-semibold tracking-tight text-gray-950"
+                  >
                     <template v-if="isYearly">$16</template>
                     <template v-else>$19</template>
                   </span>
@@ -76,20 +126,37 @@
                 </p>
 
                 <div class="flex justify-center">
-                  <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'register' }" :arrow="true">
+                  <v-button
+                    v-if="!authenticated"
+                    class="mr-1"
+                    :to="{ name: 'register' }"
+                    :arrow="true"
+                  >
                     Start free trial
                   </v-button>
-                  <v-button v-else-if="authenticated && user.is_subscribed" class="mr-1" :arrow="true"
-                            @click.prevent="openBilling"
+                  <v-button
+                    v-else-if="authenticated && user.is_subscribed"
+                    class="mr-1"
+                    :arrow="true"
+                    @click.prevent="openBilling"
                   >
                     View Billing
                   </v-button>
-                  <v-button v-else class="mr-1" :arrow="true" @click.prevent="openCustomerCheckout('default')">
+                  <v-button
+                    v-else
+                    class="mr-1"
+                    :arrow="true"
+                    @click.prevent="openCustomerCheckout('default')"
+                  >
                     Start free trial
                   </v-button>
                 </div>
-                <p v-if="!homePage" class="text-xs font-medium leading-5 text-gray-600">
-                  Invoices and receipts available for easy company reimbursement.
+                <p
+                  v-if="!homePage"
+                  class="text-xs font-medium leading-5 text-gray-600"
+                >
+                  Invoices and receipts available for easy company
+                  reimbursement.
                 </p>
               </div>
             </div>
@@ -100,18 +167,21 @@
 
     <custom-plan v-if="!homePage" />
 
-    <checkout-details-modal :show="showDetailsModal" :yearly="isYearly" :plan="selectedPlan"
-                            @close="showDetailsModal=false"
+    <checkout-details-modal
+      :show="showDetailsModal"
+      :yearly="isYearly"
+      :plan="selectedPlan"
+      @close="showDetailsModal = false"
     />
   </div>
 </template>
 
 <script>
-import { computed } from 'vue'
-import { useAuthStore } from '../../../stores/auth'
-import MonthlyYearlySelector from './MonthlyYearlySelector.vue'
-import CheckoutDetailsModal from './CheckoutDetailsModal.vue'
-import CustomPlan from './CustomPlan.vue'
+import { computed } from "vue"
+import { useAuthStore } from "../../../stores/auth"
+import MonthlyYearlySelector from "./MonthlyYearlySelector.vue"
+import CheckoutDetailsModal from "./CheckoutDetailsModal.vue"
+import CustomPlan from "./CustomPlan.vue"
 
 MonthlyYearlySelector.compatConfig = { MODE: 3 }
 
@@ -119,54 +189,54 @@ export default {
   components: {
     MonthlyYearlySelector,
     CheckoutDetailsModal,
-    CustomPlan
+    CustomPlan,
   },
   props: {
     homePage: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
-  setup () {
+  setup() {
     const authStore = useAuthStore()
     return {
-      authenticated : computed(() => authStore.check),
-      user : computed(() => authStore.user)
+      authenticated: computed(() => authStore.check),
+      user: computed(() => authStore.user),
     }
   },
   data: () => ({
     isYearly: true,
-    selectedPlan: 'pro',
+    selectedPlan: "pro",
     showDetailsModal: false,
 
     pricingInfo: [
-      'Form confirmation emails',
-      'Slack notifications',
-      'Discord notifications',
-      'Editable submissions',
-      '1 Custom domain',
-      'Custom code',
-      'Larger file uploads (50mb)',
-      'Remove OpnForm branding',
-      'Priority support'
-    ]
+      "Form confirmation emails",
+      "Slack notifications",
+      "Discord notifications",
+      "Editable submissions",
+      "1 Custom domain",
+      "Custom code",
+      "Larger file uploads (50mb)",
+      "Remove OpnForm branding",
+      "Priority support",
+    ],
   }),
 
+  computed: {},
+
   methods: {
-    openCustomerCheckout (plan) {
+    openCustomerCheckout(plan) {
       this.selectedPlan = plan
       this.showDetailsModal = true
     },
-    openBilling () {
+    openBilling() {
       this.billingLoading = true
-      opnFetch('/subscription/billing-portal').then((data) => {
+      opnFetch("/subscription/billing-portal").then((data) => {
         this.billingLoading = false
         const url = data.portal_url
         window.location = url
       })
-    }
+    },
   },
-
-  computed: {}
 }
 </script>
diff --git a/client/components/pages/templates/SingleTemplate.vue b/client/components/pages/templates/SingleTemplate.vue
index 9b2fcab4b..bc4b8375f 100644
--- a/client/components/pages/templates/SingleTemplate.vue
+++ b/client/components/pages/templates/SingleTemplate.vue
@@ -1,15 +1,26 @@
 <template>
-  <div v-if="template" class="relative group">
-    <div v-if="template.is_new" class="absolute top-0 right-0 p-3 z-10">
+  <div
+    v-if="template"
+    class="relative group"
+  >
+    <div
+      v-if="template.is_new"
+      class="absolute top-0 right-0 p-3 z-10"
+    >
       <span
         class="inline-flex items-center gap-1 rounded-full bg-blue-500 px-2 py-1 text-xs font-medium text-white"
       >
-        <svg aria-hidden="true" class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-             fill="currentColor"
+        <svg
+          aria-hidden="true"
+          class="h-3 w-3"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
         >
-          <path fill-rule="evenodd"
-                d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
-                clip-rule="evenodd"
+          <path
+            fill-rule="evenodd"
+            d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
+            clip-rule="evenodd"
           />
         </svg>
         New
@@ -17,9 +28,13 @@
     </div>
 
     <div class="aspect-[4/3] rounded-lg shadow-sm overflow-hidden">
-      <img class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full" v-if="template.image_url"
-           :src="template.image_url" alt="" width="450px"
-      />
+      <img
+        v-if="template.image_url"
+        class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full"
+        :src="template.image_url"
+        alt=""
+        width="450px"
+      >
     </div>
     <p
       class="text-lg font-semibold leading-tight tracking-tight text-gray-900 mt-4 group-hover:text-blue-500 transition-all duration-150"
@@ -29,32 +44,39 @@
     <p class="line-clamp-2 mt-2 text-sm font-normal text-gray-600">
       {{ cleanQuotes(template.short_description) }}
     </p>
-    <template-tags :template="template"
-                   class="flex mt-4 items-center flex-wrap gap-3"
+    <template-tags
+      :template="template"
+      class="flex mt-4 items-center flex-wrap gap-3"
     />
-    <NuxtLink :to="{params:{slug:template.slug},name:'templates-slug'}" title="">
-      <span class="absolute inset-0" aria-hidden="true" />
+    <NuxtLink
+      :to="{ params: { slug: template.slug }, name: 'templates-slug' }"
+      title=""
+    >
+      <span
+        class="absolute inset-0"
+        aria-hidden="true"
+      />
     </NuxtLink>
   </div>
 </template>
 
 <script>
-import TemplateTags from './TemplateTags.vue'
+import TemplateTags from "./TemplateTags.vue"
 
 export default {
   components: { TemplateTags },
 
   props: {
     template: {
-      type: Object
-    }
+      type: Object,
+    },
   },
 
   methods: {
-    cleanQuotes (str) {
+    cleanQuotes(str) {
       // Remove starting and ending quotes if any
-      return (str) ? str.replace(/^"/, '').replace(/"$/, '') : ''
-    }
-  }
+      return str ? str.replace(/^"/, "").replace(/"$/, "") : ""
+    },
+  },
 }
 </script>
diff --git a/client/components/pages/templates/TemplateTags.vue b/client/components/pages/templates/TemplateTags.vue
index 02cceb5a0..3d1595db6 100644
--- a/client/components/pages/templates/TemplateTags.vue
+++ b/client/components/pages/templates/TemplateTags.vue
@@ -1,59 +1,76 @@
 <template>
   <div>
     <template v-if="displayAll">
-      <span v-if="template.is_new"
-            class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-white bg-blue-500 rounded-full"
+      <span
+        v-if="template.is_new"
+        class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-white bg-blue-500 rounded-full"
       >
-        <svg aria-hidden="true" class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-             fill="currentColor"
+        <svg
+          aria-hidden="true"
+          class="w-3 h-3"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
         >
-          <path fill-rule="evenodd"
-                d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
-                clip-rule="evenodd"
+          <path
+            fill-rule="evenodd"
+            d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
+            clip-rule="evenodd"
           />
         </svg>
         New
       </span>
-      <span v-for="item in types" :key="item.slug"
-            class="inline-flex items-center rounded-full bg-gray-50 dark:bg-gray-800 dark:text-gray-400 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+      <span
+        v-for="item in types"
+        :key="item.slug"
+        class="inline-flex items-center rounded-full bg-gray-50 dark:bg-gray-800 dark:text-gray-400 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
       >
         {{ item.name }}
       </span>
-      <span v-for="item in industries" :key="item.slug"
-            class="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-900 dark:text-gray-400 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
+      <span
+        v-for="item in industries"
+        :key="item.slug"
+        class="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-900 dark:text-gray-400 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
       >
         {{ item.name }}
       </span>
     </template>
     <template v-else>
-      <span v-if="types.length > 0"
-            class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+      <span
+        v-if="types.length > 0"
+        class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
       >
-        {{ types[0].name }} <template v-if="types.length > 1">+{{ types.length - 1 }}</template>
+        {{ types[0].name }}
+        <template v-if="types.length > 1">+{{ types.length - 1 }}</template>
       </span>
-      <span v-if="industries.length > 0"
-            class="inline-flex items-center rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
+      <span
+        v-if="industries.length > 0"
+        class="inline-flex items-center rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
       >
-        {{ industries[0].name }} <template v-if="industries.length > 1">+{{ industries.length - 1 }}</template>
+        {{ industries[0].name }}
+        <template v-if="industries.length > 1">+{{ industries.length - 1 }}</template>
       </span>
     </template>
   </div>
 </template>
 
 <script setup>
-
 const props = defineProps({
-    template: {
-      type: Object,
-      required: true
-    },
-    displayAll: {
-      type: Boolean,
-      default: false
-    }
-  })
+  template: {
+    type: Object,
+    required: true,
+  },
+  displayAll: {
+    type: Boolean,
+    default: false,
+  },
+})
 
 const templatesStore = useTemplatesStore()
-const types = computed(() => templatesStore.getTemplateTypes(props.template.types))
-const industries = computed(() => templatesStore.getTemplateIndustries(props.template.industries))
+const types = computed(() =>
+  templatesStore.getTemplateTypes(props.template.types),
+)
+const industries = computed(() =>
+  templatesStore.getTemplateIndustries(props.template.industries),
+)
 </script>
diff --git a/client/components/pages/templates/TemplatesList.vue b/client/components/pages/templates/TemplatesList.vue
index e910ba90a..90b5b8db6 100644
--- a/client/components/pages/templates/TemplatesList.vue
+++ b/client/components/pages/templates/TemplatesList.vue
@@ -2,56 +2,101 @@
   <div>
     <section class="bg-white py-12">
       <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
-        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 sm:gap-6 relative z-20">
+        <div
+          class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 sm:gap-6 relative z-20"
+        >
           <div class="flex items-center gap-4">
             <div class="flex-1 sm:flex-none">
-              <select-input v-model="selectedType" name="type" v-if="filterTypes"
-                            :options="typesOptions" class="w-full sm:w-auto md:w-56"
+              <select-input
+                v-if="filterTypes"
+                v-model="selectedType"
+                name="type"
+                :options="typesOptions"
+                class="w-full sm:w-auto md:w-56"
               />
             </div>
             <div class="flex-1 sm:flex-none">
-              <select-input v-model="selectedIndustry" name="industry" v-if="filterIndustries"
-                            :options="industriesOptions" class="w-full sm:w-auto md:w-56"
+              <select-input
+                v-if="filterIndustries"
+                v-model="selectedIndustry"
+                name="industry"
+                :options="industriesOptions"
+                class="w-full sm:w-auto md:w-56"
               />
             </div>
           </div>
           <div class="flex-1 w-full md:max-w-xs">
-            <text-input autocomplete="off" name="search" v-model="search" placeholder="Search..."/>
+            <text-input
+              v-model="search"
+              autocomplete="off"
+              name="search"
+              placeholder="Search..."
+            />
           </div>
         </div>
 
-        <div v-if="loading" class="text-center mt-4">
-          <Loader class="h-6 w-6 text-nt-blue mx-auto"/>
+        <div
+          v-if="loading"
+          class="text-center mt-4"
+        >
+          <Loader class="h-6 w-6 text-nt-blue mx-auto" />
         </div>
-        <p v-else-if="enrichedTemplates.length === 0" class="text-center mt-4">
+        <p
+          v-else-if="enrichedTemplates.length === 0"
+          class="text-center mt-4"
+        >
           No templates found.
         </p>
-        <div v-else class="relative z-10">
-          <div class="grid grid-cols-1 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 sm:gap-y-12">
-            <single-template v-for="template in enrichedTemplates" :key="template.id" :template="template"/>
+        <div
+          v-else
+          class="relative z-10"
+        >
+          <div
+            class="grid grid-cols-1 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 sm:gap-y-12"
+          >
+            <single-template
+              v-for="template in enrichedTemplates"
+              :key="template.id"
+              :template="template"
+            />
           </div>
         </div>
       </div>
     </section>
 
-    <slot name="before-lists"/>
+    <slot name="before-lists" />
 
-    <section class="py-12 bg-white border-t border-gray-200 sm:py-16" v-if="showTypes">
+    <section
+      v-if="showTypes"
+      class="py-12 bg-white border-t border-gray-200 sm:py-16"
+    >
       <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
         <div class="flex items-center justify-between">
-          <h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+          <h4
+            class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl"
+          >
             All Types
           </h4>
-          <v-button :to="{name:'templates'}" color="white" size="small" :arrow="true" v-if="$route.name !== 'templates'">
+          <v-button
+            v-if="$route.name !== 'templates'"
+            :to="{ name: 'templates' }"
+            color="white"
+            size="small"
+            :arrow="true"
+          >
             View All Templates
           </v-button>
         </div>
 
-        <div class="grid grid-cols-1 gap-x-8 gap-y-4 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-          <NuxtLink v-for="row in types" :key="row.slug"
-                       :to="{params: {slug:row.slug}, name:'templates-types-slug'}"
-                       :title="row.name"
-                       class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+        <div
+          class="grid grid-cols-1 gap-x-8 gap-y-4 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+        >
+          <NuxtLink
+            v-for="row in types"
+            :key="row.slug"
+            :to="{ params: { slug: row.slug }, name: 'templates-types-slug' }"
+            :title="row.name"
+            class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
           >
             {{ row.name }}
           </NuxtLink>
@@ -59,22 +104,40 @@
       </div>
     </section>
 
-    <section class="py-12 bg-white border-t border-gray-200 sm:py-16" v-if="showIndustries">
+    <section
+      v-if="showIndustries"
+      class="py-12 bg-white border-t border-gray-200 sm:py-16"
+    >
       <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
         <div class="flex items-center justify-between">
-          <h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+          <h4
+            class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl"
+          >
             All Industries
           </h4>
-          <v-button :to="{name:'templates'}" color="white" size="small" :arrow="true" v-if="$route.name !== 'templates'">
+          <v-button
+            v-if="$route.name !== 'templates'"
+            :to="{ name: 'templates' }"
+            color="white"
+            size="small"
+            :arrow="true"
+          >
             View All Templates
           </v-button>
         </div>
 
-        <div class="grid grid-cols-1 gap-x-8 gap-y-4 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-          <NuxtLink v-for="row in industries" :key="row.slug"
-                       :to="{params:{slug:row.slug}, name:'templates-industries-slug'}"
-                       :title="row.name"
-                       class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+        <div
+          class="grid grid-cols-1 gap-x-8 gap-y-4 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+        >
+          <NuxtLink
+            v-for="row in industries"
+            :key="row.slug"
+            :to="{
+              params: { slug: row.slug },
+              name: 'templates-industries-slug',
+            }"
+            :title="row.name"
+            class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
           >
             {{ row.name }}
           </NuxtLink>
@@ -85,112 +148,127 @@
 </template>
 
 <script>
-import {computed} from 'vue'
-import Fuse from 'fuse.js'
-import SingleTemplate from './SingleTemplate.vue'
-import {refDebounced} from "@vueuse/core";
+import { computed } from "vue"
+import Fuse from "fuse.js"
+import SingleTemplate from "./SingleTemplate.vue"
+import { refDebounced } from "@vueuse/core"
 
 export default {
-  name: 'TemplatesList',
-  components: {SingleTemplate},
+  name: "TemplatesList",
+  components: { SingleTemplate },
   props: {
     templates: {
       type: Array,
-      required: true
+      required: true,
     },
     loading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showTypes: {
       type: Boolean,
-      default: true
+      default: true,
     },
     filterTypes: {
       type: Boolean,
-      default: true
+      default: true,
     },
     showIndustries: {
       type: Boolean,
-      default: true
+      default: true,
     },
     filterIndustries: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
 
   setup() {
     const authStore = useAuthStore()
     const templatesStore = useTemplatesStore()
-    const search = ref('')
+    const search = ref("")
     const debouncedSearch = refDebounced(search, 500)
     return {
       search,
       debouncedSearch,
       user: computed(() => authStore.user),
       industries: computed(() => [...templatesStore.industries.values()]),
-      types: computed(() => [...templatesStore.types.values()])
+      types: computed(() => [...templatesStore.types.values()]),
     }
   },
 
   data: () => ({
-    selectedType: 'all',
-    selectedIndustry: 'all',
+    selectedType: "all",
+    selectedIndustry: "all",
   }),
 
   computed: {
     industriesOptions() {
-      return [{name: 'All Industries', value: 'all'}].concat(Object.values(this.industries).map((industry) => {
-        return {
-          name: industry.name,
-          value: industry.slug
-        }
-      }))
+      return [{ name: "All Industries", value: "all" }].concat(
+        Object.values(this.industries).map((industry) => {
+          return {
+            name: industry.name,
+            value: industry.slug,
+          }
+        }),
+      )
     },
     typesOptions() {
-      return [{name: 'All Types', value: 'all'}].concat(Object.values(this.types).map((type) => {
-        return {
-          name: type.name,
-          value: type.slug
-        }
-      }))
+      return [{ name: "All Types", value: "all" }].concat(
+        Object.values(this.types).map((type) => {
+          return {
+            name: type.name,
+            value: type.slug,
+          }
+        }),
+      )
     },
     enrichedTemplates() {
       let enrichedTemplates = this.templates
 
       // Filter by Selected Type
-      if (this.filterTypes && this.selectedType && this.selectedType !== 'all') {
+      if (
+        this.filterTypes &&
+        this.selectedType &&
+        this.selectedType !== "all"
+      ) {
         enrichedTemplates = enrichedTemplates.filter((item) => {
-          return (item.types && item.types.length > 0) ? item.types.includes(this.selectedType) : false
+          return item.types && item.types.length > 0
+            ? item.types.includes(this.selectedType)
+            : false
         })
       }
 
       // Filter by Selected Industry
-      if (this.filterIndustries && this.selectedIndustry && this.selectedIndustry !== 'all') {
+      if (
+        this.filterIndustries &&
+        this.selectedIndustry &&
+        this.selectedIndustry !== "all"
+      ) {
         enrichedTemplates = enrichedTemplates.filter((item) => {
-          return (item.industries && item.industries.length > 0) ? item.industries.includes(this.selectedIndustry) : false
+          return item.industries && item.industries.length > 0
+            ? item.industries.includes(this.selectedIndustry)
+            : false
         })
       }
 
-      if (!this.debouncedSearch || this.debouncedSearch === '' || this.debouncedSearch === null) {
+      if (
+        !this.debouncedSearch ||
+        this.debouncedSearch === "" ||
+        this.debouncedSearch === null
+      ) {
         return enrichedTemplates
       }
 
       // Fuze search
       const fuzeOptions = {
-        keys: [
-          'name',
-          'slug',
-          'description',
-          'short_description'
-        ]
+        keys: ["name", "slug", "description", "short_description"],
       }
       const fuse = new Fuse(enrichedTemplates, fuzeOptions)
       return fuse.search(this.debouncedSearch).map((res) => {
         return res.item
       })
-    }
+    },
   },
 }
 </script>
diff --git a/client/components/pages/welcome/AiFeature.vue b/client/components/pages/welcome/AiFeature.vue
index b793bcca5..80d3cbb8f 100644
--- a/client/components/pages/welcome/AiFeature.vue
+++ b/client/components/pages/welcome/AiFeature.vue
@@ -1,112 +1,166 @@
 <template>
-    <div class="py-8">
-      <section>
-        <div class="mx-auto max-w-7xl isolate sm:px-6 lg:px-8">
+  <div class="py-8">
+    <section>
+      <div class="mx-auto max-w-7xl isolate sm:px-6 lg:px-8">
+        <div
+          class="relative px-4 py-8 overflow-hidden bg-blue-100 ring-blue-100 ring-1 sm:shadow-lg isolate sm:rounded-2xl sm:px-16 md:pt-20 lg:flex lg:gap-x-20 lg:px-16 lg:py-0 sm:shadow-gray-600/10"
+        >
+          <div class="absolute inset-0">
+            <img
+              class="object-cover object-top w-full h-full"
+              src="/img/pages/ai_form_builder/background-pattern-ai.svg"
+              alt=""
+            >
+          </div>
+
           <div
-            class="relative px-4 py-8 overflow-hidden bg-blue-100 ring-blue-100 ring-1 sm:shadow-lg isolate sm:rounded-2xl sm:px-16 md:pt-20 lg:flex lg:gap-x-20 lg:px-16 lg:py-0 sm:shadow-gray-600/10">
-            <div class="absolute inset-0">
-              <img class="object-cover object-top w-full h-full" src="/img/pages/ai_form_builder/background-pattern-ai.svg" alt=""/>
-            </div>
+            class="relative max-w-md mx-auto text-center xl:max-w-lg lg:mx-0 lg:flex-auto lg:py-16 lg:text-left"
+          >
+            <span
+              class="bg-white text-xs font-semibold inline-flex items-center shadow-sm ring-blue-200 ring-1 text-blue-600 px-2.5 py-1.5 rounded-full"
+            >
+              <svg
+                aria-hidden="true"
+                class="w-4 h-4"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+              Introducing OpnForm AI
+            </span>
 
-            <div class="relative max-w-md mx-auto text-center xl:max-w-lg lg:mx-0 lg:flex-auto lg:py-16 lg:text-left">
+            <h2
+              class="mt-6 text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl lg:text-4xl"
+            >
+              Say goodbye to tedious form building with OpnForm's new
               <span
-                class="bg-white text-xs font-semibold inline-flex items-center shadow-sm ring-blue-200 ring-1 text-blue-600 px-2.5 py-1.5 rounded-full">
-                <svg aria-hidden="true" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                  fill="currentColor">
-                  <path fill-rule="evenodd"
-                    d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
-                    clip-rule="evenodd" />
-                </svg>
-                Introducing OpnForm AI
-              </span>
-
-              <h2 class="mt-6 text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl lg:text-4xl">
-                Say goodbye to tedious form building with OpnForm's new <span
-                  class="text-transparent bg-clip-text bg-gradient-to-r lg:block from-blue-600 to-blue-300">AI-powered
-                  feature!</span>
-              </h2>
-              <p class="mt-4 text-base font-medium leading-7 text-gray-500 sm:text-lg sm:leading-8">
-                Easily generate a fully working form in seconds with just a simple description.
-              </p>
+                class="text-transparent bg-clip-text bg-gradient-to-r lg:block from-blue-600 to-blue-300"
+              >AI-powered feature!</span>
+            </h2>
+            <p
+              class="mt-4 text-base font-medium leading-7 text-gray-500 sm:text-lg sm:leading-8"
+            >
+              Easily generate a fully working form in seconds with just a simple
+              description.
+            </p>
 
-              <div class="flex justify-center lg:justify-start mt-4">
-              <v-button class="block" v-track.welcome_ai_builder_click :to="{ name: 'forms-create-guest' }" :arrow="true" color="blue">
+            <div class="flex justify-center lg:justify-start mt-4">
+              <v-button
+                v-track.welcome_ai_builder_click
+                class="block"
+                :to="{ name: 'forms-create-guest' }"
+                :arrow="true"
+                color="blue"
+              >
                 Try our AI form builder
               </v-button>
-              </div>
-
-              <ul
-                class="flex flex-wrap items-center justify-center mt-4 gap-4 text-sm font-medium text-gray-900 lg:justify-start">
-                <li class="flex items-center gap-2">
-                  <svg aria-hidden="true" class="w-5 h-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20" fill="currentColor">
-                    <path fill-rule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clip-rule="evenodd" />
-                  </svg>
-                  Create form in minutes
-                </li>
+            </div>
 
-                <li class="flex items-center gap-2">
-                  <svg aria-hidden="true" class="w-5 h-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20" fill="currentColor">
-                    <path fill-rule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clip-rule="evenodd" />
-                  </svg>
-                  Customizations
-                </li>
+            <ul
+              class="flex flex-wrap items-center justify-center mt-4 gap-4 text-sm font-medium text-gray-900 lg:justify-start"
+            >
+              <li class="flex items-center gap-2">
+                <svg
+                  aria-hidden="true"
+                  class="w-5 h-5 text-gray-400 shrink-0"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                Create form in minutes
+              </li>
 
-                <li class="flex items-center gap-2">
-                  <svg aria-hidden="true" class="w-5 h-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20" fill="currentColor">
-                    <path fill-rule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clip-rule="evenodd" />
-                  </svg>
-                  No-coding required
-                </li>
-              </ul>
+              <li class="flex items-center gap-2">
+                <svg
+                  aria-hidden="true"
+                  class="w-5 h-5 text-gray-400 shrink-0"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                Customizations
+              </li>
 
-              <div class="mt-6 sm:mt-8 flex text-center justify-center lg:justify-start">
-<!--                <v-button v-if="!authenticated" class="mr-2 block" :to="{ name: 'forms-create-guest' }" :arrow="true">-->
-<!--                  Get started for free-->
-<!--                </v-button>-->
-<!--                <v-button v-else class="mr-2 block" :to="{ name: 'forms-create' }" :arrow="true">-->
-<!--                  Get started for free-->
-<!--                </v-button>-->
-<!--                <v-button color="light-gray" class="mr-1 block" :to="{ name: 'aiformbuilder' }">-->
-<!--                  Learn more-->
-<!--                </v-button>-->
-              </div>
-            </div>
+              <li class="flex items-center gap-2">
+                <svg
+                  aria-hidden="true"
+                  class="w-5 h-5 text-gray-400 shrink-0"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                No-coding required
+              </li>
+            </ul>
 
             <div
-              class="relative hidden lg:block w-full px-6 mx-auto mt-8 lg:px-0 sm:mt-12 lg:bottom-0 lg:absolute lg:-right-16 xl:right-0 lg:max-w-lg">
-              <img class="rounded-t-2xl ring-1 ring-blue-100 lg:rounded-tr-none w-full"
-              src="/img/pages/ai_form_builder/ai-feature-illustration.svg" alt="App screenshot"/>
-
+              class="mt-6 sm:mt-8 flex text-center justify-center lg:justify-start"
+            >
+              <!--                <v-button v-if="!authenticated" class="mr-2 block" :to="{ name: 'forms-create-guest' }" :arrow="true">-->
+              <!--                  Get started for free-->
+              <!--                </v-button>-->
+              <!--                <v-button v-else class="mr-2 block" :to="{ name: 'forms-create' }" :arrow="true">-->
+              <!--                  Get started for free-->
+              <!--                </v-button>-->
+              <!--                <v-button color="light-gray" class="mr-1 block" :to="{ name: 'aiformbuilder' }">-->
+              <!--                  Learn more-->
+              <!--                </v-button>-->
             </div>
           </div>
+
+          <div
+            class="relative hidden lg:block w-full px-6 mx-auto mt-8 lg:px-0 sm:mt-12 lg:bottom-0 lg:absolute lg:-right-16 xl:right-0 lg:max-w-lg"
+          >
+            <img
+              class="rounded-t-2xl ring-1 ring-blue-100 lg:rounded-tr-none w-full"
+              src="/img/pages/ai_form_builder/ai-feature-illustration.svg"
+              alt="App screenshot"
+            >
+          </div>
         </div>
-      </section>
-    </div>
+      </div>
+    </section>
+  </div>
 </template>
 
 <script>
-import { computed } from 'vue'
-import { useAuthStore } from '../../../stores/auth'
+import { computed } from "vue"
+import { useAuthStore } from "../../../stores/auth"
 
 export default {
-  setup () {
+  props: {},
+  setup() {
     const authStore = useAuthStore()
     return {
-      authenticated : computed(() => authStore.check)
+      authenticated: computed(() => authStore.check),
     }
   },
-  props: {},
   data: () => ({}),
   computed: {},
-  methods: {}
+  methods: {},
 }
 </script>
diff --git a/client/components/pages/welcome/Features.vue b/client/components/pages/welcome/Features.vue
index 10dc71355..47d971329 100644
--- a/client/components/pages/welcome/Features.vue
+++ b/client/components/pages/welcome/Features.vue
@@ -1,120 +1,241 @@
 <template>
-  <div id="features" class="px-4 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
-
-    <div class="mb-16 max-w-xl md:mx-auto sm:text-center lg:max-w-2xl ">
+  <div
+    id="features"
+    class="px-4 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8"
+  >
+    <div class="mb-16 max-w-xl md:mx-auto sm:text-center lg:max-w-2xl">
       <h2
-        class="mb-6 font-sans text-4xl font-semibold leading-none tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl md:mx-auto">
-        The easiest way to create forms. <br/>
+        class="mb-6 font-sans text-4xl font-semibold leading-none tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl md:mx-auto"
+      >
+        The easiest way to create forms. <br>
         Generous unlimited <span class="text-nt-blue">free plan.</span>
       </h2>
       <p class="text-base text-gray-700 dark:text-gray-300 md:text-lg">
-        Need a contact form? Doing a survey? Create a form in 2 minutes and start receiving submissions.
+        Need a contact form? Doing a survey? Create a form in 2 minutes and
+        start receiving submissions.
       </p>
     </div>
 
-    <div class="flex flex-wrap items-center mt-16" :class="{'md:flex-row-reverse':index%2==1}" v-for="(step,index) in [
+    <div
+      v-for="(step, index) in [
         {
           title: 'Create',
-          description: 'Create a form in 2 minutes. More than 10 input types, images, logic and much more.',
-          features: [
-            'Build a simple form in minutes.',
-            'No coding needed.'
-          ],
-          img: '/img/pages/welcome/step-1.jpg'
+          description:
+            'Create a form in 2 minutes. More than 10 input types, images, logic and much more.',
+          features: ['Build a simple form in minutes.', 'No coding needed.'],
+          img: '/img/pages/welcome/step-1.jpg',
         },
         {
           title: 'Share',
-          description: 'Your form has a unique link that you can share everywhere. Send the link, or even embed the form on your website.',
+          description:
+            'Your form has a unique link that you can share everywhere. Send the link, or even embed the form on your website.',
           features: [
             'Share the link to your form',
-            'Embed the form on your website'
+            'Embed the form on your website',
           ],
-          img: '/img/pages/welcome/step-2.jpg'
+          img: '/img/pages/welcome/step-2.jpg',
         },
         {
           title: 'Get Results',
-          description: 'Receive your form submissions. Receive notifications, send confirmations. Export submissions and check your form analytics.',
+          description:
+            'Receive your form submissions. Receive notifications, send confirmations. Export submissions and check your form analytics.',
           features: [
             'Unlimited form submissions for free',
             'Easily export submissions as CSV',
-            'Views & Submissions Analytics'
+            'Views & Submissions Analytics',
           ],
-          img: '/img/pages/welcome/step-3.jpg'
-        }
-      ]" :key="step.title">
-      <div class="w-full md:w-1/2 lg:w-5/12" :class="{'md:pl-4':index%2==1, 'md:pr-4':index%2==0}">
-        <svg v-if="step.title=='Create'" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"
-             stroke="currentColor" class="w-10 h-10 text-nt-blue">
+          img: '/img/pages/welcome/step-3.jpg',
+        },
+      ]"
+      :key="step.title"
+      class="flex flex-wrap items-center mt-16"
+      :class="{ 'md:flex-row-reverse': index % 2 == 1 }"
+    >
+      <div
+        class="w-full md:w-1/2 lg:w-5/12"
+        :class="{ 'md:pl-4': index % 2 == 1, 'md:pr-4': index % 2 == 0 }"
+      >
+        <svg
+          v-if="step.title == 'Create'"
+          viewBox="0 0 48 48"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          stroke="currentColor"
+          class="w-10 h-10 text-nt-blue"
+        >
           <path
             d="M22 7.99997H13.6C10.2397 7.99997 8.55953 7.99997 7.27606 8.65393C6.14708 9.22917 5.2292 10.1471 4.65396 11.276C4 12.5595 4 14.2397 4 17.6V34.4C4 37.7603 4 39.4404 4.65396 40.7239C5.2292 41.8529 6.14708 42.7708 7.27606 43.346C8.55953 44 10.2397 44 13.6 44H30.4C33.7603 44 35.4405 44 36.7239 43.346C37.8529 42.7708 38.7708 41.8529 39.346 40.7239C40 39.4404 40 37.7603 40 34.4V26M15.9999 32H19.349C20.3274 32 20.8166 32 21.2769 31.8894C21.6851 31.7915 22.0753 31.6298 22.4331 31.4105C22.8368 31.1632 23.1827 30.8173 23.8745 30.1255L43 11C44.6569 9.34311 44.6569 6.65682 43 4.99997C41.3431 3.34311 38.6569 3.34311 37 4.99996L17.8745 24.1255C17.1827 24.8173 16.8368 25.1632 16.5894 25.5668C16.3701 25.9247 16.2085 26.3149 16.1105 26.723C15.9999 27.1834 15.9999 27.6726 15.9999 28.6509V32Z"
-            stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+            stroke="currentColor"
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
-        <svg v-else-if="step.title=='Share'" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"
-             stroke="currentColor" class="w-10 h-10 text-nt-blue">
+        <svg
+          v-else-if="step.title == 'Share'"
+          viewBox="0 0 48 48"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          stroke="currentColor"
+          class="w-10 h-10 text-nt-blue"
+        >
           <path
             d="M17.18 27.02L30.84 34.98M30.82 13.02L17.18 20.98M42 10C42 13.3137 39.3137 16 36 16C32.6863 16 30 13.3137 30 10C30 6.68629 32.6863 4 36 4C39.3137 4 42 6.68629 42 10ZM18 24C18 27.3137 15.3137 30 12 30C8.68629 30 6 27.3137 6 24C6 20.6863 8.68629 18 12 18C15.3137 18 18 20.6863 18 24ZM42 38C42 41.3137 39.3137 44 36 44C32.6863 44 30 41.3137 30 38C30 34.6863 32.6863 32 36 32C39.3137 32 42 34.6863 42 38Z"
-            stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
-        <svg v-else-if="step.title=='Share'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-             stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-nt-blue">
-          <path stroke-linecap="round" stroke-linejoin="round"
-                d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/>
-        </svg>
-        <svg v-else-if="step.title=='Get Results'" class="w-10 h-10 text-nt-blue" viewBox="0 0 48 48" fill="none"
-             xmlns="http://www.w3.org/2000/svg">
+        <svg
+          v-else-if="step.title == 'Get Results'"
+          class="w-10 h-10 text-nt-blue"
+          viewBox="0 0 48 48"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path
             d="M42 42H9.2C8.07989 42 7.51984 42 7.09202 41.782C6.71569 41.5903 6.40973 41.2843 6.21799 40.908C6 40.4802 6 39.9201 6 38.8V6M40 16L32.1623 24.3653C31.8652 24.6823 31.7167 24.8409 31.5375 24.9228C31.3794 24.9951 31.2051 25.0249 31.0319 25.0093C30.8357 24.9916 30.6429 24.8915 30.2574 24.6913L23.7426 21.3087C23.3571 21.1085 23.1643 21.0084 22.9681 20.9907C22.7949 20.9751 22.6206 21.0049 22.4625 21.0772C22.2833 21.1591 22.1348 21.3177 21.8377 21.6347L14 30"
-            stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+            stroke="currentColor"
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
 
-
-        <h4 class="my-5 text-2xl font-medium">{{ index + 1 }}. {{ step.title }}</h4>
+        <h4 class="my-5 text-2xl font-medium">
+          {{ index + 1 }}. {{ step.title }}
+        </h4>
         <p class="dark:text-white">
           {{ step.description }}
         </p>
         <div class="mb-8">
-          <div class="flex mt-4" v-for="feature in step.features" :key="feature">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                 stroke="currentColor" class="w-4 h-4 mt-1 mr-2 text-nt-blue">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+          <div
+            v-for="feature in step.features"
+            :key="feature"
+            class="flex mt-4"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="w-4 h-4 mt-1 mr-2 text-nt-blue"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M4.5 12.75l6 6 9-13.5"
+              />
             </svg>
             {{ feature }}
           </div>
         </div>
       </div>
-      <div class="w-full md:w-1/2 lg:w-7/12 flex items-center justify-center relative w-full"
-           :class="{'md:pr-8':index%2==1, 'md:pl-8':index%2==0}">
-        <img loading="lazy" class="block rounded-2xl w-full"
-                 sizes="320px sm:530px"
-                 :src="step.img" alt="product-feature-image"/>
+      <div
+        class="w-full md:w-1/2 lg:w-7/12 flex items-center justify-center relative w-full"
+        :class="{ 'md:pr-8': index % 2 == 1, 'md:pl-8': index % 2 == 0 }"
+      >
+        <img
+          loading="lazy"
+          class="block rounded-2xl w-full"
+          sizes="320px sm:530px"
+          :src="step.img"
+          alt="product-feature-image"
+        >
       </div>
     </div>
 
     <div class="grid md:grid-cols-3 mt-20">
       <div class="mb-8 md:mr-10">
-        <svg class="w-10 h-10 text-nt-blue" viewBox="0 0 44 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M26.0006 40H18.0006M2.58828 9.63978C2.55958 6.73709 4.12455 4.02649 6.6527 2.59999M41.405 9.6398C41.4337 6.7371 39.8687 4.0265 37.3406 2.60001M34.0006 14C34.0006 10.8174 32.7363 7.76516 30.4859 5.51472C28.2354 3.26428 25.1832 2 22.0006 2C18.818 2 15.7658 3.26428 13.5153 5.51472C11.2649 7.76516 10.0006 10.8174 10.0006 14C10.0006 20.1804 8.44154 24.4119 6.69993 27.2108C5.23085 29.5717 4.49631 30.7522 4.52325 31.0815C4.55307 31.4461 4.63032 31.5852 4.92415 31.8032C5.18951 32 6.38578 32 8.7783 32H35.2229C37.6154 32 38.8117 32 39.077 31.8032C39.3709 31.5852 39.4481 31.4461 39.4779 31.0815C39.5049 30.7522 38.7703 29.5718 37.3013 27.2108C35.5597 24.4119 34.0006 20.1804 34.0006 14Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+        <svg
+          class="w-10 h-10 text-nt-blue"
+          viewBox="0 0 44 42"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M26.0006 40H18.0006M2.58828 9.63978C2.55958 6.73709 4.12455 4.02649 6.6527 2.59999M41.405 9.6398C41.4337 6.7371 39.8687 4.0265 37.3406 2.60001M34.0006 14C34.0006 10.8174 32.7363 7.76516 30.4859 5.51472C28.2354 3.26428 25.1832 2 22.0006 2C18.818 2 15.7658 3.26428 13.5153 5.51472C11.2649 7.76516 10.0006 10.8174 10.0006 14C10.0006 20.1804 8.44154 24.4119 6.69993 27.2108C5.23085 29.5717 4.49631 30.7522 4.52325 31.0815C4.55307 31.4461 4.63032 31.5852 4.92415 31.8032C5.18951 32 6.38578 32 8.7783 32H35.2229C37.6154 32 38.8117 32 39.077 31.8032C39.3709 31.5852 39.4481 31.4461 39.4779 31.0815C39.5049 30.7522 38.7703 29.5718 37.3013 27.2108C35.5597 24.4119 34.0006 20.1804 34.0006 14Z"
+            stroke="currentColor"
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
-        <h3 class="my-3 font-semibold">Notifications</h3>
-        <p>Receive notifications directly in Slack or in your mailbox whenever your from has a new submission (if you
-          want to).</p>
+        <h3 class="my-3 font-semibold">
+          Notifications
+        </h3>
+        <p>
+          Receive notifications directly in Slack or in your mailbox whenever
+          your from has a new submission (if you want to).
+        </p>
       </div>
       <div class="mb-8 md:mr-10">
-        <svg class="w-10 h-10 text-nt-blue" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M21.6666 2H27.0666C30.4269 2 32.1071 2 33.3906 2.65396C34.5195 3.2292 35.4374 4.14708 36.0127 5.27606C36.6666 6.55953 36.6666 8.23969 36.6666 11.6V32.4C36.6666 35.7603 36.6666 37.4405 36.0127 38.7239C35.4374 39.8529 34.5195 40.7708 33.3906 41.346C32.1071 42 30.4269 42 27.0666 42H14.2666C10.9063 42 9.22615 42 7.94268 41.346C6.81371 40.7708 5.89583 39.8529 5.32059 38.7239C4.66663 37.4405 4.66663 35.7603 4.66663 32.4V31M28.6666 24H19.6666M28.6666 16H21.6666M28.6666 32H12.6666M8.66663 18V7C8.66663 5.34315 10.0098 4 11.6666 4C13.3235 4 14.6666 5.34315 14.6666 7V18C14.6666 21.3137 11.9803 24 8.66663 24C5.35292 24 2.66663 21.3137 2.66663 18V10" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+        <svg
+          class="w-10 h-10 text-nt-blue"
+          viewBox="0 0 45 44"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M21.6666 2H27.0666C30.4269 2 32.1071 2 33.3906 2.65396C34.5195 3.2292 35.4374 4.14708 36.0127 5.27606C36.6666 6.55953 36.6666 8.23969 36.6666 11.6V32.4C36.6666 35.7603 36.6666 37.4405 36.0127 38.7239C35.4374 39.8529 34.5195 40.7708 33.3906 41.346C32.1071 42 30.4269 42 27.0666 42H14.2666C10.9063 42 9.22615 42 7.94268 41.346C6.81371 40.7708 5.89583 39.8529 5.32059 38.7239C4.66663 37.4405 4.66663 35.7603 4.66663 32.4V31M28.6666 24H19.6666M28.6666 16H21.6666M28.6666 32H12.6666M8.66663 18V7C8.66663 5.34315 10.0098 4 11.6666 4C13.3235 4 14.6666 5.34315 14.6666 7V18C14.6666 21.3137 11.9803 24 8.66663 24C5.35292 24 2.66663 21.3137 2.66663 18V10"
+            stroke="currentColor"
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
-        <h3 class="my-3 font-semibold">File Uploads</h3>
-        <p>Easily add file upload inputs to your forms. Uploaded files are securely stored for you. Up to 5mb!</p>
+        <h3 class="my-3 font-semibold">
+          File Uploads
+        </h3>
+        <p>
+          Easily add file upload inputs to your forms. Uploaded files are
+          securely stored for you. Up to 5mb!
+        </p>
       </div>
       <div class="mb-8 md:mr-10">
-        <svg class="w-10 h-10 text-nt-blue" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M2.33331 22C2.33331 33.0457 11.2876 42 22.3333 42C25.647 42 28.3333 39.3137 28.3333 36V35C28.3333 34.0712 28.3333 33.6067 28.3846 33.2168C28.7391 30.5244 30.8578 28.4058 33.5502 28.0513C33.9401 28 34.4045 28 35.3333 28H36.3333C39.647 28 42.3333 25.3137 42.3333 22C42.3333 10.9543 33.379 2 22.3333 2C11.2876 2 2.33331 10.9543 2.33331 22Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M12.3333 24C13.4379 24 14.3333 23.1046 14.3333 22C14.3333 20.8954 13.4379 20 12.3333 20C11.2287 20 10.3333 20.8954 10.3333 22C10.3333 23.1046 11.2287 24 12.3333 24Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M30.3333 16C31.4379 16 32.3333 15.1046 32.3333 14C32.3333 12.8954 31.4379 12 30.3333 12C29.2287 12 28.3333 12.8954 28.3333 14C28.3333 15.1046 29.2287 16 30.3333 16Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M18.3333 14C19.4379 14 20.3333 13.1046 20.3333 12C20.3333 10.8954 19.4379 10 18.3333 10C17.2287 10 16.3333 10.8954 16.3333 12C16.3333 13.1046 17.2287 14 18.3333 14Z" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+        <svg
+          class="w-10 h-10 text-nt-blue"
+          viewBox="0 0 45 44"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M2.33331 22C2.33331 33.0457 11.2876 42 22.3333 42C25.647 42 28.3333 39.3137 28.3333 36V35C28.3333 34.0712 28.3333 33.6067 28.3846 33.2168C28.7391 30.5244 30.8578 28.4058 33.5502 28.0513C33.9401 28 34.4045 28 35.3333 28H36.3333C39.647 28 42.3333 25.3137 42.3333 22C42.3333 10.9543 33.379 2 22.3333 2C11.2876 2 2.33331 10.9543 2.33331 22Z"
+            stroke="currentColor"
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M12.3333 24C13.4379 24 14.3333 23.1046 14.3333 22C14.3333 20.8954 13.4379 20 12.3333 20C11.2287 20 10.3333 20.8954 10.3333 22C10.3333 23.1046 11.2287 24 12.3333 24Z"
+            stroke="currentColor"
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M30.3333 16C31.4379 16 32.3333 15.1046 32.3333 14C32.3333 12.8954 31.4379 12 30.3333 12C29.2287 12 28.3333 12.8954 28.3333 14C28.3333 15.1046 29.2287 16 30.3333 16Z"
+            stroke="currentColor"
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M18.3333 14C19.4379 14 20.3333 13.1046 20.3333 12C20.3333 10.8954 19.4379 10 18.3333 10C17.2287 10 16.3333 10.8954 16.3333 12C16.3333 13.1046 17.2287 14 18.3333 14Z"
+            stroke="currentColor"
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
-        <h3 class="my-3 font-semibold">Customize Everything</h3>
-        <p>Change form themes, change texts, colors, add images, add custom thank you pages and much more.</p>
+        <h3 class="my-3 font-semibold">
+          Customize Everything
+        </h3>
+        <p>
+          Change form themes, change texts, colors, add images, add custom thank
+          you pages and much more.
+        </p>
       </div>
     </div>
   </div>
@@ -122,10 +243,9 @@
 
 <script>
 export default {
-
   props: {},
   data: () => ({}),
 
-  methods: {}
+  methods: {},
 }
 </script>
diff --git a/client/components/pages/welcome/MoreFeatures.vue b/client/components/pages/welcome/MoreFeatures.vue
index da71f3a05..6c2056a1f 100644
--- a/client/components/pages/welcome/MoreFeatures.vue
+++ b/client/components/pages/welcome/MoreFeatures.vue
@@ -1,84 +1,235 @@
 <template>
-    <div class="bg-gray-50 dark:bg-notion-dark py-8">
-      <div class="md:max-w-5xl md:mx-auto w-full">
-        <div class="my-5 text-center">
-          <h3 class="font-semibold text-3xl">And many more features</h3>
-          <p class="w-full mt-2 mb-8">
-            OpnForm makes form building easy and comes with powerful features.
-          </p>
-          <div class="grid grid-cols-2 md:grid-cols-3 mt-10 mb-5 ml-5 md:ml-0 px-4">
-            <div class="flex font-semibold my-3">
-              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M10.5 3.5H17.8C18.9201 3.5 19.4802 3.5 19.908 3.71799C20.2843 3.90973 20.5903 4.21569 20.782 4.59202C21 5.01984 21 5.57989 21 6.7V8C21 8.93188 21 9.39783 20.8478 9.76537C20.6448 10.2554 20.2554 10.6448 19.7654 10.8478C19.3978 11 18.9319 11 18 11M12.5 18.5H5.2C4.0799 18.5 3.51984 18.5 3.09202 18.282C2.71569 18.0903 2.40973 17.7843 2.21799 17.408C2 16.9802 2 16.4201 2 15.3V14C2 13.0681 2 12.6022 2.15224 12.2346C2.35523 11.7446 2.74458 11.3552 3.23463 11.1522C3.60218 11 4.06812 11 5 11M9.8 13.5H13.2C13.48 13.5 13.62 13.5 13.727 13.4455C13.8211 13.3976 13.8976 13.3211 13.9455 13.227C14 13.12 14 12.98 14 12.7V9.3C14 9.01997 14 8.87996 13.9455 8.773C13.8976 8.67892 13.8211 8.60243 13.727 8.5545C13.62 8.5 13.48 8.5 13.2 8.5H9.8C9.51997 8.5 9.37996 8.5 9.273 8.5545C9.17892 8.60243 9.10243 8.67892 9.0545 8.773C9 8.87996 9 9.01997 9 9.3V12.7C9 12.98 9 13.12 9.0545 13.227C9.10243 13.3211 9.17892 13.3976 9.273 13.4455C9.37996 13.5 9.51997 13.5 9.8 13.5ZM17.3 21H20.7C20.98 21 21.12 21 21.227 20.9455C21.3211 20.8976 21.3976 20.8211 21.4455 20.727C21.5 20.62 21.5 20.48 21.5 20.2V16.8C21.5 16.52 21.5 16.38 21.4455 16.273C21.3976 16.1789 21.3211 16.1024 21.227 16.0545C21.12 16 20.98 16 20.7 16H17.3C17.02 16 16.88 16 16.773 16.0545C16.6789 16.1024 16.6024 16.1789 16.5545 16.273C16.5 16.38 16.5 16.52 16.5 16.8V20.2C16.5 20.48 16.5 20.62 16.5545 20.727C16.6024 20.8211 16.6789 20.8976 16.773 20.9455C16.88 21 17.02 21 17.3 21ZM2.3 6H5.7C5.98003 6 6.12004 6 6.227 5.9455C6.32108 5.89757 6.39757 5.82108 6.4455 5.727C6.5 5.62004 6.5 5.48003 6.5 5.2V1.8C6.5 1.51997 6.5 1.37996 6.4455 1.273C6.39757 1.17892 6.32108 1.10243 6.227 1.0545C6.12004 1 5.98003 1 5.7 1H2.3C2.01997 1 1.87996 1 1.773 1.0545C1.67892 1.10243 1.60243 1.17892 1.5545 1.273C1.5 1.37996 1.5 1.51997 1.5 1.8V5.2C1.5 5.48003 1.5 5.62004 1.5545 5.727C1.60243 5.82108 1.67892 5.89757 1.773 5.9455C1.87996 6 2.01997 6 2.3 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-              Form logic
-            </div>
-            <div class="flex font-semibold my-3">
-              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M1.5 11H21.5M1.5 11C1.5 16.5228 5.97715 21 11.5 21M1.5 11C1.5 5.47715 5.97715 1 11.5 1M21.5 11C21.5 16.5228 17.0228 21 11.5 21M21.5 11C21.5 5.47715 17.0228 1 11.5 1M11.5 1C14.0013 3.73835 15.4228 7.29203 15.5 11C15.4228 14.708 14.0013 18.2616 11.5 21M11.5 1C8.99872 3.73835 7.57725 7.29203 7.5 11C7.57725 14.708 8.99872 18.2616 11.5 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-              URL pre-fill
-            </div>
-            <div class="flex font-semibold my-3">
-              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M7.99999 1L4.99999 19M16 1L13 19M19 6H2M18 14H1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-              Unique submission ID
-            </div>
-            <div class="flex font-semibold my-3">
-              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M10.2429 3.09232C10.6494 3.03223 11.0686 3 11.5004 3C16.6054 3 19.9553 7.50484 21.0807 9.28682C21.2169 9.5025 21.285 9.61034 21.3231 9.77667C21.3518 9.90159 21.3517 10.0987 21.3231 10.2236C21.2849 10.3899 21.2164 10.4985 21.0792 10.7156C20.7793 11.1901 20.3222 11.8571 19.7165 12.5805M6.22432 4.71504C4.06225 6.1817 2.59445 8.21938 1.92111 9.28528C1.78428 9.50187 1.71587 9.61016 1.67774 9.77648C1.6491 9.9014 1.64909 10.0984 1.67771 10.2234C1.71583 10.3897 1.78393 10.4975 1.92013 10.7132C3.04554 12.4952 6.39541 17 11.5004 17C13.5588 17 15.3319 16.2676 16.7888 15.2766M2.50042 1L20.5004 19M9.3791 7.87868C8.8362 8.42157 8.50042 9.17157 8.50042 10C8.50042 11.6569 9.84356 13 11.5004 13C12.3288 13 13.0788 12.6642 13.6217 12.1213" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-              Hidden fields
-            </div>
-            <div class="flex font-semibold my-3">
-              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M14.5 8V6C14.5 3.23858 12.2614 1 9.5 1C6.73858 1 4.5 3.23858 4.5 6V8M9.5 12.5V14.5M6.3 19H12.7C14.3802 19 15.2202 19 15.862 18.673C16.4265 18.3854 16.8854 17.9265 17.173 17.362C17.5 16.7202 17.5 15.8802 17.5 14.2V12.8C17.5 11.1198 17.5 10.2798 17.173 9.63803C16.8854 9.07354 16.4265 8.6146 15.862 8.32698C15.2202 8 14.3802 8 12.7 8H6.3C4.61984 8 3.77976 8 3.13803 8.32698C2.57354 8.6146 2.1146 9.07354 1.82698 9.63803C1.5 10.2798 1.5 11.1198 1.5 12.8V14.2C1.5 15.8802 1.5 16.7202 1.82698 17.362C2.1146 17.9265 2.57354 18.3854 3.13803 18.673C3.77976 19 4.61984 19 6.3 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-              Form password
-            </div>
-            <div class="flex font-semibold my-3">
-              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M16.5 13C14.8431 13 13.5 14.3431 13.5 16C13.5 17.6569 14.8431 19 16.5 19C18.1569 19 19.5 17.6569 19.5 16C19.5 14.3431 18.1569 13 16.5 13ZM16.5 13V6C16.5 5.46957 16.2893 4.96086 15.9142 4.58579C15.5391 4.21071 15.0304 4 14.5 4H11.5M4.5 7C6.15685 7 7.5 5.65685 7.5 4C7.5 2.34315 6.15685 1 4.5 1C2.84315 1 1.5 2.34315 1.5 4C1.5 5.65685 2.84315 7 4.5 7ZM4.5 7V19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-              Webhooks
-            </div>
-            <div class="flex font-semibold my-3">
-              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M13 13L16 10L13 7M8 7L5 10L8 13M6.3 19H14.7C16.3802 19 17.2202 19 17.862 18.673C18.4265 18.3854 18.8854 17.9265 19.173 17.362C19.5 16.7202 19.5 15.8802 19.5 14.2V5.8C19.5 4.11984 19.5 3.27976 19.173 2.63803C18.8854 2.07354 18.4265 1.6146 17.862 1.32698C17.2202 1 16.3802 1 14.7 1H6.3C4.61984 1 3.77976 1 3.13803 1.32698C2.57354 1.6146 2.1146 2.07354 1.82698 2.63803C1.5 3.27976 1.5 4.11984 1.5 5.8V14.2C1.5 15.8802 1.5 16.7202 1.82698 17.362C2.1146 17.9265 2.57354 18.3854 3.13803 18.673C3.77976 19 4.61984 19 6.3 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-              Custom code
-            </div>
-            <div class="flex font-semibold my-3">
-              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M19.5 7H1.5M14.5 1V4M6.5 1V4M10.5 17V11M7.5 14H13.5M6.3 21H14.7C16.3802 21 17.2202 21 17.862 20.673C18.4265 20.3854 18.8854 19.9265 19.173 19.362C19.5 18.7202 19.5 17.8802 19.5 16.2V7.8C19.5 6.11984 19.5 5.27976 19.173 4.63803C18.8854 4.07354 18.4265 3.6146 17.862 3.32698C17.2202 3 16.3802 3 14.7 3H6.3C4.61984 3 3.77976 3 3.13803 3.32698C2.57354 3.6146 2.1146 4.07354 1.82698 4.63803C1.5 5.27976 1.5 6.11984 1.5 7.8V16.2C1.5 17.8802 1.5 18.7202 1.82698 19.362C2.1146 19.9265 2.57354 20.3854 3.13803 20.673C3.77976 21 4.61984 21 6.3 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-              Closing date
-            </div>
-            <div class="flex font-semibold my-3">
-              <svg class="w-5 h-5 mr-2 text-nt-blue" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M9.5 3C10.0523 3 10.5 2.55228 10.5 2C10.5 1.44772 10.0523 1 9.5 1C8.94772 1 8.5 1.44772 8.5 2C8.5 2.55228 8.94772 3 9.5 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M9.5 10C10.0523 10 10.5 9.55228 10.5 9C10.5 8.44772 10.0523 8 9.5 8C8.94772 8 8.5 8.44772 8.5 9C8.5 9.55228 8.94772 10 9.5 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M9.5 17C10.0523 17 10.5 16.5523 10.5 16C10.5 15.4477 10.0523 15 9.5 15C8.94772 15 8.5 15.4477 8.5 16C8.5 16.5523 8.94772 17 9.5 17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M16.5 3C17.0523 3 17.5 2.55228 17.5 2C17.5 1.44772 17.0523 1 16.5 1C15.9477 1 15.5 1.44772 15.5 2C15.5 2.55228 15.9477 3 16.5 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M16.5 10C17.0523 10 17.5 9.55228 17.5 9C17.5 8.44772 17.0523 8 16.5 8C15.9477 8 15.5 8.44772 15.5 9C15.5 9.55228 15.9477 10 16.5 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M16.5 17C17.0523 17 17.5 16.5523 17.5 16C17.5 15.4477 17.0523 15 16.5 15C15.9477 15 15.5 15.4477 15.5 16C15.5 16.5523 15.9477 17 16.5 17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M2.5 3C3.05228 3 3.5 2.55228 3.5 2C3.5 1.44772 3.05228 1 2.5 1C1.94772 1 1.5 1.44772 1.5 2C1.5 2.55228 1.94772 3 2.5 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M2.5 10C3.05228 10 3.5 9.55228 3.5 9C3.5 8.44772 3.05228 8 2.5 8C1.94772 8 1.5 8.44772 1.5 9C1.5 9.55228 1.94772 10 2.5 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M2.5 17C3.05228 17 3.5 16.5523 3.5 16C3.5 15.4477 3.05228 15 2.5 15C1.94772 15 1.5 15.4477 1.5 16C1.5 16.5523 1.94772 17 2.5 17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-              And much more...
-            </div>
+  <div class="bg-gray-50 dark:bg-notion-dark py-8">
+    <div class="md:max-w-5xl md:mx-auto w-full">
+      <div class="my-5 text-center">
+        <h3 class="font-semibold text-3xl">
+          And many more features
+        </h3>
+        <p class="w-full mt-2 mb-8">
+          OpnForm makes form building easy and comes with powerful features.
+        </p>
+        <div
+          class="grid grid-cols-2 md:grid-cols-3 mt-10 mb-5 ml-5 md:ml-0 px-4"
+        >
+          <div class="flex font-semibold my-3">
+            <svg
+              class="w-5 h-5 mr-2 text-nt-blue"
+              viewBox="0 0 23 22"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10.5 3.5H17.8C18.9201 3.5 19.4802 3.5 19.908 3.71799C20.2843 3.90973 20.5903 4.21569 20.782 4.59202C21 5.01984 21 5.57989 21 6.7V8C21 8.93188 21 9.39783 20.8478 9.76537C20.6448 10.2554 20.2554 10.6448 19.7654 10.8478C19.3978 11 18.9319 11 18 11M12.5 18.5H5.2C4.0799 18.5 3.51984 18.5 3.09202 18.282C2.71569 18.0903 2.40973 17.7843 2.21799 17.408C2 16.9802 2 16.4201 2 15.3V14C2 13.0681 2 12.6022 2.15224 12.2346C2.35523 11.7446 2.74458 11.3552 3.23463 11.1522C3.60218 11 4.06812 11 5 11M9.8 13.5H13.2C13.48 13.5 13.62 13.5 13.727 13.4455C13.8211 13.3976 13.8976 13.3211 13.9455 13.227C14 13.12 14 12.98 14 12.7V9.3C14 9.01997 14 8.87996 13.9455 8.773C13.8976 8.67892 13.8211 8.60243 13.727 8.5545C13.62 8.5 13.48 8.5 13.2 8.5H9.8C9.51997 8.5 9.37996 8.5 9.273 8.5545C9.17892 8.60243 9.10243 8.67892 9.0545 8.773C9 8.87996 9 9.01997 9 9.3V12.7C9 12.98 9 13.12 9.0545 13.227C9.10243 13.3211 9.17892 13.3976 9.273 13.4455C9.37996 13.5 9.51997 13.5 9.8 13.5ZM17.3 21H20.7C20.98 21 21.12 21 21.227 20.9455C21.3211 20.8976 21.3976 20.8211 21.4455 20.727C21.5 20.62 21.5 20.48 21.5 20.2V16.8C21.5 16.52 21.5 16.38 21.4455 16.273C21.3976 16.1789 21.3211 16.1024 21.227 16.0545C21.12 16 20.98 16 20.7 16H17.3C17.02 16 16.88 16 16.773 16.0545C16.6789 16.1024 16.6024 16.1789 16.5545 16.273C16.5 16.38 16.5 16.52 16.5 16.8V20.2C16.5 20.48 16.5 20.62 16.5545 20.727C16.6024 20.8211 16.6789 20.8976 16.773 20.9455C16.88 21 17.02 21 17.3 21ZM2.3 6H5.7C5.98003 6 6.12004 6 6.227 5.9455C6.32108 5.89757 6.39757 5.82108 6.4455 5.727C6.5 5.62004 6.5 5.48003 6.5 5.2V1.8C6.5 1.51997 6.5 1.37996 6.4455 1.273C6.39757 1.17892 6.32108 1.10243 6.227 1.0545C6.12004 1 5.98003 1 5.7 1H2.3C2.01997 1 1.87996 1 1.773 1.0545C1.67892 1.10243 1.60243 1.17892 1.5545 1.273C1.5 1.37996 1.5 1.51997 1.5 1.8V5.2C1.5 5.48003 1.5 5.62004 1.5545 5.727C1.60243 5.82108 1.67892 5.89757 1.773 5.9455C1.87996 6 2.01997 6 2.3 6Z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            Form logic
+          </div>
+          <div class="flex font-semibold my-3">
+            <svg
+              class="w-5 h-5 mr-2 text-nt-blue"
+              viewBox="0 0 23 22"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M1.5 11H21.5M1.5 11C1.5 16.5228 5.97715 21 11.5 21M1.5 11C1.5 5.47715 5.97715 1 11.5 1M21.5 11C21.5 16.5228 17.0228 21 11.5 21M21.5 11C21.5 5.47715 17.0228 1 11.5 1M11.5 1C14.0013 3.73835 15.4228 7.29203 15.5 11C15.4228 14.708 14.0013 18.2616 11.5 21M11.5 1C8.99872 3.73835 7.57725 7.29203 7.5 11C7.57725 14.708 8.99872 18.2616 11.5 21"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            URL pre-fill
+          </div>
+          <div class="flex font-semibold my-3">
+            <svg
+              class="w-5 h-5 mr-2 text-nt-blue"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.99999 1L4.99999 19M16 1L13 19M19 6H2M18 14H1"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            Unique submission ID
+          </div>
+          <div class="flex font-semibold my-3">
+            <svg
+              class="w-5 h-5 mr-2 text-nt-blue"
+              viewBox="0 0 23 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10.2429 3.09232C10.6494 3.03223 11.0686 3 11.5004 3C16.6054 3 19.9553 7.50484 21.0807 9.28682C21.2169 9.5025 21.285 9.61034 21.3231 9.77667C21.3518 9.90159 21.3517 10.0987 21.3231 10.2236C21.2849 10.3899 21.2164 10.4985 21.0792 10.7156C20.7793 11.1901 20.3222 11.8571 19.7165 12.5805M6.22432 4.71504C4.06225 6.1817 2.59445 8.21938 1.92111 9.28528C1.78428 9.50187 1.71587 9.61016 1.67774 9.77648C1.6491 9.9014 1.64909 10.0984 1.67771 10.2234C1.71583 10.3897 1.78393 10.4975 1.92013 10.7132C3.04554 12.4952 6.39541 17 11.5004 17C13.5588 17 15.3319 16.2676 16.7888 15.2766M2.50042 1L20.5004 19M9.3791 7.87868C8.8362 8.42157 8.50042 9.17157 8.50042 10C8.50042 11.6569 9.84356 13 11.5004 13C12.3288 13 13.0788 12.6642 13.6217 12.1213"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            Hidden fields
+          </div>
+          <div class="flex font-semibold my-3">
+            <svg
+              class="w-5 h-5 mr-2 text-nt-blue"
+              viewBox="0 0 19 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M14.5 8V6C14.5 3.23858 12.2614 1 9.5 1C6.73858 1 4.5 3.23858 4.5 6V8M9.5 12.5V14.5M6.3 19H12.7C14.3802 19 15.2202 19 15.862 18.673C16.4265 18.3854 16.8854 17.9265 17.173 17.362C17.5 16.7202 17.5 15.8802 17.5 14.2V12.8C17.5 11.1198 17.5 10.2798 17.173 9.63803C16.8854 9.07354 16.4265 8.6146 15.862 8.32698C15.2202 8 14.3802 8 12.7 8H6.3C4.61984 8 3.77976 8 3.13803 8.32698C2.57354 8.6146 2.1146 9.07354 1.82698 9.63803C1.5 10.2798 1.5 11.1198 1.5 12.8V14.2C1.5 15.8802 1.5 16.7202 1.82698 17.362C2.1146 17.9265 2.57354 18.3854 3.13803 18.673C3.77976 19 4.61984 19 6.3 19Z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            Form password
+          </div>
+          <div class="flex font-semibold my-3">
+            <svg
+              class="w-5 h-5 mr-2 text-nt-blue"
+              viewBox="0 0 21 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M16.5 13C14.8431 13 13.5 14.3431 13.5 16C13.5 17.6569 14.8431 19 16.5 19C18.1569 19 19.5 17.6569 19.5 16C19.5 14.3431 18.1569 13 16.5 13ZM16.5 13V6C16.5 5.46957 16.2893 4.96086 15.9142 4.58579C15.5391 4.21071 15.0304 4 14.5 4H11.5M4.5 7C6.15685 7 7.5 5.65685 7.5 4C7.5 2.34315 6.15685 1 4.5 1C2.84315 1 1.5 2.34315 1.5 4C1.5 5.65685 2.84315 7 4.5 7ZM4.5 7V19"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            Webhooks
+          </div>
+          <div class="flex font-semibold my-3">
+            <svg
+              class="w-5 h-5 mr-2 text-nt-blue"
+              viewBox="0 0 21 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M13 13L16 10L13 7M8 7L5 10L8 13M6.3 19H14.7C16.3802 19 17.2202 19 17.862 18.673C18.4265 18.3854 18.8854 17.9265 19.173 17.362C19.5 16.7202 19.5 15.8802 19.5 14.2V5.8C19.5 4.11984 19.5 3.27976 19.173 2.63803C18.8854 2.07354 18.4265 1.6146 17.862 1.32698C17.2202 1 16.3802 1 14.7 1H6.3C4.61984 1 3.77976 1 3.13803 1.32698C2.57354 1.6146 2.1146 2.07354 1.82698 2.63803C1.5 3.27976 1.5 4.11984 1.5 5.8V14.2C1.5 15.8802 1.5 16.7202 1.82698 17.362C2.1146 17.9265 2.57354 18.3854 3.13803 18.673C3.77976 19 4.61984 19 6.3 19Z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            Custom code
+          </div>
+          <div class="flex font-semibold my-3">
+            <svg
+              class="w-5 h-5 mr-2 text-nt-blue"
+              viewBox="0 0 21 22"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M19.5 7H1.5M14.5 1V4M6.5 1V4M10.5 17V11M7.5 14H13.5M6.3 21H14.7C16.3802 21 17.2202 21 17.862 20.673C18.4265 20.3854 18.8854 19.9265 19.173 19.362C19.5 18.7202 19.5 17.8802 19.5 16.2V7.8C19.5 6.11984 19.5 5.27976 19.173 4.63803C18.8854 4.07354 18.4265 3.6146 17.862 3.32698C17.2202 3 16.3802 3 14.7 3H6.3C4.61984 3 3.77976 3 3.13803 3.32698C2.57354 3.6146 2.1146 4.07354 1.82698 4.63803C1.5 5.27976 1.5 6.11984 1.5 7.8V16.2C1.5 17.8802 1.5 18.7202 1.82698 19.362C2.1146 19.9265 2.57354 20.3854 3.13803 20.673C3.77976 21 4.61984 21 6.3 21Z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            Closing date
+          </div>
+          <div class="flex font-semibold my-3">
+            <svg
+              class="w-5 h-5 mr-2 text-nt-blue"
+              viewBox="0 0 19 18"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.5 3C10.0523 3 10.5 2.55228 10.5 2C10.5 1.44772 10.0523 1 9.5 1C8.94772 1 8.5 1.44772 8.5 2C8.5 2.55228 8.94772 3 9.5 3Z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M9.5 10C10.0523 10 10.5 9.55228 10.5 9C10.5 8.44772 10.0523 8 9.5 8C8.94772 8 8.5 8.44772 8.5 9C8.5 9.55228 8.94772 10 9.5 10Z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M9.5 17C10.0523 17 10.5 16.5523 10.5 16C10.5 15.4477 10.0523 15 9.5 15C8.94772 15 8.5 15.4477 8.5 16C8.5 16.5523 8.94772 17 9.5 17Z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M16.5 3C17.0523 3 17.5 2.55228 17.5 2C17.5 1.44772 17.0523 1 16.5 1C15.9477 1 15.5 1.44772 15.5 2C15.5 2.55228 15.9477 3 16.5 3Z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M16.5 10C17.0523 10 17.5 9.55228 17.5 9C17.5 8.44772 17.0523 8 16.5 8C15.9477 8 15.5 8.44772 15.5 9C15.5 9.55228 15.9477 10 16.5 10Z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M16.5 17C17.0523 17 17.5 16.5523 17.5 16C17.5 15.4477 17.0523 15 16.5 15C15.9477 15 15.5 15.4477 15.5 16C15.5 16.5523 15.9477 17 16.5 17Z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M2.5 3C3.05228 3 3.5 2.55228 3.5 2C3.5 1.44772 3.05228 1 2.5 1C1.94772 1 1.5 1.44772 1.5 2C1.5 2.55228 1.94772 3 2.5 3Z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M2.5 10C3.05228 10 3.5 9.55228 3.5 9C3.5 8.44772 3.05228 8 2.5 8C1.94772 8 1.5 8.44772 1.5 9C1.5 9.55228 1.94772 10 2.5 10Z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M2.5 17C3.05228 17 3.5 16.5523 3.5 16C3.5 15.4477 3.05228 15 2.5 15C1.94772 15 1.5 15.4477 1.5 16C1.5 16.5523 1.94772 17 2.5 17Z"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            And much more...
           </div>
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    props: {},
-    data: () => ({}),
-    methods: {}
+  props: {},
+  data: () => ({}),
+  methods: {},
 }
 </script>
diff --git a/client/components/pages/welcome/TemplatesSlider.vue b/client/components/pages/welcome/TemplatesSlider.vue
index 62f0b4e18..a6bcc00d6 100644
--- a/client/components/pages/welcome/TemplatesSlider.vue
+++ b/client/components/pages/welcome/TemplatesSlider.vue
@@ -1,33 +1,50 @@
 <template>
   <div class="mx-auto mb-12 max-w-7xl px-6 lg:px-8">
     <div class="mx-auto max-w-2xl text-center">
-      <h2 class="text-lg font-semibold leading-8 tracking-tight text-blue-500 ">
+      <h2 class="text-lg font-semibold leading-8 tracking-tight text-blue-500">
         Single or multi-page forms
       </h2>
-      <p class="mt-2 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
+      <p
+        class="mt-2 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl"
+      >
         Discover our beautiful templates
       </p>
-      <p class="mt-3 px-8 text-center text-lg text-gray-400 ">
+      <p class="mt-3 px-8 text-center text-lg text-gray-400">
         If you need inspiration, checkout our templates.
       </p>
     </div>
     <div class="my-3 flex justify-center">
-      <NuxtLink :to="{name:'templates'}">
+      <NuxtLink :to="{ name: 'templates' }">
         See all templates
-        <svg class="h-4 w-4 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path fill-rule="evenodd"
-                d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                clip-rule="evenodd"
+        <svg
+          class="h-4 w-4 inline"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+            clip-rule="evenodd"
           />
         </svg>
       </NuxtLink>
     </div>
 
-    <div v-if="sliderTemplates.length > 0"
-         class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-128px),transparent_100%)]"
+    <div
+      v-if="sliderTemplates.length > 0"
+      class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-128px),transparent_100%)]"
     >
-      <ul ref="templates-slider" class="flex justify-center md:justify-start animate-infinite-scroll">
-        <li v-for="(template, i) in sliderTemplates" :key="template.id" class="mx-4 w-72 h-auto">
+      <ul
+        ref="templates-slider"
+        class="flex justify-center md:justify-start animate-infinite-scroll"
+      >
+        <li
+          v-for="(template) in sliderTemplates"
+          :key="template.id"
+          class="mx-4 w-72 h-auto"
+        >
           <single-template :template="template" />
         </li>
       </ul>
@@ -36,18 +53,18 @@
 </template>
 
 <script>
-import { computed } from 'vue'
-import SingleTemplate from '../templates/SingleTemplate.vue'
+import { computed } from "vue"
+import SingleTemplate from "../templates/SingleTemplate.vue"
 
 export default {
   components: { SingleTemplate },
-  setup () {
+  setup() {
     const templatesStore = useTemplatesStore()
     templatesStore.initTypesAndIndustries()
 
     onMounted(() => {
       if (templatesStore.getAll.length < 10) {
-        opnFetch('templates',{query: {limit: 10}}).then((data) => {
+        opnFetch("templates", { query: { limit: 10 } }).then((data) => {
           templatesStore.set(data)
         })
       }
@@ -56,29 +73,29 @@ export default {
     return {
       templatesStore,
       allLoaded: computed(() => templatesStore.allLoaded),
-      sliderTemplates: computed(() => templatesStore.getAll.slice(0, 10))
+      sliderTemplates: computed(() => templatesStore.getAll.slice(0, 10)),
     }
   },
 
   watch: {
     sliderTemplates: {
       deep: true,
-      handler () {
+      handler() {
         this.$nextTick(() => {
           this.setInfinite()
         })
-      }
-    }
+      },
+    },
   },
 
   methods: {
-    setInfinite () {
-      const ul = this.$refs['templates-slider']
+    setInfinite() {
+      const ul = this.$refs["templates-slider"]
       if (ul) {
-        ul.insertAdjacentHTML('afterend', ul.outerHTML)
-        ul.nextSibling.setAttribute('aria-hidden', 'true')
+        ul.insertAdjacentHTML("afterend", ul.outerHTML)
+        ul.nextSibling.setAttribute("aria-hidden", "true")
       }
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/pages/welcome/Testimonials.vue b/client/components/pages/welcome/Testimonials.vue
index d808c521b..02ce069d8 100644
--- a/client/components/pages/welcome/Testimonials.vue
+++ b/client/components/pages/welcome/Testimonials.vue
@@ -12,8 +12,6 @@
 </template>
 
 <script>
-import { useDarkMode } from '~/lib/forms/public-page.js'
-
 export default {
   props: {
     featuresOnly: {
diff --git a/client/components/tools/StopImpersonation.vue b/client/components/tools/StopImpersonation.vue
index b5aaf6304..c4e10c367 100644
--- a/client/components/tools/StopImpersonation.vue
+++ b/client/components/tools/StopImpersonation.vue
@@ -1,22 +1,30 @@
 <template>
   <transition name="fade">
-    <button v-if="isImpersonating"
-            class="cursor-pointer group hover:bg-blue-50 text-gray-600 py-2 px-5 fixed bottom-0 left-0 rounded-tr-md bg-white border-t border-r"
-            @click="reverseImpersonation"
+    <button
+      v-if="isImpersonating"
+      class="cursor-pointer group hover:bg-blue-50 text-gray-600 py-2 px-5 fixed bottom-0 left-0 rounded-tr-md bg-white border-t border-r"
+      @click="reverseImpersonation"
     >
       <template v-if="!loading">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 -mt-1 group-hover:text-blue-500 inline text-gray-400"
-             fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5 -mt-1 group-hover:text-blue-500 inline text-gray-400"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="2"
         >
-          <path stroke-linecap="round" stroke-linejoin="round"
-                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
           />
         </svg>
         Stop Impersonation
       </template>
       <template v-else>
         <div class="px-6">
-          <Loader class="h-4 w-4 inline"/>
+          <Loader class="h-4 w-4 inline" />
         </div>
       </template>
     </button>
@@ -24,9 +32,9 @@
 </template>
 
 <script>
-import {computed} from 'vue'
-import {useAuthStore} from '../../stores/auth.js';
-import {useWorkspacesStore} from '../../stores/workspaces.js';
+import { computed } from "vue"
+import { useAuthStore } from "../../stores/auth.js"
+import { useWorkspacesStore } from "../../stores/workspaces.js"
 
 export default {
   setup() {
@@ -40,13 +48,12 @@ export default {
   },
 
   data: () => ({
-    loading: false
+    loading: false,
   }),
 
   computed: {},
 
-  mounted() {
-  },
+  mounted() {},
 
   methods: {
     async reverseImpersonation() {
@@ -54,13 +61,13 @@ export default {
       this.authStore.stopImpersonating()
 
       // Fetch the user.
-      const userData = await opnFetch('user')
+      const userData = await opnFetch("user")
       this.authStore.setUser(userData)
       const workspaces = await fetchAllWorkspaces()
       this.workspacesStore.set(workspaces.data.value)
-      this.$router.push({name: 'settings-admin'})
+      this.$router.push({ name: "settings-admin" })
       this.loading = false
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/vendor/FeatureBase.vue b/client/components/vendor/FeatureBase.vue
index c74c03082..73b543e96 100644
--- a/client/components/vendor/FeatureBase.vue
+++ b/client/components/vendor/FeatureBase.vue
@@ -1,35 +1,39 @@
 <template></template>
 <script setup>
-import {onMounted} from "vue";
-import { default as _has } from 'lodash/has'
+import { onMounted } from "vue"
+import { default as _has } from "lodash/has"
 
-const scriptLoaded = ref(false);
+const scriptLoaded = ref(false)
 const authStore = useAuthStore()
 const user = computed(() => authStore.user)
 const isImpersonating = computed(() => authStore.isImpersonating)
-const featureBaseOrganization = useRuntimeConfig().public.featureBaseOrganization;
+const featureBaseOrganization =
+  useRuntimeConfig().public.featureBaseOrganization
 
 const loadScript = () => {
-  if (scriptLoaded.value || !user.value || !featureBaseOrganization) return;
-  const script = document.createElement("script");
-  script.src = "https://do.featurebase.app/js/sdk.js";
-  script.id = "featurebase-sdk";
-  document.head.appendChild(script);
-  scriptLoaded.value = true;
-};
+  if (scriptLoaded.value || !user.value || !featureBaseOrganization) return
+  const script = document.createElement("script")
+  script.src = "https://do.featurebase.app/js/sdk.js"
+  script.id = "featurebase-sdk"
+  document.head.appendChild(script)
+  scriptLoaded.value = true
+}
 
 const setupForUser = () => {
-  if (import.meta.server || !user.value || !featureBaseOrganization ||isImpersonating.value) return
-  window.Featurebase(
-    "identify",
-    {
-      organization: featureBaseOrganization,
-      email: user.value.email,
-      name: user.value.name,
-      id: user.value.id.toString(),
-      profilePicture: user.value.photo_url
-    }
-  );
+  if (
+    import.meta.server ||
+    !user.value ||
+    !featureBaseOrganization ||
+    isImpersonating.value
+  )
+    return
+  window.Featurebase("identify", {
+    organization: featureBaseOrganization,
+    email: user.value.email,
+    name: user.value.name,
+    id: user.value.id.toString(),
+    profilePicture: user.value.photo_url,
+  })
 
   window.Featurebase("initialize_changelog_widget", {
     organization: featureBaseOrganization,
@@ -37,7 +41,7 @@ const setupForUser = () => {
     theme: "light",
     alwaysShow: true,
     fullscreenPopup: true,
-    usersName: user.value?.name
+    usersName: user.value?.name,
   })
 
   window.Featurebase("initialize_feedback_widget", {
@@ -45,18 +49,21 @@ const setupForUser = () => {
     theme: "light",
     placement: "right",
     email: user.value?.email,
-    usersName: user.value?.name
-  });
+    usersName: user.value?.name,
+  })
 }
 
 onMounted(() => {
   if (import.meta.server) return
 
   // Setup base
-  if (!_has(window, 'Featurebase') || typeof window.Featurebase !== "function") {
+  if (
+    !_has(window, "Featurebase") ||
+    typeof window.Featurebase !== "function"
+  ) {
     window.Featurebase = function () {
-      (window.Featurebase.q = window.Featurebase.q || []).push(arguments);
-    };
+      (window.Featurebase.q = window.Featurebase.q || []).push(arguments)
+    }
   }
 
   if (!user.value) return
@@ -69,8 +76,7 @@ watch(user, (val) => {
 
   loadScript()
   setupForUser()
-});
-
+})
 </script>
 
 <style>
diff --git a/client/components/vendor/appsumo/AppSumoBilling.vue b/client/components/vendor/appsumo/AppSumoBilling.vue
index d98ed28af..f57622cc4 100644
--- a/client/components/vendor/appsumo/AppSumoBilling.vue
+++ b/client/components/vendor/appsumo/AppSumoBilling.vue
@@ -1,21 +1,48 @@
 <template>
-  <div v-if="user.active_license" class="border p-5 shadow-md rounded-md">
+  <div
+    v-if="user.active_license"
+    class="border p-5 shadow-md rounded-md"
+  >
     <div class="w-auto flex flex-col items-center">
-      <img src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px]" alt="AppSumo"/>
-
-      <img src="/img/appsumo/as-Select-dark.png" class="max-w-[150px]" alt="AppSumo"/>
+      <img
+        src="/img/appsumo/as-taco-white-bg.png"
+        class="max-w-[60px]"
+        alt="AppSumo"
+      >
 
+      <img
+        src="/img/appsumo/as-Select-dark.png"
+        class="max-w-[150px]"
+        alt="AppSumo"
+      >
     </div>
     <p class="mt-6">
-      Your AppSumo <span class="font-semibold">lifetime deal tier {{ licenseTier }}</span> license is active. Here's a reminder of your plan details:
+      Your AppSumo
+      <span class="font-semibold">lifetime deal tier {{ licenseTier }}</span>
+      license is active. Here's a reminder of your plan details:
     </p>
     <ul class="list-disc pl-5 mt-4">
-      <li>Number of Forms: <span class="font-semibold">{{ tierFeatures.form_quantity }}</span></li>
-      <li>Custom domains: <span class="font-semibold">{{ tierFeatures.domain_names }}</span></li>
-      <li>File Size Uploads: <span class="font-semibold">{{ tierFeatures.file_upload_size }}</span></li>
+      <li>
+        Number of Forms:
+        <span class="font-semibold">{{ tierFeatures.form_quantity }}</span>
+      </li>
+      <li>
+        Custom domains:
+        <span class="font-semibold">{{ tierFeatures.domain_names }}</span>
+      </li>
+      <li>
+        File Size Uploads:
+        <span class="font-semibold">{{ tierFeatures.file_upload_size }}</span>
+      </li>
     </ul>
     <div class="w-max">
-      <v-button color="outline-gray" shade="lighter" class="mt-4 block" href="https://appsumo.com/account/products/" target="_blank">
+      <v-button
+        color="outline-gray"
+        shade="lighter"
+        class="mt-4 block"
+        href="https://appsumo.com/account/products/"
+        target="_blank"
+      >
         Mangage in AppSumo
       </v-button>
     </div>
@@ -23,60 +50,59 @@
 </template>
 
 <script>
-import { computed } from 'vue'
-import { useAuthStore } from '../../../stores/auth'
-import VButton from '~/components/global/VButton.vue'
+import { computed } from "vue"
+import { useAuthStore } from "../../../stores/auth"
+import VButton from "~/components/global/VButton.vue"
 
 export default {
-  name: 'AppSumoBilling',
+  name: "AppSumoBilling",
   components: { VButton },
 
-  setup () {
+  setup() {
     const authStore = useAuthStore()
     return {
-      user : computed(() => authStore.user),
+      user: computed(() => authStore.user),
     }
   },
 
-  data () {
-    return {
-    }
+  data() {
+    return {}
   },
 
   computed: {
-    licenseTier () {
+    licenseTier() {
       return this.user?.active_license?.meta?.tier
     },
-    tierFeatures () {
+    tierFeatures() {
       if (!this.licenseTier) return {}
       return {
         1: {
-          form_quantity: 'Unlimited',
-          file_upload_size: '25mb',
-          domain_names: '5'
+          form_quantity: "Unlimited",
+          file_upload_size: "25mb",
+          domain_names: "5",
         },
         2: {
-          form_quantity: 'Unlimited',
-          file_upload_size: '50mb',
-          domain_names: '25'
+          form_quantity: "Unlimited",
+          file_upload_size: "50mb",
+          domain_names: "25",
         },
         3: {
-          form_quantity: 'Unlimited',
-          file_upload_size: '75mb',
-          domain_names: 'Unlimited'
-        }
+          form_quantity: "Unlimited",
+          file_upload_size: "75mb",
+          domain_names: "Unlimited",
+        },
       }[this.licenseTier]
-    }
+    },
   },
 
   watch: {},
 
-  mounted () {},
+  mounted() {},
 
-  created () {},
+  created() {},
 
-  destroyed () {},
+  unmounted() {},
 
-  methods: {}
+  methods: {},
 }
 </script>
diff --git a/client/components/vendor/appsumo/AppSumoRegister.vue b/client/components/vendor/appsumo/AppSumoRegister.vue
index 082d5905d..0429f6908 100644
--- a/client/components/vendor/appsumo/AppSumoRegister.vue
+++ b/client/components/vendor/appsumo/AppSumoRegister.vue
@@ -1,34 +1,57 @@
 <template>
-  <div v-if="hasValidLicense" class="p-6 bg-white border shadow-md rounded-md">
-    <img src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px] mx-auto" alt="AppSumo"/>
+  <div
+    v-if="hasValidLicense"
+    class="p-6 bg-white border shadow-md rounded-md"
+  >
+    <img
+      src="/img/appsumo/as-taco-white-bg.png"
+      class="max-w-[60px] mx-auto"
+      alt="AppSumo"
+    >
 
-    <img src="/img/appsumo/as-Select-dark.png" class="max-w-[300px] mx-auto" alt="AppSumo"/>
+    <img
+      src="/img/appsumo/as-Select-dark.png"
+      class="max-w-[300px] mx-auto"
+      alt="AppSumo"
+    >
 
     <p class="mt-6">
-      <span class="text-green-500">We found your AppSumo Lifetime deal license!</span> Just complete the registration form to finalize the activation of
-      your license.
+      <span class="text-green-500">We found your AppSumo Lifetime deal license!</span>
+      Just complete the registration form to finalize the activation of your
+      license.
     </p>
   </div>
-  <div v-else-if="hasLicenseError" class="p-6 bg-white border border-red-500 shadow-md rounded-md">
-    <img src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px] mx-auto" alt="AppSumo"/>
+  <div
+    v-else-if="hasLicenseError"
+    class="p-6 bg-white border border-red-500 shadow-md rounded-md"
+  >
+    <img
+      src="/img/appsumo/as-taco-white-bg.png"
+      class="max-w-[60px] mx-auto"
+      alt="AppSumo"
+    >
 
-    <img src="/img/appsumo/as-Select-dark.png" class="max-w-[300px] mx-auto" alt="AppSumo"/>
+    <img
+      src="/img/appsumo/as-Select-dark.png"
+      class="max-w-[300px] mx-auto"
+      alt="AppSumo"
+    >
 
     <p class="mt-6">
-      <span class="text-red-600">Invalid AppSumo license</span>. The license was probably already attached to an OpnForm account. Please contact support.
+      <span class="text-red-600">Invalid AppSumo license</span>. The license was
+      probably already attached to an OpnForm account. Please contact support.
     </p>
   </div>
 </template>
 
 <script>
 export default {
+  name: "AppSumoRegister",
 
-  name: 'AppSumoRegister',
-
-  data () {
+  data() {
     return {
       hasValidLicense: false,
-      hasLicenseError: false
+      hasLicenseError: false,
     }
   },
 
@@ -36,19 +59,23 @@ export default {
 
   watch: {},
 
-  mounted () {
-    if (this.$route.query.appsumo_license !== undefined && this.$route.query.appsumo_license) {
+  mounted() {
+    if (
+      this.$route.query.appsumo_license !== undefined &&
+      this.$route.query.appsumo_license
+    ) {
       this.hasValidLicense = true
-    } else if (this.$route.query.appsumo_error !== undefined && this.$route.query.appsumo_error) {
+    } else if (
+      this.$route.query.appsumo_error !== undefined &&
+      this.$route.query.appsumo_error
+    ) {
       this.hasLicenseError = true
     }
   },
 
-  created () {
-  },
-  destroyed () {
-  },
+  created() {},
+  unmounted() {},
 
-  methods: {}
+  methods: {},
 }
 </script>
diff --git a/client/composables/forms/initForm.js b/client/composables/forms/initForm.js
index d5a867d9b..7e4fa4354 100644
--- a/client/composables/forms/initForm.js
+++ b/client/composables/forms/initForm.js
@@ -1,35 +1,38 @@
-import {generateUUID} from "~/lib/utils.js";
+import { generateUUID } from "~/lib/utils.js"
 
 export const initForm = (defaultValue = {}, withDefaultProperties = false) => {
   return useForm({
-    title: 'My Form',
+    title: "My Form",
     description: null,
-    visibility: 'public',
+    visibility: "public",
     workspace_id: null,
-    properties: withDefaultProperties ? getDefaultProperties() :[],
+    properties: withDefaultProperties ? getDefaultProperties() : [],
 
     // Customization
-    theme: 'default',
-    width: 'centered',
-    dark_mode: 'auto',
-    color: '#3B82F6',
+    theme: "default",
+    width: "centered",
+    dark_mode: "auto",
+    color: "#3B82F6",
     hide_title: false,
     no_branding: false,
     uppercase_labels: true,
     transparent_background: false,
     closes_at: null,
-    closed_text: 'This form has now been closed by its owner and does not accept submissions anymore.',
+    closed_text:
+      "This form has now been closed by its owner and does not accept submissions anymore.",
     auto_save: true,
 
     // Submission
-    submit_button_text: 'Submit',
+    submit_button_text: "Submit",
     re_fillable: false,
-    re_fill_button_text: 'Fill Again',
-    submitted_text: 'Amazing, we saved your answers. Thank you for your time and have a great day!',
+    re_fill_button_text: "Fill Again",
+    submitted_text:
+      "Amazing, we saved your answers. Thank you for your time and have a great day!",
     use_captcha: false,
     max_submissions_count: null,
-    max_submissions_reached_text: 'This form has now reached the maximum number of allowed submissions and is now closed.',
-    editable_submissions_button_text: 'Edit submission',
+    max_submissions_reached_text:
+      "This form has now reached the maximum number of allowed submissions and is now closed.",
+    editable_submissions_button_text: "Edit submission",
     confetti_on_submission: false,
 
     // Security & Privacy
@@ -38,31 +41,31 @@ export const initForm = (defaultValue = {}, withDefaultProperties = false) => {
     // Custom SEO
     seo_meta: {},
 
-    ...defaultValue
+    ...defaultValue,
   })
 }
 
-function getDefaultProperties () {
+function getDefaultProperties() {
   return [
     {
-      name: 'Name',
-      type: 'text',
+      name: "Name",
+      type: "text",
       hidden: false,
       required: true,
-      id: generateUUID()
+      id: generateUUID(),
     },
     {
-      name: 'Email',
-      type: 'email',
+      name: "Email",
+      type: "email",
       hidden: false,
-      id: generateUUID()
+      id: generateUUID(),
     },
     {
-      name: 'Message',
-      type: 'text',
+      name: "Message",
+      type: "text",
       hidden: false,
       multi_lines: true,
-      id: generateUUID()
-    }
+      id: generateUUID(),
+    },
   ]
 }
diff --git a/client/composables/forms/pendingSubmission.js b/client/composables/forms/pendingSubmission.js
index 7ea31a92c..033dac256 100644
--- a/client/composables/forms/pendingSubmission.js
+++ b/client/composables/forms/pendingSubmission.js
@@ -1,10 +1,11 @@
-import {hash} from "~/lib/utils.js"
-import {useStorage} from "@vueuse/core"
+import { hash } from "~/lib/utils.js"
+import { useStorage } from "@vueuse/core"
 
 export const pendingSubmission = (form) => {
-
   const formPendingSubmissionKey = computed(() => {
-    return (form) ? form.form_pending_submission_key + '-' + hash(window.location.href) : ''
+    return form
+      ? form.form_pending_submission_key + "-" + hash(window.location.href)
+      : ""
   })
 
   const enabled = computed(() => {
@@ -13,7 +14,8 @@ export const pendingSubmission = (form) => {
 
   const set = (value) => {
     if (import.meta.server || !enabled.value) return
-    useStorage(formPendingSubmissionKey.value).value = value === null ? value : JSON.stringify(value)
+    useStorage(formPendingSubmissionKey.value).value =
+      value === null ? value : JSON.stringify(value)
   }
 
   const remove = () => {
@@ -30,6 +32,6 @@ export const pendingSubmission = (form) => {
     enabled,
     set,
     get,
-    remove
+    remove,
   }
 }
diff --git a/client/composables/forms/validatePropertiesLogic.js b/client/composables/forms/validatePropertiesLogic.js
index 2e232652b..d9b6d625d 100644
--- a/client/composables/forms/validatePropertiesLogic.js
+++ b/client/composables/forms/validatePropertiesLogic.js
@@ -1,12 +1,12 @@
-import FormPropertyLogicRule from "~/lib/forms/FormPropertyLogicRule.js";
+import FormPropertyLogicRule from "~/lib/forms/FormPropertyLogicRule.js"
 
 export const validatePropertiesLogic = (properties) => {
   properties.forEach((field) => {
-    const isValid = (new FormPropertyLogicRule(field)).isValid()
+    const isValid = new FormPropertyLogicRule(field).isValid()
     if (!isValid) {
       field.logic = {
         conditions: null,
-        actions: []
+        actions: [],
       }
     }
   })
diff --git a/client/composables/lib/vForm/Errors.js b/client/composables/lib/vForm/Errors.js
index e4aa61342..3e076ccc6 100644
--- a/client/composables/lib/vForm/Errors.js
+++ b/client/composables/lib/vForm/Errors.js
@@ -1,75 +1,74 @@
-
 function arrayWrap(value) {
-  return Array.isArray(value) ? value : [value];
+  return Array.isArray(value) ? value : [value]
 }
 
 export default class Errors {
   constructor() {
-    this.errors = {};
+    this.errors = {}
   }
 
   set(field, messages = undefined) {
-    if (typeof field === 'object') {
-      this.errors = field;
+    if (typeof field === "object") {
+      this.errors = field
     } else {
-      this.set({ ...this.errors, [field]: arrayWrap(messages) });
+      this.set({ ...this.errors, [field]: arrayWrap(messages) })
     }
   }
 
   all() {
-    return this.errors;
+    return this.errors
   }
 
   has(field) {
-    return Object.prototype.hasOwnProperty.call(this.errors, field);
+    return Object.prototype.hasOwnProperty.call(this.errors, field)
   }
 
   hasAny(...fields) {
-    return fields.some(field => this.has(field));
+    return fields.some((field) => this.has(field))
   }
 
   any() {
-    return Object.keys(this.errors).length > 0;
+    return Object.keys(this.errors).length > 0
   }
 
   get(field) {
     if (this.has(field)) {
-      return this.getAll(field)[0];
+      return this.getAll(field)[0]
     }
   }
 
   getAll(field) {
-    return arrayWrap(this.errors[field] || []);
+    return arrayWrap(this.errors[field] || [])
   }
 
   only(...fields) {
-    const messages = [];
+    const messages = []
 
     fields.forEach((field) => {
-      const message = this.get(field);
+      const message = this.get(field)
       if (message) {
-        messages.push(message);
+        messages.push(message)
       }
-    });
+    })
 
-    return messages;
+    return messages
   }
 
   flatten() {
-    return Object.values(this.errors).reduce((a, b) => a.concat(b), []);
+    return Object.values(this.errors).reduce((a, b) => a.concat(b), [])
   }
 
   clear(field = undefined) {
-    const errors = {};
+    const errors = {}
 
     if (field) {
       Object.keys(this.errors).forEach((key) => {
         if (key !== field) {
-          errors[key] = this.errors[key];
+          errors[key] = this.errors[key]
         }
-      });
+      })
     }
 
-    this.set(errors);
+    this.set(errors)
   }
 }
diff --git a/client/composables/lib/vForm/Form.js b/client/composables/lib/vForm/Form.js
index d538cf0fa..04156188c 100644
--- a/client/composables/lib/vForm/Form.js
+++ b/client/composables/lib/vForm/Form.js
@@ -1,170 +1,182 @@
-import {serialize} from 'object-to-formdata';
-import Errors from './Errors';
-import cloneDeep from 'clone-deep';
-import {opnFetch} from "~/composables/useOpnApi.js";
+import { serialize } from "object-to-formdata"
+import Errors from "./Errors"
+import cloneDeep from "clone-deep"
+import { opnFetch } from "~/composables/useOpnApi.js"
 function hasFiles(data) {
-  return data instanceof File ||
+  return (
+    data instanceof File ||
     data instanceof Blob ||
     data instanceof FileList ||
-    (typeof data === 'object' && data !== null && Object.values(data).find(value => hasFiles(value)) !== undefined);
+    (typeof data === "object" &&
+      data !== null &&
+      Object.values(data).find((value) => hasFiles(value)) !== undefined)
+  )
 }
 
 class Form {
   constructor(data = {}) {
-    this.originalData = {};
-    this.busy = false;
-    this.successful = false;
-    this.recentlySuccessful = false;
-    this.recentlySuccessfulTimeoutId = undefined;
-    this.errors = new Errors();
-    this.update(data);
-  }
-
-  static errorMessage = 'Something went wrong. Please try again.';
-  static recentlySuccessfulTimeout = 2000;
-  static ignore = ['busy', 'successful', 'errors', 'originalData', 'recentlySuccessful', 'recentlySuccessfulTimeoutId'];
+    this.originalData = {}
+    this.busy = false
+    this.successful = false
+    this.recentlySuccessful = false
+    this.recentlySuccessfulTimeoutId = undefined
+    this.errors = new Errors()
+    this.update(data)
+  }
+
+  static errorMessage = "Something went wrong. Please try again."
+  static recentlySuccessfulTimeout = 2000
+  static ignore = [
+    "busy",
+    "successful",
+    "errors",
+    "originalData",
+    "recentlySuccessful",
+    "recentlySuccessfulTimeoutId",
+  ]
 
   static make(augment) {
-    return new this(augment);
+    return new this(augment)
   }
 
   update(data) {
-    this.originalData = Object.assign({}, this.originalData, cloneDeep(data));
-    Object.assign(this, data);
+    this.originalData = Object.assign({}, this.originalData, cloneDeep(data))
+    Object.assign(this, data)
   }
 
   fill(data = {}) {
     this.keys().forEach((key) => {
-      this[key] = data[key];
-    });
+      this[key] = data[key]
+    })
   }
 
   data() {
-    return this.keys().reduce((data, key) => (
-      {...data, [key]: this[key]}
-    ), {});
+    return this.keys().reduce(
+      (data, key) => ({ ...data, [key]: this[key] }),
+      {},
+    )
   }
 
   keys() {
-    return Object.keys(this).filter(key => !Form.ignore.includes(key));
+    return Object.keys(this).filter((key) => !Form.ignore.includes(key))
   }
 
   startProcessing() {
-    this.errors.clear();
-    this.busy = true;
-    this.successful = false;
-    this.recentlySuccessful = false;
-    clearTimeout(this.recentlySuccessfulTimeoutId);
+    this.errors.clear()
+    this.busy = true
+    this.successful = false
+    this.recentlySuccessful = false
+    clearTimeout(this.recentlySuccessfulTimeoutId)
   }
 
   finishProcessing() {
-    this.busy = false;
-    this.successful = true;
-    this.recentlySuccessful = true;
+    this.busy = false
+    this.successful = true
+    this.recentlySuccessful = true
     this.recentlySuccessfulTimeoutId = setTimeout(() => {
-      this.recentlySuccessful = false;
-    }, Form.recentlySuccessfulTimeout);
+      this.recentlySuccessful = false
+    }, Form.recentlySuccessfulTimeout)
   }
 
   clear() {
-    this.errors.clear();
-    this.successful = false;
-    this.recentlySuccessful = false;
-    clearTimeout(this.recentlySuccessfulTimeoutId);
+    this.errors.clear()
+    this.successful = false
+    this.recentlySuccessful = false
+    clearTimeout(this.recentlySuccessfulTimeoutId)
   }
 
   reset() {
     Object.keys(this)
-      .filter(key => !Form.ignore.includes(key))
+      .filter((key) => !Form.ignore.includes(key))
       .forEach((key) => {
-        this[key] = JSON.parse(JSON.stringify(this.originalData[key]));
-      });
+        this[key] = JSON.parse(JSON.stringify(this.originalData[key]))
+      })
   }
 
   get(url, config = {}) {
-    return this.submit('get', url, config);
+    return this.submit("get", url, config)
   }
 
   post(url, config = {}) {
-    return this.submit('post', url, config);
+    return this.submit("post", url, config)
   }
 
   patch(url, config = {}) {
-    return this.submit('patch', url, config);
+    return this.submit("patch", url, config)
   }
 
   put(url, config = {}) {
-    return this.submit('put', url, config);
+    return this.submit("put", url, config)
   }
 
   delete(url, config = {}) {
-    return this.submit('delete', url, config);
+    return this.submit("delete", url, config)
   }
 
   submit(method, url, config = {}) {
-    this.startProcessing();
+    this.startProcessing()
 
     config = {
       body: {},
       params: {},
       url: url,
       method: method,
-      ...config
-    };
+      ...config,
+    }
 
-    if (method.toLowerCase() === 'get') {
-      config.params = {...this.data(), ...config.params};
+    if (method.toLowerCase() === "get") {
+      config.params = { ...this.data(), ...config.params }
     } else {
-      config.body = {...this.data(), ...config.data};
+      config.body = { ...this.data(), ...config.data }
 
       if (hasFiles(config.data) && !config.transformRequest) {
-        config.transformRequest = [data => serialize(data)];
+        config.transformRequest = [(data) => serialize(data)]
       }
     }
     return new Promise((resolve, reject) => {
       opnFetch(config.url, config)
         .then((data) => {
-          this.finishProcessing();
-          resolve(data);
-        }).catch((error) => {
-          this.handleErrors(error);
+          this.finishProcessing()
+          resolve(data)
+        })
+        .catch((error) => {
+          this.handleErrors(error)
           reject(error)
         })
-    });
+    })
   }
 
   handleErrors(error) {
-    this.busy = false;
+    this.busy = false
 
     if (error) {
-      this.errors.set(this.extractErrors(error.data));
+      this.errors.set(this.extractErrors(error.data))
     }
   }
 
   extractErrors(data) {
-    if (!data || typeof data !== 'object') {
-      return {error: Form.errorMessage};
-
+    if (!data || typeof data !== "object") {
+      return { error: Form.errorMessage }
     }
 
     if (data.errors) {
-      return {...data.errors};
+      return { ...data.errors }
     }
 
     if (data.message) {
-      return {error: data.message};
+      return { error: data.message }
     }
 
-    return {...data};
+    return { ...data }
   }
 
   onKeydown(event) {
-    const target = event.target;
+    const target = event.target
 
     if (target.name) {
-      this.errors.clear(target.name);
+      this.errors.clear(target.name)
     }
   }
 }
 
-export default Form;
+export default Form
diff --git a/client/composables/stores/useContentStore.js b/client/composables/stores/useContentStore.js
index 8f1cbaa02..28a570192 100644
--- a/client/composables/stores/useContentStore.js
+++ b/client/composables/stores/useContentStore.js
@@ -1,8 +1,6 @@
-
 // Composable with all the logic to encapsulate a default content store
 
-export const useContentStore = (mapKey = 'id') => {
-
+export const useContentStore = (mapKey = "id") => {
   const content = ref(new Map())
   const loading = ref(false)
 
@@ -12,7 +10,9 @@ export const useContentStore = (mapKey = 'id') => {
   })
   const getByKey = (key) => {
     if (Array.isArray(key)) {
-      return key.map((k) => content.value.get(k)).filter((item) => item !== undefined)
+      return key
+        .map((k) => content.value.get(k))
+        .filter((item) => item !== undefined)
     }
     return content.value.get(key)
   }
@@ -21,7 +21,7 @@ export const useContentStore = (mapKey = 'id') => {
 
   // Actions
   function set(items) {
-    content.value = new Map
+    content.value = new Map()
     save(items)
   }
 
@@ -33,7 +33,7 @@ export const useContentStore = (mapKey = 'id') => {
     })
   }
   function remove(item) {
-    content.value.delete( typeof item === 'object' ? item[mapKey] : item)
+    content.value.delete(typeof item === "object" ? item[mapKey] : item)
   }
 
   function startLoading() {
@@ -60,6 +60,6 @@ export const useContentStore = (mapKey = 'id') => {
     remove,
     startLoading,
     stopLoading,
-    resetState
+    resetState,
   }
 }
diff --git a/client/composables/useAlert.js b/client/composables/useAlert.js
index ecfe570f1..e0357d3b1 100644
--- a/client/composables/useAlert.js
+++ b/client/composables/useAlert.js
@@ -1,44 +1,43 @@
 const { notify } = useNotification()
 
 export const useAlert = () => {
-
   function success(message, autoClose = 10000) {
     notify({
-      title: 'Success',
+      title: "Success",
       text: message,
-      type: 'success',
-      duration: autoClose
+      type: "success",
+      duration: autoClose,
     })
   }
 
   function error(message, autoClose = 10000) {
     notify({
-      title: 'Error',
+      title: "Error",
       text: message,
-      type: 'error',
-      duration: autoClose
+      type: "error",
+      duration: autoClose,
     })
   }
 
   function warning(message, autoClose = 10000) {
     notify({
-      title: 'Warning',
+      title: "Warning",
       text: message,
-      type: 'warning',
-      duration: autoClose
+      type: "warning",
+      duration: autoClose,
     })
   }
 
-  function confirm(message, success, failure = ()=>{}, autoClose = 10000) {
+  function confirm(message, success, failure = () => {}, autoClose = 10000) {
     notify({
-      title: 'Confirm',
+      title: "Confirm",
       text: message,
-      type: 'confirm',
+      type: "confirm",
       duration: autoClose,
       data: {
         success,
-        failure
-      }
+        failure,
+      },
     })
   }
 
@@ -46,6 +45,6 @@ export const useAlert = () => {
     success,
     error,
     warning,
-    confirm
+    confirm,
   }
 }
diff --git a/client/composables/useAmplitude.js b/client/composables/useAmplitude.js
index 1bb2b05e1..19a598a6a 100644
--- a/client/composables/useAmplitude.js
+++ b/client/composables/useAmplitude.js
@@ -1,21 +1,21 @@
-import amplitude from 'amplitude-js'
+import amplitude from "amplitude-js"
 
 export const useAmplitude = () => {
   const config = useRuntimeConfig()
   const amplitudeCode = config.public.amplitudeCode
-  const amplitudeClient = amplitudeCode ? amplitude.getInstance() : null;
+  const amplitudeClient = amplitudeCode ? amplitude.getInstance() : null
   if (amplitudeClient) {
     amplitudeClient.init(amplitudeCode)
   }
 
   const logEvent = function (eventName, eventData) {
-    if (!config.public.env === 'production' || !amplitudeClient) {
-      console.log('[DEBUG] Amplitude logged event:', eventName, eventData)
+    if (!config.public.env === "production" || !amplitudeClient) {
+      console.log("[DEBUG] Amplitude logged event:", eventName, eventData)
       return
     }
 
-    if (eventData && typeof eventData !== 'object') {
-      throw new Error('Amplitude event value must be an object.')
+    if (eventData && typeof eventData !== "object") {
+      throw new Error("Amplitude event value must be an object.")
     }
 
     amplitudeClient.logEvent(eventName, eventData)
@@ -27,14 +27,13 @@ export const useAmplitude = () => {
     amplitudeClient.setUserProperties({
       email: user.email,
       subscribed: user.is_subscribed,
-      enterprise_subscription: user.has_enterprise_subscription
+      enterprise_subscription: user.has_enterprise_subscription,
     })
   }
 
-
   return {
     logEvent,
     setUser,
-    amplitude: amplitudeClient
+    amplitude: amplitudeClient,
   }
 }
diff --git a/client/composables/useConfetti.js b/client/composables/useConfetti.js
index 92b700748..d07290a37 100644
--- a/client/composables/useConfetti.js
+++ b/client/composables/useConfetti.js
@@ -1,22 +1,22 @@
-import { ref, onUnmounted } from 'vue'
+import { ref, onUnmounted } from "vue"
 
 export const useConfetti = () => {
   let timeoutId = ref(null)
   const nuxtApp = useNuxtApp()
   const $confetti = nuxtApp.vueApp.config.globalProperties.$confetti
-  
-  function play(duration=3000) {
+
+  function play(duration = 3000) {
     $confetti.start({ defaultSize: 6 })
-    timeoutId = setTimeout(() => {
+    timeoutId.value = setTimeout(() => {
       $confetti.stop()
     }, duration)
   }
 
   onUnmounted(() => {
-    if (timeoutId) clearTimeout(timeoutId)
+    if (timeoutId.value) clearTimeout(timeoutId)
   })
 
   return {
-    play
+    play,
   }
 }
diff --git a/client/composables/useCrisp.js b/client/composables/useCrisp.js
index f21d4b5c4..308c8f2da 100644
--- a/client/composables/useCrisp.js
+++ b/client/composables/useCrisp.js
@@ -1,5 +1,4 @@
 export const useCrisp = () => {
-
   let crisp = import.meta.client ? window.Crisp : null
 
   function openChat() {
@@ -35,29 +34,32 @@ export const useCrisp = () => {
     crisp.chat.setHelpdeskView()
   }
 
-  function openHelpdeskArticle(articleSlug, locale = 'en') {
+  function openHelpdeskArticle(articleSlug, locale = "en") {
     if (!crisp) return
-    crisp.chat.openHelpdeskArticle(locale, articleSlug);
+    crisp.chat.openHelpdeskArticle(locale, articleSlug)
   }
 
   function sendTextMessage(message) {
     if (!crisp) return
-    crisp.message.send('text', message)
+    crisp.message.send("text", message)
   }
 
   function setUser(user) {
     if (!crisp) return
-    crisp.user.setEmail(user.email);
-    crisp.user.setNickname(user.name);
+    crisp.user.setEmail(user.email)
+    crisp.user.setNickname(user.name)
     crisp.session.setData({
       user_id: user.id,
-      'pro-subscription': user?.is_subscribed ?? false,
-      'stripe-id': user?.stripe_id ?? '',
-      'subscription': user?.has_enterprise_subscription ? 'enterprise' : 'pro'
-    });
+      "pro-subscription": user?.is_subscribed ?? false,
+      "stripe-id": user?.stripe_id ?? "",
+      subscription: user?.has_enterprise_subscription ? "enterprise" : "pro",
+    })
 
     if (user?.is_subscribed ?? false) {
-      setSegments(['subscribed', user?.has_enterprise_subscription ? 'enterprise' : 'pro'])
+      setSegments([
+        "subscribed",
+        user?.has_enterprise_subscription ? "enterprise" : "pro",
+      ])
     }
   }
 
@@ -82,6 +84,6 @@ export const useCrisp = () => {
     openHelpdeskArticle,
     sendTextMessage,
     pushEvent,
-    setUser
+    setUser,
   }
 }
diff --git a/client/composables/useOpnApi.js b/client/composables/useOpnApi.js
index c278a2894..8eab47e3e 100644
--- a/client/composables/useOpnApi.js
+++ b/client/composables/useOpnApi.js
@@ -1,20 +1,25 @@
-import {getDomain, getHost, customDomainUsed} from "~/lib/utils.js";
+import { getDomain, getHost, customDomainUsed } from "~/lib/utils.js"
 
 function addAuthHeader(request, options) {
   const authStore = useAuthStore()
   if (authStore.token) {
-    options.headers = {Authorization: `Bearer ${authStore.token}`, ...options.headers}
+    options.headers = {
+      Authorization: `Bearer ${authStore.token}`,
+      ...options.headers,
+    }
   }
 }
 
 function addPasswordToFormRequest(request, options) {
-  if (!request || !request.startsWith('/forms/')) return
+  if (!request || !request.startsWith("/forms/")) return
 
-  const slug = request.split('/')[2]
+  const slug = request.split("/")[2]
 
-  const passwordCookie = useCookie('password-' + slug, {maxAge: 60 * 60 * 24 * 30}) // 30 days
-  if (slug !== undefined && slug !== '' && passwordCookie.value !== undefined) {
-    options.headers['form-password'] = passwordCookie.value
+  const passwordCookie = useCookie("password-" + slug, {
+    maxAge: 60 * 60 * 24 * 30,
+  }) // 30 days
+  if (slug !== undefined && slug !== "" && passwordCookie.value !== undefined) {
+    options.headers["form-password"] = passwordCookie.value
   }
 }
 
@@ -23,7 +28,7 @@ function addPasswordToFormRequest(request, options) {
  */
 function addCustomDomainHeader(request, options) {
   if (!customDomainUsed()) return
-  options.headers['x-custom-domain'] = getDomain(getHost())
+  options.headers["x-custom-domain"] = getDomain(getHost())
 }
 
 export function getOpnRequestsOptions(request, opts) {
@@ -31,16 +36,16 @@ export function getOpnRequestsOptions(request, opts) {
 
   if (opts.body && opts.body instanceof FormData) {
     opts.headers = {
-      'charset': 'utf-8',
+      charset: "utf-8",
       ...opts.headers,
     }
   }
 
-  opts.headers = {accept: 'application/json', ...opts.headers}
+  opts.headers = { accept: "application/json", ...opts.headers }
 
   // Authenticate requests coming from the server
   if (import.meta.server && config.apiSecret) {
-    opts.headers['x-api-secret'] = config.apiSecret
+    opts.headers["x-api-secret"] = config.apiSecret
   }
 
   addAuthHeader(request, opts)
@@ -50,24 +55,25 @@ export function getOpnRequestsOptions(request, opts) {
   if (!opts.baseURL) opts.baseURL = config.privateApiBase || config.public.apiBase
 
   return {
-    async onResponseError({response}) {
+    async onResponseError({ response }) {
       const authStore = useAuthStore()
 
-      const {status} = response
+      const { status } = response
       if (status === 401) {
         if (authStore.check) {
           console.log("Logging out due to 401")
           authStore.logout()
-          useRouter().push({name: 'login'})
+          useRouter().push({ name: "login" })
         }
       } else if (status === 420) {
         // If invalid domain, redirect to main domain
-        window.location.href = config.public.appUrl + '?utm_source=failed_custom_domain_redirect'
+        window.location.href =
+          config.public.appUrl + "?utm_source=failed_custom_domain_redirect"
       } else if (status >= 500) {
-        console.error('Request error', status)
+        console.error("Request error", status)
       }
     },
-    ...opts
+    ...opts,
   }
 }
 
diff --git a/client/composables/useOpnSeoMeta.js b/client/composables/useOpnSeoMeta.js
index d07dd5247..371630dc5 100644
--- a/client/composables/useOpnSeoMeta.js
+++ b/client/composables/useOpnSeoMeta.js
@@ -1,16 +1,22 @@
 export const useOpnSeoMeta = (meta) => {
   return useSeoMeta({
-    ...meta.title ? {
-      ogTitle: meta.title,
-      twitterTitle: meta.title,
-    } : {},
-    ...meta.description ? {
-      ogDescription: meta.description,
-      twitterDescription: meta.description,
-    } : {},
-    ...meta.ogImage ? {
-      twitterImage: meta.ogImage,
-    } : {},
+    ...(meta.title
+      ? {
+          ogTitle: meta.title,
+          twitterTitle: meta.title,
+        }
+      : {}),
+    ...(meta.description
+      ? {
+          ogDescription: meta.description,
+          twitterDescription: meta.description,
+        }
+      : {}),
+    ...(meta.ogImage
+      ? {
+          twitterImage: meta.ogImage,
+        }
+      : {}),
     ...meta,
   })
 }
diff --git a/client/error.vue b/client/error.vue
index 18d33b5f5..47024026e 100644
--- a/client/error.vue
+++ b/client/error.vue
@@ -3,14 +3,21 @@
     <NuxtLayout>
       <div class="flex mt-6">
         <div class="w-full md:w-2/3 md:mx-auto md:max-w-md">
-          <img alt="Nice plant as we have nothing else to show!" src="/img/icons/plant.png" class="w-56 mb-5"/>
+          <img
+            alt="Nice plant as we have nothing else to show!"
+            src="/img/icons/plant.png"
+            class="w-56 mb-5"
+          >
 
           <h1 class="mb-4 font-semibold text-3xl text-gray-900">
             Page Not Found
           </h1>
 
           <div class="links">
-            <NuxtLink :to="{ name: 'index' }" class="hover:underline text-gray-700">
+            <NuxtLink
+              :to="{ name: 'index' }"
+              class="hover:underline text-gray-700"
+            >
               Go Home
             </NuxtLink>
           </div>
@@ -22,6 +29,6 @@
 
 <script setup>
 useOpnSeoMeta({
-  title: '404 - Page not found'
+  title: "404 - Page not found",
 })
 </script>
diff --git a/client/layouts/basic.vue b/client/layouts/basic.vue
index 435de3d7d..1a0ce72f8 100644
--- a/client/layouts/basic.vue
+++ b/client/layouts/basic.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="basic-layout flex items-center justify-center m-0">
-    <slot/>
+    <slot />
   </div>
 </template>
 
@@ -16,7 +16,7 @@
     padding: 0 25px;
     font-size: 12px;
     font-weight: 600;
-    letter-spacing: .1rem;
+    letter-spacing: 0.1rem;
     text-decoration: none;
     text-transform: uppercase;
   }
diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index 648fac20a..26e4cf9fe 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -2,7 +2,6 @@
   <div class="main-layout min-h-screen flex flex-col">
     <Navbar />
 
-    <slot class="flex-grow">
-    </slot>
+    <slot class="flex-grow" />
   </div>
 </template>
diff --git a/client/lib/file-uploads.js b/client/lib/file-uploads.js
index 7b9e4ab48..515315f0a 100644
--- a/client/lib/file-uploads.js
+++ b/client/lib/file-uploads.js
@@ -1,37 +1,40 @@
-
-async function storeLocalFile(file, options={}) {
+async function storeLocalFile(file) {
   let formData = new FormData()
-  formData.append('file', file)
-  const response = await opnFetch('/upload-file', {
-    method: 'POST',
-    body: formData
+  formData.append("file", file)
+  const response = await opnFetch("/upload-file", {
+    method: "POST",
+    body: formData,
   })
-  response.extension = file.name.split('.').pop()
+  response.extension = file.name.split(".").pop()
   return response
 }
 
 export const storeFile = async (file, options = {}) => {
-  if(!useRuntimeConfig().public.s3Enabled) return storeLocalFile(file, options)
+  if (!useRuntimeConfig().public.s3Enabled)
+    return storeLocalFile(file, options)
 
-  const response = await opnFetch(options.signedStorageUrl || 'vapor/signed-storage-url', {
-    method: 'POST',
-    body: options.data,
-    bucket: options.bucket || '',
-    content_type: options.contentType || file.type,
-    expires: options.expires || '',
-    visibility: options.visibility || '',
-    baseURL: options.baseURL || null,
-    headers: options.headers || {},
-    ...options.options
-  })
+  const response = await opnFetch(
+    options.signedStorageUrl || "vapor/signed-storage-url",
+    {
+      method: "POST",
+      body: options.data,
+      bucket: options.bucket || "",
+      content_type: options.contentType || file.type,
+      expires: options.expires || "",
+      visibility: options.visibility || "",
+      baseURL: options.baseURL || null,
+      headers: options.headers || {},
+      ...options.options,
+    },
+  )
 
   // Upload to S3
-  await useFetch(response.url,{
-    method: 'PUT',
+  await useFetch(response.url, {
+    method: "PUT",
     body: file,
   })
 
-  response.extension = file.name.split('.').pop()
+  response.extension = file.name.split(".").pop()
 
   return response
 }
diff --git a/client/lib/forms/FormLogicConditionChecker.js b/client/lib/forms/FormLogicConditionChecker.js
index 9bf7288bf..6772f06c3 100644
--- a/client/lib/forms/FormLogicConditionChecker.js
+++ b/client/lib/forms/FormLogicConditionChecker.js
@@ -1,24 +1,27 @@
-export function conditionsMet (conditions, formData) {
+export function conditionsMet(conditions, formData) {
   if (conditions === undefined || conditions === null) {
     return false
   }
 
   // If it's not a group, just a single condition
   if (conditions.operatorIdentifier === undefined) {
-    return propertyConditionMet(conditions.value, conditions.value ? formData[conditions.value.property_meta.id] : null)
+    return propertyConditionMet(
+      conditions.value,
+      conditions.value ? formData[conditions.value.property_meta.id] : null,
+    )
   }
 
-  if (conditions.operatorIdentifier === 'and') {
+  if (conditions.operatorIdentifier === "and") {
     let isvalid = true
-    conditions.children.forEach(childrenCondition => {
+    conditions.children.forEach((childrenCondition) => {
       if (!conditionsMet(childrenCondition, formData)) {
         isvalid = false
       }
     })
     return isvalid
-  } else if (conditions.operatorIdentifier === 'or') {
+  } else if (conditions.operatorIdentifier === "or") {
     let isvalid = false
-    conditions.children.forEach(childrenCondition => {
+    conditions.children.forEach((childrenCondition) => {
       if (conditionsMet(childrenCondition, formData)) {
         isvalid = true
       }
@@ -26,302 +29,344 @@ export function conditionsMet (conditions, formData) {
     return isvalid
   }
 
-  throw new Error('Unexcepted operatorIdentifier:' + conditions.operatorIdentifier)
+  throw new Error(
+    "Unexcepted operatorIdentifier:" + conditions.operatorIdentifier,
+  )
 }
 
-function propertyConditionMet (propertyCondition, value) {
+function propertyConditionMet(propertyCondition, value) {
   if (!propertyCondition) {
     return false
   }
   switch (propertyCondition.property_meta.type) {
-    case 'text':
-    case 'url':
-    case 'email':
-    case 'phone_number':
+    case "text":
+    case "url":
+    case "email":
+    case "phone_number":
       return textConditionMet(propertyCondition, value)
-    case 'number':
-    case 'rating':
-    case 'scale':
-    case 'slider':
+    case "number":
+    case "rating":
+    case "scale":
+    case "slider":
       return numberConditionMet(propertyCondition, value)
-    case 'checkbox':
+    case "checkbox":
       return checkboxConditionMet(propertyCondition, value)
-    case 'select':
+    case "select":
       return selectConditionMet(propertyCondition, value)
-    case 'date':
+    case "date":
       return dateConditionMet(propertyCondition, value)
-    case 'multi_select':
+    case "multi_select":
       return multiSelectConditionMet(propertyCondition, value)
-    case 'files':
+    case "files":
       return filesConditionMet(propertyCondition, value)
   }
   return false
 }
 
-function checkEquals (condition, fieldValue) {
+function checkEquals(condition, fieldValue) {
   return condition.value === fieldValue
 }
 
-function checkContains (condition, fieldValue) {
-  return (fieldValue) ? fieldValue.includes(condition.value) : false
+function checkContains(condition, fieldValue) {
+  return fieldValue ? fieldValue.includes(condition.value) : false
 }
 
-function checkListContains (condition, fieldValue) {
+function checkListContains(condition, fieldValue) {
   if (!fieldValue) return false
 
   if (Array.isArray(condition.value)) {
-    return condition.value.every(r => fieldValue.includes(r))
+    return condition.value.every((r) => fieldValue.includes(r))
   } else {
     return fieldValue.includes(condition.value)
   }
 }
 
-function checkStartsWith (condition, fieldValue) {
+function checkStartsWith(condition, fieldValue) {
   return fieldValue?.startsWith(condition.value)
 }
 
-function checkendsWith (condition, fieldValue) {
+function checkendsWith(condition, fieldValue) {
   return fieldValue?.endsWith(condition.value)
 }
 
-function checkIsEmpty (condition, fieldValue) {
-  return (!fieldValue || fieldValue.length === 0)
+function checkIsEmpty(condition, fieldValue) {
+  return !fieldValue || fieldValue.length === 0
 }
 
-function checkGreaterThan (condition, fieldValue) {
-  return (condition.value && fieldValue && parseFloat(fieldValue) > parseFloat(condition.value))
+function checkGreaterThan(condition, fieldValue) {
+  return (
+    condition.value &&
+    fieldValue &&
+    parseFloat(fieldValue) > parseFloat(condition.value)
+  )
 }
 
-function checkGreaterThanEqual (condition, fieldValue) {
-  return (condition.value && fieldValue && parseFloat(fieldValue) >= parseFloat(condition.value))
+function checkGreaterThanEqual(condition, fieldValue) {
+  return (
+    condition.value &&
+    fieldValue &&
+    parseFloat(fieldValue) >= parseFloat(condition.value)
+  )
 }
 
-function checkLessThan (condition, fieldValue) {
-  return (condition.value && fieldValue && parseFloat(fieldValue) < parseFloat(condition.value))
+function checkLessThan(condition, fieldValue) {
+  return (
+    condition.value &&
+    fieldValue &&
+    parseFloat(fieldValue) < parseFloat(condition.value)
+  )
 }
 
-function checkLessThanEqual (condition, fieldValue) {
-  return (condition.value && fieldValue && parseFloat(fieldValue) <= parseFloat(condition.value))
+function checkLessThanEqual(condition, fieldValue) {
+  return (
+    condition.value &&
+    fieldValue &&
+    parseFloat(fieldValue) <= parseFloat(condition.value)
+  )
 }
 
-function checkBefore (condition, fieldValue) {
-  return (condition.value && fieldValue && fieldValue > condition.value)
+function checkBefore(condition, fieldValue) {
+  return condition.value && fieldValue && fieldValue > condition.value
 }
 
-function checkAfter (condition, fieldValue) {
-  return (condition.value && fieldValue && fieldValue < condition.value)
+function checkAfter(condition, fieldValue) {
+  return condition.value && fieldValue && fieldValue < condition.value
 }
 
-function checkOnOrBefore (condition, fieldValue) {
-  return (condition.value && fieldValue && fieldValue >= condition.value)
+function checkOnOrBefore(condition, fieldValue) {
+  return condition.value && fieldValue && fieldValue >= condition.value
 }
 
-function checkOnOrAfter (condition, fieldValue) {
-  return (condition.value && fieldValue && fieldValue <= condition.value)
+function checkOnOrAfter(condition, fieldValue) {
+  return condition.value && fieldValue && fieldValue <= condition.value
 }
 
-function checkPastWeek (condition, fieldValue) {
+function checkPastWeek(condition, fieldValue) {
   if (!fieldValue) return false
   const fieldDate = new Date(fieldValue)
   const today = new Date()
-  return (fieldDate <= today && fieldDate >= new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7))
+  return (
+    fieldDate <= today &&
+    fieldDate >=
+      new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7)
+  )
 }
 
-function checkPastMonth (condition, fieldValue) {
+function checkPastMonth(condition, fieldValue) {
   if (!fieldValue) return false
   const fieldDate = new Date(fieldValue)
   const today = new Date()
-  return (fieldDate <= today && fieldDate >= new Date(today.getFullYear(), today.getMonth() - 1, today.getDate()))
+  return (
+    fieldDate <= today &&
+    fieldDate >=
+      new Date(today.getFullYear(), today.getMonth() - 1, today.getDate())
+  )
 }
 
-function checkPastYear (condition, fieldValue) {
+function checkPastYear(condition, fieldValue) {
   if (!fieldValue) return false
   const fieldDate = new Date(fieldValue)
   const today = new Date()
-  return (fieldDate <= today && fieldDate >= new Date(today.getFullYear() - 1, today.getMonth(), today.getDate()))
+  return (
+    fieldDate <= today &&
+    fieldDate >=
+      new Date(today.getFullYear() - 1, today.getMonth(), today.getDate())
+  )
 }
 
-function checkNextWeek (condition, fieldValue) {
+function checkNextWeek(condition, fieldValue) {
   if (!fieldValue) return false
   const fieldDate = new Date(fieldValue)
   const today = new Date()
-  return (fieldDate >= today && fieldDate <= new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7))
+  return (
+    fieldDate >= today &&
+    fieldDate <=
+      new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7)
+  )
 }
 
-function checkNextMonth (condition, fieldValue) {
+function checkNextMonth(condition, fieldValue) {
   if (!fieldValue) return false
   const fieldDate = new Date(fieldValue)
   const today = new Date()
-  return (fieldDate >= today && fieldDate <= new Date(today.getFullYear(), today.getMonth() + 1, today.getDate()))
+  return (
+    fieldDate >= today &&
+    fieldDate <=
+      new Date(today.getFullYear(), today.getMonth() + 1, today.getDate())
+  )
 }
 
-function checkNextYear (condition, fieldValue) {
+function checkNextYear(condition, fieldValue) {
   if (!fieldValue) return false
   const fieldDate = new Date(fieldValue)
   const today = new Date()
-  return (fieldDate >= today && fieldDate <= new Date(today.getFullYear() + 1, today.getMonth(), today.getDate()))
+  return (
+    fieldDate >= today &&
+    fieldDate <=
+      new Date(today.getFullYear() + 1, today.getMonth(), today.getDate())
+  )
 }
 
-function checkLength (condition, fieldValue, operator = '===') {
-  if(!fieldValue || fieldValue.length === 0) return false;
+function checkLength(condition, fieldValue, operator = "===") {
+  if (!fieldValue || fieldValue.length === 0) return false
   switch (operator) {
-    case '===':
+    case "===":
       return fieldValue.length === parseInt(condition.value)
-    case '!==':
+    case "!==":
       return fieldValue.length !== parseInt(condition.value)
-    case '>':
+    case ">":
       return fieldValue.length > parseInt(condition.value)
-    case '>=':
+    case ">=":
       return fieldValue.length >= parseInt(condition.value)
-    case '<':
+    case "<":
       return fieldValue.length < parseInt(condition.value)
-    case '<=':
+    case "<=":
       return fieldValue.length <= parseInt(condition.value)
   }
   return false
 }
 
-function textConditionMet (propertyCondition, value) {
+function textConditionMet(propertyCondition, value) {
   switch (propertyCondition.operator) {
-    case 'equals':
+    case "equals":
       return checkEquals(propertyCondition, value)
-    case 'does_not_equal':
+    case "does_not_equal":
       return !checkEquals(propertyCondition, value)
-    case 'contains':
+    case "contains":
       return checkContains(propertyCondition, value)
-    case 'does_not_contain':
+    case "does_not_contain":
       return !checkContains(propertyCondition, value)
-    case 'starts_with':
+    case "starts_with":
       return checkStartsWith(propertyCondition, value)
-    case 'ends_with':
+    case "ends_with":
       return checkendsWith(propertyCondition, value)
-    case 'is_empty':
+    case "is_empty":
       return checkIsEmpty(propertyCondition, value)
-    case 'is_not_empty':
+    case "is_not_empty":
       return !checkIsEmpty(propertyCondition, value)
-    case 'content_length_equals':
-      return checkLength(propertyCondition, value, '===')
-    case 'content_length_does_not_equal':
-      return checkLength(propertyCondition, value, '!==')
-    case 'content_length_greater_than':
-      return checkLength(propertyCondition, value, '>')
-    case 'content_length_greater_than_or_equal_to':
-      return checkLength(propertyCondition, value, '>=')
-    case 'content_length_less_than':
-      return checkLength(propertyCondition, value, '<')
-    case 'content_length_less_than_or_equal_to':
-      return checkLength(propertyCondition, value, '<=')
+    case "content_length_equals":
+      return checkLength(propertyCondition, value, "===")
+    case "content_length_does_not_equal":
+      return checkLength(propertyCondition, value, "!==")
+    case "content_length_greater_than":
+      return checkLength(propertyCondition, value, ">")
+    case "content_length_greater_than_or_equal_to":
+      return checkLength(propertyCondition, value, ">=")
+    case "content_length_less_than":
+      return checkLength(propertyCondition, value, "<")
+    case "content_length_less_than_or_equal_to":
+      return checkLength(propertyCondition, value, "<=")
   }
   return false
 }
 
-function numberConditionMet (propertyCondition, value) {
+function numberConditionMet(propertyCondition, value) {
   switch (propertyCondition.operator) {
-    case 'equals':
+    case "equals":
       return checkEquals(propertyCondition, value)
-    case 'does_not_equal':
+    case "does_not_equal":
       return !checkEquals(propertyCondition, value)
-    case 'greater_than':
+    case "greater_than":
       return checkGreaterThan(propertyCondition, value)
-    case 'less_than':
+    case "less_than":
       return checkLessThan(propertyCondition, value)
-    case 'greater_than_or_equal_to':
+    case "greater_than_or_equal_to":
       return checkGreaterThanEqual(propertyCondition, value)
-    case 'less_than_or_equal_to':
+    case "less_than_or_equal_to":
       return checkLessThanEqual(propertyCondition, value)
-    case 'is_empty':
+    case "is_empty":
       return checkIsEmpty(propertyCondition, value)
-    case 'is_not_empty':
+    case "is_not_empty":
       return checkIsEmpty(propertyCondition, value)
-    case 'content_length_equals':
-      return checkLength(propertyCondition, value, '===')
-    case 'content_length_does_not_equal':
-      return checkLength(propertyCondition, value, '!==')
-    case 'content_length_greater_than':
-      return checkLength(propertyCondition, value, '>')
-    case 'content_length_greater_than_or_equal_to':
-      return checkLength(propertyCondition, value, '>=')
-    case 'content_length_less_than':
-      return checkLength(propertyCondition, value, '<')
-    case 'content_length_less_than_or_equal_to':
-      return checkLength(propertyCondition, value, '<=')
+    case "content_length_equals":
+      return checkLength(propertyCondition, value, "===")
+    case "content_length_does_not_equal":
+      return checkLength(propertyCondition, value, "!==")
+    case "content_length_greater_than":
+      return checkLength(propertyCondition, value, ">")
+    case "content_length_greater_than_or_equal_to":
+      return checkLength(propertyCondition, value, ">=")
+    case "content_length_less_than":
+      return checkLength(propertyCondition, value, "<")
+    case "content_length_less_than_or_equal_to":
+      return checkLength(propertyCondition, value, "<=")
   }
   return false
 }
 
-function checkboxConditionMet (propertyCondition, value) {
+function checkboxConditionMet(propertyCondition, value) {
   switch (propertyCondition.operator) {
-    case 'equals':
+    case "equals":
       return checkEquals(propertyCondition, value)
-    case 'does_not_equal':
+    case "does_not_equal":
       return !checkEquals(propertyCondition, value)
   }
   return false
 }
 
-function selectConditionMet (propertyCondition, value) {
+function selectConditionMet(propertyCondition, value) {
   switch (propertyCondition.operator) {
-    case 'equals':
+    case "equals":
       return checkEquals(propertyCondition, value)
-    case 'does_not_equal':
+    case "does_not_equal":
       return !checkEquals(propertyCondition, value)
-    case 'is_empty':
+    case "is_empty":
       return checkIsEmpty(propertyCondition, value)
-    case 'is_not_empty':
+    case "is_not_empty":
       return !checkIsEmpty(propertyCondition, value)
   }
   return false
 }
 
-function dateConditionMet (propertyCondition, value) {
+function dateConditionMet(propertyCondition, value) {
   switch (propertyCondition.operator) {
-    case 'equals':
+    case "equals":
       return checkEquals(propertyCondition, value)
-    case 'before':
+    case "before":
       return checkBefore(propertyCondition, value)
-    case 'after':
+    case "after":
       return checkAfter(propertyCondition, value)
-    case 'on_or_before':
+    case "on_or_before":
       return checkOnOrBefore(propertyCondition, value)
-    case 'on_or_after':
+    case "on_or_after":
       return checkOnOrAfter(propertyCondition, value)
-    case 'is_empty':
+    case "is_empty":
       return checkIsEmpty(propertyCondition, value)
-    case 'past_week':
+    case "past_week":
       return checkPastWeek(propertyCondition, value)
-    case 'past_month':
+    case "past_month":
       return checkPastMonth(propertyCondition, value)
-    case 'past_year':
+    case "past_year":
       return checkPastYear(propertyCondition, value)
-    case 'next_week':
+    case "next_week":
       return checkNextWeek(propertyCondition, value)
-    case 'next_month':
+    case "next_month":
       return checkNextMonth(propertyCondition, value)
-    case 'next_year':
+    case "next_year":
       return checkNextYear(propertyCondition, value)
   }
   return false
 }
 
-function multiSelectConditionMet (propertyCondition, value) {
+function multiSelectConditionMet(propertyCondition, value) {
   switch (propertyCondition.operator) {
-    case 'contains':
+    case "contains":
       return checkListContains(propertyCondition, value)
-    case 'does_not_contain':
+    case "does_not_contain":
       return !checkListContains(propertyCondition, value)
-    case 'is_empty':
+    case "is_empty":
       return checkIsEmpty(propertyCondition, value)
-    case 'is_not_empty':
+    case "is_not_empty":
       return !checkIsEmpty(propertyCondition, value)
   }
   return false
 }
 
-function filesConditionMet (propertyCondition, value) {
+function filesConditionMet(propertyCondition, value) {
   switch (propertyCondition.operator) {
-    case 'is_empty':
+    case "is_empty":
       return checkIsEmpty(propertyCondition, value)
-    case 'is_not_empty':
+    case "is_not_empty":
       return !checkIsEmpty(propertyCondition, value)
   }
   return false
diff --git a/client/lib/forms/FormLogicPropertyResolver.js b/client/lib/forms/FormLogicPropertyResolver.js
index a2f128986..ee2005e57 100644
--- a/client/lib/forms/FormLogicPropertyResolver.js
+++ b/client/lib/forms/FormLogicPropertyResolver.js
@@ -1,55 +1,94 @@
-import { conditionsMet } from './FormLogicConditionChecker'
+import { conditionsMet } from "./FormLogicConditionChecker"
 class FormLogicPropertyResolver {
-  conditionsMet = conditionsMet;
-  property = null;
-  formData = null;
-  logic = false;
+  conditionsMet = conditionsMet
+  property = null
+  formData = null
+  logic = false
 
-  constructor (property, formData) {
+  constructor(property, formData) {
     this.property = property
     this.formData = formData
-    this.logic = (property.logic !== undefined) ? property.logic : false
+    this.logic = property.logic !== undefined ? property.logic : false
   }
 
-  isHidden () {
+  isHidden() {
     if (!this.logic) {
       return this.property.hidden
     }
 
-    const conditionsMet = this.conditionsMet(this.logic.conditions, this.formData)
-    if (conditionsMet && this.property.hidden && this.logic.actions.length > 0 && this.logic.actions.includes('show-block')) {
+    const conditionsMet = this.conditionsMet(
+      this.logic.conditions,
+      this.formData,
+    )
+    if (
+      conditionsMet &&
+      this.property.hidden &&
+      this.logic.actions.length > 0 &&
+      this.logic.actions.includes("show-block")
+    ) {
       return false
-    } else if (conditionsMet && !this.property.hidden && this.logic.actions.length > 0 && this.logic.actions.includes('hide-block')) {
+    } else if (
+      conditionsMet &&
+      !this.property.hidden &&
+      this.logic.actions.length > 0 &&
+      this.logic.actions.includes("hide-block")
+    ) {
       return true
     } else {
       return this.property.hidden
     }
   }
 
-  isRequired () {
+  isRequired() {
     if (!this.logic) {
       return this.property.required
     }
 
-    const conditionsMet = this.conditionsMet(this.logic.conditions, this.formData)
-    if (conditionsMet && this.property.required && this.logic.actions.length > 0 && this.logic.actions.includes('make-it-optional')) {
+    const conditionsMet = this.conditionsMet(
+      this.logic.conditions,
+      this.formData,
+    )
+    if (
+      conditionsMet &&
+      this.property.required &&
+      this.logic.actions.length > 0 &&
+      this.logic.actions.includes("make-it-optional")
+    ) {
       return false
-    } else if (conditionsMet && !this.property.required && this.logic.actions.length > 0 && this.logic.actions.includes('require-answer')) {
+    } else if (
+      conditionsMet &&
+      !this.property.required &&
+      this.logic.actions.length > 0 &&
+      this.logic.actions.includes("require-answer")
+    ) {
       return true
     } else {
       return this.property.required
     }
   }
 
-  isDisabled () {
+  isDisabled() {
     if (!this.logic) {
       return this.property.disabled
     }
 
-    const conditionsMet = this.conditionsMet(this.logic.conditions, this.formData)
-    if (conditionsMet && this.property.disabled && this.logic.actions.length > 0 && this.logic.actions.includes('enable-block')) {
+    const conditionsMet = this.conditionsMet(
+      this.logic.conditions,
+      this.formData,
+    )
+    if (
+      conditionsMet &&
+      this.property.disabled &&
+      this.logic.actions.length > 0 &&
+      this.logic.actions.includes("enable-block")
+    ) {
       return false
-    } else if (conditionsMet && !this.property.disabled && this.logic.actions.length > 0 && this.logic.actions.includes('disable-block')) {
+    } else if (
+      conditionsMet &&
+      !this.property.disabled &&
+      this.logic.actions.length > 0 &&
+      this.logic.actions.includes("disable-block")
+    ) {
       return true
     } else {
       return this.property.disabled
diff --git a/client/lib/forms/FormPropertyLogicRule.js b/client/lib/forms/FormPropertyLogicRule.js
index f7ce4b654..a1ae5c1c8 100644
--- a/client/lib/forms/FormPropertyLogicRule.js
+++ b/client/lib/forms/FormPropertyLogicRule.js
@@ -1,79 +1,93 @@
-import OpenFilters from '../../data/open_filters.json'
+import OpenFilters from "../../data/open_filters.json"
 class FormPropertyLogicRule {
   property = null
   logic = null
   isConditionCorrect = true
   isActionCorrect = true
   ACTIONS_VALUES = [
-    'show-block',
-    'hide-block',
-    'make-it-optional',
-    'require-answer',
-    'enable-block',
-    'disable-block'
+    "show-block",
+    "hide-block",
+    "make-it-optional",
+    "require-answer",
+    "enable-block",
+    "disable-block",
   ]
   CONDITION_MAPPING = OpenFilters
 
-  constructor (property) {
+  constructor(property) {
     this.property = property
-    this.logic = (property.logic !== undefined && property.logic) ? property.logic : null
+    this.logic =
+      property.logic !== undefined && property.logic ? property.logic : null
   }
 
-  isValid () {
-    if (this.logic && this.logic['conditions']) {
-      this.checkConditions(this.logic['conditions'])
-      this.checkActions((this.logic && this.logic['actions']) ? this.logic['actions'] : null)
+  isValid() {
+    if (this.logic && this.logic["conditions"]) {
+      this.checkConditions(this.logic["conditions"])
+      this.checkActions(
+        this.logic && this.logic["actions"] ? this.logic["actions"] : null,
+      )
     }
 
     return this.isConditionCorrect && this.isActionCorrect
   }
 
-  checkConditions (conditions) {
-    if (conditions && conditions['operatorIdentifier']) {
-      if ((conditions['operatorIdentifier'] !== 'and') && (conditions['operatorIdentifier'] !== 'or')) {
+  checkConditions(conditions) {
+    if (conditions && conditions["operatorIdentifier"]) {
+      if (
+        conditions["operatorIdentifier"] !== "and" &&
+        conditions["operatorIdentifier"] !== "or"
+      ) {
         this.isConditionCorrect = false
         return
       }
 
-      if (conditions['operatorIdentifier']['children'] !== undefined || !Array.isArray(conditions['children'])) {
+      if (
+        conditions["operatorIdentifier"]["children"] !== undefined ||
+        !Array.isArray(conditions["children"])
+      ) {
         this.isConditionCorrect = false
         return
       }
 
-      conditions['children'].forEach(childrenCondition => {
+      conditions["children"].forEach((childrenCondition) => {
         this.checkConditions(childrenCondition)
       })
-    } else if (conditions && conditions['identifier']) {
+    } else if (conditions && conditions["identifier"]) {
       this.checkBaseCondition(conditions)
     }
   }
 
-  checkBaseCondition (condition) {
-    if (condition['value'] === undefined || 
-        condition['value']['property_meta'] === undefined || 
-        condition['value']['property_meta']['type'] === undefined || 
-        condition['value']['operator'] === undefined || 
-        condition['value']['value'] === undefined
-      ) {
+  checkBaseCondition(condition) {
+    if (
+      condition["value"] === undefined ||
+      condition["value"]["property_meta"] === undefined ||
+      condition["value"]["property_meta"]["type"] === undefined ||
+      condition["value"]["operator"] === undefined ||
+      condition["value"]["value"] === undefined
+    ) {
       this.isConditionCorrect = false
       return
     }
 
-    const typeField = condition['value']['property_meta']['type']
-    const operator = condition['value']['operator']
-    const value = condition['value']['value']
+    const typeField = condition["value"]["property_meta"]["type"]
+    const operator = condition["value"]["operator"]
+    const value = condition["value"]["value"]
 
-    if (this.CONDITION_MAPPING[typeField] === undefined || 
-      this.CONDITION_MAPPING[typeField]['comparators'][operator] === undefined
-      ) {
+    if (
+      this.CONDITION_MAPPING[typeField] === undefined ||
+      this.CONDITION_MAPPING[typeField]["comparators"][operator] === undefined
+    ) {
       this.isConditionCorrect = false
       return
     }
- 
-    const type = this.CONDITION_MAPPING[typeField]['comparators'][operator]['expected_type']
+
+    const type =
+      this.CONDITION_MAPPING[typeField]["comparators"][operator][
+        "expected_type"
+      ]
     if (Array.isArray(type)) {
       let foundCorrectType = false
-      type.forEach(subtype => {
+      type.forEach((subtype) => {
         if (this.valueHasCorrectType(subtype, value)) {
           foundCorrectType = true
         }
@@ -88,26 +102,43 @@ class FormPropertyLogicRule {
     }
   }
 
-  valueHasCorrectType (type, value) {
+  valueHasCorrectType(type, value) {
     if (
-        (type === 'string' && typeof value !== 'string') ||
-        (type === 'boolean' && typeof value !== 'boolean') ||
-        (type === 'number' && typeof value !== 'number') ||
-        (type === 'object' && !Array.isArray(value))
+      (type === "string" && typeof value !== "string") ||
+      (type === "boolean" && typeof value !== "boolean") ||
+      (type === "number" && typeof value !== "number") ||
+      (type === "object" && !Array.isArray(value))
     ) {
       return false
     }
     return true
   }
 
-  checkActions (conditions) {
+  checkActions(conditions) {
     if (Array.isArray(conditions) && conditions.length > 0) {
-      conditions.forEach(val => {
-        if (this.ACTIONS_VALUES.indexOf(val) === -1 ||
-            (['nf-text', 'nf-code', 'nf-page-break', 'nf-divider', 'nf-image'].indexOf(this.property["type"]) > -1 && ['hide-block', 'show-block'].indexOf(val) === -1) ||
-            (this.property["hidden"] !== undefined && this.property["hidden"] && ['show-block', 'require-answer'].indexOf(val) === -1) ||
-            (this.property["required"] !== undefined && this.property["required"] && ['make-it-optional', 'hide-block', 'disable-block'].indexOf(val) === -1) ||
-            (this.property["disabled"] !== undefined && this.property["disabled"] && ['enable-block', 'require-answer', 'make-it-optional'].indexOf(val) === -1)
+      conditions.forEach((val) => {
+        if (
+          this.ACTIONS_VALUES.indexOf(val) === -1 ||
+          ([
+            "nf-text",
+            "nf-code",
+            "nf-page-break",
+            "nf-divider",
+            "nf-image",
+          ].indexOf(this.property["type"]) > -1 &&
+            ["hide-block", "show-block"].indexOf(val) === -1) ||
+          (this.property["hidden"] !== undefined &&
+            this.property["hidden"] &&
+            ["show-block", "require-answer"].indexOf(val) === -1) ||
+          (this.property["required"] !== undefined &&
+            this.property["required"] &&
+            ["make-it-optional", "hide-block", "disable-block"].indexOf(val) ===
+              -1) ||
+          (this.property["disabled"] !== undefined &&
+            this.property["disabled"] &&
+            ["enable-block", "require-answer", "make-it-optional"].indexOf(
+              val,
+            ) === -1)
         ) {
           this.isActionCorrect = false
           return
@@ -117,7 +148,6 @@ class FormPropertyLogicRule {
       this.isActionCorrect = false
     }
   }
-
 }
 
-export default FormPropertyLogicRule
\ No newline at end of file
+export default FormPropertyLogicRule
diff --git a/client/lib/utils.js b/client/lib/utils.js
index 65219e8d9..2894334c8 100644
--- a/client/lib/utils.js
+++ b/client/lib/utils.js
@@ -1,31 +1,41 @@
 export const hash = (str, seed = 0) => {
   let h1 = 0xdeadbeef ^ seed,
-    h2 = 0x41c6ce57 ^ seed;
+    h2 = 0x41c6ce57 ^ seed
   for (let i = 0, ch; i < str.length; i++) {
-    ch = str.charCodeAt(i);
-    h1 = Math.imul(h1 ^ ch, 2654435761);
-    h2 = Math.imul(h2 ^ ch, 1597334677);
+    ch = str.charCodeAt(i)
+    h1 = Math.imul(h1 ^ ch, 2654435761)
+    h2 = Math.imul(h2 ^ ch, 1597334677)
   }
 
-  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
-  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+  h1 =
+    Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^
+    Math.imul(h2 ^ (h2 >>> 13), 3266489909)
+  h2 =
+    Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^
+    Math.imul(h1 ^ (h1 >>> 13), 3266489909)
 
-  return 4294967296 * (2097151 & h2) + (h1 >>> 0);
+  return 4294967296 * (2097151 & h2) + (h1 >>> 0)
 }
 
 export const generateUUID = () => {
-  let d = new Date().getTime()// Timestamp
-  let d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now() * 1000)) || 0// Time in microseconds since page-load or 0 if unsupported
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    let r = Math.random() * 16// random number between 0 and 16
-    if (d > 0) { // Use timestamp until depleted
+  let d = new Date().getTime() // Timestamp
+  let d2 =
+    (typeof performance !== "undefined" &&
+      performance.now &&
+      performance.now() * 1000) ||
+    0 // Time in microseconds since page-load or 0 if unsupported
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    let r = Math.random() * 16 // random number between 0 and 16
+    if (d > 0) {
+      // Use timestamp until depleted
       r = (d + r) % 16 | 0
       d = Math.floor(d / 16)
-    } else { // Use microseconds since page-load if supported
+    } else {
+      // Use microseconds since page-load if supported
       r = (d2 + r) % 16 | 0
       d2 = Math.floor(d2 / 16)
     }
-    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
+    return (c === "x" ? r : (r & 0x3) | 0x8).toString(16)
   })
 }
 
@@ -38,19 +48,19 @@ export const generateUUID = () => {
  * @param path
  * @returns {string}
  */
-export const appUrl = (path = '/') => {
+export const appUrl = (path = "/") => {
   let baseUrl = useRuntimeConfig().public.appUrl
   if (!baseUrl) {
-    console.warn('appUrl not set in runtimeConfig')
+    console.warn("appUrl not set in runtimeConfig")
     return path
   }
 
-  if (path.startsWith('/')) {
+  if (path.startsWith("/")) {
     path = path.substring(1)
   }
 
-  if (!baseUrl.endsWith('/')) {
-    baseUrl += '/'
+  if (!baseUrl.endsWith("/")) {
+    baseUrl += "/"
   }
 
   return baseUrl + path
@@ -63,7 +73,10 @@ export const appUrl = (path = '/') => {
  */
 export const getHost = function () {
   if (import.meta.server) {
-    return getDomain(useNuxtApp().ssrContext?.event.context.siteConfigNitroOrigin) || useNuxtApp().ssrContext?.event.node.req.headers.host
+    return (
+      getDomain(useNuxtApp().ssrContext?.event.context.siteConfigNitroOrigin) ||
+      useNuxtApp().ssrContext?.event.node.req.headers.host
+    )
   } else {
     return window.location.host
   }
@@ -75,10 +88,10 @@ export const getHost = function () {
  * @returns {*}
  */
 export const getDomain = function (url) {
-  if (url.includes('localhost')) return 'localhost'
+  if (url.includes("localhost")) return "localhost"
   try {
-    if (!url.startsWith('http')) url = 'https://' + url
-    return (new URL(url)).hostname
+    if (!url.startsWith("http")) url = "https://" + url
+    return new URL(url).hostname
   } catch (e) {
     return url
   }
@@ -88,7 +101,7 @@ export const getDomain = function (url) {
  * Returns true if the app is running on a custom domain, false otherwise.
  * @returns {boolean}
  */
-export const customDomainUsed = function() {
+export const customDomainUsed = function () {
   const config = useRuntimeConfig()
   if (!config.public.customDomainsEnabled) return false
   const appDomain = getDomain(config.public.appUrl)
diff --git a/client/middleware/01.check-auth.global.js b/client/middleware/01.check-auth.global.js
index 370ebeca3..96abcb9f1 100644
--- a/client/middleware/01.check-auth.global.js
+++ b/client/middleware/01.check-auth.global.js
@@ -1,15 +1,17 @@
-import {fetchAllWorkspaces} from "~/stores/workspaces.js";
-import {opnFetch} from "~/composables/useOpnApi.js";
+import { fetchAllWorkspaces } from "~/stores/workspaces.js"
 
-export default defineNuxtRouteMiddleware(async(to, from) => {
+export default defineNuxtRouteMiddleware(async () => {
   const authStore = useAuthStore()
-  authStore.initStore(useCookie('token').value, useCookie('admin_token').value)
+  authStore.initStore(useCookie("token").value, useCookie("admin_token").value)
 
   if (authStore.token && !authStore.user) {
     const workspaceStore = useWorkspacesStore()
 
     // Load user data and workspaces
-    const [userDataResponse, workspacesResponse] = await Promise.all([useOpnApi('user'), fetchAllWorkspaces()]);
+    const [userDataResponse, workspacesResponse] = await Promise.all([
+      useOpnApi("user"),
+      fetchAllWorkspaces(),
+    ])
     authStore.setUser(userDataResponse.data.value)
     workspaceStore.save(workspacesResponse.data.value)
   }
diff --git a/client/middleware/admin.js b/client/middleware/admin.js
index f2bb96efd..c16902def 100644
--- a/client/middleware/admin.js
+++ b/client/middleware/admin.js
@@ -1,6 +1,6 @@
-export default defineNuxtRouteMiddleware((to, from) => {
+export default defineNuxtRouteMiddleware(() => {
   const authStore = useAuthStore()
   if (authStore.check && !authStore.user?.admin) {
-    return navigateTo({ name: 'home' })
+    return navigateTo({ name: "home" })
   }
 })
diff --git a/client/middleware/api-redirect.global.js b/client/middleware/api-redirect.global.js
index cd4741bae..c8bb3922d 100644
--- a/client/middleware/api-redirect.global.js
+++ b/client/middleware/api-redirect.global.js
@@ -1,11 +1,12 @@
-
-export default defineNuxtRouteMiddleware((to, from) => {
+export default defineNuxtRouteMiddleware((to) => {
   if (import.meta.client) return
 
   const config = useRuntimeConfig()
-  if (to.fullPath.startsWith('/api')) {
-    const path = to.fullPath.replace('/api', '')
-    return navigateTo(config.public.apiBase + path, { redirectCode: 301, external: true })
+  if (to.fullPath.startsWith("/api")) {
+    const path = to.fullPath.replace("/api", "")
+    return navigateTo(config.public.apiBase + path, {
+      redirectCode: 301,
+      external: true,
+    })
   }
 })
-
diff --git a/client/middleware/auth.js b/client/middleware/auth.js
index b9475f913..8dfca935b 100644
--- a/client/middleware/auth.js
+++ b/client/middleware/auth.js
@@ -1,8 +1,8 @@
-export default defineNuxtRouteMiddleware((to, from) => {
+export default defineNuxtRouteMiddleware((to) => {
   const authStore = useAuthStore()
 
   if (!authStore.check) {
-    useCookie('intended_url').value = to.path
-    return navigateTo({ name: 'login' })
+    useCookie("intended_url").value = to.path
+    return navigateTo({ name: "login" })
   }
 })
diff --git a/client/middleware/custom-domain.global.js b/client/middleware/custom-domain.global.js
index 587ffe08e..3a38118e9 100644
--- a/client/middleware/custom-domain.global.js
+++ b/client/middleware/custom-domain.global.js
@@ -1,31 +1,39 @@
-import {customDomainUsed, getDomain, getHost} from "~/lib/utils.js";
+import { customDomainUsed, getDomain, getHost } from "~/lib/utils.js"
 
 /**
  * Added by Caddy when proxying to the app
  * @type {string}
  */
-const customDomainHeaderName = 'user-custom-domain'
+const customDomainHeaderName = "user-custom-domain"
 
 /**
  * List of routes that can be used with a custom domain
  * @type {string[]}
  */
-const customDomainAllowedRoutes = ['forms-slug']
+const customDomainAllowedRoutes = ["forms-slug"]
 
 function redirectToMainDomain(details = {}) {
-  console.warn('Redirecting to main domain', { reason: 'unknown', ...details})
-  return navigateTo(useRuntimeConfig().public.appUrl + '?utm_source=failed_custom_domain_redirect', { redirectCode: 301, external: true })
+  console.warn("Redirecting to main domain", { reason: "unknown", ...details })
+  return navigateTo(
+    useRuntimeConfig().public.appUrl +
+      "?utm_source=failed_custom_domain_redirect",
+    { redirectCode: 301, external: true },
+  )
 }
 
-export default defineNuxtRouteMiddleware((to, from) => {
+export default defineNuxtRouteMiddleware((to) => {
   if (!customDomainUsed()) return
 
   const config = useRuntimeConfig()
 
   const customDomainHeaderValue = useRequestHeaders()[customDomainHeaderName]
-  if (import.meta.server && (!customDomainHeaderValue || customDomainHeaderValue !== getDomain(getHost()))) {
-    return redirectToMainDomain( {
-      reason: 'header_mismatch',
+  if (
+    import.meta.server &&
+    (!customDomainHeaderValue ||
+      customDomainHeaderValue !== getDomain(getHost()))
+  ) {
+    return redirectToMainDomain({
+      reason: "header_mismatch",
       customDomainHeaderValue: customDomainHeaderValue,
       host: getDomain(getHost()),
     })
@@ -34,15 +42,14 @@ export default defineNuxtRouteMiddleware((to, from) => {
   if (!config.public.customDomainsEnabled) {
     // If custom domain not allowed, redirect
     return redirectToMainDomain({
-      reason: 'custom_domains_disabled'
+      reason: "custom_domains_disabled",
     })
   }
 
   if (!customDomainAllowedRoutes.includes(to.name)) {
     // Custom domain only allowed for form url
     return redirectToMainDomain({
-      reason: 'route_not_allowed'
+      reason: "route_not_allowed",
     })
   }
 })
-
diff --git a/client/middleware/guest.js b/client/middleware/guest.js
index 9525ce36f..381a80a69 100644
--- a/client/middleware/guest.js
+++ b/client/middleware/guest.js
@@ -1,9 +1,8 @@
-
-export default defineNuxtRouteMiddleware((to, from) => {
+export default defineNuxtRouteMiddleware(() => {
   const authStore = useAuthStore()
 
   if (authStore.check) {
-    console.log('redirecting to home')
-    return navigateTo({ name: 'home' })
+    console.log("redirecting to home")
+    return navigateTo({ name: "home" })
   }
 })
diff --git a/client/middleware/moderator.js b/client/middleware/moderator.js
index d6822c560..6d7a87c66 100644
--- a/client/middleware/moderator.js
+++ b/client/middleware/moderator.js
@@ -1,6 +1,6 @@
-export default defineNuxtRouteMiddleware((to, from) => {
+export default defineNuxtRouteMiddleware(() => {
   const authStore = useAuthStore()
   if (authStore.check && !authStore.user?.moderator) {
-    return navigateTo({ name: 'home' })
+    return navigateTo({ name: "home" })
   }
 })
diff --git a/client/middleware/subscribed.js b/client/middleware/subscribed.js
index 02dfee7e9..77e45d0eb 100644
--- a/client/middleware/subscribed.js
+++ b/client/middleware/subscribed.js
@@ -1,7 +1,7 @@
-export default defineNuxtRouteMiddleware((to, from) => {
+export default defineNuxtRouteMiddleware(() => {
   const authStore = useAuthStore()
 
   if (authStore.check && !authStore.user?.is_subscribed) {
-    return navigateTo({ name: 'pricing' })
+    return navigateTo({ name: "pricing" })
   }
 })
diff --git a/client/mixins/forms/input.js b/client/mixins/forms/input.js
index 2d422d1d2..e37910e61 100644
--- a/client/mixins/forms/input.js
+++ b/client/mixins/forms/input.js
@@ -1,5 +1,5 @@
-import { themes } from '~/lib/forms/form-themes.js'
-import { default as _has } from 'lodash/has'
+import { themes } from "~/lib/forms/form-themes.js"
+import { default as _has } from "lodash/has"
 
 export default {
   props: {
@@ -13,29 +13,33 @@ export default {
     placeholder: { type: String, default: null },
     uppercaseLabels: { type: Boolean, default: false },
     help: { type: String, default: null },
-    helpPosition: { type: String, default: 'below_input' },
+    helpPosition: { type: String, default: "below_input" },
     theme: { type: Object, default: () => themes.default },
-    color: { type: String, default: '#3B82F6' },
-    wrapperClass: { type: String, default: 'relative mb-3' }
+    color: { type: String, default: "#3B82F6" },
+    wrapperClass: { type: String, default: "relative mb-3" },
   },
 
-  data () {
+  data() {
     return {
-      content: this.value
+      content: this.value,
     }
   },
 
   computed: {
-    inputStyle () {
+    inputStyle() {
       return {
-        '--tw-ring-color': this.color
+        "--tw-ring-color": this.color,
       }
     },
-    hasValidation () {
-      return this.form !== null && this.form !== undefined && _has(this.form, 'errors')
+    hasValidation() {
+      return (
+        this.form !== null &&
+        this.form !== undefined &&
+        _has(this.form, "errors")
+      )
     },
     compVal: {
-      set (val) {
+      set(val) {
         if (this.form) {
           this.form[this.name] = val
         } else {
@@ -44,22 +48,22 @@ export default {
         if (this.hasValidation) {
           this.form.errors.clear(this.name)
         }
-        this.$emit('input', this.compVal)
+        this.$emit("input", this.compVal)
       },
-      get () {
+      get() {
         if (this.form) {
           return this.form[this.name]
         }
         return this.content
-      }
-    }
+      },
+    },
   },
 
   watch: {
-    value (val) {
+    value(val) {
       if (val !== this.compVal) {
         this.compVal = val
       }
-    }
-  }
+    },
+  },
 }
diff --git a/client/mixins/forms/saveUpdateAlert.js b/client/mixins/forms/saveUpdateAlert.js
index f8a4285d0..62b568599 100644
--- a/client/mixins/forms/saveUpdateAlert.js
+++ b/client/mixins/forms/saveUpdateAlert.js
@@ -1,11 +1,15 @@
 export default {
   methods: {
-    displayFormModificationAlert (responseData) {
-      if (responseData.form && responseData.form.cleanings && Object.keys(responseData.form.cleanings).length > 0) {
+    displayFormModificationAlert(responseData) {
+      if (
+        responseData.form &&
+        responseData.form.cleanings &&
+        Object.keys(responseData.form.cleanings).length > 0
+      ) {
         useAlert().warning(responseData.message)
       } else {
         useAlert().success(responseData.message)
       }
-    }
-  }
+    },
+  },
 }
diff --git a/client/opnform.config.js b/client/opnform.config.js
index ccf5a5623..bfe7ed2cc 100644
--- a/client/opnform.config.js
+++ b/client/opnform.config.js
@@ -1,21 +1,21 @@
-
 export default {
-  "app_ame": "OpnForm",
-  "locale": "en",
-  "locales": {"en": "EN"},
-  "githubAuth": null,
-  "notion": {"worker": "https://notion-forms-worker.notionforms.workers.dev/v1"},
-  "links": {
-    "help_url": "https://github.com/JhumanJ/OpnForm/discussions",
-    "helpdesk_sitemap_url": "https://notionforms.crisp.help/sitemap.xml",
-    "github_url": "https://github.com/JhumanJ/OpnForm",
-    "github_forum_url": "https://github.com/JhumanJ/OpnForm/discussions",
-    'discord': 'https://discord.gg/YTSjU2a9TS',
-    "twitter": "https://twitter.com/OpnForm",
-    "zapier_integration": "https://zapier.com/developer/public-invite/146950/58db583730cc46b821614468d94c35de/",
-    "book_onboarding": "https://zcal.co/i/YQVGEULQ",
-    "feature_requests": "https://feedback.opnform.com/",
-    "changelog_url": "https://feedback.opnform.com/changelog",
-    "roadmap": "https://feedback.opnform.com/roadmap",
-  }
+  app_ame: "OpnForm",
+  locale: "en",
+  locales: { en: "EN" },
+  githubAuth: null,
+  notion: { worker: "https://notion-forms-worker.notionforms.workers.dev/v1" },
+  links: {
+    help_url: "https://github.com/JhumanJ/OpnForm/discussions",
+    helpdesk_sitemap_url: "https://notionforms.crisp.help/sitemap.xml",
+    github_url: "https://github.com/JhumanJ/OpnForm",
+    github_forum_url: "https://github.com/JhumanJ/OpnForm/discussions",
+    discord: "https://discord.gg/YTSjU2a9TS",
+    twitter: "https://twitter.com/OpnForm",
+    zapier_integration:
+      "https://zapier.com/developer/public-invite/146950/58db583730cc46b821614468d94c35de/",
+    book_onboarding: "https://zcal.co/i/YQVGEULQ",
+    feature_requests: "https://feedback.opnform.com/",
+    changelog_url: "https://feedback.opnform.com/changelog",
+    roadmap: "https://feedback.opnform.com/roadmap",
+  },
 }
diff --git a/client/package-lock.json b/client/package-lock.json
index 280d2aeb4..6732c5af9 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9,8 +9,9 @@
       "dependencies": {
         "@codemirror/lang-html": "^6.4.7",
         "@hcaptcha/vue3-hcaptcha": "^1.3.0",
-        "@nuxt/ui": "^2.14.2",
+        "@nuxt/ui": "^2.15.0",
         "@pinia/nuxt": "^0.5.1",
+        "@popperjs/core": "^2.11.8",
         "@sentry/vite-plugin": "^2.10.2",
         "@sentry/vue": "^7.93.0",
         "@vueuse/components": "^10.5.0",
@@ -22,7 +23,7 @@
         "clone-deep": "^4.0.1",
         "codemirror": "^6.0.1",
         "crisp-sdk-web": "^1.0.21",
-        "date-fns": "^2.28.0",
+        "date-fns": "^2.30.0",
         "fuse.js": "^6.4.6",
         "js-sha256": "^0.10.0",
         "libphonenumber-js": "^1.10.44",
@@ -33,6 +34,7 @@
         "qrcode": "^1.5.1",
         "query-builder-vue-3": "^1.0.1",
         "tinymotion": "^0.2.0",
+        "v-calendar": "^3.1.2",
         "vue": "^3.2.13",
         "vue-chartjs": "^5.2.0",
         "vue-codemirror": "^6.1.1",
@@ -47,17 +49,31 @@
       },
       "devDependencies": {
         "@nuxt/devtools": "~1.0.0",
+        "@nuxt/eslint-config": "^0.2.0",
         "autoprefixer": "^10.4.16",
+        "eslint": "^8.57.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-prettier": "^5.1.3",
         "nuxt": "^3.9.1",
         "nuxt-gtag": "^1.1.2",
         "nuxt-icon": "^0.6.10",
         "nuxt-simple-sitemap": "^4.2.3",
         "postcss": "^8.4.32",
+        "prettier": "^3.2.5",
         "sass": "^1.69.6",
         "vue": "^3.3.10",
         "vue-router": "^4.2.5"
       }
     },
+    "node_modules/@aashutoshrathi/word-wrap": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
+      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -239,25 +255,25 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.1.tgz",
-      "integrity": "sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.4.tgz",
+      "integrity": "sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.24.3",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.3.tgz",
-      "integrity": "sha512-5FcvN1JHw2sHJChotgx8Ek0lyuh4kCKelgMTTqhYJJtloNvUfpAFMeNQUtdlIaktwrSV9LtCdqwk48wL2wBacQ==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.4.tgz",
+      "integrity": "sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.24.2",
-        "@babel/generator": "^7.24.1",
+        "@babel/generator": "^7.24.4",
         "@babel/helper-compilation-targets": "^7.23.6",
         "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.24.1",
-        "@babel/parser": "^7.24.1",
+        "@babel/helpers": "^7.24.4",
+        "@babel/parser": "^7.24.4",
         "@babel/template": "^7.24.0",
         "@babel/traverse": "^7.24.1",
         "@babel/types": "^7.24.0",
@@ -284,9 +300,9 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.1.tgz",
-      "integrity": "sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.4.tgz",
+      "integrity": "sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==",
       "dependencies": {
         "@babel/types": "^7.24.0",
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -332,9 +348,9 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.1.tgz",
-      "integrity": "sha512-1yJa9dX9g//V6fDebXoEfEsxkZHk3Hcbm+zLhyu6qVgYFLvmTALTeV+jNU9e5RnYtioBrGEOdoI2joMSNQ/+aA==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.4.tgz",
+      "integrity": "sha512-lG75yeuUSVu0pIcbhiYMXBXANHrpUPaOfu7ryAzskCgKUHuAxRQI5ssrtmF0X9UXldPlvT0XM/A4F44OXRt6iQ==",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
         "@babel/helper-environment-visitor": "^7.22.20",
@@ -525,9 +541,9 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.1.tgz",
-      "integrity": "sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.4.tgz",
+      "integrity": "sha512-FewdlZbSiwaVGlgT1DPANDuCHaDMiOo+D/IDYRFYjHOuv66xMSJ7fQwwODwRNAPkADIO/z1EoF/l2BCWlWABDw==",
       "dependencies": {
         "@babel/template": "^7.24.0",
         "@babel/traverse": "^7.24.1",
@@ -552,9 +568,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
-      "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz",
+      "integrity": "sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -649,7 +665,6 @@
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.1.tgz",
       "integrity": "sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-module-transforms": "^7.23.3",
         "@babel/helper-plugin-utils": "^7.24.0",
@@ -663,12 +678,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-typescript": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.1.tgz",
-      "integrity": "sha512-liYSESjX2fZ7JyBFkYG78nfvHlMKE6IpNdTVnxmlYUR+j5ZLsitFbaAE+eJSK2zPPkNWNw4mXL51rQ8WrvdK0w==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.4.tgz",
+      "integrity": "sha512-79t3CQ8+oBGk/80SQ8MN3Bs3obf83zJ0YZjDmDaEZN8MqhMI760apl5z6a20kFeMXBwJX99VpKT8CKxEBp5H1g==",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-create-class-features-plugin": "^7.24.1",
+        "@babel/helper-create-class-features-plugin": "^7.24.4",
         "@babel/helper-plugin-utils": "^7.24.0",
         "@babel/plugin-syntax-typescript": "^7.24.1"
       },
@@ -683,7 +698,6 @@
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.24.1.tgz",
       "integrity": "sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.24.0",
         "@babel/helper-validator-option": "^7.23.5",
@@ -699,9 +713,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
-      "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
+      "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -710,9 +724,9 @@
       }
     },
     "node_modules/@babel/standalone": {
-      "version": "7.24.3",
-      "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.24.3.tgz",
-      "integrity": "sha512-PbObiI21Z/1DoJLr6DKsdmyp7uUIuw6zv5zIMorH98rOBE/TehkjK7xqXiwJmbCqi7deVbIksDerZ9Ds9hRLGw==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.24.4.tgz",
+      "integrity": "sha512-V4uqWeedadiuiCx5P5OHYJZ1PehdMpcBccNCEptKFGPiZIY3FI5f2ClxUl4r5wZ5U+ohcQ+4KW6jX2K6xXzq4Q==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -891,9 +905,9 @@
       "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A=="
     },
     "node_modules/@codemirror/view": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.26.0.tgz",
-      "integrity": "sha512-nSSmzONpqsNzshPOxiKhK203R6BvABepugAe34QfQDbNDslyjkqBuKgrK5ZBvqNXpfxz5iLrlGTmEfhbQyH46A==",
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.26.2.tgz",
+      "integrity": "sha512-j6V48PlFC/O7ERAR5vRW5QKDdchzmyyfojDdt+zPsB0YXoWgcjlC1IWjmlYfx08aQZ3HN5BtALcgGgtSKGMe7A==",
       "dependencies": {
         "@codemirror/state": "^6.4.0",
         "style-mod": "^4.1.0",
@@ -961,6 +975,48 @@
         "node": "^14 || ^16 || >=18"
       }
     },
+    "node_modules/@csstools/selector-resolve-nested": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-1.1.0.tgz",
+      "integrity": "sha512-uWvSaeRcHyeNenKg8tp17EVDRkpflmdyvbE0DHo6D/GdBb6PDnCYYU6gRpXhtICMGMcahQmj2zGxwFM/WC8hCg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
+    "node_modules/@csstools/selector-specificity": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.3.tgz",
+      "integrity": "sha512-KEPNw4+WW5AVEIyzC80rTbWEUatTW2lXpN8+8ILC8PiPeWPjwUzrPZDIOZ2wwqDmeqOYTdSGyL3+vE5GC3FB3Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
     "node_modules/@csstools/utilities": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/utilities/-/utilities-1.0.0.tgz",
@@ -1338,6 +1394,111 @@
         "node": ">=12"
       }
     },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "devOptional": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
+      "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
+      "devOptional": true,
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "devOptional": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "devOptional": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "devOptional": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "devOptional": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+      "devOptional": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
     "node_modules/@fastify/busboy": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
@@ -1350,7 +1511,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
       "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
-      "dev": true,
       "dependencies": {
         "@floating-ui/utils": "^0.2.1"
       }
@@ -1359,7 +1519,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.1.tgz",
       "integrity": "sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==",
-      "dev": true,
       "dependencies": {
         "@floating-ui/core": "^1.1.0"
       }
@@ -1367,8 +1526,7 @@
     "node_modules/@floating-ui/utils": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
-      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==",
-      "dev": true
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
     "node_modules/@hcaptcha/vue3-hcaptcha": {
       "version": "1.3.0",
@@ -1406,6 +1564,61 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.11.14",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+      "devOptional": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.2",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "devOptional": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "devOptional": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "devOptional": true
+    },
     "node_modules/@iconify-json/carbon": {
       "version": "1.1.31",
       "resolved": "https://registry.npmjs.org/@iconify-json/carbon/-/carbon-1.1.31.tgz",
@@ -1451,9 +1664,9 @@
       }
     },
     "node_modules/@iconify/collections": {
-      "version": "1.0.408",
-      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.408.tgz",
-      "integrity": "sha512-huq0rgLQveO5DeWw4SQpq69GwU2xBuC9UPw664Mh/yruc1BYYNvyfvWowQ2ZG4mpBO1BUmIB/T/EtTcLoCeuAA==",
+      "version": "1.0.412",
+      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.412.tgz",
+      "integrity": "sha512-LNqjIpJjW4RYTJV3XHbPOwOpuY9eYZLztjrMtm478RE2SfVWqeOs4p3h8hRVN90O49u+rEjnbfp4tvq+TlJSEA==",
       "dependencies": {
         "@iconify/types": "*"
       }
@@ -1726,9 +1939,9 @@
       }
     },
     "node_modules/@lezer/javascript": {
-      "version": "1.4.13",
-      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.13.tgz",
-      "integrity": "sha512-5IBr8LIO3xJdJH1e9aj/ZNLE4LSbdsx25wFmGRAZsj2zSmwAYjx26JyU/BYOCpRQlu1jcv1z3vy4NB9+UkfRow==",
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.14.tgz",
+      "integrity": "sha512-GEdUyspTRgc5dwIGebUk+f3BekvqEWVIYsIuAC3pA8e8wcikGwBZRWRa450L0s8noGWuULwnmi4yjxTnYz9PpA==",
       "dependencies": {
         "@lezer/common": "^1.2.0",
         "@lezer/highlight": "^1.1.3",
@@ -1826,24 +2039,24 @@
       }
     },
     "node_modules/@npmcli/agent": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-2.2.1.tgz",
-      "integrity": "sha512-H4FrOVtNyWC8MUwL3UfjOsAihHvT1Pe8POj3JvjXhSTJipsZMtgUALCT4mGyYZNxymkUfOw3PUj6dE4QPp6osQ==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-2.2.2.tgz",
+      "integrity": "sha512-OrcNPXdpSl9UX7qPVRWbmWMCSXrcDa2M9DvrbOTj7ao1S4PlqVFYv9/yLKMkrJKZ/V5A/kDBC690or307i26Og==",
       "dependencies": {
         "agent-base": "^7.1.0",
         "http-proxy-agent": "^7.0.0",
         "https-proxy-agent": "^7.0.1",
         "lru-cache": "^10.0.1",
-        "socks-proxy-agent": "^8.0.1"
+        "socks-proxy-agent": "^8.0.3"
       },
       "engines": {
         "node": "^16.14.0 || >=18.0.0"
       }
     },
     "node_modules/@npmcli/agent/node_modules/agent-base": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
-      "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
       "dependencies": {
         "debug": "^4.3.4"
       },
@@ -1883,9 +2096,9 @@
       }
     },
     "node_modules/@npmcli/git": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@npmcli/git/-/git-5.0.4.tgz",
-      "integrity": "sha512-nr6/WezNzuYUppzXRaYu/W4aT5rLxdXqEFupbh6e/ovlYFQ8hpu1UUPV3Ir/YTl+74iXl2ZOMlGzudh9ZPUchQ==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@npmcli/git/-/git-5.0.5.tgz",
+      "integrity": "sha512-x8hXItC8OFOwdgERzRIxg0ic1lQqW6kSZFFQtZTCNYOeGb9UqzVcod02TYljI9UBl4RtfcyQ0A7ygmcGFvEqWw==",
       "dependencies": {
         "@npmcli/promise-spawn": "^7.0.0",
         "lru-cache": "^10.0.1",
@@ -1954,9 +2167,9 @@
       }
     },
     "node_modules/@npmcli/package-json": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/package-json/-/package-json-5.0.0.tgz",
-      "integrity": "sha512-OI2zdYBLhQ7kpNPaJxiflofYIpkNLi+lnGdzqUOfRmCF3r2l1nadcjtCYMJKv/Utm/ZtlffaUuTiAktPHbc17g==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@npmcli/package-json/-/package-json-5.0.2.tgz",
+      "integrity": "sha512-LmW+tueGSK+FCM3OpcKtwKKo3igpefh6HHiw23sGd8OdJ8l0GrfGfVdGOFVtJRMaXVnvI1RUdEPlB9VUln5Wbw==",
       "dependencies": {
         "@npmcli/git": "^5.0.0",
         "glob": "^10.2.2",
@@ -1971,9 +2184,9 @@
       }
     },
     "node_modules/@npmcli/package-json/node_modules/glob": {
-      "version": "10.3.11",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.11.tgz",
-      "integrity": "sha512-0UAMm+R/z1E2bTR8eFnoIIlnrUK89m36i90Ez36ld9hLulfUPBgRCQtBy/v86ABx18jnGyrTvu4X3LAjIeBogw==",
+      "version": "10.3.12",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
+      "integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^2.3.6",
@@ -1991,20 +2204,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@npmcli/package-json/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/@npmcli/package-json/node_modules/minipass": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
@@ -2046,6 +2245,14 @@
         "node": "^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/@npmcli/redact": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/redact/-/redact-1.1.0.tgz",
+      "integrity": "sha512-PfnWuOkQgu7gCbnSsAisaX7hKOdZ4wSAhAzH3/ph5dSGau52kCRrMMGbiSQLwyTZpgldkZ49b0brkOr1AzGBHQ==",
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
     "node_modules/@npmcli/run-script": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/@npmcli/run-script/-/run-script-7.0.4.tgz",
@@ -2092,6 +2299,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@nuxt/devtools/-/devtools-1.0.8.tgz",
       "integrity": "sha512-o6aBFEBxc8OgVHV4OPe2g0q9tFIe9HiTxRiJnlTJ+jHvOQsBLS651ArdVtwLChf9UdMouFlpLLJ1HteZqTbtsQ==",
+      "dev": true,
       "dependencies": {
         "@antfu/utils": "^0.7.7",
         "@nuxt/devtools-kit": "1.0.8",
@@ -2140,6 +2348,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-1.0.8.tgz",
       "integrity": "sha512-j7bNZmoAXQ1a8qv6j6zk4c/aekrxYqYVQM21o/Hy4XHCUq4fajSgpoc8mjyWJSTfpkOmuLyEzMexpDWiIVSr6A==",
+      "dev": true,
       "dependencies": {
         "@nuxt/kit": "^3.9.1",
         "@nuxt/schema": "^3.9.1",
@@ -2150,10 +2359,58 @@
         "vite": "*"
       }
     },
+    "node_modules/@nuxt/devtools-ui-kit": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools-ui-kit/-/devtools-ui-kit-1.1.5.tgz",
+      "integrity": "sha512-Oj5JzINvkzoEkfeXmtiGKr15SC/LCy09O6EAzHsoJDCD0Kw2z/bPaKuw9k6cb/yKssx3gKqHuWC0+QCQubIg7g==",
+      "dev": true,
+      "dependencies": {
+        "@iconify-json/carbon": "^1.1.31",
+        "@iconify-json/logos": "^1.1.42",
+        "@iconify-json/ri": "^1.1.20",
+        "@iconify-json/tabler": "^1.1.109",
+        "@nuxt/devtools-kit": "1.1.5",
+        "@nuxt/kit": "^3.11.1",
+        "@nuxtjs/color-mode": "^3.3.3",
+        "@unocss/core": "^0.58.7",
+        "@unocss/nuxt": "^0.58.7",
+        "@unocss/preset-attributify": "^0.58.7",
+        "@unocss/preset-icons": "^0.58.7",
+        "@unocss/preset-mini": "^0.58.7",
+        "@unocss/reset": "^0.58.7",
+        "@vueuse/core": "^10.9.0",
+        "@vueuse/integrations": "^10.9.0",
+        "@vueuse/nuxt": "^10.9.0",
+        "defu": "^6.1.4",
+        "focus-trap": "^7.5.4",
+        "splitpanes": "^3.1.5",
+        "unocss": "^0.58.7",
+        "v-lazy-show": "^0.2.4"
+      },
+      "peerDependencies": {
+        "@nuxt/devtools": "1.1.5"
+      }
+    },
+    "node_modules/@nuxt/devtools-ui-kit/node_modules/@nuxt/devtools-kit": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-1.1.5.tgz",
+      "integrity": "sha512-Nb/NKFCRtxyqcPD6snB52rXtbRQMjGtn3ncpa8cLWsnoqnkd9emQ4uwV8IwCNxTnqUBtbGU79/TlJ79SKH9TAw==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.11.1",
+        "@nuxt/schema": "^3.11.1",
+        "execa": "^7.2.0"
+      },
+      "peerDependencies": {
+        "nuxt": "^3.9.0",
+        "vite": "*"
+      }
+    },
     "node_modules/@nuxt/devtools-wizard": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@nuxt/devtools-wizard/-/devtools-wizard-1.0.8.tgz",
       "integrity": "sha512-RxyOlM7Isk5npwXwDJ/rjm9ekX5sTNG0LS0VOBMdSx+D5nlRPMRr/r9yO+9WQDyzPLClLzHaXRHBWLPlRX3IMw==",
+      "dev": true,
       "dependencies": {
         "consola": "^3.2.3",
         "diff": "^5.1.0",
@@ -2170,12 +2427,28 @@
         "devtools-wizard": "cli.mjs"
       }
     },
+    "node_modules/@nuxt/eslint-config": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/eslint-config/-/eslint-config-0.2.0.tgz",
+      "integrity": "sha512-NeJX8TLcnNAjQFiDs3XhP+9CHKK8jaKsP7eUyCSrQdgY7nqWe7VJx64lwzx5FTT4cW3RHMEyH+Y0qzLGYYoa/A==",
+      "dev": true,
+      "dependencies": {
+        "@rushstack/eslint-patch": "^1.3.3",
+        "@typescript-eslint/eslint-plugin": "^6.5.0",
+        "@typescript-eslint/parser": "^6.5.0",
+        "eslint-plugin-vue": "^9.17.0",
+        "typescript": "^5.2.2"
+      },
+      "peerDependencies": {
+        "eslint": "^8.48.0"
+      }
+    },
     "node_modules/@nuxt/kit": {
-      "version": "3.11.1",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.11.1.tgz",
-      "integrity": "sha512-8VVlhaY4N+wipgHmSXP+gLM+esms9TEBz13I/J++PbOUJuf2cJlUUTyqMoRVL0xudVKK/8fJgSndRkyidy1m2w==",
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.11.2.tgz",
+      "integrity": "sha512-yiYKP0ZWMW7T3TCmsv4H8+jEsB/nFriRAR8bKoSqSV9bkVYWPE36sf7JDux30dQ91jSlQG6LQkB3vCHYTS2cIg==",
       "dependencies": {
-        "@nuxt/schema": "3.11.1",
+        "@nuxt/schema": "3.11.2",
         "c12": "^1.10.0",
         "consola": "^3.2.3",
         "defu": "^6.1.4",
@@ -2183,13 +2456,13 @@
         "hash-sum": "^2.0.0",
         "ignore": "^5.3.1",
         "jiti": "^1.21.0",
-        "knitwork": "^1.0.0",
+        "knitwork": "^1.1.0",
         "mlly": "^1.6.1",
         "pathe": "^1.1.2",
         "pkg-types": "^1.0.3",
         "scule": "^1.3.0",
         "semver": "^7.6.0",
-        "ufo": "^1.5.2",
+        "ufo": "^1.5.3",
         "unctx": "^2.3.1",
         "unimport": "^3.7.1",
         "untyped": "^1.4.2"
@@ -2199,11 +2472,11 @@
       }
     },
     "node_modules/@nuxt/schema": {
-      "version": "3.11.1",
-      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.11.1.tgz",
-      "integrity": "sha512-XyGlJsf3DtkouBCvBHlvjz+xvN4vza3W7pY3YBNMnktxlMQtfFiF3aB3A2NGLmBnJPqD3oY0j7lljraELb5hkg==",
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.11.2.tgz",
+      "integrity": "sha512-Z0bx7N08itD5edtpkstImLctWMNvxTArsKXzS35ZuqyAyKBPcRjO1CU01slH0ahO30Gg9kbck3/RKNZPwfOjJg==",
       "dependencies": {
-        "@nuxt/ui-templates": "^1.3.1",
+        "@nuxt/ui-templates": "^1.3.2",
         "consola": "^3.2.3",
         "defu": "^6.1.4",
         "hookable": "^5.5.3",
@@ -2211,7 +2484,7 @@
         "pkg-types": "^1.0.3",
         "scule": "^1.3.0",
         "std-env": "^3.7.0",
-        "ufo": "^1.5.2",
+        "ufo": "^1.5.3",
         "unimport": "^3.7.1",
         "untyped": "^1.4.2"
       },
@@ -2220,36 +2493,36 @@
       }
     },
     "node_modules/@nuxt/telemetry": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/@nuxt/telemetry/-/telemetry-2.5.3.tgz",
-      "integrity": "sha512-Ghv2MgWbJcUM9G5Dy3oQP0cJkUwEgaiuQxEF61FXJdn0a69Q4StZEP/hLF0MWPM9m6EvAwI7orxkJHM7MrmtVg==",
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/@nuxt/telemetry/-/telemetry-2.5.4.tgz",
+      "integrity": "sha512-KH6wxzsNys69daSO0xUv0LEBAfhwwjK1M+0Cdi1/vxmifCslMIY7lN11B4eywSfscbyVPAYJvANyc7XiVPImBQ==",
       "dependencies": {
-        "@nuxt/kit": "^3.8.2",
+        "@nuxt/kit": "^3.11.2",
         "ci-info": "^4.0.0",
         "consola": "^3.2.3",
         "create-require": "^1.1.1",
-        "defu": "^6.1.3",
-        "destr": "^2.0.2",
-        "dotenv": "^16.3.1",
-        "git-url-parse": "^13.1.1",
+        "defu": "^6.1.4",
+        "destr": "^2.0.3",
+        "dotenv": "^16.4.5",
+        "git-url-parse": "^14.0.0",
         "is-docker": "^3.0.0",
         "jiti": "^1.21.0",
         "mri": "^1.2.0",
-        "nanoid": "^4.0.2",
-        "ofetch": "^1.3.3",
+        "nanoid": "^5.0.7",
+        "ofetch": "^1.3.4",
         "parse-git-config": "^3.0.0",
-        "pathe": "^1.1.1",
-        "rc9": "^2.1.1",
-        "std-env": "^3.5.0"
+        "pathe": "^1.1.2",
+        "rc9": "^2.1.2",
+        "std-env": "^3.7.0"
       },
       "bin": {
         "nuxt-telemetry": "bin/nuxt-telemetry.mjs"
       }
     },
     "node_modules/@nuxt/ui": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/ui/-/ui-2.15.0.tgz",
-      "integrity": "sha512-/dQWslFKmoBXH0OD4233oiuiTUEoufeULZqALBTSqJknycQFGDj4VUMzyh5RrcfjHS6tOw6OLlPc0b5z6yDKpA==",
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/ui/-/ui-2.15.1.tgz",
+      "integrity": "sha512-wQXq7yYH5uAH9KE5wxA3KU/LniP5FhJ51tcgz6u+d+CDOXaKcDYQdzU9efSpTLNBuipbLQXDGiqq6aSeRIT6rw==",
       "dependencies": {
         "@egoist/tailwindcss-icons": "^1.7.4",
         "@headlessui/tailwindcss": "^0.2.0",
@@ -2262,7 +2535,7 @@
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tailwindcss/container-queries": "^0.1.1",
         "@tailwindcss/forms": "^0.5.7",
-        "@tailwindcss/typography": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.12",
         "@vueuse/core": "^10.9.0",
         "@vueuse/integrations": "^10.9.0",
         "@vueuse/math": "^10.9.0",
@@ -2273,30 +2546,30 @@
         "pathe": "^1.1.2",
         "scule": "^1.3.0",
         "tailwind-merge": "^2.2.2",
-        "tailwindcss": "^3.4.1"
+        "tailwindcss": "^3.4.3"
       },
       "engines": {
         "node": ">=v16.20.2"
       }
     },
     "node_modules/@nuxt/ui-templates": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@nuxt/ui-templates/-/ui-templates-1.3.1.tgz",
-      "integrity": "sha512-5gc02Pu1HycOVUWJ8aYsWeeXcSTPe8iX8+KIrhyEtEoOSkY0eMBuo0ssljB8wALuEmepv31DlYe5gpiRwkjESA=="
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@nuxt/ui-templates/-/ui-templates-1.3.3.tgz",
+      "integrity": "sha512-3BG5doAREcD50dbKyXgmjD4b1GzY8CUy3T41jMhHZXNDdaNwOd31IBq+D6dV00OSrDVhzrTVj0IxsUsnMyHvIQ=="
     },
     "node_modules/@nuxt/vite-builder": {
-      "version": "3.11.1",
-      "resolved": "https://registry.npmjs.org/@nuxt/vite-builder/-/vite-builder-3.11.1.tgz",
-      "integrity": "sha512-8DVK2Jb9xgfnvTfKr5mL3UDdAIrd3q3F4EmoVsXVKJe8NTt9LW38QdGwGViIQm9wzLDDEo0mgWF+n7WoGEH0xQ==",
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/vite-builder/-/vite-builder-3.11.2.tgz",
+      "integrity": "sha512-eXTZsAAN4dPz4eA2UD5YU2kD/DqgfyQp1UYsIdCe6+PAVe1ifkUboBjbc0piR5+3qI/S/eqk3nzxRGbiYF7Ccg==",
       "dependencies": {
-        "@nuxt/kit": "3.11.1",
+        "@nuxt/kit": "3.11.2",
         "@rollup/plugin-replace": "^5.0.5",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vitejs/plugin-vue-jsx": "^3.1.0",
-        "autoprefixer": "^10.4.18",
+        "autoprefixer": "^10.4.19",
         "clear": "^0.1.0",
         "consola": "^3.2.3",
-        "cssnano": "^6.1.0",
+        "cssnano": "^6.1.2",
         "defu": "^6.1.4",
         "esbuild": "^0.20.2",
         "escape-string-regexp": "^5.0.0",
@@ -2305,21 +2578,21 @@
         "fs-extra": "^11.2.0",
         "get-port-please": "^3.1.2",
         "h3": "^1.11.1",
-        "knitwork": "^1.0.0",
-        "magic-string": "^0.30.8",
+        "knitwork": "^1.1.0",
+        "magic-string": "^0.30.9",
         "mlly": "^1.6.1",
         "ohash": "^1.1.3",
         "pathe": "^1.1.2",
         "perfect-debounce": "^1.0.0",
         "pkg-types": "^1.0.3",
-        "postcss": "^8.4.36",
+        "postcss": "^8.4.38",
         "rollup-plugin-visualizer": "^5.12.0",
         "std-env": "^3.7.0",
-        "strip-literal": "^2.0.0",
-        "ufo": "^1.5.2",
+        "strip-literal": "^2.1.0",
+        "ufo": "^1.5.3",
         "unenv": "^1.9.0",
-        "unplugin": "^1.10.0",
-        "vite": "^5.1.6",
+        "unplugin": "^1.10.1",
+        "vite": "^5.2.8",
         "vite-node": "^1.4.0",
         "vite-plugin-checker": "^0.6.4",
         "vue-bundle-renderer": "^2.0.0"
@@ -2343,9 +2616,9 @@
       }
     },
     "node_modules/@nuxt/vite-builder/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
+      "version": "0.30.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",
+      "integrity": "sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -2354,9 +2627,9 @@
       }
     },
     "node_modules/@nuxt/vite-builder/node_modules/unplugin": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.0.tgz",
-      "integrity": "sha512-CuZtvvO8ua2Wl+9q2jEaqH6m3DoQ38N7pvBYQbbaeNlWGvK2l6GHiKi29aIHDPoSxdUzQ7Unevf1/ugil5X6Pg==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.1.tgz",
+      "integrity": "sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==",
       "dependencies": {
         "acorn": "^8.11.3",
         "chokidar": "^3.6.0",
@@ -2373,12 +2646,14 @@
       "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg=="
     },
     "node_modules/@nuxtjs/color-mode": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/color-mode/-/color-mode-3.3.3.tgz",
-      "integrity": "sha512-t6QM/tj1d/53xQ9JznNVIaqIfQWhjHRzNt5VqTxNeAJWG0HCdiHVezkUTMahPUgUbEJnBrtCoquUYwpyFhNF+Q==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/color-mode/-/color-mode-3.4.0.tgz",
+      "integrity": "sha512-rS51nG3zW8ksOwNubIP3BPQ+vBL0r2M6td1kkB/VaR1e1uVtNfWlBPfZjb604bgNCE2AeRNqaI0CrxkfnQ6h6Q==",
       "dependencies": {
-        "@nuxt/kit": "^3.11.1",
-        "pathe": "^1.1.2"
+        "@nuxt/kit": "^3.11.2",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.0.3",
+        "semver": "^7.6.0"
       }
     },
     "node_modules/@nuxtjs/tailwindcss": {
@@ -2720,6 +2995,18 @@
         "node": ">=14"
       }
     },
+    "node_modules/@pkgr/core": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.25",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
@@ -2811,17 +3098,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@rollup/plugin-commonjs/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@rollup/plugin-commonjs/node_modules/minimatch": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
@@ -2859,17 +3135,6 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
-    "node_modules/@rollup/plugin-inject/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@rollup/plugin-json": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz",
@@ -2933,17 +3198,6 @@
         }
       }
     },
-    "node_modules/@rollup/plugin-replace/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@rollup/plugin-terser": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.4.tgz",
@@ -2992,9 +3246,9 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.2.tgz",
-      "integrity": "sha512-3XFIDKWMFZrMnao1mJhnOT1h2g0169Os848NhhmGweEcfJ4rCi+3yMCOLG4zA61rbJdkcrM/DjVZm9Hg5p5w7g==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.1.tgz",
+      "integrity": "sha512-fH8/o8nSUek8ceQnT7K4EQbSiV7jgkHq81m9lWZFIXjJ7lJzpWXbQFpT/Zh6OZYnpFykvzC3fbEvEAFZu03dPA==",
       "cpu": [
         "arm"
       ],
@@ -3004,9 +3258,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.2.tgz",
-      "integrity": "sha512-GdxxXbAuM7Y/YQM9/TwwP+L0omeE/lJAR1J+olu36c3LqqZEBdsIWeQ91KBe6nxwOnb06Xh7JS2U5ooWU5/LgQ==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.1.tgz",
+      "integrity": "sha512-Y/9OHLjzkunF+KGEoJr3heiD5X9OLa8sbT1lm0NYeKyaM3oMhhQFvPB0bNZYJwlq93j8Z6wSxh9+cyKQaxS7PQ==",
       "cpu": [
         "arm64"
       ],
@@ -3016,9 +3270,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.2.tgz",
-      "integrity": "sha512-mCMlpzlBgOTdaFs83I4XRr8wNPveJiJX1RLfv4hggyIVhfB5mJfN4P8Z6yKh+oE4Luz+qq1P3kVdWrCKcMYrrA==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.1.tgz",
+      "integrity": "sha512-+kecg3FY84WadgcuSVm6llrABOdQAEbNdnpi5X3UwWiFVhZIZvKgGrF7kmLguvxHNQy+UuRV66cLVl3S+Rkt+Q==",
       "cpu": [
         "arm64"
       ],
@@ -3028,9 +3282,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.2.tgz",
-      "integrity": "sha512-yUoEvnH0FBef/NbB1u6d3HNGyruAKnN74LrPAfDQL3O32e3k3OSfLrPgSJmgb3PJrBZWfPyt6m4ZhAFa2nZp2A==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.1.tgz",
+      "integrity": "sha512-2pYRzEjVqq2TB/UNv47BV/8vQiXkFGVmPFwJb+1E0IFFZbIX8/jo1olxqqMbo6xCXf8kabANhp5bzCij2tFLUA==",
       "cpu": [
         "x64"
       ],
@@ -3040,9 +3294,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.2.tgz",
-      "integrity": "sha512-GYbLs5ErswU/Xs7aGXqzc3RrdEjKdmoCrgzhJWyFL0r5fL3qd1NPcDKDowDnmcoSiGJeU68/Vy+OMUluRxPiLQ==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.1.tgz",
+      "integrity": "sha512-mS6wQ6Do6/wmrF9aTFVpIJ3/IDXhg1EZcQFYHZLHqw6AzMBjTHWnCG35HxSqUNphh0EHqSM6wRTT8HsL1C0x5g==",
       "cpu": [
         "arm"
       ],
@@ -3052,9 +3306,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.2.tgz",
-      "integrity": "sha512-L1+D8/wqGnKQIlh4Zre9i4R4b4noxzH5DDciyahX4oOz62CphY7WDWqJoQ66zNR4oScLNOqQJfNSIAe/6TPUmQ==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.1.tgz",
+      "integrity": "sha512-p9rGKYkHdFMzhckOTFubfxgyIO1vw//7IIjBBRVzyZebWlzRLeNhqxuSaZ7kCEKVkm/kuC9fVRW9HkC/zNRG2w==",
       "cpu": [
         "arm64"
       ],
@@ -3064,9 +3318,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.2.tgz",
-      "integrity": "sha512-tK5eoKFkXdz6vjfkSTCupUzCo40xueTOiOO6PeEIadlNBkadH1wNOH8ILCPIl8by/Gmb5AGAeQOFeLev7iZDOA==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.1.tgz",
+      "integrity": "sha512-nDY6Yz5xS/Y4M2i9JLQd3Rofh5OR8Bn8qe3Mv/qCVpHFlwtZSBYSPaU4mrGazWkXrdQ98GB//H0BirGR/SKFSw==",
       "cpu": [
         "arm64"
       ],
@@ -3076,9 +3330,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.13.2.tgz",
-      "integrity": "sha512-zvXvAUGGEYi6tYhcDmb9wlOckVbuD+7z3mzInCSTACJ4DQrdSLPNUeDIcAQW39M3q6PDquqLWu7pnO39uSMRzQ==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.1.tgz",
+      "integrity": "sha512-im7HE4VBL+aDswvcmfx88Mp1soqL9OBsdDBU8NqDEYtkri0qV0THhQsvZtZeNNlLeCUQ16PZyv7cqutjDF35qw==",
       "cpu": [
         "ppc64le"
       ],
@@ -3088,9 +3342,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.2.tgz",
-      "integrity": "sha512-C3GSKvMtdudHCN5HdmAMSRYR2kkhgdOfye4w0xzyii7lebVr4riCgmM6lRiSCnJn2w1Xz7ZZzHKuLrjx5620kw==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.1.tgz",
+      "integrity": "sha512-RWdiHuAxWmzPJgaHJdpvUUlDz8sdQz4P2uv367T2JocdDa98iRw2UjIJ4QxSyt077mXZT2X6pKfT2iYtVEvOFw==",
       "cpu": [
         "riscv64"
       ],
@@ -3100,9 +3354,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.13.2.tgz",
-      "integrity": "sha512-l4U0KDFwzD36j7HdfJ5/TveEQ1fUTjFFQP5qIt9gBqBgu1G8/kCaq5Ok05kd5TG9F8Lltf3MoYsUMw3rNlJ0Yg==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.1.tgz",
+      "integrity": "sha512-VMgaGQ5zRX6ZqV/fas65/sUGc9cPmsntq2FiGmayW9KMNfWVG/j0BAqImvU4KTeOOgYSf1F+k6at1UfNONuNjA==",
       "cpu": [
         "s390x"
       ],
@@ -3112,9 +3366,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.2.tgz",
-      "integrity": "sha512-xXMLUAMzrtsvh3cZ448vbXqlUa7ZL8z0MwHp63K2IIID2+DeP5iWIT6g1SN7hg1VxPzqx0xZdiDM9l4n9LRU1A==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.1.tgz",
+      "integrity": "sha512-9Q7DGjZN+hTdJomaQ3Iub4m6VPu1r94bmK2z3UeWP3dGUecRC54tmVu9vKHTm1bOt3ASoYtEz6JSRLFzrysKlA==",
       "cpu": [
         "x64"
       ],
@@ -3124,9 +3378,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.2.tgz",
-      "integrity": "sha512-M/JYAWickafUijWPai4ehrjzVPKRCyDb1SLuO+ZyPfoXgeCEAlgPkNXewFZx0zcnoIe3ay4UjXIMdXQXOZXWqA==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.1.tgz",
+      "integrity": "sha512-JNEG/Ti55413SsreTguSx0LOVKX902OfXIKVg+TCXO6Gjans/k9O6ww9q3oLGjNDaTLxM+IHFMeXy/0RXL5R/g==",
       "cpu": [
         "x64"
       ],
@@ -3136,9 +3390,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.2.tgz",
-      "integrity": "sha512-2YWwoVg9KRkIKaXSh0mz3NmfurpmYoBBTAXA9qt7VXk0Xy12PoOP40EFuau+ajgALbbhi4uTj3tSG3tVseCjuA==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.1.tgz",
+      "integrity": "sha512-ryS22I9y0mumlLNwDFYZRDFLwWh3aKaC72CWjFcFvxK0U6v/mOkM5Up1bTbCRAhv3kEIwW2ajROegCIQViUCeA==",
       "cpu": [
         "arm64"
       ],
@@ -3148,9 +3402,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.2.tgz",
-      "integrity": "sha512-2FSsE9aQ6OWD20E498NYKEQLneShWes0NGMPQwxWOdws35qQXH+FplabOSP5zEe1pVjurSDOGEVCE2agFwSEsw==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.1.tgz",
+      "integrity": "sha512-TdloItiGk+T0mTxKx7Hp279xy30LspMso+GzQvV2maYePMAWdmrzqSNZhUpPj3CGw12aGj57I026PgLCTu8CGg==",
       "cpu": [
         "ia32"
       ],
@@ -3160,9 +3414,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.2.tgz",
-      "integrity": "sha512-7h7J2nokcdPePdKykd8wtc8QqqkqxIrUz7MHj6aNr8waBRU//NLDVnNjQnqQO6fqtjrtCdftpbTuOKAyrAQETQ==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.1.tgz",
+      "integrity": "sha512-wQGI+LY/Py20zdUPq+XCem7JcPOyzIJBm3dli+56DJsQOHbnXZFEwgmnC6el1TPAfC8lBT3m+z69RmLykNUbew==",
       "cpu": [
         "x64"
       ],
@@ -3171,83 +3425,89 @@
         "win32"
       ]
     },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.2.tgz",
+      "integrity": "sha512-hw437iINopmQuxWPSUEvqE56NCPsiU8N4AYtfHmJFckclktzK9YQJieD3XkDCDH4OjL+C7zgPUh73R/nrcHrqw==",
+      "dev": true
+    },
     "node_modules/@sentry-internal/feedback": {
-      "version": "7.108.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-7.108.0.tgz",
-      "integrity": "sha512-8JcgZEnk1uWrXJhsd3iRvFtEiVeaWOEhN0NZwhwQXHfvODqep6JtrkY1yCIyxbpA37aZmrPc2JhyotRERGfUjg==",
+      "version": "7.109.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-7.109.0.tgz",
+      "integrity": "sha512-EL7N++poxvJP9rYvh6vSu24tsKkOveNCcCj4IM7+irWPjsuD2GLYYlhp/A/Mtt9l7iqO4plvtiQU5HGk7smcTQ==",
       "dependencies": {
-        "@sentry/core": "7.108.0",
-        "@sentry/types": "7.108.0",
-        "@sentry/utils": "7.108.0"
+        "@sentry/core": "7.109.0",
+        "@sentry/types": "7.109.0",
+        "@sentry/utils": "7.109.0"
       },
       "engines": {
         "node": ">=12"
       }
     },
     "node_modules/@sentry-internal/replay-canvas": {
-      "version": "7.108.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-7.108.0.tgz",
-      "integrity": "sha512-R5tvjGqWUV5vSk0N1eBgVW7wIADinrkfDEBZ9FyKP2mXHBobsyNGt30heJDEqYmVqluRqjU2NuIRapsnnrpGnA==",
+      "version": "7.109.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-7.109.0.tgz",
+      "integrity": "sha512-Lh/K60kmloR6lkPUcQP0iamw7B/MdEUEx/ImAx4tUSMrLj+IoUEcq/ECgnnVyQkJq59+8nPEKrVLt7x6PUPEjw==",
       "dependencies": {
-        "@sentry/core": "7.108.0",
-        "@sentry/replay": "7.108.0",
-        "@sentry/types": "7.108.0",
-        "@sentry/utils": "7.108.0"
+        "@sentry/core": "7.109.0",
+        "@sentry/replay": "7.109.0",
+        "@sentry/types": "7.109.0",
+        "@sentry/utils": "7.109.0"
       },
       "engines": {
         "node": ">=12"
       }
     },
     "node_modules/@sentry-internal/tracing": {
-      "version": "7.108.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.108.0.tgz",
-      "integrity": "sha512-zuK5XsTsb+U+hgn3SPetYDAogrXsM16U/LLoMW7+TlC6UjlHGYQvmX3o+M2vntejoU1QZS8m1bCAZSMWEypAEw==",
+      "version": "7.109.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.109.0.tgz",
+      "integrity": "sha512-PzK/joC5tCuh2R/PRh+7dp+uuZl7pTsBIjPhVZHMTtb9+ls65WkdZJ1/uKXPouyz8NOo9Xok7aEvEo9seongyw==",
       "dependencies": {
-        "@sentry/core": "7.108.0",
-        "@sentry/types": "7.108.0",
-        "@sentry/utils": "7.108.0"
+        "@sentry/core": "7.109.0",
+        "@sentry/types": "7.109.0",
+        "@sentry/utils": "7.109.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/babel-plugin-component-annotate": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.16.0.tgz",
-      "integrity": "sha512-+uy1qPkA5MSNgJ0L9ur/vNTydfdHwHnBX2RQ+0thsvkqf90fU788YjkkXwUiBBNuqNyI69JiOW6frixAWy7oUg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.16.1.tgz",
+      "integrity": "sha512-pJka66URsqQbk6hTs9H1XFpUeI0xxuqLYf9Dy5pRGNHSJMtfv91U+CaYSWt03aRRMGDXMduh62zAAY7Wf0HO+A==",
       "engines": {
         "node": ">= 14"
       }
     },
     "node_modules/@sentry/browser": {
-      "version": "7.108.0",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.108.0.tgz",
-      "integrity": "sha512-FNpzsdTvGvdHJMUelqEouUXMZU7jC+dpN7CdT6IoHVVFEkoAgrjMVUhXZoQ/dmCkdKWHmFSQhJ8Fm6V+e9Aq0A==",
+      "version": "7.109.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.109.0.tgz",
+      "integrity": "sha512-yx+OFG+Ab9qUDDgV9ZDv8M9O9Mqr0fjKta/LMlWALYLjzkMvxsPlRPFj7oMBlHqOTVLDeg7lFYmsA8wyWQ8Z8g==",
       "dependencies": {
-        "@sentry-internal/feedback": "7.108.0",
-        "@sentry-internal/replay-canvas": "7.108.0",
-        "@sentry-internal/tracing": "7.108.0",
-        "@sentry/core": "7.108.0",
-        "@sentry/replay": "7.108.0",
-        "@sentry/types": "7.108.0",
-        "@sentry/utils": "7.108.0"
+        "@sentry-internal/feedback": "7.109.0",
+        "@sentry-internal/replay-canvas": "7.109.0",
+        "@sentry-internal/tracing": "7.109.0",
+        "@sentry/core": "7.109.0",
+        "@sentry/replay": "7.109.0",
+        "@sentry/types": "7.109.0",
+        "@sentry/utils": "7.109.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/bundler-plugin-core": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@sentry/bundler-plugin-core/-/bundler-plugin-core-2.16.0.tgz",
-      "integrity": "sha512-dhgIZsIR3L9KnE2OO5JJm6hPtStAjEPYKQsZzxRr69uVhd9xAvfXeXr0afKVNVEcIDksas6yMgHqwQ2wOXFIAg==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@sentry/bundler-plugin-core/-/bundler-plugin-core-2.16.1.tgz",
+      "integrity": "sha512-n6z8Ts3T9HROLuY7tVEYpBKvS+P7+b8NdqxP7QBcwp2nuPUlN5Ola1ivFjk1p5a7wRYeN9zM8orGe4l2HeNfYA==",
       "dependencies": {
         "@babel/core": "^7.18.5",
-        "@sentry/babel-plugin-component-annotate": "2.16.0",
+        "@sentry/babel-plugin-component-annotate": "2.16.1",
         "@sentry/cli": "^2.22.3",
         "dotenv": "^16.3.1",
         "find-up": "^5.0.0",
         "glob": "^9.3.2",
-        "magic-string": "0.27.0",
+        "magic-string": "0.30.8",
         "unplugin": "1.0.1"
       },
       "engines": {
@@ -3405,56 +3665,56 @@
       }
     },
     "node_modules/@sentry/core": {
-      "version": "7.108.0",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.108.0.tgz",
-      "integrity": "sha512-I/VNZCFgLASxHZaD0EtxZRM34WG9w2gozqgrKGNMzAymwmQ3K9g/1qmBy4e6iS3YRptb7J5UhQkZQHrcwBbjWQ==",
+      "version": "7.109.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.109.0.tgz",
+      "integrity": "sha512-xwD4U0IlvvlE/x/g/W1I8b4Cfb16SsCMmiEuBf6XxvAa3OfWBxKoqLifb3GyrbxMC4LbIIZCN/SvLlnGJPgszA==",
       "dependencies": {
-        "@sentry/types": "7.108.0",
-        "@sentry/utils": "7.108.0"
+        "@sentry/types": "7.109.0",
+        "@sentry/utils": "7.109.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/replay": {
-      "version": "7.108.0",
-      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.108.0.tgz",
-      "integrity": "sha512-jo8fDOzcZJclP1+4n9jUtVxTlBFT9hXwxhAMrhrt70FV/nfmCtYQMD3bzIj79nwbhUtFP6pN39JH1o7Xqt1hxQ==",
+      "version": "7.109.0",
+      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.109.0.tgz",
+      "integrity": "sha512-hCDjbTNO7ErW/XsaBXlyHFsUhneyBUdTec1Swf98TFEfVqNsTs6q338aUcaR8dGRLbLrJ9YU9D1qKq++v5h2CA==",
       "dependencies": {
-        "@sentry-internal/tracing": "7.108.0",
-        "@sentry/core": "7.108.0",
-        "@sentry/types": "7.108.0",
-        "@sentry/utils": "7.108.0"
+        "@sentry-internal/tracing": "7.109.0",
+        "@sentry/core": "7.109.0",
+        "@sentry/types": "7.109.0",
+        "@sentry/utils": "7.109.0"
       },
       "engines": {
         "node": ">=12"
       }
     },
     "node_modules/@sentry/types": {
-      "version": "7.108.0",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.108.0.tgz",
-      "integrity": "sha512-bKtHITmBN3kqtqE5eVvL8mY8znM05vEodENwRpcm6TSrrBjC2RnwNWVwGstYDdHpNfFuKwC8mLY9bgMJcENo8g==",
+      "version": "7.109.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.109.0.tgz",
+      "integrity": "sha512-egCBnDv3YpVFoNzRLdP0soVrxVLCQ+rovREKJ1sw3rA2/MFH9WJ+DZZexsX89yeAFzy1IFsCp7/dEqudusml6g==",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/utils": {
-      "version": "7.108.0",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.108.0.tgz",
-      "integrity": "sha512-a45yEFD5qtgZaIFRAcFkG8C8lnDzn6t4LfLXuV4OafGAy/3ZAN3XN8wDnrruHkiUezSSANGsLg3bXaLW/JLvJw==",
+      "version": "7.109.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.109.0.tgz",
+      "integrity": "sha512-3RjxMOLMBwZ5VSiH84+o/3NY2An4Zldjz0EbfEQNRY9yffRiCPJSQiCJID8EoylCFOh/PAhPimBhqbtWJxX6iw==",
       "dependencies": {
-        "@sentry/types": "7.108.0"
+        "@sentry/types": "7.109.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@sentry/vite-plugin": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@sentry/vite-plugin/-/vite-plugin-2.16.0.tgz",
-      "integrity": "sha512-/7rFTpasql9fJ1KbruF0yDESKV/ojvOP9pL/qqwUffvA9iy9Bvw3kYzzyzd1YsiCiVBgftoCsFTKPcvL3A4rwQ==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@sentry/vite-plugin/-/vite-plugin-2.16.1.tgz",
+      "integrity": "sha512-RSIyeqFG3PR5iJsZnagQxzOhM22z1Kh9DG+HQQsfVrxokzrWKRu/G17O2MIDh2I5iYEaL0Fkd/9RAXE4/b0aVg==",
       "dependencies": {
-        "@sentry/bundler-plugin-core": "2.16.0",
+        "@sentry/bundler-plugin-core": "2.16.1",
         "unplugin": "1.0.1"
       },
       "engines": {
@@ -3462,14 +3722,14 @@
       }
     },
     "node_modules/@sentry/vue": {
-      "version": "7.108.0",
-      "resolved": "https://registry.npmjs.org/@sentry/vue/-/vue-7.108.0.tgz",
-      "integrity": "sha512-hnqL/LIq3i4dJVMFq0oP8OP5ybMRYcW5dhtzlJFKo3A9i0BRzC4VUUcDnm1zTT9Um1YIU19mOy0cJBGplRQB9g==",
+      "version": "7.109.0",
+      "resolved": "https://registry.npmjs.org/@sentry/vue/-/vue-7.109.0.tgz",
+      "integrity": "sha512-aATuLXJB7YJaezedwP71sGeVabt9moyvxlZZdTU+LdgTizdMZk3zvWF/Uen6HGCgvKerDYt52zSHWSQvDHCvLw==",
       "dependencies": {
-        "@sentry/browser": "7.108.0",
-        "@sentry/core": "7.108.0",
-        "@sentry/types": "7.108.0",
-        "@sentry/utils": "7.108.0"
+        "@sentry/browser": "7.109.0",
+        "@sentry/core": "7.109.0",
+        "@sentry/types": "7.109.0",
+        "@sentry/utils": "7.109.0"
       },
       "engines": {
         "node": ">=8"
@@ -3479,17 +3739,17 @@
       }
     },
     "node_modules/@shikijs/core": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.2.1.tgz",
-      "integrity": "sha512-KaIS0H4EQ3KI2d++TjYqRNgwp8E3M/68e9veR4QtInzA7kKFgcjeiJqb80fuXW+blDy5fmd11PN9g9soz/3ANQ==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.3.0.tgz",
+      "integrity": "sha512-7fedsBfuILDTBmrYZNFI8B6ATTxhQAasUHllHmjvSZPnoq4bULWoTpHwmuQvZ8Aq03/tAa2IGo6RXqWtHdWaCA==",
       "dev": true
     },
     "node_modules/@sigstore/bundle": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@sigstore/bundle/-/bundle-2.2.0.tgz",
-      "integrity": "sha512-5VI58qgNs76RDrwXNhpmyN/jKpq9evV/7f1XrcqcAfvxDl5SeVY/I5Rmfe96ULAV7/FK5dge9RBKGBJPhL1WsQ==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@sigstore/bundle/-/bundle-2.3.1.tgz",
+      "integrity": "sha512-eqV17lO3EIFqCWK3969Rz+J8MYrRZKw9IBHpSo6DEcEX2c+uzDFOgHE9f2MnyDpfs48LFO4hXmk9KhQ74JzU1g==",
       "dependencies": {
-        "@sigstore/protobuf-specs": "^0.3.0"
+        "@sigstore/protobuf-specs": "^0.3.1"
       },
       "engines": {
         "node": "^16.14.0 || >=18.0.0"
@@ -3504,21 +3764,21 @@
       }
     },
     "node_modules/@sigstore/protobuf-specs": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@sigstore/protobuf-specs/-/protobuf-specs-0.3.0.tgz",
-      "integrity": "sha512-zxiQ66JFOjVvP9hbhGj/F/qNdsZfkGb/dVXSanNRNuAzMlr4MC95voPUBX8//ZNnmv3uSYzdfR/JSkrgvZTGxA==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@sigstore/protobuf-specs/-/protobuf-specs-0.3.1.tgz",
+      "integrity": "sha512-aIL8Z9NsMr3C64jyQzE0XlkEyBLpgEJJFDHLVVStkFV5Q3Il/r/YtY6NJWKQ4cy4AE7spP1IX5Jq7VCAxHHMfQ==",
       "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
     "node_modules/@sigstore/sign": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/@sigstore/sign/-/sign-2.2.3.tgz",
-      "integrity": "sha512-LqlA+ffyN02yC7RKszCdMTS6bldZnIodiox+IkT8B2f8oRYXCB3LQ9roXeiEL21m64CVH1wyveYAORfD65WoSw==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@sigstore/sign/-/sign-2.3.0.tgz",
+      "integrity": "sha512-tsAyV6FC3R3pHmKS880IXcDJuiFJiKITO1jxR1qbplcsBkZLBmjrEw5GbC7ikD6f5RU1hr7WnmxB/2kKc1qUWQ==",
       "dependencies": {
-        "@sigstore/bundle": "^2.2.0",
+        "@sigstore/bundle": "^2.3.0",
         "@sigstore/core": "^1.0.0",
-        "@sigstore/protobuf-specs": "^0.3.0",
+        "@sigstore/protobuf-specs": "^0.3.1",
         "make-fetch-happen": "^13.0.0"
       },
       "engines": {
@@ -3538,13 +3798,13 @@
       }
     },
     "node_modules/@sigstore/verify": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@sigstore/verify/-/verify-1.1.1.tgz",
-      "integrity": "sha512-BNANJms49rw9Q5J+fJjrDqOQSzjXDcOq/pgKDaVdDoIvQwqIfaoUriy+fQfh8sBX04hr4bkkrwu3EbhQqoQH7A==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@sigstore/verify/-/verify-1.2.0.tgz",
+      "integrity": "sha512-hQF60nc9yab+Csi4AyoAmilGNfpXT+EXdBgFkP9OgPwIBPwyqVf7JAWPtmqrrrneTmAT6ojv7OlH1f6Ix5BG4Q==",
       "dependencies": {
-        "@sigstore/bundle": "^2.2.0",
+        "@sigstore/bundle": "^2.3.1",
         "@sigstore/core": "^1.1.0",
-        "@sigstore/protobuf-specs": "^0.3.0"
+        "@sigstore/protobuf-specs": "^0.3.1"
       },
       "engines": {
         "node": "^16.14.0 || >=18.0.0"
@@ -3602,6 +3862,18 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@tanstack/virtual-core": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.2.0.tgz",
@@ -3654,25 +3926,11 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/@tufjs/models/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/@types/eslint": {
-      "version": "8.56.6",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.6.tgz",
-      "integrity": "sha512-ymwc+qb1XkjT/gfoQwxIeHZ6ixH23A+tCT2ADSA/DPVKzAjwYkTXBMCQ/f6fe4wEa85Lhp26VPeUxI7wMhAi7A==",
-      "dev": true,
+      "version": "8.56.9",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.9.tgz",
+      "integrity": "sha512-W4W3KcqzjJ0sHg2vAq9vfml6OhsJ53TcUjUqfzzZf/EChUtwspszj/S0pzMxnfRcO55/iGq47dscXw71Fxc4Zg==",
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@types/estree": "*",
@@ -3683,7 +3941,7 @@
       "version": "3.7.7",
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
       "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@types/eslint": "*",
@@ -3707,43 +3965,283 @@
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true,
-      "peer": true
+      "devOptional": true
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz",
+      "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA=="
     },
     "node_modules/@types/node": {
-      "version": "20.11.30",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
-      "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
+      "version": "20.12.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
+      "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
       "dependencies": {
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/resize-observer-browser": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.11.tgz",
+      "integrity": "sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ=="
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
     },
+    "node_modules/@types/semver": {
+      "version": "7.5.8",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
+      "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
+      "dev": true
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
       "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
+      "integrity": "sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.5.1",
+        "@typescript-eslint/scope-manager": "6.21.0",
+        "@typescript-eslint/type-utils": "6.21.0",
+        "@typescript-eslint/utils": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
+        "debug": "^4.3.4",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.4",
+        "natural-compare": "^1.4.0",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
+        "eslint": "^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
+      "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "6.21.0",
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/typescript-estree": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
+      "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz",
+      "integrity": "sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "6.21.0",
+        "@typescript-eslint/utils": "6.21.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
+      "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
+      "dev": true,
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
+      "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "9.0.3",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz",
+      "integrity": "sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@types/json-schema": "^7.0.12",
+        "@types/semver": "^7.5.0",
+        "@typescript-eslint/scope-manager": "6.21.0",
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/typescript-estree": "6.21.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
+      "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "6.21.0",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "devOptional": true
+    },
     "node_modules/@unhead/dom": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.9.2.tgz",
-      "integrity": "sha512-yREmUAfYJsPV9qR3G85MkdH+FdvsHf8AIJRm7FgQidrPxFr8tCICdID3+jXULz3oq8pFye1tAyHlBHXeq3SIpA==",
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.9.4.tgz",
+      "integrity": "sha512-nEaHOcCL0u56g4XOV5XGwRMFZ05eEINfp8nxVrPiIGLrS9BoFrZS7/6IYSkalkNRTmw8M5xqxt6BalBr594SaA==",
       "dependencies": {
-        "@unhead/schema": "1.9.2",
-        "@unhead/shared": "1.9.2"
+        "@unhead/schema": "1.9.4",
+        "@unhead/shared": "1.9.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/harlan-zw"
       }
     },
     "node_modules/@unhead/schema": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.9.2.tgz",
-      "integrity": "sha512-NRCAcuWtD2WCL8u3qR1yn41JpDB+ExjBnSLAuJseOD9+XJjQBqPRgx/bhxZ3Dx6vrrCnCF+SvKr+W1pa+3mWdA==",
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.9.4.tgz",
+      "integrity": "sha512-/J6KYQ+aqKO5uLDTU9BXfiRAfJ3mQNmF5gh3Iyd4qZaWfqjsDGYIaAe4xAGPnJxwBn6FHlnvQvZBSGqru1MByw==",
       "dependencies": {
         "hookable": "^5.5.3",
         "zhead": "^2.2.4"
@@ -3753,37 +4251,37 @@
       }
     },
     "node_modules/@unhead/shared": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.9.2.tgz",
-      "integrity": "sha512-jXQ4vK9wXf66hflOSBUXQKVsOLJrYVSOknDH+9PTwz5CIgJv/Y/o/NkRCJjyf5W7qFf605Te28lbTeLumT+BeQ==",
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.9.4.tgz",
+      "integrity": "sha512-ErP6SUzPPRX9Df4fqGlwlLInoG+iBiH0nDudRuIpoFGyTnv1uO9BQ+lfFld8s1gI1WCdoBwVkISBp9/f/E/GLA==",
       "dependencies": {
-        "@unhead/schema": "1.9.2"
+        "@unhead/schema": "1.9.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/harlan-zw"
       }
     },
     "node_modules/@unhead/ssr": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.9.2.tgz",
-      "integrity": "sha512-XKNAK3A67ZZpNq8arTyUj7brmTOYH3PJrVSx546MCQQvCuP6U3brWyIPy12+a/XiAxr4z62vd2IHCZya8OrZrQ==",
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@unhead/ssr/-/ssr-1.9.4.tgz",
+      "integrity": "sha512-+32lSX6q+c+PcF0NsywBMmwDgxApjo4R7yxjRBB0gmeEcr58hejS/Ju82D8dLKvHqafLB1cQA7I4XUPyrDUx3Q==",
       "dependencies": {
-        "@unhead/schema": "1.9.2",
-        "@unhead/shared": "1.9.2"
+        "@unhead/schema": "1.9.4",
+        "@unhead/shared": "1.9.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/harlan-zw"
       }
     },
     "node_modules/@unhead/vue": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.9.2.tgz",
-      "integrity": "sha512-wp0eOyb7tu2isSt1IiDGm194W/8DVL3cXZd8uvhVlhS9yPL3TzwrSNbvwx95fhfrGuXFraoLjp4SpZ2BCszFsg==",
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.9.4.tgz",
+      "integrity": "sha512-F37bDhhieWQJyXvFV8NmrOXoIVJMhxVI/0ZUDrI9uTkMCofjfKWDJ+Gz0iYdhYF9mjQ5BN+pM31Zpxi+fN5Cfg==",
       "dependencies": {
-        "@unhead/schema": "1.9.2",
-        "@unhead/shared": "1.9.2",
+        "@unhead/schema": "1.9.4",
+        "@unhead/shared": "1.9.4",
         "hookable": "^5.5.3",
-        "unhead": "1.9.2"
+        "unhead": "1.9.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/harlan-zw"
@@ -3793,14 +4291,13 @@
       }
     },
     "node_modules/@unocss/astro": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/astro/-/astro-0.58.8.tgz",
-      "integrity": "sha512-pAjsKuVg41dXNPWpFKx/SDxz198Miu/hqAL4lMkE2ITY+nFgqt9SH1lGS9P+VzElrHZ+Uqwmmtw8SjaT2EfCMA==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/astro/-/astro-0.58.9.tgz",
+      "integrity": "sha512-VWfHNC0EfawFxLfb3uI+QcMGBN+ju+BYtutzeZTjilLKj31X2UpqIh8fepixL6ljgZzB3fweqg2xtUMC0gMnoQ==",
       "dependencies": {
-        "@unocss/core": "0.58.8",
-        "@unocss/reset": "0.58.8",
-        "@unocss/vite": "0.58.8"
+        "@unocss/core": "0.58.9",
+        "@unocss/reset": "0.58.9",
+        "@unocss/vite": "0.58.9"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -3815,16 +4312,15 @@
       }
     },
     "node_modules/@unocss/cli": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/cli/-/cli-0.58.8.tgz",
-      "integrity": "sha512-TxFyrMPBuPPkyvW1oJ+f9Q0IOX7hXcuZqmFzsv7n153HXHU6fZCNxFzqbOWUR2K1eS4ScBREjIOWZYekXx7s2g==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/cli/-/cli-0.58.9.tgz",
+      "integrity": "sha512-q7qlwX3V6UaqljWUQ5gMj36yTA9eLuuRywahdQWt1ioy4aPF/MEEfnMBZf/ntrqf5tIT5TO8fE11nvCco2Q/sA==",
       "dependencies": {
         "@ampproject/remapping": "^2.3.0",
         "@rollup/pluginutils": "^5.1.0",
-        "@unocss/config": "0.58.8",
-        "@unocss/core": "0.58.8",
-        "@unocss/preset-uno": "0.58.8",
+        "@unocss/config": "0.58.9",
+        "@unocss/core": "0.58.9",
+        "@unocss/preset-uno": "0.58.9",
         "cac": "^6.7.14",
         "chokidar": "^3.6.0",
         "colorette": "^2.0.20",
@@ -3844,26 +4340,13 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@unocss/cli/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dev": true,
+    "node_modules/@unocss/config": {
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/config/-/config-0.58.9.tgz",
+      "integrity": "sha512-90wRXIyGNI8UenWxvHUcH4l4rgq813MsTzYWsf6ZKyLLvkFjV2b2EfGXI27GPvZ7fVE1OAqx+wJNTw8CyQxwag==",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@unocss/config": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/config/-/config-0.58.8.tgz",
-      "integrity": "sha512-x0/FCP1vuU7z2Y1e4m5fazLEr9DyXQZ9aM8Rt72V8ElD9CmEwxGmxt6MVB+LkuXglH3srr9Btnhuir4P6jI92g==",
-      "dev": true,
-      "dependencies": {
-        "@unocss/core": "0.58.8",
-        "unconfig": "^0.3.11"
+        "@unocss/core": "0.58.9",
+        "unconfig": "^0.3.11"
       },
       "engines": {
         "node": ">=14"
@@ -3873,34 +4356,31 @@
       }
     },
     "node_modules/@unocss/core": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/core/-/core-0.58.8.tgz",
-      "integrity": "sha512-R3KuNTzF6G+bb2Qqg4LNLTWHh4TGU8iQJ4KOlpWHrPKAhDSCZ3XY9lSXoepCPwv+JcGEwA97Msa3zZ5p+QDoFg==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/core/-/core-0.58.9.tgz",
+      "integrity": "sha512-wYpPIPPsOIbIoMIDuH8ihehJk5pAZmyFKXIYO/Kro98GEOFhz6lJoLsy6/PZuitlgp2/TSlubUuWGjHWvp5osw==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@unocss/extractor-arbitrary-variants": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/extractor-arbitrary-variants/-/extractor-arbitrary-variants-0.58.8.tgz",
-      "integrity": "sha512-zQ7W3wTWWbJvG9T+1b9HqJGtEzcrc3d/TG7JJqdon6vBc64xA2AMf9DNRVlNdzkrU2Kl31TRd6bLST6iMncovw==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/extractor-arbitrary-variants/-/extractor-arbitrary-variants-0.58.9.tgz",
+      "integrity": "sha512-M/BvPdbEEMdhcFQh/z2Bf9gylO1Ky/ZnpIvKWS1YJPLt4KA7UWXSUf+ZNTFxX+X58Is5qAb5hNh/XBQmL3gbXg==",
       "dependencies": {
-        "@unocss/core": "0.58.8"
+        "@unocss/core": "0.58.9"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@unocss/inspector": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/inspector/-/inspector-0.58.8.tgz",
-      "integrity": "sha512-nLmIIwOXnoTpsUFuvlKj8t8xxBi3gMw0+osW9xrYxt5whkV05IUfMwSTFQ3yDhKpmEW8fmUEMqrmu0sdLtRRZA==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/inspector/-/inspector-0.58.9.tgz",
+      "integrity": "sha512-uRzqkCNeBmEvFePXcfIFcQPMlCXd9/bLwa5OkBthiOILwQdH1uRIW3GWAa2SWspu+kZLP0Ly3SjZ9Wqi+5ZtTw==",
       "dependencies": {
-        "@unocss/core": "0.58.8",
-        "@unocss/rule-utils": "0.58.8",
+        "@unocss/core": "0.58.9",
+        "@unocss/rule-utils": "0.58.9",
         "gzip-size": "^6.0.0",
         "sirv": "^2.0.4"
       },
@@ -3912,7 +4392,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
       "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
-      "dev": true,
       "dependencies": {
         "duplexer": "^0.1.2"
       },
@@ -3924,39 +4403,38 @@
       }
     },
     "node_modules/@unocss/nuxt": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/nuxt/-/nuxt-0.58.8.tgz",
-      "integrity": "sha512-RxNHzb5LL95aHymR6Jjzq1iYq2D+i9TM438S51JlSsmPwVnKW5PFGBeyQclUPYuBluWfOnsok3Rsg55JgZKwqA==",
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/nuxt/-/nuxt-0.58.9.tgz",
+      "integrity": "sha512-zrzbpNjjstiXsjfRCwBt0ZDMquTPqAWry6OT1Z8YUeRmQ2YuPNJDnvUSWZuA5zYbXjMjuCTtX+jkHctMIabOYA==",
       "dev": true,
       "dependencies": {
         "@nuxt/kit": "^3.11.1",
-        "@unocss/config": "0.58.8",
-        "@unocss/core": "0.58.8",
-        "@unocss/preset-attributify": "0.58.8",
-        "@unocss/preset-icons": "0.58.8",
-        "@unocss/preset-tagify": "0.58.8",
-        "@unocss/preset-typography": "0.58.8",
-        "@unocss/preset-uno": "0.58.8",
-        "@unocss/preset-web-fonts": "0.58.8",
-        "@unocss/preset-wind": "0.58.8",
-        "@unocss/reset": "0.58.8",
-        "@unocss/vite": "0.58.8",
-        "@unocss/webpack": "0.58.8",
-        "unocss": "0.58.8"
+        "@unocss/config": "0.58.9",
+        "@unocss/core": "0.58.9",
+        "@unocss/preset-attributify": "0.58.9",
+        "@unocss/preset-icons": "0.58.9",
+        "@unocss/preset-tagify": "0.58.9",
+        "@unocss/preset-typography": "0.58.9",
+        "@unocss/preset-uno": "0.58.9",
+        "@unocss/preset-web-fonts": "0.58.9",
+        "@unocss/preset-wind": "0.58.9",
+        "@unocss/reset": "0.58.9",
+        "@unocss/vite": "0.58.9",
+        "@unocss/webpack": "0.58.9",
+        "unocss": "0.58.9"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@unocss/postcss": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/postcss/-/postcss-0.58.8.tgz",
-      "integrity": "sha512-nI8Cbvc7/IFMGVeFXAHEom5X76gb0dSylBGvlVtWakq27nBwlxG4c3+58dVWg7Nyqvn1mC/sOMGpqjfk8FdJcQ==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/postcss/-/postcss-0.58.9.tgz",
+      "integrity": "sha512-PnKmH6Qhimw35yO6u6yx9SHaX2NmvbRNPDvMDHA/1xr3M8L0o8U88tgKbWfm65NEGF3R1zJ9A8rjtZn/LPkgPA==",
       "dependencies": {
-        "@unocss/config": "0.58.8",
-        "@unocss/core": "0.58.8",
-        "@unocss/rule-utils": "0.58.8",
+        "@unocss/config": "0.58.9",
+        "@unocss/core": "0.58.9",
+        "@unocss/rule-utils": "0.58.9",
         "css-tree": "^2.3.1",
         "fast-glob": "^3.3.2",
         "magic-string": "^0.30.8",
@@ -3972,38 +4450,24 @@
         "postcss": "^8.4.21"
       }
     },
-    "node_modules/@unocss/postcss/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@unocss/preset-attributify": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/preset-attributify/-/preset-attributify-0.58.8.tgz",
-      "integrity": "sha512-QEKPDfoYxU2WqqTmd1JX72PDE5UuAHh3q9GgQEP7I6DRFeQ7H2xM62t3FLms5tdNRAALJnhl/jz5+Rajxp9ZQA==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-attributify/-/preset-attributify-0.58.9.tgz",
+      "integrity": "sha512-ucP+kXRFcwmBmHohUVv31bE/SejMAMo7Hjb0QcKVLyHlzRWUJsfNR+jTAIGIUSYxN7Q8MeigYsongGo3nIeJnQ==",
       "dependencies": {
-        "@unocss/core": "0.58.8"
+        "@unocss/core": "0.58.9"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@unocss/preset-icons": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/preset-icons/-/preset-icons-0.58.8.tgz",
-      "integrity": "sha512-T6xf7pE9+CiTzJgPlHUbxg27agTw/QmUp0FUt+LJr8Nvs4jwe2GDKvAiXrMfCw+s6yOqVFgxPcLpKQWoS5QhEA==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-icons/-/preset-icons-0.58.9.tgz",
+      "integrity": "sha512-9dS48+yAunsbS0ylOW2Wisozwpn3nGY1CqTiidkUnrMnrZK3al579A7srUX9NyPWWDjprO7eU/JkWbdDQSmFFA==",
       "dependencies": {
         "@iconify/utils": "^2.1.22",
-        "@unocss/core": "0.58.8",
+        "@unocss/core": "0.58.9",
         "ofetch": "^1.3.4"
       },
       "funding": {
@@ -4011,63 +4475,58 @@
       }
     },
     "node_modules/@unocss/preset-mini": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/preset-mini/-/preset-mini-0.58.8.tgz",
-      "integrity": "sha512-dCn9ny8Fpiya8qwc2dRkh8YCH5xwf+iD3MxP9YgfweO1o816onBJVqb03xEJT/MOxYkpuRFVJGU+cVSpehamiw==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-mini/-/preset-mini-0.58.9.tgz",
+      "integrity": "sha512-m4aDGYtueP8QGsU3FsyML63T/w5Mtr4htme2jXy6m50+tzC1PPHaIBstMTMQfLc6h8UOregPJyGHB5iYQZGEvQ==",
       "dependencies": {
-        "@unocss/core": "0.58.8",
-        "@unocss/extractor-arbitrary-variants": "0.58.8",
-        "@unocss/rule-utils": "0.58.8"
+        "@unocss/core": "0.58.9",
+        "@unocss/extractor-arbitrary-variants": "0.58.9",
+        "@unocss/rule-utils": "0.58.9"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@unocss/preset-tagify": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/preset-tagify/-/preset-tagify-0.58.8.tgz",
-      "integrity": "sha512-Xmz1H4bMPpRlm/93RNRRBDzyjRdO5pkEKePQo+J3WXY+FfCrhE/BHopa7plNejoPd/k/4CtdFLuQCVRteHiZ+A==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-tagify/-/preset-tagify-0.58.9.tgz",
+      "integrity": "sha512-obh75XrRmxYwrQMflzvhQUMeHwd/R9bEDhTWUW9aBTolBy4eNypmQwOhHCKh5Xi4Dg6o0xj6GWC/jcCj1SPLog==",
       "dependencies": {
-        "@unocss/core": "0.58.8"
+        "@unocss/core": "0.58.9"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@unocss/preset-typography": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/preset-typography/-/preset-typography-0.58.8.tgz",
-      "integrity": "sha512-NX0OC3MTj3CFNkQfcHIksJbPVD1rxAbTTTK3l1x6mul7XOAolWjLXy1aVyGeOFLpCSX4Wv9YrYsa9l2fpnZKgg==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-typography/-/preset-typography-0.58.9.tgz",
+      "integrity": "sha512-hrsaqKlcZni3Vh4fwXC+lP9e92FQYbqtmlZw2jpxlVwwH5aLzwk4d4MiFQGyhCfzuSDYm0Zd52putFVV02J7bA==",
       "dependencies": {
-        "@unocss/core": "0.58.8",
-        "@unocss/preset-mini": "0.58.8"
+        "@unocss/core": "0.58.9",
+        "@unocss/preset-mini": "0.58.9"
       }
     },
     "node_modules/@unocss/preset-uno": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/preset-uno/-/preset-uno-0.58.8.tgz",
-      "integrity": "sha512-zqIZLAX6g04B/9rVuGyVNd7/Jdng2rKfw9i9UFG6x0xYN1y+WuyV7+FN66bIJMj7EB17CusHWVMllHRKToOrmw==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-uno/-/preset-uno-0.58.9.tgz",
+      "integrity": "sha512-Fze+X2Z/EegCkRdDRgwwvFBmXBenNR1AG8KxAyz8iPeWbhOBaRra2sn2ScryrfH6SbJHpw26ZyJXycAdS0Fq3A==",
       "dependencies": {
-        "@unocss/core": "0.58.8",
-        "@unocss/preset-mini": "0.58.8",
-        "@unocss/preset-wind": "0.58.8",
-        "@unocss/rule-utils": "0.58.8"
+        "@unocss/core": "0.58.9",
+        "@unocss/preset-mini": "0.58.9",
+        "@unocss/preset-wind": "0.58.9",
+        "@unocss/rule-utils": "0.58.9"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@unocss/preset-web-fonts": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/preset-web-fonts/-/preset-web-fonts-0.58.8.tgz",
-      "integrity": "sha512-ENDdJlJF4JWu4NSuG83S8gtUhAH5ua/mFItOaTtRffAPHPHuhOqm8krVYunBgkpRMTXYJhnpO4auUsOAMkV1Fw==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-web-fonts/-/preset-web-fonts-0.58.9.tgz",
+      "integrity": "sha512-XtiO+Z+RYnNYomNkS2XxaQiY++CrQZKOfNGw5htgIrb32QtYVQSkyYQ3jDw7JmMiCWlZ4E72cV/zUb++WrZLxg==",
       "dependencies": {
-        "@unocss/core": "0.58.8",
+        "@unocss/core": "0.58.9",
         "ofetch": "^1.3.4"
       },
       "funding": {
@@ -4075,35 +4534,32 @@
       }
     },
     "node_modules/@unocss/preset-wind": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/preset-wind/-/preset-wind-0.58.8.tgz",
-      "integrity": "sha512-7ktb0wJgZg9q2xlNXfgx2pRjg22WJ+B3ENIk9+DB88pty2f6dYo24l8ZyJXQbHglgCilY64NP0fNHkBlUF9olg==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/preset-wind/-/preset-wind-0.58.9.tgz",
+      "integrity": "sha512-7l+7Vx5UoN80BmJKiqDXaJJ6EUqrnUQYv8NxCThFi5lYuHzxsYWZPLU3k3XlWRUQt8XL+6rYx7mMBmD7EUSHyw==",
       "dependencies": {
-        "@unocss/core": "0.58.8",
-        "@unocss/preset-mini": "0.58.8",
-        "@unocss/rule-utils": "0.58.8"
+        "@unocss/core": "0.58.9",
+        "@unocss/preset-mini": "0.58.9",
+        "@unocss/rule-utils": "0.58.9"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@unocss/reset": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/reset/-/reset-0.58.8.tgz",
-      "integrity": "sha512-6Cz92Ryer7QpFhxnOwyauwVJfDGhCNYvLHGqW8ScIicFEPK9AUXYys/zBRCIYO2489/kckZ5EG8a3NImS5h+9w==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/reset/-/reset-0.58.9.tgz",
+      "integrity": "sha512-nA2pg3tnwlquq+FDOHyKwZvs20A6iBsKPU7Yjb48JrNnzoaXqE+O9oN6782IG2yKVW4AcnsAnAnM4cxXhGzy1w==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@unocss/rule-utils": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/rule-utils/-/rule-utils-0.58.8.tgz",
-      "integrity": "sha512-F7TKtTkiV9ICf8JMYO1+Eq/5zrrV7Fw966rQfHfIKrN6Vwo3tw84b5R0bLJghAFtb9UuD7q9eCfy6WBQK0d7Tw==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/rule-utils/-/rule-utils-0.58.9.tgz",
+      "integrity": "sha512-45bDa+elmlFLthhJmKr2ltKMAB0yoXnDMQ6Zp5j3OiRB7dDMBkwYRPvHLvIe+34Ey7tDt/kvvDPtWMpPl2quUQ==",
       "dependencies": {
-        "@unocss/core": "^0.58.8",
+        "@unocss/core": "^0.58.9",
         "magic-string": "^0.30.8"
       },
       "engines": {
@@ -4113,99 +4569,80 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@unocss/rule-utils/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@unocss/scope": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/scope/-/scope-0.58.8.tgz",
-      "integrity": "sha512-FpXGSWQU+XfguSPrFm9NfZYKmDikxu4KB+fvVzgHkN3e+UQ7QSHFHREbdc+E8x0HPMNkoNnYVaCr0qgIBUEKFA==",
-      "dev": true
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/scope/-/scope-0.58.9.tgz",
+      "integrity": "sha512-BIwcpx0R3bE0rYa9JVDJTk0GX32EBvnbvufBpNkWfC5tb7g+B7nMkVq9ichanksYCCxrIQQo0mrIz5PNzu9sGA=="
     },
     "node_modules/@unocss/transformer-attributify-jsx": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/transformer-attributify-jsx/-/transformer-attributify-jsx-0.58.8.tgz",
-      "integrity": "sha512-MFpbIJB9vsfKHHMJ04gObQ5EM1qySNPev3gysmvduBSQyHy6CRmUugTCWVStaZeepzYMASgOkFfx64xIyKAHpw==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/transformer-attributify-jsx/-/transformer-attributify-jsx-0.58.9.tgz",
+      "integrity": "sha512-jpL3PRwf8t43v1agUdQn2EHGgfdWfvzsMxFtoybO88xzOikzAJaaouteNtojc/fQat2T9iBduDxVj5egdKmhdQ==",
       "dependencies": {
-        "@unocss/core": "0.58.8"
+        "@unocss/core": "0.58.9"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@unocss/transformer-attributify-jsx-babel": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/transformer-attributify-jsx-babel/-/transformer-attributify-jsx-babel-0.58.8.tgz",
-      "integrity": "sha512-4+Ctwo57RiLcxoZtoRvS2XE6NHiVTolA8RW6dI5EQU6Z5n2XYPpkkUdSHcmXuFWuJ5ZD19FzUnCsxtBoPbr2Fw==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/transformer-attributify-jsx-babel/-/transformer-attributify-jsx-babel-0.58.9.tgz",
+      "integrity": "sha512-UGaQoGZg+3QrsPtnGHPECmsGn4EQb2KSdZ4eGEn2YssjKv+CcQhzRvpEUgnuF/F+jGPkCkS/G/YEQBHRWBY54Q==",
       "dependencies": {
         "@babel/core": "^7.24.3",
         "@babel/plugin-syntax-jsx": "^7.24.1",
         "@babel/preset-typescript": "^7.24.1",
-        "@unocss/core": "0.58.8"
+        "@unocss/core": "0.58.9"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@unocss/transformer-compile-class": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/transformer-compile-class/-/transformer-compile-class-0.58.8.tgz",
-      "integrity": "sha512-bMC+sXeD8VjjcqRtDIflh823zpmVOWeEQecRPPvYr0EU6u41N4L4m4SPIqyichmV6nbVKfJOhw1s8kWdBfNI2g==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/transformer-compile-class/-/transformer-compile-class-0.58.9.tgz",
+      "integrity": "sha512-l2VpCqelJ6Tgc1kfSODxBtg7fCGPVRr2EUzTg1LrGYKa2McbKuc/wV/2DWKHGxL6+voWi7a2C9XflqGDXXutuQ==",
       "dependencies": {
-        "@unocss/core": "0.58.8"
+        "@unocss/core": "0.58.9"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@unocss/transformer-directives": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/transformer-directives/-/transformer-directives-0.58.8.tgz",
-      "integrity": "sha512-KdNzgmL5gdls1MTRvB7DKJRbLai1t8JeKCN+0H1lygzKMAhp8zItRei/F0MaSdbWdviNnGcAXqbCkbmGR72vaA==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/transformer-directives/-/transformer-directives-0.58.9.tgz",
+      "integrity": "sha512-pLOUsdoY2ugVntJXg0xuGjO9XZ2xCiMxTPRtpZ4TsEzUtdEzMswR06Y8VWvNciTB/Zqxcz9ta8rD0DKePOfSuw==",
       "dependencies": {
-        "@unocss/core": "0.58.8",
-        "@unocss/rule-utils": "0.58.8",
+        "@unocss/core": "0.58.9",
+        "@unocss/rule-utils": "0.58.9",
         "css-tree": "^2.3.1"
       }
     },
     "node_modules/@unocss/transformer-variant-group": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/transformer-variant-group/-/transformer-variant-group-0.58.8.tgz",
-      "integrity": "sha512-Fa9lCHsR6scg9BuAvyltdRpSVJJxP5OCU8OJmkOhGlJnkcrV8X/9ynPvVuV82awoImn5CBoo4fyQ+f9vCdWycw==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/transformer-variant-group/-/transformer-variant-group-0.58.9.tgz",
+      "integrity": "sha512-3A6voHSnFcyw6xpcZT6oxE+KN4SHRnG4z862tdtWvRGcN+jGyNr20ylEZtnbk4xj0VNMeGHHQRZ0WLvmrAwvOQ==",
       "dependencies": {
-        "@unocss/core": "0.58.8"
+        "@unocss/core": "0.58.9"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@unocss/vite": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/vite/-/vite-0.58.8.tgz",
-      "integrity": "sha512-Eh0cG1I/BivvhUPdFxPi/z7Q+LMDnjHgL/dIE6/tmJK9rerdGeOBCAXxEetZfvBrOhWVnsOW/ydesyAhkzRg3w==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/vite/-/vite-0.58.9.tgz",
+      "integrity": "sha512-mmppBuulAHCal+sC0Qz36Y99t0HicAmznpj70Kzwl7g/yvXwm58/DW2OnpCWw+uA8/JBft/+z3zE+XvrI+T1HA==",
       "dependencies": {
         "@ampproject/remapping": "^2.3.0",
         "@rollup/pluginutils": "^5.1.0",
-        "@unocss/config": "0.58.8",
-        "@unocss/core": "0.58.8",
-        "@unocss/inspector": "0.58.8",
-        "@unocss/scope": "0.58.8",
-        "@unocss/transformer-directives": "0.58.8",
+        "@unocss/config": "0.58.9",
+        "@unocss/core": "0.58.9",
+        "@unocss/inspector": "0.58.9",
+        "@unocss/scope": "0.58.9",
+        "@unocss/transformer-directives": "0.58.9",
         "chokidar": "^3.6.0",
         "fast-glob": "^3.3.2",
         "magic-string": "^0.30.8"
@@ -4217,32 +4654,20 @@
         "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0"
       }
     },
-    "node_modules/@unocss/vite/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@unocss/webpack": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/@unocss/webpack/-/webpack-0.58.8.tgz",
-      "integrity": "sha512-mNs5/py3hpSRvlib1LjLtFLNwuo34UBv3xrkHirBhzVPdlM/w4wX2c9BGuYqcaS8HkPCRiSDno97K2bmEACNCg==",
-      "dev": true,
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/webpack/-/webpack-0.58.9.tgz",
+      "integrity": "sha512-BCIocoGRRvrB3jqrUZwzBFA2pVgxQr2XzVFU6t8yZQqVVkaKxAjZQ5eLxj5OlZIiSPzfRc4OR73k2Pj6DC/3Og==",
+      "devOptional": true,
       "dependencies": {
         "@ampproject/remapping": "^2.3.0",
         "@rollup/pluginutils": "^5.1.0",
-        "@unocss/config": "0.58.8",
-        "@unocss/core": "0.58.8",
+        "@unocss/config": "0.58.9",
+        "@unocss/core": "0.58.9",
         "chokidar": "^3.6.0",
         "fast-glob": "^3.3.2",
         "magic-string": "^0.30.8",
-        "unplugin": "^1.10.0",
+        "unplugin": "^1.10.1",
         "webpack-sources": "^3.2.3"
       },
       "funding": {
@@ -4252,23 +4677,11 @@
         "webpack": "^4 || ^5"
       }
     },
-    "node_modules/@unocss/webpack/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@unocss/webpack/node_modules/unplugin": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.0.tgz",
-      "integrity": "sha512-CuZtvvO8ua2Wl+9q2jEaqH6m3DoQ38N7pvBYQbbaeNlWGvK2l6GHiKi29aIHDPoSxdUzQ7Unevf1/ugil5X6Pg==",
-      "dev": true,
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.1.tgz",
+      "integrity": "sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==",
+      "devOptional": true,
       "dependencies": {
         "acorn": "^8.11.3",
         "chokidar": "^3.6.0",
@@ -4283,7 +4696,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
       "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@vercel/nft": {
       "version": "0.26.4",
@@ -4396,14 +4809,14 @@
       }
     },
     "node_modules/@vue-macros/common": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-1.10.1.tgz",
-      "integrity": "sha512-uftSpfwdwitcQT2lM8aVxcfe5rKQBzC9jMrtJM5sG4hEuFyfIvnJihpPpnaWxY+X4p64k+YYXtBFv+1O5Bq3dg==",
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-1.10.2.tgz",
+      "integrity": "sha512-WC66NPVh2mJWqm4L0l/u/cOqm4pNOIwVdMGnDYAH2rHcOWy5x68GkhpkYTBu1+xwCSeHWOQn1TCGGbD+98fFpA==",
       "dependencies": {
-        "@babel/types": "^7.23.6",
+        "@babel/types": "^7.24.0",
         "@rollup/pluginutils": "^5.1.0",
-        "@vue/compiler-sfc": "^3.4.13",
-        "ast-kit": "^0.11.3",
+        "@vue/compiler-sfc": "^3.4.21",
+        "ast-kit": "^0.12.1",
         "local-pkg": "^0.5.0",
         "magic-string-ast": "^0.3.0"
       },
@@ -4534,17 +4947,6 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
-    "node_modules/@vue/compiler-sfc/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@vue/compiler-ssr": {
       "version": "3.4.21",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz",
@@ -4560,16 +4962,14 @@
       "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
     },
     "node_modules/@vue/devtools-applet": {
-      "version": "7.0.25",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-applet/-/devtools-applet-7.0.25.tgz",
-      "integrity": "sha512-9JwnjRO2tAHxFjA+cHSpQ/DKIqUKILvYaWJkOt1KqkedXPHzUWU1NfQAto+p6ycaKInA5A0VdXdmIl4N8YJCrw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@vue/devtools-core": "^7.0.25",
-        "@vue/devtools-kit": "^7.0.25",
-        "@vue/devtools-shared": "^7.0.25",
-        "@vue/devtools-ui": "^7.0.25",
+      "version": "7.0.27",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-applet/-/devtools-applet-7.0.27.tgz",
+      "integrity": "sha512-ubNn/qIn5n3x7YCVSabfQfKL49GoJPJdYu4LfdNz/gZkgb1+djdATpKl/+xzQoOqtGzqnR9nMoCHApAJAgeMyg==",
+      "dependencies": {
+        "@vue/devtools-core": "^7.0.27",
+        "@vue/devtools-kit": "^7.0.27",
+        "@vue/devtools-shared": "^7.0.27",
+        "@vue/devtools-ui": "^7.0.27",
         "perfect-debounce": "^1.0.0",
         "splitpanes": "^3.1.5",
         "vue-virtual-scroller": "2.0.0-beta.8"
@@ -4579,14 +4979,12 @@
       }
     },
     "node_modules/@vue/devtools-core": {
-      "version": "7.0.25",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.0.25.tgz",
-      "integrity": "sha512-aCsY4J6SvSBDuGdYADszByT0wy0GgpgdCApxcZzQEqYlyVchX7vqznJQrm7Y1GCLqAvoLaxsQqew7Cz+KQ3Idg==",
-      "dev": true,
-      "peer": true,
+      "version": "7.0.27",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.0.27.tgz",
+      "integrity": "sha512-3rbtNGxFFFPfIObgTAPIw0h0rJy+y1PrbfgM9nXRf3/FIJkthfS19yj31pj9EWIqRsyiqK5u1Ni7SAJZ0vsQOA==",
       "dependencies": {
-        "@vue/devtools-kit": "^7.0.25",
-        "@vue/devtools-shared": "^7.0.25",
+        "@vue/devtools-kit": "^7.0.27",
+        "@vue/devtools-shared": "^7.0.27",
         "mitt": "^3.0.1",
         "nanoid": "^3.3.4",
         "pathe": "^1.1.2",
@@ -4597,14 +4995,12 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -4613,13 +5009,11 @@
       }
     },
     "node_modules/@vue/devtools-kit": {
-      "version": "7.0.25",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.0.25.tgz",
-      "integrity": "sha512-wbLkSnOTsKHPb1mB9koFHUoSAF8Dp6Ii/ocR2+DeXFY4oKqIjCeJb/4Lihk4rgqEhCy1WwxLfTgNDo83VvDYkQ==",
-      "dev": true,
-      "peer": true,
+      "version": "7.0.27",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.0.27.tgz",
+      "integrity": "sha512-/A5xM38pPCFX5Yhl/lRFAzjyK6VNsH670nww2WbjFKWqlu3I+lMxWKzQkCW6A1V8bduITgl2kHORfg2gTw6QaA==",
       "dependencies": {
-        "@vue/devtools-shared": "^7.0.25",
+        "@vue/devtools-shared": "^7.0.27",
         "hookable": "^5.5.3",
         "mitt": "^3.0.1",
         "perfect-debounce": "^1.0.0",
@@ -4630,21 +5024,17 @@
       }
     },
     "node_modules/@vue/devtools-shared": {
-      "version": "7.0.25",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.0.25.tgz",
-      "integrity": "sha512-5+XYhcHSXuJSguYnNwL6/e6VTmXwCfryWQOkffh9ZU2zMByybqqqBrMWqvBkqTmMFCjPdzulo66xXbVbwLaElQ==",
-      "dev": true,
-      "peer": true,
+      "version": "7.0.27",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.0.27.tgz",
+      "integrity": "sha512-4VxtmZ6yjhiSloqZZq2UYU0TBGxOJ8GxWvp5OlAH70zYqi0FIAyWGPkOhvfoZ7DKQyv2UU0mmKzFHjsEkelGyQ==",
       "dependencies": {
         "rfdc": "^1.3.1"
       }
     },
     "node_modules/@vue/devtools-ui": {
-      "version": "7.0.25",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-ui/-/devtools-ui-7.0.25.tgz",
-      "integrity": "sha512-OxcwecnKmKm/zIG/VSixRgSqzjRU9UFld26LIq8kunxvr4zswjHT2xHMb/iauBC2c9TNo8Uk5muUTFLmNbYwnA==",
-      "dev": true,
-      "peer": true,
+      "version": "7.0.27",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-ui/-/devtools-ui-7.0.27.tgz",
+      "integrity": "sha512-MVcQwqqGNW2poW29OkzOcpNLHb0R/VQECWYiDYvKqjWp3G8M/FS2E5mUnjXxZGpfqHjSEmJs+fFGY8exnYpNng==",
       "dependencies": {
         "@vueuse/components": "^10.9.0",
         "@vueuse/core": "^10.9.0",
@@ -4713,31 +5103,6 @@
         "vue-demi": ">=0.14.7"
       }
     },
-    "node_modules/@vueuse/components/node_modules/vue-demi": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vueuse/core": {
       "version": "10.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz",
@@ -4752,31 +5117,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vueuse/integrations": {
       "version": "10.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-10.9.0.tgz",
@@ -4842,31 +5182,6 @@
         }
       }
     },
-    "node_modules/@vueuse/integrations/node_modules/vue-demi": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vueuse/math": {
       "version": "10.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/math/-/math-10.9.0.tgz",
@@ -4879,31 +5194,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/math/node_modules/vue-demi": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vueuse/metadata": {
       "version": "10.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz",
@@ -4949,31 +5239,6 @@
         "nuxt": "^3.0.0"
       }
     },
-    "node_modules/@vueuse/nuxt/node_modules/vue-demi": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vueuse/shared": {
       "version": "10.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz",
@@ -4985,36 +5250,11 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
       "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.11.6",
@@ -5025,28 +5265,28 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
       "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
-      "dev": true,
+      "devOptional": true,
       "peer": true
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
       "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
-      "dev": true,
+      "devOptional": true,
       "peer": true
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz",
       "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==",
-      "dev": true,
+      "devOptional": true,
       "peer": true
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
       "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.6",
@@ -5058,14 +5298,14 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
       "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
-      "dev": true,
+      "devOptional": true,
       "peer": true
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz",
       "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
@@ -5078,7 +5318,7 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
       "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
@@ -5088,7 +5328,7 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
       "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
@@ -5098,14 +5338,14 @@
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
       "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
-      "dev": true,
+      "devOptional": true,
       "peer": true
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz",
       "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
@@ -5122,7 +5362,7 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz",
       "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
@@ -5136,7 +5376,7 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz",
       "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
@@ -5149,7 +5389,7 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz",
       "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
@@ -5164,7 +5404,7 @@
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz",
       "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.12.1",
@@ -5175,14 +5415,14 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true,
+      "devOptional": true,
       "peer": true
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true,
+      "devOptional": true,
       "peer": true
     },
     "node_modules/abbrev": {
@@ -5228,20 +5468,29 @@
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
       "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "peerDependencies": {
         "acorn": "^8"
       }
     },
     "node_modules/acorn-import-attributes": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.4.tgz",
-      "integrity": "sha512-dNIX/5UEnZvVL94dV2scl4VIooK36D8AteP4xiz7cPKhDbhLhSuWkzG580g+Q7TXJklp+Z21SiaK7/HpLO84Qg==",
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "peerDependencies": {
         "acorn": "^8"
       }
     },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "devOptional": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -5269,8 +5518,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "peer": true,
+      "devOptional": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -5286,7 +5534,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "peerDependencies": {
         "ajv": "^6.9.1"
@@ -5414,9 +5662,9 @@
       }
     },
     "node_modules/archiver-utils/node_modules/glob": {
-      "version": "10.3.11",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.11.tgz",
-      "integrity": "sha512-0UAMm+R/z1E2bTR8eFnoIIlnrUK89m36i90Ez36ld9hLulfUPBgRCQtBy/v86ABx18jnGyrTvu4X3LAjIeBogw==",
+      "version": "10.3.12",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
+      "integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^2.3.6",
@@ -5445,20 +5693,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/archiver-utils/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/archiver-utils/node_modules/minipass": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
@@ -5502,14 +5736,22 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ast-kit": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-0.11.3.tgz",
-      "integrity": "sha512-qdwwKEhckRk0XE22/xDdmU3v/60E8Edu4qFhgTLIhGGDs/PAJwLw9pQn8Rj99PitlbBZbYpx0k/lbir4kg0SuA==",
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-0.12.1.tgz",
+      "integrity": "sha512-O+33g7x6irsESUcd47KdfWUrS2F6aGp9KeVJFGj0YjIznfXpBxVGjA0w+y/1OKqX4mFOfmZ9Xpf1ixPT4n9xxw==",
       "dependencies": {
-        "@babel/parser": "^7.23.5",
-        "@rollup/pluginutils": "^5.1.0",
-        "pathe": "^1.1.1"
+        "@babel/parser": "^7.23.9",
+        "pathe": "^1.1.2"
       },
       "engines": {
         "node": ">=16.14.0"
@@ -5764,9 +6006,9 @@
       }
     },
     "node_modules/builtins": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-      "integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/builtins/-/builtins-5.1.0.tgz",
+      "integrity": "sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==",
       "dependencies": {
         "semver": "^7.0.0"
       }
@@ -5835,9 +6077,9 @@
       }
     },
     "node_modules/cacache/node_modules/glob": {
-      "version": "10.3.11",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.11.tgz",
-      "integrity": "sha512-0UAMm+R/z1E2bTR8eFnoIIlnrUK89m36i90Ez36ld9hLulfUPBgRCQtBy/v86ABx18jnGyrTvu4X3LAjIeBogw==",
+      "version": "10.3.12",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
+      "integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^2.3.6",
@@ -5863,20 +6105,6 @@
         "node": "14 || >=16.14"
       }
     },
-    "node_modules/cacache/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/cacache/node_modules/minipass": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
@@ -5936,9 +6164,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001600",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz",
-      "integrity": "sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==",
+      "version": "1.0.30001608",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001608.tgz",
+      "integrity": "sha512-cjUJTQkk9fQlJR2s4HMuPMvTiRggl0rAVMtthQuyOlDWuqHXqN8azLq+pi8B2TjwKJ32diHjUqRIKeFX4z1FoA==",
       "funding": [
         {
           "type": "opencollective",
@@ -6013,7 +6241,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "engines": {
         "node": ">=6.0"
@@ -6231,15 +6459,14 @@
     "node_modules/colorette": {
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
-      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
-      "dev": true
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
     },
     "node_modules/commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
       "engines": {
-        "node": ">= 12"
+        "node": ">= 10"
       }
     },
     "node_modules/commondir": {
@@ -6279,9 +6506,9 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "node_modules/confbox": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.3.tgz",
-      "integrity": "sha512-eH3ZxAihl1PhKfpr4VfEN6/vUd87fmgb6JkldHgg/YR6aEBhW63qUDgzP2Y6WM0UumdsYp5H3kibalXAdHfbgg=="
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.6.tgz",
+      "integrity": "sha512-ONc4FUXne/1UBN1EuxvQ5rAjjAbo+N4IxrxWI8bzGHbd1PyrFlI/E3G23/yoJZDFBaFFxPGfI0EOq0fa4dgX7A=="
     },
     "node_modules/consola": {
       "version": "3.2.3",
@@ -6321,9 +6548,9 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
     },
     "node_modules/cookie-es": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-1.0.0.tgz",
-      "integrity": "sha512-mWYvfOLrfEc996hlKcdABeIiPHUPC6DM2QYZdGGOvhOTbA3tjm2eBwqlJpoFdjC89NI4Qt6h0Pu06Mp+1Pj5OQ=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-1.1.0.tgz",
+      "integrity": "sha512-L2rLOcK0wzWSfSDA33YR+PUHDG10a8px7rUHKWbGLP4YfbsMed2KFUw5fczvDPbT98DDe3LEzviswl810apTEw=="
     },
     "node_modules/cookies": {
       "version": "0.9.1",
@@ -6386,24 +6613,22 @@
       "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
     },
     "node_modules/crisp-sdk-web": {
-      "version": "1.0.22",
-      "resolved": "https://registry.npmjs.org/crisp-sdk-web/-/crisp-sdk-web-1.0.22.tgz",
-      "integrity": "sha512-5LakqSr638Cv1J/FuM/RhCGVEaHmrbPpEY14h9GdoEUeNF+jzDhV2KwTVVL5hDwTo5Vhc1J+hprUzgqUv9xH4Q=="
+      "version": "1.0.25",
+      "resolved": "https://registry.npmjs.org/crisp-sdk-web/-/crisp-sdk-web-1.0.25.tgz",
+      "integrity": "sha512-CWTHFFeHRV0oqiXoPh/aIAKhFs6xcIM4NenGPnClAMCZUDQgQsF1OWmZWmnVNjJriXUmWRgDfeUxcxygS0dCRA=="
     },
     "node_modules/croner": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/croner/-/croner-8.0.1.tgz",
-      "integrity": "sha512-Hq1+lXVgjJjcS/U+uk6+yVmtxami0r0b+xVtlGyABgdz110l/kOnHWvlSI7nVzrTl8GCdZHwZS4pbBFT7hSL/g==",
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/croner/-/croner-8.0.2.tgz",
+      "integrity": "sha512-HgSdlSUX8mIgDTTiQpWUP4qY4IFRMsduPCYdca34Pelt8MVdxdaDOzreFtCscA6R+cRZd7UbD1CD3uyx6J3X1A==",
       "engines": {
         "node": ">=18.0"
       }
     },
     "node_modules/cronstrue": {
-      "version": "2.48.0",
-      "resolved": "https://registry.npmjs.org/cronstrue/-/cronstrue-2.48.0.tgz",
-      "integrity": "sha512-w+VAWjiBJmKYeeK+i0ur3G47LcKNgFuWwb8LVJTaXSS2ExtQ5zdiIVnuysgB3N457gTaSllme0qTpdsJWK/wIg==",
-      "dev": true,
-      "peer": true,
+      "version": "2.49.0",
+      "resolved": "https://registry.npmjs.org/cronstrue/-/cronstrue-2.49.0.tgz",
+      "integrity": "sha512-FWZBqdStQaPR8ZTBQGALh1EK9Hl1HcG70dyGvD1rKLPafFO3H73o38dz/e8YkIlbLn3JxmBI/f6Doe3Nh+DcEQ==",
       "bin": {
         "cronstrue": "bin/cli.js"
       }
@@ -6631,6 +6856,14 @@
         "url": "https://opencollective.com/date-fns"
       }
     },
+    "node_modules/date-fns-tz": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz",
+      "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==",
+      "peerDependencies": {
+        "date-fns": "2.x"
+      }
+    },
     "node_modules/db0": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/db0/-/db0-0.1.4.tgz",
@@ -6689,6 +6922,12 @@
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
       "integrity": "sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw=="
     },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "devOptional": true
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -6802,11 +7041,44 @@
       "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
       "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
     },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dir-glob/node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "devOptional": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -6899,9 +7171,9 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.719",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.719.tgz",
-      "integrity": "sha512-FbWy2Q2YgdFzkFUW/W5jBjE9dj+804+98E4Pup78JBPnbdb3pv6IneY2JCPKdeKLh3AOKHQeYf+KwLr7mxGh6Q=="
+      "version": "1.4.733",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.733.tgz",
+      "integrity": "sha512-gUI9nhI2iBGF0OaYYLKOaOtliFMl+Bt1rY7VmEjwxOxqoYLub/D9xmduPEhbw2imE6gYkJKhIE5it+KE2ulVxQ=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -6930,135 +7202,466 @@
         "iconv-lite": "^0.6.2"
       }
     },
-    "node_modules/enhanced-resolve": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+    "node_modules/enhanced-resolve": {
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
+      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/err-code": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
+      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA=="
+    },
+    "node_modules/error-stack-parser-es": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-0.1.1.tgz",
+      "integrity": "sha512-g/9rfnvnagiNf+DRMHEVGuGuIBlCIMDFoTA616HaP2l9PlCjGjVhD98PNbVSJvmK4TttqT5mV5tInMhoFgi+aA==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.0.tgz",
+      "integrity": "sha512-pqrTKmwEIgafsYZAGw9kszYzmagcE/n4dbgwGWLEXg7J4QFJVQRBld8j3Q3GNez79jzxZshq0bcT962QHOghjw==",
+      "devOptional": true,
+      "peer": true
+    },
+    "node_modules/esbuild": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+      "devOptional": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz",
+      "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==",
+      "dev": true,
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.8.6"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": "*",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-vue": {
+      "version": "9.24.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.24.1.tgz",
+      "integrity": "sha512-wk3SuwmS1pZdcuJlokGYEi/buDOwD6KltvhIZyOnpJ/378dcQ4zchu9PAMbbLAaydCz1iYc5AozszcOOgZIIOg==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "globals": "^13.24.0",
+        "natural-compare": "^1.4.0",
+        "nth-check": "^2.1.1",
+        "postcss-selector-parser": "^6.0.15",
+        "semver": "^7.6.0",
+        "vue-eslint-parser": "^9.4.2",
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": "^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-vue/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint-plugin-vue/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "devOptional": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "devOptional": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "devOptional": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "devOptional": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "devOptional": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/eslint/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "devOptional": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "devOptional": true
+    },
+    "node_modules/eslint/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "devOptional": true,
       "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
+        "is-glob": "^4.0.3"
       },
       "engines": {
         "node": ">=10.13.0"
       }
     },
-    "node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+    "node_modules/eslint/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "devOptional": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
       "engines": {
-        "node": ">=0.12"
+        "node": ">=8"
       },
       "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/env-paths": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
-      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+    "node_modules/eslint/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "devOptional": true,
       "engines": {
-        "node": ">=6"
+        "node": ">=8"
       }
     },
-    "node_modules/err-code": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
-      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA=="
-    },
-    "node_modules/error-stack-parser-es": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/error-stack-parser-es/-/error-stack-parser-es-0.1.1.tgz",
-      "integrity": "sha512-g/9rfnvnagiNf+DRMHEVGuGuIBlCIMDFoTA616HaP2l9PlCjGjVhD98PNbVSJvmK4TttqT5mV5tInMhoFgi+aA==",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "devOptional": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
       }
     },
-    "node_modules/es-module-lexer": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.0.tgz",
-      "integrity": "sha512-pqrTKmwEIgafsYZAGw9kszYzmagcE/n4dbgwGWLEXg7J4QFJVQRBld8j3Q3GNez79jzxZshq0bcT962QHOghjw==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/esbuild": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
-      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
-      "hasInstallScript": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
+    "node_modules/eslint/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "devOptional": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
       },
       "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.20.2",
-        "@esbuild/android-arm": "0.20.2",
-        "@esbuild/android-arm64": "0.20.2",
-        "@esbuild/android-x64": "0.20.2",
-        "@esbuild/darwin-arm64": "0.20.2",
-        "@esbuild/darwin-x64": "0.20.2",
-        "@esbuild/freebsd-arm64": "0.20.2",
-        "@esbuild/freebsd-x64": "0.20.2",
-        "@esbuild/linux-arm": "0.20.2",
-        "@esbuild/linux-arm64": "0.20.2",
-        "@esbuild/linux-ia32": "0.20.2",
-        "@esbuild/linux-loong64": "0.20.2",
-        "@esbuild/linux-mips64el": "0.20.2",
-        "@esbuild/linux-ppc64": "0.20.2",
-        "@esbuild/linux-riscv64": "0.20.2",
-        "@esbuild/linux-s390x": "0.20.2",
-        "@esbuild/linux-x64": "0.20.2",
-        "@esbuild/netbsd-x64": "0.20.2",
-        "@esbuild/openbsd-x64": "0.20.2",
-        "@esbuild/sunos-x64": "0.20.2",
-        "@esbuild/win32-arm64": "0.20.2",
-        "@esbuild/win32-ia32": "0.20.2",
-        "@esbuild/win32-x64": "0.20.2"
+        "node": ">=8"
       }
     },
-    "node_modules/escalade": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
-      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+    "node_modules/eslint/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "devOptional": true,
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
-    },
-    "node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "devOptional": true,
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
       "engines": {
-        "node": ">=0.8.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
-      "peer": true,
+    "node_modules/esquery": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
+      "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+      "devOptional": true,
       "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
+        "estraverse": "^5.1.0"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=0.10"
       }
     },
     "node_modules/esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
-      "peer": true,
+      "devOptional": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -7066,22 +7669,11 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/esrecurse/node_modules/estraverse": {
+    "node_modules/estraverse": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
-      "peer": true,
+      "devOptional": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -7094,6 +7686,15 @@
         "@types/estree": "^1.0.0"
       }
     },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -7170,13 +7771,13 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
-      "peer": true
+      "devOptional": true
     },
     "node_modules/fast-diff": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
-      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true
     },
     "node_modules/fast-fifo": {
       "version": "1.3.2",
@@ -7202,8 +7803,13 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true,
-      "peer": true
+      "devOptional": true
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "devOptional": true
     },
     "node_modules/fastq": {
       "version": "1.17.1",
@@ -7213,6 +7819,18 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "devOptional": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -7255,12 +7873,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/flat": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
-      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
-      "bin": {
-        "flat": "cli.js"
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "devOptional": true,
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
       }
     },
     "node_modules/flatted": {
@@ -7272,7 +7896,6 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-5.2.2.tgz",
       "integrity": "sha512-afW+h2CFafo+7Y9Lvw/xsqjaQlKLdJV7h1fCHfcYQ1C4SVMlu7OAekqWgu5d4SgvkBVU0pVpLlVsrSTBURFRkg==",
-      "dev": true,
       "dependencies": {
         "@floating-ui/dom": "~1.1.1",
         "vue-resize": "^2.0.0-alpha.1"
@@ -7291,7 +7914,6 @@
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz",
       "integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==",
-      "devOptional": true,
       "dependencies": {
         "tabbable": "^6.2.0"
       }
@@ -7508,9 +8130,9 @@
       }
     },
     "node_modules/git-url-parse": {
-      "version": "13.1.1",
-      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-13.1.1.tgz",
-      "integrity": "sha512-PCFJyeSSdtnbfhSNRw9Wk96dDCNx+sogTe4YNXeXSJxt7xz5hvXekuRn9JX7m+Mf4OscCu8h+mtAl3+h5Fo8lQ==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-14.0.0.tgz",
+      "integrity": "sha512-NnLweV+2A4nCvn4U/m2AoYu0pPKlsmhK9cknG7IMwsjFY1S2jxM+mAhsDxyxfCIGfGaD+dozsyX4b6vkYc83yQ==",
       "dependencies": {
         "git-up": "^7.0.0"
       }
@@ -7547,9 +8169,23 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true,
+      "devOptional": true,
       "peer": true
     },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-8.0.4.tgz",
+      "integrity": "sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/global-directory": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/global-directory/-/global-directory-4.0.1.tgz",
@@ -7596,6 +8232,12 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "devOptional": true
+    },
     "node_modules/gzip-size": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",
@@ -7809,9 +8451,9 @@
       }
     },
     "node_modules/http-proxy-agent/node_modules/agent-base": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
-      "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
       "dependencies": {
         "debug": "^4.3.4"
       },
@@ -7903,20 +8545,6 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/ignore-walk/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/image-meta": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/image-meta/-/image-meta-0.2.0.tgz",
@@ -7928,6 +8556,43 @@
       "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
       "devOptional": true
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "devOptional": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-fresh/node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "devOptional": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/import-fresh/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -8132,6 +8797,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-installed-globally/node_modules/is-path-inside": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-4.0.0.tgz",
+      "integrity": "sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-lambda": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
@@ -8151,14 +8827,12 @@
       }
     },
     "node_modules/is-path-inside": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-4.0.0.tgz",
-      "integrity": "sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "devOptional": true,
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=8"
       }
     },
     "node_modules/is-plain-object": {
@@ -8274,7 +8948,7 @@
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@types/node": "*",
@@ -8289,7 +8963,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "engines": {
         "node": ">=8"
@@ -8299,7 +8973,7 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -8356,6 +9030,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "devOptional": true
+    },
     "node_modules/json-parse-even-better-errors": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz",
@@ -8368,8 +9048,13 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true,
-      "peer": true
+      "devOptional": true
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "devOptional": true
     },
     "node_modules/json5": {
       "version": "2.2.3",
@@ -8422,6 +9107,15 @@
         "katex": "cli.js"
       }
     },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "peer": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/keygrip": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
@@ -8433,6 +9127,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "devOptional": true,
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -8458,14 +9161,14 @@
       }
     },
     "node_modules/knitwork": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/knitwork/-/knitwork-1.0.0.tgz",
-      "integrity": "sha512-dWl0Dbjm6Xm+kDxhPQJsCBTxrJzuGl0aP9rhr+TG8D3l+GL90N8O8lYUi7dTSAN2uuDqCtNgb6aEuQH5wsiV8Q=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/knitwork/-/knitwork-1.1.0.tgz",
+      "integrity": "sha512-oHnmiBUVHz1V+URE77PNot2lv3QiYU2zQf1JjOVkMt3YDKGbu8NAFr+c4mcNOhdsGrB/VpVbRwPwhiXrPhxQbw=="
     },
     "node_modules/koa": {
-      "version": "2.15.2",
-      "resolved": "https://registry.npmjs.org/koa/-/koa-2.15.2.tgz",
-      "integrity": "sha512-MXTeZH3M6AJ8ukW2QZ8wqO3Dcdfh2WRRmjCBkEP+NhKNCiqlO5RDqHmSnsyNrbRJrdjyvIGSJho4vQiWgQJSVA==",
+      "version": "2.15.3",
+      "resolved": "https://registry.npmjs.org/koa/-/koa-2.15.3.tgz",
+      "integrity": "sha512-j/8tY9j5t+GVMLeioLaxweJiKUayFhlGqNTzf2ZGwL0ZCQijd2RLHK0SLW5Tsko8YyyqCZC2cojIb0/s62qTAg==",
       "dependencies": {
         "accepts": "^1.3.5",
         "cache-content-type": "^1.0.0",
@@ -8659,10 +9362,23 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "devOptional": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/libphonenumber-js": {
-      "version": "1.10.59",
-      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.59.tgz",
-      "integrity": "sha512-HeTsOrDF/hWhEiKqZVwg9Cqlep5x2T+IYDENvT2VRj3iX8JQ7Y+omENv+AIn0vC8m6GYhivfCed5Cgfw27r5SA=="
+      "version": "1.10.60",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.60.tgz",
+      "integrity": "sha512-Ctgq2lXUpEJo5j1762NOzl2xo7z7pqmVWYai0p07LvAkQ32tbPv3wb+tcUeHEiXhKU5buM4H9MXsXo6OlM6C2g=="
     },
     "node_modules/lilconfig": {
       "version": "3.1.1",
@@ -8713,7 +9429,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
       "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "engines": {
         "node": ">=6.11.5"
@@ -8797,11 +9513,11 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
-      "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+      "version": "0.30.8",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
+      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.13"
+        "@jridgewell/sourcemap-codec": "^1.4.15"
       },
       "engines": {
         "node": ">=12"
@@ -8818,17 +9534,6 @@
         "node": ">=16.14.0"
       }
     },
-    "node_modules/magic-string-ast/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/magicast": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.3.3.tgz",
@@ -8994,9 +9699,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-8.0.4.tgz",
-      "integrity": "sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==",
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -9259,9 +9964,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.2.tgz",
-      "integrity": "sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
+      "integrity": "sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==",
       "funding": [
         {
           "type": "github",
@@ -9272,9 +9977,15 @@
         "nanoid": "bin/nanoid.js"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": "^18 || >=20"
       }
     },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "devOptional": true
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -9287,13 +9998,13 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true,
+      "devOptional": true,
       "peer": true
     },
     "node_modules/nitropack": {
-      "version": "2.9.5",
-      "resolved": "https://registry.npmjs.org/nitropack/-/nitropack-2.9.5.tgz",
-      "integrity": "sha512-ClanSILi9O6HX95QNIC+TwxojpRpOSn9n3e3wmHExAHhLN5HdnHGmHN4LwtJdE2p91nse3kDULOTR7k1xRVJ/g==",
+      "version": "2.9.6",
+      "resolved": "https://registry.npmjs.org/nitropack/-/nitropack-2.9.6.tgz",
+      "integrity": "sha512-HP2PE0dREcDIBVkL8Zm6eVyrDd10/GI9hTL00PHvjUM8I9Y/2cv73wRDmxNyInfrx/CJKHATb2U/pQrqpzJyXA==",
       "dependencies": {
         "@cloudflare/kv-asset-handler": "^0.3.1",
         "@netlify/functions": "^2.6.0",
@@ -9313,7 +10024,7 @@
         "chokidar": "^3.6.0",
         "citty": "^0.1.6",
         "consola": "^3.2.3",
-        "cookie-es": "^1.0.0",
+        "cookie-es": "^1.1.0",
         "croner": "^8.0.1",
         "crossws": "^0.2.4",
         "db0": "^0.1.4",
@@ -9333,7 +10044,7 @@
         "is-primitive": "^3.0.1",
         "jiti": "^1.21.0",
         "klona": "^2.0.6",
-        "knitwork": "^1.0.0",
+        "knitwork": "^1.1.0",
         "listhen": "^1.7.2",
         "magic-string": "^0.30.8",
         "mime": "^4.0.1",
@@ -9348,7 +10059,7 @@
         "pkg-types": "^1.0.3",
         "pretty-bytes": "^6.1.1",
         "radix3": "^1.1.2",
-        "rollup": "^4.13.0",
+        "rollup": "^4.13.2",
         "rollup-plugin-visualizer": "^5.12.0",
         "scule": "^1.3.0",
         "semver": "^7.6.0",
@@ -9361,7 +10072,7 @@
         "unenv": "^1.9.0",
         "unimport": "^3.7.1",
         "unstorage": "^1.10.2",
-        "unwasm": "^0.3.8"
+        "unwasm": "^0.3.9"
       },
       "bin": {
         "nitro": "dist/cli/index.mjs",
@@ -9401,17 +10112,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/nitropack/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/node-addon-api": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.0.tgz",
@@ -9494,9 +10194,9 @@
       }
     },
     "node_modules/node-gyp/node_modules/glob": {
-      "version": "10.3.11",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.11.tgz",
-      "integrity": "sha512-0UAMm+R/z1E2bTR8eFnoIIlnrUK89m36i90Ez36ld9hLulfUPBgRCQtBy/v86ABx18jnGyrTvu4X3LAjIeBogw==",
+      "version": "10.3.12",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
+      "integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^2.3.6",
@@ -9522,20 +10222,6 @@
         "node": ">=16"
       }
     },
-    "node_modules/node-gyp/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/node-gyp/node_modules/minipass": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
@@ -9691,10 +10377,11 @@
       }
     },
     "node_modules/npm-registry-fetch": {
-      "version": "16.1.0",
-      "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-16.1.0.tgz",
-      "integrity": "sha512-PQCELXKt8Azvxnt5Y85GseQDJJlglTFM9L9U9gkv2y4e9s0k3GVDdOx3YoB6gm2Do0hlkzC39iCGXby+Wve1Bw==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-16.2.0.tgz",
+      "integrity": "sha512-zVH+G0q1O2hqgQBUvQ2LWp6ujr6VJAeDnmWxqiMlCguvLexEzBnuQIwC70r04vcvCMAcYEIpA/rO9YyVi+fmJQ==",
       "dependencies": {
+        "@npmcli/redact": "^1.1.0",
         "make-fetch-happen": "^13.0.0",
         "minipass": "^7.0.2",
         "minipass-fetch": "^3.0.0",
@@ -9780,25 +10467,25 @@
       }
     },
     "node_modules/nuxt": {
-      "version": "3.11.1",
-      "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-3.11.1.tgz",
-      "integrity": "sha512-CsncE1dxP0cmOYT+PBdjMD0bOK8eZizG5tgNWUOJAAAtU45sO38maoBumYYL2kUpT/SC/dMP+831DAcVPvi9pQ==",
+      "version": "3.11.2",
+      "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-3.11.2.tgz",
+      "integrity": "sha512-Be1d4oyFo60pdF+diBolYDcfNemoMYM3R8PDjhnGrs/w3xJoDH1YMUVWHXXY8WhSmYZI7dyBehx/6kTfGFliVA==",
       "dependencies": {
         "@nuxt/devalue": "^2.0.2",
-        "@nuxt/devtools": "^1.0.8",
-        "@nuxt/kit": "3.11.1",
-        "@nuxt/schema": "3.11.1",
+        "@nuxt/devtools": "^1.1.5",
+        "@nuxt/kit": "3.11.2",
+        "@nuxt/schema": "3.11.2",
         "@nuxt/telemetry": "^2.5.3",
-        "@nuxt/ui-templates": "^1.3.1",
-        "@nuxt/vite-builder": "3.11.1",
-        "@unhead/dom": "^1.8.20",
-        "@unhead/ssr": "^1.8.20",
-        "@unhead/vue": "^1.8.20",
+        "@nuxt/ui-templates": "^1.3.2",
+        "@nuxt/vite-builder": "3.11.2",
+        "@unhead/dom": "^1.9.4",
+        "@unhead/ssr": "^1.9.4",
+        "@unhead/vue": "^1.9.4",
         "@vue/shared": "^3.4.21",
         "acorn": "8.11.3",
         "c12": "^1.10.0",
         "chokidar": "^3.6.0",
-        "cookie-es": "^1.0.0",
+        "cookie-es": "^1.1.0",
         "defu": "^6.1.4",
         "destr": "^2.0.3",
         "devalue": "^4.3.2",
@@ -9811,28 +10498,28 @@
         "hookable": "^5.5.3",
         "jiti": "^1.21.0",
         "klona": "^2.0.6",
-        "knitwork": "^1.0.0",
-        "magic-string": "^0.30.8",
+        "knitwork": "^1.1.0",
+        "magic-string": "^0.30.9",
         "mlly": "^1.6.1",
-        "nitropack": "^2.9.4",
-        "nuxi": "^3.11.0",
+        "nitropack": "^2.9.6",
+        "nuxi": "^3.11.1",
         "nypm": "^0.3.8",
-        "ofetch": "^1.3.3",
+        "ofetch": "^1.3.4",
         "ohash": "^1.1.3",
         "pathe": "^1.1.2",
         "perfect-debounce": "^1.0.0",
         "pkg-types": "^1.0.3",
-        "radix3": "^1.1.1",
+        "radix3": "^1.1.2",
         "scule": "^1.3.0",
         "std-env": "^3.7.0",
-        "strip-literal": "^2.0.0",
-        "ufo": "^1.5.2",
+        "strip-literal": "^2.1.0",
+        "ufo": "^1.5.3",
         "ultrahtml": "^1.5.3",
         "uncrypto": "^0.1.3",
         "unctx": "^2.3.1",
         "unenv": "^1.9.0",
         "unimport": "^3.7.1",
-        "unplugin": "^1.10.0",
+        "unplugin": "^1.10.1",
         "unplugin-vue-router": "^0.7.0",
         "unstorage": "^1.10.2",
         "untyped": "^1.4.2",
@@ -9903,149 +10590,26 @@
       "resolved": "https://registry.npmjs.org/nuxt-simple-sitemap/-/nuxt-simple-sitemap-4.4.1.tgz",
       "integrity": "sha512-Srj0tNW2+qpOHpJJ2C2YXo9SYHux38vPTiAylFNHLmsw3dcVThiUm4w1acs8Vh116EegxQxzBIVtXMaFTKHZpw==",
       "deprecated": "Package has been migrated to @nuxtjs/sitemap.",
-      "dev": true,
-      "dependencies": {
-        "@nuxt/devtools-kit": "^1.0.6",
-        "@nuxt/devtools-ui-kit": "^1.0.6",
-        "@nuxt/kit": "^3.9.0",
-        "chalk": "^5.3.0",
-        "defu": "^6.1.3",
-        "h3-compression": "^0.3.2",
-        "nuxt-site-config": "^2.2.0",
-        "nuxt-site-config-kit": "^2.2.0",
-        "ofetch": "^1.3.3",
-        "pathe": "^1.1.1",
-        "radix3": "^1.1.0",
-        "semver": "^7.5.4",
-        "sirv": "^2.0.4",
-        "site-config-stack": "^2.2.0",
-        "ufo": "^1.3.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/harlan-zw"
-      }
-    },
-    "node_modules/nuxt-simple-sitemap/node_modules/@nuxt/devtools": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@nuxt/devtools/-/devtools-1.1.5.tgz",
-      "integrity": "sha512-aDEqz4L1GDj4DDnX7PL9ety3Wx0kLyKTb2JOSoJR8uX09fC3gonCvj/gYHLSSIKqhPasUjoOO5RPCtT+r9dtsA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@antfu/utils": "^0.7.7",
-        "@nuxt/devtools-kit": "1.1.5",
-        "@nuxt/devtools-wizard": "1.1.5",
-        "@nuxt/kit": "^3.11.1",
-        "@vue/devtools-applet": "^7.0.25",
-        "@vue/devtools-core": "^7.0.25",
-        "@vue/devtools-kit": "^7.0.25",
-        "birpc": "^0.2.17",
-        "consola": "^3.2.3",
-        "cronstrue": "^2.48.0",
-        "destr": "^2.0.3",
-        "error-stack-parser-es": "^0.1.1",
-        "execa": "^7.2.0",
-        "fast-glob": "^3.3.2",
-        "flatted": "^3.3.1",
-        "get-port-please": "^3.1.2",
-        "hookable": "^5.5.3",
-        "image-meta": "^0.2.0",
-        "is-installed-globally": "^1.0.0",
-        "launch-editor": "^2.6.1",
-        "local-pkg": "^0.5.0",
-        "magicast": "^0.3.3",
-        "nypm": "^0.3.8",
-        "ohash": "^1.1.3",
-        "pacote": "^17.0.6",
-        "pathe": "^1.1.2",
-        "perfect-debounce": "^1.0.0",
-        "pkg-types": "^1.0.3",
-        "rc9": "^2.1.1",
-        "scule": "^1.3.0",
-        "semver": "^7.6.0",
-        "simple-git": "^3.23.0",
-        "sirv": "^2.0.4",
-        "unimport": "^3.7.1",
-        "vite-plugin-inspect": "^0.8.3",
-        "vite-plugin-vue-inspector": "^4.0.2",
-        "which": "^3.0.1",
-        "ws": "^8.16.0"
-      },
-      "bin": {
-        "devtools": "cli.mjs"
-      },
-      "peerDependencies": {
-        "nuxt": "^3.9.0",
-        "vite": "*"
-      }
-    },
-    "node_modules/nuxt-simple-sitemap/node_modules/@nuxt/devtools-kit": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-1.1.5.tgz",
-      "integrity": "sha512-Nb/NKFCRtxyqcPD6snB52rXtbRQMjGtn3ncpa8cLWsnoqnkd9emQ4uwV8IwCNxTnqUBtbGU79/TlJ79SKH9TAw==",
-      "dev": true,
-      "dependencies": {
-        "@nuxt/kit": "^3.11.1",
-        "@nuxt/schema": "^3.11.1",
-        "execa": "^7.2.0"
-      },
-      "peerDependencies": {
-        "nuxt": "^3.9.0",
-        "vite": "*"
-      }
-    },
-    "node_modules/nuxt-simple-sitemap/node_modules/@nuxt/devtools-ui-kit": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@nuxt/devtools-ui-kit/-/devtools-ui-kit-1.1.5.tgz",
-      "integrity": "sha512-Oj5JzINvkzoEkfeXmtiGKr15SC/LCy09O6EAzHsoJDCD0Kw2z/bPaKuw9k6cb/yKssx3gKqHuWC0+QCQubIg7g==",
-      "dev": true,
-      "dependencies": {
-        "@iconify-json/carbon": "^1.1.31",
-        "@iconify-json/logos": "^1.1.42",
-        "@iconify-json/ri": "^1.1.20",
-        "@iconify-json/tabler": "^1.1.109",
-        "@nuxt/devtools-kit": "1.1.5",
-        "@nuxt/kit": "^3.11.1",
-        "@nuxtjs/color-mode": "^3.3.3",
-        "@unocss/core": "^0.58.7",
-        "@unocss/nuxt": "^0.58.7",
-        "@unocss/preset-attributify": "^0.58.7",
-        "@unocss/preset-icons": "^0.58.7",
-        "@unocss/preset-mini": "^0.58.7",
-        "@unocss/reset": "^0.58.7",
-        "@vueuse/core": "^10.9.0",
-        "@vueuse/integrations": "^10.9.0",
-        "@vueuse/nuxt": "^10.9.0",
-        "defu": "^6.1.4",
-        "focus-trap": "^7.5.4",
-        "splitpanes": "^3.1.5",
-        "unocss": "^0.58.7",
-        "v-lazy-show": "^0.2.4"
-      },
-      "peerDependencies": {
-        "@nuxt/devtools": "1.1.5"
-      }
-    },
-    "node_modules/nuxt-simple-sitemap/node_modules/@nuxt/devtools-wizard": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@nuxt/devtools-wizard/-/devtools-wizard-1.1.5.tgz",
-      "integrity": "sha512-bWLgLvYFbYCQYlLPttZaUo58cS1VJo1uEFguHaCwZ7Fzkm4Iv+lFTv5BzD+gOHwohaXLr3YecgZOO4YNJTgXyA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "consola": "^3.2.3",
-        "diff": "^5.2.0",
-        "execa": "^7.2.0",
-        "global-directory": "^4.0.1",
-        "magicast": "^0.3.3",
-        "pathe": "^1.1.2",
-        "pkg-types": "^1.0.3",
-        "prompts": "^2.4.2",
-        "rc9": "^2.1.1",
-        "semver": "^7.6.0"
+      "dev": true,
+      "dependencies": {
+        "@nuxt/devtools-kit": "^1.0.6",
+        "@nuxt/devtools-ui-kit": "^1.0.6",
+        "@nuxt/kit": "^3.9.0",
+        "chalk": "^5.3.0",
+        "defu": "^6.1.3",
+        "h3-compression": "^0.3.2",
+        "nuxt-site-config": "^2.2.0",
+        "nuxt-site-config-kit": "^2.2.0",
+        "ofetch": "^1.3.3",
+        "pathe": "^1.1.1",
+        "radix3": "^1.1.0",
+        "semver": "^7.5.4",
+        "sirv": "^2.0.4",
+        "site-config-stack": "^2.2.0",
+        "ufo": "^1.3.2"
       },
-      "bin": {
-        "devtools-wizard": "cli.mjs"
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
       }
     },
     "node_modules/nuxt-simple-sitemap/node_modules/chalk": {
@@ -10061,9 +10625,9 @@
       }
     },
     "node_modules/nuxt-site-config": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/nuxt-site-config/-/nuxt-site-config-2.2.11.tgz",
-      "integrity": "sha512-yYR5g9wjc3aULpyv1Ne7FlmXA8pXr1JVf2ZOx40TT7DkGY86zNntOF9RWaQjrvFgw0fTJAQyrNxdbzWJc8O+mA==",
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/nuxt-site-config/-/nuxt-site-config-2.2.12.tgz",
+      "integrity": "sha512-a2pmr4NEa1ZgZoD0guKrX+gpVpntOpqBTRBJ6zv+PqAwvltdeau2zRZBGZ2N7kFnGaGolonb2fBN+YzQh3dSDQ==",
       "dev": true,
       "dependencies": {
         "@nuxt/devtools-kit": "^1.0.8",
@@ -10071,12 +10635,12 @@
         "@nuxt/kit": "^3.10.3",
         "@nuxt/schema": "^3.10.3",
         "floating-vue": "5.2.2",
-        "nuxt-site-config-kit": "2.2.11",
+        "nuxt-site-config-kit": "2.2.12",
         "pathe": "^1.1.2",
         "pkg-types": "^1.0.3",
         "shiki": "^1.1.7",
         "sirv": "^2.0.4",
-        "site-config-stack": "2.2.11",
+        "site-config-stack": "2.2.12",
         "ufo": "^1.4.0"
       },
       "funding": {
@@ -10084,15 +10648,15 @@
       }
     },
     "node_modules/nuxt-site-config-kit": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/nuxt-site-config-kit/-/nuxt-site-config-kit-2.2.11.tgz",
-      "integrity": "sha512-ApoVYvJDJq0//Y20C2sn6NjWV1Xg+zfyRfPVKs1GKtuk0fvUKzkmedwt6V15MhkMdNBIYwaMB0wfWzm6Pw9DyA==",
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/nuxt-site-config-kit/-/nuxt-site-config-kit-2.2.12.tgz",
+      "integrity": "sha512-8amzGtBzHZervHgRkKXNI3lq0E1kP73vX+373uiBI9qGBFClFayuUSTDXAJreI7Yx0vB78iAjAA3a+YKM5iIdw==",
       "dev": true,
       "dependencies": {
         "@nuxt/kit": "^3.10.3",
         "@nuxt/schema": "^3.10.3",
         "pkg-types": "^1.0.3",
-        "site-config-stack": "2.2.11",
+        "site-config-stack": "2.2.12",
         "std-env": "^3.7.0",
         "ufo": "^1.4.0"
       },
@@ -10100,12 +10664,10 @@
         "url": "https://github.com/sponsors/harlan-zw"
       }
     },
-    "node_modules/nuxt-site-config/node_modules/@nuxt/devtools": {
+    "node_modules/nuxt/node_modules/@nuxt/devtools": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/@nuxt/devtools/-/devtools-1.1.5.tgz",
       "integrity": "sha512-aDEqz4L1GDj4DDnX7PL9ety3Wx0kLyKTb2JOSoJR8uX09fC3gonCvj/gYHLSSIKqhPasUjoOO5RPCtT+r9dtsA==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "@antfu/utils": "^0.7.7",
         "@nuxt/devtools-kit": "1.1.5",
@@ -10154,11 +10716,10 @@
         "vite": "*"
       }
     },
-    "node_modules/nuxt-site-config/node_modules/@nuxt/devtools-kit": {
+    "node_modules/nuxt/node_modules/@nuxt/devtools-kit": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-1.1.5.tgz",
       "integrity": "sha512-Nb/NKFCRtxyqcPD6snB52rXtbRQMjGtn3ncpa8cLWsnoqnkd9emQ4uwV8IwCNxTnqUBtbGU79/TlJ79SKH9TAw==",
-      "dev": true,
       "dependencies": {
         "@nuxt/kit": "^3.11.1",
         "@nuxt/schema": "^3.11.1",
@@ -10169,44 +10730,10 @@
         "vite": "*"
       }
     },
-    "node_modules/nuxt-site-config/node_modules/@nuxt/devtools-ui-kit": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@nuxt/devtools-ui-kit/-/devtools-ui-kit-1.1.5.tgz",
-      "integrity": "sha512-Oj5JzINvkzoEkfeXmtiGKr15SC/LCy09O6EAzHsoJDCD0Kw2z/bPaKuw9k6cb/yKssx3gKqHuWC0+QCQubIg7g==",
-      "dev": true,
-      "dependencies": {
-        "@iconify-json/carbon": "^1.1.31",
-        "@iconify-json/logos": "^1.1.42",
-        "@iconify-json/ri": "^1.1.20",
-        "@iconify-json/tabler": "^1.1.109",
-        "@nuxt/devtools-kit": "1.1.5",
-        "@nuxt/kit": "^3.11.1",
-        "@nuxtjs/color-mode": "^3.3.3",
-        "@unocss/core": "^0.58.7",
-        "@unocss/nuxt": "^0.58.7",
-        "@unocss/preset-attributify": "^0.58.7",
-        "@unocss/preset-icons": "^0.58.7",
-        "@unocss/preset-mini": "^0.58.7",
-        "@unocss/reset": "^0.58.7",
-        "@vueuse/core": "^10.9.0",
-        "@vueuse/integrations": "^10.9.0",
-        "@vueuse/nuxt": "^10.9.0",
-        "defu": "^6.1.4",
-        "focus-trap": "^7.5.4",
-        "splitpanes": "^3.1.5",
-        "unocss": "^0.58.7",
-        "v-lazy-show": "^0.2.4"
-      },
-      "peerDependencies": {
-        "@nuxt/devtools": "1.1.5"
-      }
-    },
-    "node_modules/nuxt-site-config/node_modules/@nuxt/devtools-wizard": {
+    "node_modules/nuxt/node_modules/@nuxt/devtools-wizard": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/@nuxt/devtools-wizard/-/devtools-wizard-1.1.5.tgz",
       "integrity": "sha512-bWLgLvYFbYCQYlLPttZaUo58cS1VJo1uEFguHaCwZ7Fzkm4Iv+lFTv5BzD+gOHwohaXLr3YecgZOO4YNJTgXyA==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "consola": "^3.2.3",
         "diff": "^5.2.0",
@@ -10235,9 +10762,9 @@
       }
     },
     "node_modules/nuxt/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
+      "version": "0.30.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",
+      "integrity": "sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -10246,9 +10773,9 @@
       }
     },
     "node_modules/nuxt/node_modules/unplugin": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.0.tgz",
-      "integrity": "sha512-CuZtvvO8ua2Wl+9q2jEaqH6m3DoQ38N7pvBYQbbaeNlWGvK2l6GHiKi29aIHDPoSxdUzQ7Unevf1/ugil5X6Pg==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.1.tgz",
+      "integrity": "sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==",
       "dependencies": {
         "acorn": "^8.11.3",
         "chokidar": "^3.6.0",
@@ -10491,6 +11018,23 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/optionator": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
+      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
+      "devOptional": true,
+      "dependencies": {
+        "@aashutoshrathi/word-wrap": "^1.2.3",
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -10698,9 +11242,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-      "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz",
+      "integrity": "sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw=="
     },
     "node_modules/path-type": {
       "version": "5.0.0",
@@ -10772,31 +11316,6 @@
         }
       }
     },
-    "node_modules/pinia/node_modules/vue-demi": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
-      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/pirates": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
@@ -10910,18 +11429,6 @@
         "postcss": "^8.2.2"
       }
     },
-    "node_modules/postcss-calc/node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-colormin": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-6.1.0.tgz",
@@ -11126,18 +11633,6 @@
         "postcss": "^8.4.31"
       }
     },
-    "node_modules/postcss-merge-rules/node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-minify-font-values": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-6.1.0.tgz",
@@ -11198,18 +11693,6 @@
         "postcss": "^8.4.31"
       }
     },
-    "node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-nested": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
@@ -11228,22 +11711,10 @@
         "postcss": "^8.2.14"
       }
     },
-    "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-nesting": {
-      "version": "12.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.0.tgz",
-      "integrity": "sha512-QOYnosaZ+mlP6plQrAxFw09UUp2Sgtxj1BVHN+rSVbtV0Yx48zRt9/9F/ZOoxOKBBEsaJk2MYhhVRjeRRw5yuw==",
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.1.tgz",
+      "integrity": "sha512-qc74KvIAQNa5ujZKG1UV286dhaDW6basbUy2i9AzNU/T8C9hpvGu9NZzm1SfePe2yP7sPYgpA8d4sPVopn2Hhw==",
       "funding": [
         {
           "type": "github",
@@ -11256,7 +11727,7 @@
       ],
       "dependencies": {
         "@csstools/selector-resolve-nested": "^1.1.0",
-        "@csstools/selector-specificity": "^3.0.2",
+        "@csstools/selector-specificity": "^3.0.3",
         "postcss-selector-parser": "^6.0.13"
       },
       "engines": {
@@ -11266,60 +11737,6 @@
         "postcss": "^8.4"
       }
     },
-    "node_modules/postcss-nesting/node_modules/@csstools/selector-resolve-nested": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-1.1.0.tgz",
-      "integrity": "sha512-uWvSaeRcHyeNenKg8tp17EVDRkpflmdyvbE0DHo6D/GdBb6PDnCYYU6gRpXhtICMGMcahQmj2zGxwFM/WC8hCg==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
-      "engines": {
-        "node": "^14 || ^16 || >=18"
-      },
-      "peerDependencies": {
-        "postcss-selector-parser": "^6.0.13"
-      }
-    },
-    "node_modules/postcss-nesting/node_modules/@csstools/selector-specificity": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz",
-      "integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
-      "engines": {
-        "node": "^14 || ^16 || >=18"
-      },
-      "peerDependencies": {
-        "postcss-selector-parser": "^6.0.13"
-      }
-    },
-    "node_modules/postcss-nesting/node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-normalize-charset": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-6.0.2.tgz",
@@ -11489,9 +11906,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "version": "6.0.16",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
+      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -11529,18 +11946,6 @@
         "postcss": "^8.4.31"
       }
     },
-    "node_modules/postcss-unique-selectors/node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -11563,6 +11968,42 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "devOptional": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
@@ -11654,8 +12095,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
-      "peer": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
@@ -11756,6 +12196,11 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/quill-delta/node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
     "node_modules/radix3": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
@@ -11778,13 +12223,12 @@
       }
     },
     "node_modules/rc9": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.1.tgz",
-      "integrity": "sha512-lNeOl38Ws0eNxpO3+wD1I9rkHGQyj1NU1jlzv4go2CtEnEQEUfqnIvZG7W+bC/aXdJ27n5x/yUjb6RoT9tko+Q==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
+      "integrity": "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==",
       "dependencies": {
-        "defu": "^6.1.2",
-        "destr": "^2.0.0",
-        "flat": "^5.0.2"
+        "defu": "^6.1.4",
+        "destr": "^2.0.3"
       }
     },
     "node_modules/read-cache": {
@@ -11822,9 +12266,9 @@
       }
     },
     "node_modules/read-package-json/node_modules/glob": {
-      "version": "10.3.11",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.11.tgz",
-      "integrity": "sha512-0UAMm+R/z1E2bTR8eFnoIIlnrUK89m36i90Ez36ld9hLulfUPBgRCQtBy/v86ABx18jnGyrTvu4X3LAjIeBogw==",
+      "version": "10.3.12",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
+      "integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^2.3.6",
@@ -11842,20 +12286,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/read-package-json/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/read-package-json/node_modules/minipass": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
@@ -12215,9 +12645,7 @@
     "node_modules/rfdc": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz",
-      "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg=="
     },
     "node_modules/rimraf": {
       "version": "3.0.2",
@@ -12273,9 +12701,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.2.tgz",
-      "integrity": "sha512-MIlLgsdMprDBXC+4hsPgzWUasLO9CE4zOkj/u6j+Z6j5A4zRY+CtiXAdJyPtgCsc42g658Aeh1DlrdVEJhsL2g==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.1.tgz",
+      "integrity": "sha512-4LnHSdd3QK2pa1J6dFbfm1HN0D7vSK/ZuZTsdyUAlA6Rr1yTouUTL13HaDOGJVgby461AhrNGBS7sCGXXtT+SA==",
       "dependencies": {
         "@types/estree": "1.0.5"
       },
@@ -12287,21 +12715,21 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.13.2",
-        "@rollup/rollup-android-arm64": "4.13.2",
-        "@rollup/rollup-darwin-arm64": "4.13.2",
-        "@rollup/rollup-darwin-x64": "4.13.2",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.13.2",
-        "@rollup/rollup-linux-arm64-gnu": "4.13.2",
-        "@rollup/rollup-linux-arm64-musl": "4.13.2",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.13.2",
-        "@rollup/rollup-linux-riscv64-gnu": "4.13.2",
-        "@rollup/rollup-linux-s390x-gnu": "4.13.2",
-        "@rollup/rollup-linux-x64-gnu": "4.13.2",
-        "@rollup/rollup-linux-x64-musl": "4.13.2",
-        "@rollup/rollup-win32-arm64-msvc": "4.13.2",
-        "@rollup/rollup-win32-ia32-msvc": "4.13.2",
-        "@rollup/rollup-win32-x64-msvc": "4.13.2",
+        "@rollup/rollup-android-arm-eabi": "4.14.1",
+        "@rollup/rollup-android-arm64": "4.14.1",
+        "@rollup/rollup-darwin-arm64": "4.14.1",
+        "@rollup/rollup-darwin-x64": "4.14.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.14.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.14.1",
+        "@rollup/rollup-linux-arm64-musl": "4.14.1",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.14.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.14.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.14.1",
+        "@rollup/rollup-linux-x64-gnu": "4.14.1",
+        "@rollup/rollup-linux-x64-musl": "4.14.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.14.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.14.1",
+        "@rollup/rollup-win32-x64-msvc": "4.14.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -12473,9 +12901,9 @@
       "optional": true
     },
     "node_modules/sass": {
-      "version": "1.72.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz",
-      "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
+      "version": "1.74.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.74.1.tgz",
+      "integrity": "sha512-w0Z9p/rWZWelb88ISOLyvqTWGmtmu2QJICqDBGyNnfG4OUnPX9BBjjYIXUpXCMOOg5MQWNpqzt876la1fsTvUA==",
       "devOptional": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -12493,7 +12921,7 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
       "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
@@ -12674,12 +13102,12 @@
       }
     },
     "node_modules/shiki": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.2.1.tgz",
-      "integrity": "sha512-u+XW6o0vCkUNlneZb914dLO+AayEIwK5tI62WeS//R5HIXBFiYaj/Hc5xcq27Yh83Grr4JbNtUBV8W6zyK4hWg==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.3.0.tgz",
+      "integrity": "sha512-9aNdQy/etMXctnPzsje1h1XIGm9YfRcSksKOGqZWXA/qP9G18/8fpz5Bjpma8bOgz3tqIpjERAd6/lLjFyzoww==",
       "dev": true,
       "dependencies": {
-        "@shikijs/core": "1.2.1"
+        "@shikijs/core": "1.3.0"
       }
     },
     "node_modules/signal-exit": {
@@ -12693,25 +13121,25 @@
       "integrity": "sha512-cOf2NhVuTiuNqe2X/ycEmizvCDXk0DoemhsEpnkcGnA4kS5iJYTCqZ9As7tFBbsch45Q1EdX61833+6sjJ8rrw=="
     },
     "node_modules/sigstore": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/sigstore/-/sigstore-2.2.2.tgz",
-      "integrity": "sha512-2A3WvXkQurhuMgORgT60r6pOWiCOO5LlEqY2ADxGBDGVYLSo5HN0uLtb68YpVpuL/Vi8mLTe7+0Dx2Fq8lLqEg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/sigstore/-/sigstore-2.3.0.tgz",
+      "integrity": "sha512-q+o8L2ebiWD1AxD17eglf1pFrl9jtW7FHa0ygqY6EKvibK8JHyq9Z26v9MZXeDiw+RbfOJ9j2v70M10Hd6E06A==",
       "dependencies": {
-        "@sigstore/bundle": "^2.2.0",
+        "@sigstore/bundle": "^2.3.1",
         "@sigstore/core": "^1.0.0",
-        "@sigstore/protobuf-specs": "^0.3.0",
-        "@sigstore/sign": "^2.2.3",
+        "@sigstore/protobuf-specs": "^0.3.1",
+        "@sigstore/sign": "^2.3.0",
         "@sigstore/tuf": "^2.3.1",
-        "@sigstore/verify": "^1.1.0"
+        "@sigstore/verify": "^1.2.0"
       },
       "engines": {
         "node": "^16.14.0 || >=18.0.0"
       }
     },
     "node_modules/simple-git": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.23.0.tgz",
-      "integrity": "sha512-P9ggTW8vb/21CAL/AmnACAhqBDfnqSSZVpV7WuFtsFR9HLunf5IqQvk+OXAQTfkcZep8pKnt3DV3o7w3TegEkQ==",
+      "version": "3.24.0",
+      "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.24.0.tgz",
+      "integrity": "sha512-QqAKee9Twv+3k8IFOFfPB2hnk6as6Y6ACUpwCtQvRYBAes23Wv3SZlHVobAzqcE8gfsisCvPw3HGW3HYM+VYYw==",
       "dependencies": {
         "@kwsites/file-exists": "^1.1.1",
         "@kwsites/promise-deferred": "^1.1.1",
@@ -12741,9 +13169,9 @@
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
     },
     "node_modules/site-config-stack": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/site-config-stack/-/site-config-stack-2.2.11.tgz",
-      "integrity": "sha512-j3okTVJiZV1QH4XJLCeO4UgaJzv4ogtFOOkAu1TlEcKSTSDBZ7PKBvZiyaW90TLnCTaB29JAAB/jmrJK7zlxdA==",
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/site-config-stack/-/site-config-stack-2.2.12.tgz",
+      "integrity": "sha512-U+nyw2vZ6E2zF/JYlFFEmDsqXSJbf0/6ZBCKXI4FZ2509iQwnEesfQXvWNuJ2JCemUJdAXAoiIturxEJtV4z0g==",
       "dev": true,
       "dependencies": {
         "ufo": "^1.4.0"
@@ -12776,14 +13204,14 @@
       }
     },
     "node_modules/smob": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/smob/-/smob-1.4.1.tgz",
-      "integrity": "sha512-9LK+E7Hv5R9u4g4C3p+jjLstaLe11MDsL21UpYaCNmapvMkYhqCV4A/f/3gyH8QjMyh6l68q9xC85vihY9ahMQ=="
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/smob/-/smob-1.5.0.tgz",
+      "integrity": "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig=="
     },
     "node_modules/socks": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.1.tgz",
-      "integrity": "sha512-B6w7tkwNid7ToxjZ08rQMT8M9BJAf8DKx8Ft4NivzH0zBUfd6jldGcisJn/RLgxcX3FPNDdNQCUEMMT79b+oCQ==",
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz",
+      "integrity": "sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==",
       "dependencies": {
         "ip-address": "^9.0.5",
         "smart-buffer": "^4.2.0"
@@ -12794,11 +13222,11 @@
       }
     },
     "node_modules/socks-proxy-agent": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.2.tgz",
-      "integrity": "sha512-8zuqoLv1aP/66PHF5TqwJ7Czm3Yv32urJQHrVyhD7mmA6d61Zv8cIXQYPTWwmg6qlupnPvs/QKDmfa4P/qct2g==",
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.3.tgz",
+      "integrity": "sha512-VNegTZKhuGq5vSD6XNKlbqWhyt/40CgoEw8XxD6dhnm8Jq9IEa3nIa4HwnM8XOqU0CdB0BwWVXusqiFXfHB3+A==",
       "dependencies": {
-        "agent-base": "^7.0.2",
+        "agent-base": "^7.1.1",
         "debug": "^4.3.4",
         "socks": "^2.7.1"
       },
@@ -12807,9 +13235,9 @@
       }
     },
     "node_modules/socks-proxy-agent/node_modules/agent-base": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
-      "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
       "dependencies": {
         "debug": "^4.3.4"
       },
@@ -12887,8 +13315,6 @@
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
       "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
-      "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12908,7 +13334,6 @@
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-3.1.5.tgz",
       "integrity": "sha512-r3Mq2ITFQ5a2VXLOy4/Sb2Ptp7OfEO8YIbhVJqJXoFc9hc5nTXXkCvtVDjIGbvC0vdE7tse+xTM9BMjsszP6bw==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/antoniandre"
       }
@@ -13036,21 +13461,33 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/strip-literal": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.0.0.tgz",
-      "integrity": "sha512-f9vHgsCWBq2ugHAkGMiiYY+AYG0D/cbloKKg0nhaaaSNsujdGIpVXCNsrJpCKr5M0f4aI31mr13UjY6GAuXCKA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.1.0.tgz",
+      "integrity": "sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==",
       "dependencies": {
-        "js-tokens": "^8.0.2"
+        "js-tokens": "^9.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/strip-literal/node_modules/js-tokens": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-8.0.3.tgz",
-      "integrity": "sha512-UfJMcSJc+SEXEl9lH/VLHSZbThQyLpw1vLO1Lb+j4RWDvG3N2f7yj3PVQA3cmkTBNldJ9eFnM+xEXxHIXrYiJw=="
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.0.tgz",
+      "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ=="
     },
     "node_modules/style-mod": {
       "version": "4.1.2",
@@ -13086,18 +13523,6 @@
         "postcss": "^8.4.31"
       }
     },
-    "node_modules/stylehacks/node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -13128,9 +13553,9 @@
       }
     },
     "node_modules/sucrase/node_modules/glob": {
-      "version": "10.3.11",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.11.tgz",
-      "integrity": "sha512-0UAMm+R/z1E2bTR8eFnoIIlnrUK89m36i90Ez36ld9hLulfUPBgRCQtBy/v86ABx18jnGyrTvu4X3LAjIeBogw==",
+      "version": "10.3.12",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.12.tgz",
+      "integrity": "sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==",
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^2.3.6",
@@ -13148,20 +13573,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/sucrase/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/sucrase/node_modules/minipass": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
@@ -13221,12 +13632,20 @@
         "url": "https://opencollective.com/svgo"
       }
     },
-    "node_modules/svgo/node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+    "node_modules/synckit": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
+      "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==",
+      "dev": true,
+      "dependencies": {
+        "@pkgr/core": "^0.1.0",
+        "tslib": "^2.6.2"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
       }
     },
     "node_modules/system-architecture": {
@@ -13243,8 +13662,7 @@
     "node_modules/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
-      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
-      "devOptional": true
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
     },
     "node_modules/tailwind-config-viewer": {
       "version": "1.7.3",
@@ -13400,18 +13818,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -13493,9 +13899,9 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/terser": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.30.0.tgz",
-      "integrity": "sha512-Y/SblUl5kEyEFzhMAQdsxVHh+utAxd4IuRNJzKywY/4uzSogh3G219jqbDDxYu4MXO9CzY3tSEqmZvW6AoEDJw==",
+      "version": "5.30.3",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.30.3.tgz",
+      "integrity": "sha512-STdUgOUx8rLbMGO9IOwHLpCqolkDITFFQSMYYwKE1N2lY6MVSaeoi10z/EhWxRc6ybqoVmKSkhKYH/XUpl7vSA==",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -13513,7 +13919,7 @@
       "version": "5.3.10",
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
       "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.20",
@@ -13549,6 +13955,12 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "devOptional": true
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -13621,6 +14033,18 @@
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
+    "node_modules/ts-api-utils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -13652,6 +14076,18 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "devOptional": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/type-fest": {
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
@@ -13675,6 +14111,19 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "devOptional": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/ufo": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.3.tgz",
@@ -13697,15 +14146,14 @@
       "integrity": "sha512-GykOvZwgDWZlTQMtp5jrD4BVL+gNn2NVlVafjcFUJ7taY20tqYdwdoWBFy6GBJsNTZe1GkGPkSl5knQAjtgceg=="
     },
     "node_modules/unconfig": {
-      "version": "0.3.11",
-      "resolved": "https://registry.npmjs.org/unconfig/-/unconfig-0.3.11.tgz",
-      "integrity": "sha512-bV/nqePAKv71v3HdVUn6UefbsDKQWRX+bJIkiSm0+twIds6WiD2bJLWWT3i214+J/B4edufZpG2w7Y63Vbwxow==",
-      "dev": true,
+      "version": "0.3.12",
+      "resolved": "https://registry.npmjs.org/unconfig/-/unconfig-0.3.12.tgz",
+      "integrity": "sha512-oDtfWDC0TMYFuwdt7E7CaqYZGqq1wAiC12PRTFe/93IkgNi+wVlF/LCjcD/bgNkGoopb0RsU363Ge3YXy7NGSw==",
       "dependencies": {
-        "@antfu/utils": "^0.7.6",
-        "defu": "^6.1.2",
-        "jiti": "^1.20.0",
-        "mlly": "^1.4.2"
+        "@antfu/utils": "^0.7.7",
+        "defu": "^6.1.4",
+        "jiti": "^1.21.0",
+        "mlly": "^1.6.1"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -13727,21 +14175,10 @@
         "unplugin": "^1.3.1"
       }
     },
-    "node_modules/unctx/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/unctx/node_modules/unplugin": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.0.tgz",
-      "integrity": "sha512-CuZtvvO8ua2Wl+9q2jEaqH6m3DoQ38N7pvBYQbbaeNlWGvK2l6GHiKi29aIHDPoSxdUzQ7Unevf1/ugil5X6Pg==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.1.tgz",
+      "integrity": "sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==",
       "dependencies": {
         "acorn": "^8.11.3",
         "chokidar": "^3.6.0",
@@ -13758,9 +14195,9 @@
       "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg=="
     },
     "node_modules/undici": {
-      "version": "5.28.3",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.3.tgz",
-      "integrity": "sha512-3ItfzbrhDlINjaP0duwnNsKpDQk3acHI3gVJ1z4fmwMK31k5G9OVIAMLSIaP6w4FaGkaAkN6zaQO9LUvZ1t7VA==",
+      "version": "5.28.4",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
+      "integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==",
       "dependencies": {
         "@fastify/busboy": "^2.0.0"
       },
@@ -13797,13 +14234,13 @@
       }
     },
     "node_modules/unhead": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.9.2.tgz",
-      "integrity": "sha512-CveP8bjL8gUJnZ1NqcMU1roe+VuM14wr0cJfNek/LCSI2i968mHDD5tbDXNcMSAVOhffKj6WkTngTUKNOZxA7g==",
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.9.4.tgz",
+      "integrity": "sha512-QVU0y3KowRu2cLjXxfemTKNohK4vdEwyahoszlEnRz0E5BTNRZQSs8AnommorGmVM7DvB2t4dwWadB51wDlPzw==",
       "dependencies": {
-        "@unhead/dom": "1.9.2",
-        "@unhead/schema": "1.9.2",
-        "@unhead/shared": "1.9.2",
+        "@unhead/dom": "1.9.4",
+        "@unhead/schema": "1.9.4",
+        "@unhead/shared": "1.9.4",
         "hookable": "^5.5.3"
       },
       "funding": {
@@ -13852,17 +14289,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/unimport/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/unimport/node_modules/strip-literal": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.3.0.tgz",
@@ -13875,9 +14301,9 @@
       }
     },
     "node_modules/unimport/node_modules/unplugin": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.0.tgz",
-      "integrity": "sha512-CuZtvvO8ua2Wl+9q2jEaqH6m3DoQ38N7pvBYQbbaeNlWGvK2l6GHiKi29aIHDPoSxdUzQ7Unevf1/ugil5X6Pg==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.1.tgz",
+      "integrity": "sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==",
       "dependencies": {
         "acorn": "^8.11.3",
         "chokidar": "^3.6.0",
@@ -13924,31 +14350,30 @@
       }
     },
     "node_modules/unocss": {
-      "version": "0.58.8",
-      "resolved": "https://registry.npmjs.org/unocss/-/unocss-0.58.8.tgz",
-      "integrity": "sha512-oMWCEgwvxJcF1BZxxkbTyTd83xtArsza3DModUrJrPndnpOVVz9fZ5g6wcrDbVpv6+cvRrgMCeKMlWKt9WIIsA==",
-      "dev": true,
-      "dependencies": {
-        "@unocss/astro": "0.58.8",
-        "@unocss/cli": "0.58.8",
-        "@unocss/core": "0.58.8",
-        "@unocss/extractor-arbitrary-variants": "0.58.8",
-        "@unocss/postcss": "0.58.8",
-        "@unocss/preset-attributify": "0.58.8",
-        "@unocss/preset-icons": "0.58.8",
-        "@unocss/preset-mini": "0.58.8",
-        "@unocss/preset-tagify": "0.58.8",
-        "@unocss/preset-typography": "0.58.8",
-        "@unocss/preset-uno": "0.58.8",
-        "@unocss/preset-web-fonts": "0.58.8",
-        "@unocss/preset-wind": "0.58.8",
-        "@unocss/reset": "0.58.8",
-        "@unocss/transformer-attributify-jsx": "0.58.8",
-        "@unocss/transformer-attributify-jsx-babel": "0.58.8",
-        "@unocss/transformer-compile-class": "0.58.8",
-        "@unocss/transformer-directives": "0.58.8",
-        "@unocss/transformer-variant-group": "0.58.8",
-        "@unocss/vite": "0.58.8"
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/unocss/-/unocss-0.58.9.tgz",
+      "integrity": "sha512-aqANXXP0RrtN4kSaTLn/7I6wh8o45LUdVgPzGu7Fan2DfH2+wpIs6frlnlHlOymnb+52dp6kXluQinddaUKW1A==",
+      "dependencies": {
+        "@unocss/astro": "0.58.9",
+        "@unocss/cli": "0.58.9",
+        "@unocss/core": "0.58.9",
+        "@unocss/extractor-arbitrary-variants": "0.58.9",
+        "@unocss/postcss": "0.58.9",
+        "@unocss/preset-attributify": "0.58.9",
+        "@unocss/preset-icons": "0.58.9",
+        "@unocss/preset-mini": "0.58.9",
+        "@unocss/preset-tagify": "0.58.9",
+        "@unocss/preset-typography": "0.58.9",
+        "@unocss/preset-uno": "0.58.9",
+        "@unocss/preset-web-fonts": "0.58.9",
+        "@unocss/preset-wind": "0.58.9",
+        "@unocss/reset": "0.58.9",
+        "@unocss/transformer-attributify-jsx": "0.58.9",
+        "@unocss/transformer-attributify-jsx-babel": "0.58.9",
+        "@unocss/transformer-compile-class": "0.58.9",
+        "@unocss/transformer-directives": "0.58.9",
+        "@unocss/transformer-variant-group": "0.58.9",
+        "@unocss/vite": "0.58.9"
       },
       "engines": {
         "node": ">=14"
@@ -13957,7 +14382,7 @@
         "url": "https://github.com/sponsors/antfu"
       },
       "peerDependencies": {
-        "@unocss/webpack": "0.58.8",
+        "@unocss/webpack": "0.58.9",
         "vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0"
       },
       "peerDependenciesMeta": {
@@ -14020,9 +14445,9 @@
       }
     },
     "node_modules/unplugin-vue-router/node_modules/unplugin": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.0.tgz",
-      "integrity": "sha512-CuZtvvO8ua2Wl+9q2jEaqH6m3DoQ38N7pvBYQbbaeNlWGvK2l6GHiKi29aIHDPoSxdUzQ7Unevf1/ugil5X6Pg==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.1.tgz",
+      "integrity": "sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==",
       "dependencies": {
         "acorn": "^8.11.3",
         "chokidar": "^3.6.0",
@@ -14150,33 +14575,22 @@
       }
     },
     "node_modules/unwasm": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/unwasm/-/unwasm-0.3.8.tgz",
-      "integrity": "sha512-nIJQXxGl/gTUp5dZkSc8jbxAqSOa9Vv4jjSZXNI6OK0JXdvW3SQUHR+KY66rjI0W//km59jivGgd5TCvBUWsnA==",
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/unwasm/-/unwasm-0.3.9.tgz",
+      "integrity": "sha512-LDxTx/2DkFURUd+BU1vUsF/moj0JsoTvl+2tcg2AUOiEzVturhGGx17/IMgGvKUYdZwr33EJHtChCJuhu9Ouvg==",
       "dependencies": {
         "knitwork": "^1.0.0",
         "magic-string": "^0.30.8",
         "mlly": "^1.6.1",
         "pathe": "^1.1.2",
         "pkg-types": "^1.0.3",
-        "unplugin": "^1.9.0"
-      }
-    },
-    "node_modules/unwasm/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
+        "unplugin": "^1.10.0"
       }
     },
     "node_modules/unwasm/node_modules/unplugin": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.0.tgz",
-      "integrity": "sha512-CuZtvvO8ua2Wl+9q2jEaqH6m3DoQ38N7pvBYQbbaeNlWGvK2l6GHiKi29aIHDPoSxdUzQ7Unevf1/ugil5X6Pg==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.1.tgz",
+      "integrity": "sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==",
       "dependencies": {
         "acorn": "^8.11.3",
         "chokidar": "^3.6.0",
@@ -14230,8 +14644,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
-      "peer": true,
+      "devOptional": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -14246,6 +14659,23 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/v-calendar": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-3.1.2.tgz",
+      "integrity": "sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==",
+      "dependencies": {
+        "@types/lodash": "^4.14.165",
+        "@types/resize-observer-browser": "^0.1.7",
+        "date-fns": "^2.16.1",
+        "date-fns-tz": "^2.0.0",
+        "lodash": "^4.17.20",
+        "vue-screen-utils": "^1.0.0-beta.13"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/v-lazy-show": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/v-lazy-show/-/v-lazy-show-0.2.4.tgz",
@@ -14287,12 +14717,12 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.2.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.6.tgz",
-      "integrity": "sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==",
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+      "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
       "dependencies": {
         "esbuild": "^0.20.1",
-        "postcss": "^8.4.36",
+        "postcss": "^8.4.38",
         "rollup": "^4.13.0"
       },
       "bin": {
@@ -14344,8 +14774,6 @@
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/vite-hot-client/-/vite-hot-client-0.2.3.tgz",
       "integrity": "sha512-rOGAV7rUlUHX89fP2p2v0A2WWvV3QMX2UYq0fRqsWSvFvev4atHWqjwGoKaZT1VTKyLGk533ecu3eyd0o59CAg==",
-      "dev": true,
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       },
@@ -14481,6 +14909,14 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/vite-plugin-checker/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/vite-plugin-checker/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -14588,17 +15024,6 @@
         "vite": "^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0"
       }
     },
-    "node_modules/vite-plugin-vue-inspector/node_modules/magic-string": {
-      "version": "0.30.8",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
-      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/vscode-jsonrpc": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-6.0.0.tgz",
@@ -14704,9 +15129,9 @@
       }
     },
     "node_modules/vue-chartjs": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.0.tgz",
-      "integrity": "sha512-8XqX0JU8vFZ+WA2/knz4z3ThClduni2Nm0BMe2u0mXgTfd9pXrmJ07QBI+WAij5P/aPmPMX54HCE1seWL37ZdQ==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.1.tgz",
+      "integrity": "sha512-rZjqcHBxKiHrBl0CIvcOlVEBwRhpWAVf6rDU3vUfa7HuSRmGtCslc0Oc8m16oAVuk0erzc1FCtH1VCriHsrz+A==",
       "peerDependencies": {
         "chart.js": "^4.1.1",
         "vue": "^3.0.0-0 || ^2.7.0"
@@ -14743,11 +15168,60 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-devtools-stub": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz",
       "integrity": "sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ=="
     },
+    "node_modules/vue-eslint-parser": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz",
+      "integrity": "sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.4",
+        "eslint-scope": "^7.1.1",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.1",
+        "esquery": "^1.4.0",
+        "lodash": "^4.17.21",
+        "semver": "^7.3.6"
+      },
+      "engines": {
+        "node": "^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=6.0.0"
+      }
+    },
     "node_modules/vue-json-pretty": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/vue-json-pretty/-/vue-json-pretty-2.4.0.tgz",
@@ -14776,8 +15250,6 @@
       "version": "2.0.0-alpha.1",
       "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz",
       "integrity": "sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==",
-      "dev": true,
-      "peer": true,
       "peerDependencies": {
         "vue": "^3.0.0"
       }
@@ -14786,7 +15258,6 @@
       "version": "2.0.0-alpha.1",
       "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
       "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
-      "dev": true,
       "peerDependencies": {
         "vue": "^3.0.0"
       }
@@ -14805,6 +15276,14 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-screen-utils": {
+      "version": "1.0.0-beta.13",
+      "resolved": "https://registry.npmjs.org/vue-screen-utils/-/vue-screen-utils-1.0.0-beta.13.tgz",
+      "integrity": "sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-signature-pad": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/vue-signature-pad/-/vue-signature-pad-3.0.2.tgz",
@@ -14824,8 +15303,6 @@
       "version": "2.0.0-beta.8",
       "resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz",
       "integrity": "sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "mitt": "^2.1.0",
         "vue-observe-visibility": "^2.0.0-alpha.1",
@@ -14838,9 +15315,7 @@
     "node_modules/vue-virtual-scroller/node_modules/mitt": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
-      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
     },
     "node_modules/vue3-editor": {
       "version": "0.1.1",
@@ -14879,7 +15354,7 @@
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",
       "integrity": "sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
@@ -14906,7 +15381,7 @@
       "version": "5.91.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
       "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
-      "dev": true,
+      "devOptional": true,
       "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
@@ -14963,11 +15438,35 @@
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
       "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw=="
     },
+    "node_modules/webpack/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "devOptional": true,
+      "peer": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/webpack/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "devOptional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/webpack/node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true,
+      "devOptional": true,
       "peer": true
     },
     "node_modules/whatwg-url": {
@@ -15121,6 +15620,15 @@
         }
       }
     },
+    "node_modules/xml-name-validator": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/y18n": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
diff --git a/client/package.json b/client/package.json
index 2fee2f294..44bc0d3d8 100644
--- a/client/package.json
+++ b/client/package.json
@@ -7,16 +7,23 @@
     "dev": "export NODE_TLS_REJECT_UNAUTHORIZED=0; nuxt dev",
     "generate": "export NODE_TLS_REJECT_UNAUTHORIZED=0; nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "lint": "eslint --ext .js,.vue .",
+    "lint:fix": "eslint . --fix --ext .js,.vue"
   },
   "devDependencies": {
     "@nuxt/devtools": "~1.0.0",
+    "@nuxt/eslint-config": "^0.2.0",
     "autoprefixer": "^10.4.16",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "nuxt": "^3.9.1",
     "nuxt-gtag": "^1.1.2",
     "nuxt-icon": "^0.6.10",
     "nuxt-simple-sitemap": "^4.2.3",
     "postcss": "^8.4.32",
+    "prettier": "^3.2.5",
     "sass": "^1.69.6",
     "vue": "^3.3.10",
     "vue-router": "^4.2.5"
@@ -61,5 +68,8 @@
     "vue3-editor": "^0.1.1",
     "vuedraggable": "next",
     "webcam-easy": "^1.1.1"
-  }
+  },
+  "eslintIgnore": [
+    "/lib/jaro-winkler.js"
+  ]
 }
diff --git a/client/pages/ai-form-builder.vue b/client/pages/ai-form-builder.vue
index 1ed634c6b..03979f7e3 100644
--- a/client/pages/ai-form-builder.vue
+++ b/client/pages/ai-form-builder.vue
@@ -1,480 +1,618 @@
 <template>
   <div class="flex-1">
     <!-- START HERO -->
-    <section class="bg-gradient-to-b relative from-white to-gray-100 py-12 sm:py-16 lg:py-20 xl:py-24">
-        <div class="absolute inset-0">
-          <img class="w-full h-full object-cover object-top" src="/img/pages/ai_form_builder/background-pattern.svg" alt=""/>
+    <section
+      class="bg-gradient-to-b relative from-white to-gray-100 py-12 sm:py-16 lg:py-20 xl:py-24"
+    >
+      <div class="absolute inset-0">
+        <img
+          class="w-full h-full object-cover object-top"
+          src="/img/pages/ai_form_builder/background-pattern.svg"
+          alt=""
+        >
+      </div>
 
-        </div>
+      <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative">
+        <div class="max-w-4xl mx-auto text-center">
+          <h1
+            class="text-4xl sm:text-5xl lg:text-6xl font-semibold text-gray-900 tracking-tight"
+          >
+            Say goodbye to tedious form building with OpnForm's new
+            <span
+              class="bg-clip-text text-transparent bg-gradient-to-r lg:block from-blue-600 to-blue-400"
+            >AI-powered feature!</span>
+          </h1>
+          <p
+            class="mt-4 sm:mt-5 text-base leading-7 sm:text-xl sm:leading-9 font-medium text-gray-500"
+          >
+            Easily generate a fully working form in seconds with just a simple
+            description.
+          </p>
 
-        <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative">
-          <div class="max-w-4xl mx-auto text-center">
-            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-semibold text-gray-900 tracking-tight">
-              Say goodbye to tedious form building with OpnForm's new <span
-                class="bg-clip-text text-transparent bg-gradient-to-r lg:block from-blue-600 to-blue-400">AI-powered
-                feature!</span>
-            </h1>
-            <p class="mt-4 sm:mt-5 text-base leading-7 sm:text-xl sm:leading-9 font-medium text-gray-500">
-              Easily generate a fully working form in seconds with just a simple description.
-            </p>
-
-            <div class="mt-8 flex justify-center">
-              <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms-create-guest' }" :arrow="true">
-                Get started for free
-              </v-button>
-              <v-button v-else class="mr-1" :to="{ name: 'forms-create' }" :arrow="true">
-                Get started for free
-              </v-button>
-            </div>
+          <div class="mt-8 flex justify-center">
+            <v-button
+              v-if="!authenticated"
+              class="mr-1"
+              :to="{ name: 'forms-create-guest' }"
+              :arrow="true"
+            >
+              Get started for free
+            </v-button>
+            <v-button
+              v-else
+              class="mr-1"
+              :to="{ name: 'forms-create' }"
+              :arrow="true"
+            >
+              Get started for free
+            </v-button>
           </div>
+        </div>
 
-          <div class="max-w-6xl mx-auto mt-12 sm:mt-16">
-            <div
-              class="-m-2 rounded-xl bg-blue-900/5 p-2 backdrop-blur-sm ring-1 ring-inset ring-blue-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
-              <video class="rounded-md ring-1 ring-gray-200 shadow-xl shadow-blue-600/10 ring-blue-900/10" controls autoplay loop muted>
-                <source src="/video/opnform-ai.mp4" type="video/mp4">
-
-                This browser does not display the video tag.
-              </video>
-            </div>
+        <div class="max-w-6xl mx-auto mt-12 sm:mt-16">
+          <div
+            class="-m-2 rounded-xl bg-blue-900/5 p-2 backdrop-blur-sm ring-1 ring-inset ring-blue-900/10 lg:-m-4 lg:rounded-2xl lg:p-4"
+          >
+            <video
+              class="rounded-md ring-1 ring-gray-200 shadow-xl shadow-blue-600/10 ring-blue-900/10"
+              controls
+              autoplay
+              loop
+              muted
+            >
+              <source
+                src="/video/opnform-ai.mp4"
+                type="video/mp4"
+              >
+
+              This browser does not display the video tag.
+            </video>
           </div>
+        </div>
 
-          <div
-            class="grid lg:grid-cols-3 grid-cols-1 sm:max-w-lg lg:max-w-5xl sm:mx-auto gap-8 sm:gap-10 mt-12 sm:mt-16">
-            <div class="flex items-start gap-4">
-              <img class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-fast.svg" alt=""/>
-
-              <div>
-                <p class="text-md font-semibold text-gray-900">
-                  Faster than Ever
-                </p>
-                <p class="text-base font-medium text-gray-500 mt-2">
-                  Save time and effort by generating a form in seconds
-                </p>
-              </div>
+        <div
+          class="grid lg:grid-cols-3 grid-cols-1 sm:max-w-lg lg:max-w-5xl sm:mx-auto gap-8 sm:gap-10 mt-12 sm:mt-16"
+        >
+          <div class="flex items-start gap-4">
+            <img
+              class="w-12 h-12 shrink-0"
+              src="/img/pages/ai_form_builder/icon-fast.svg"
+              alt=""
+            >
+
+            <div>
+              <p class="text-md font-semibold text-gray-900">
+                Faster than Ever
+              </p>
+              <p class="text-base font-medium text-gray-500 mt-2">
+                Save time and effort by generating a form in seconds
+              </p>
             </div>
+          </div>
 
-            <div class="flex items-start gap-4">
-              <img class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-customization.svg" alt=""/>
-
-              <div>
-                <p class="text-md font-semibold text-gray-900">
-                  Customizations
-                </p>
-                <p class="text-base font-medium text-gray-500 mt-2">
-                  Customize your form to your exact specifications
-                </p>
-              </div>
+          <div class="flex items-start gap-4">
+            <img
+              class="w-12 h-12 shrink-0"
+              src="/img/pages/ai_form_builder/icon-customization.svg"
+              alt=""
+            >
+
+            <div>
+              <p class="text-md font-semibold text-gray-900">
+                Customizations
+              </p>
+              <p class="text-base font-medium text-gray-500 mt-2">
+                Customize your form to your exact specifications
+              </p>
             </div>
+          </div>
 
-            <div class="flex items-start gap-4">
-              <img class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-browser.svg" alt=""/>
-
-              <div>
-                <p class="text-md font-semibold text-gray-900">
-                  No Coding Knowledge Required
-                </p>
-                <p class="text-base font-medium text-gray-500 mt-2">
-                  No coding knowledge required and it's completely free to use
-                </p>
-              </div>
+          <div class="flex items-start gap-4">
+            <img
+              class="w-12 h-12 shrink-0"
+              src="/img/pages/ai_form_builder/icon-browser.svg"
+              alt=""
+            >
+
+            <div>
+              <p class="text-md font-semibold text-gray-900">
+                No Coding Knowledge Required
+              </p>
+              <p class="text-base font-medium text-gray-500 mt-2">
+                No coding knowledge required and it's completely free to use
+              </p>
             </div>
           </div>
         </div>
+      </div>
     </section>
     <!-- END HERO -->
 
     <!-- START HOW IT WORKS -->
     <section class="bg-white py-12 sm:py-16 lg:py-20 xl:py-24">
-        <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
-          <div class="text-center max-w-3xl mx-auto">
-            <h2 class="text-sm font-semibold text-blue-600">
-              How Does It Work?
-            </h2>
-            <p
-              class="text-3xl mt-4 sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight">
-              Save hours in just a few clicks
-            </p>
-            <p class="text-gray-500 text-base leading-7 sm:text-lg sm:leading-8 font-medium mt-4">
-              Building forms has never been easier
-            </p>
+      <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <div class="text-center max-w-3xl mx-auto">
+          <h2 class="text-sm font-semibold text-blue-600">
+            How Does It Work?
+          </h2>
+          <p
+            class="text-3xl mt-4 sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight"
+          >
+            Save hours in just a few clicks
+          </p>
+          <p
+            class="text-gray-500 text-base leading-7 sm:text-lg sm:leading-8 font-medium mt-4"
+          >
+            Building forms has never been easier
+          </p>
+        </div>
+
+        <div
+          class="space-y-16 text-center lg:text-left sm:max-w-md sm:mx-auto lg:max-w-none lg:space-y-20 xl:space-y-24 mt-8 sm:mt-12 lg:mt-16"
+        >
+          <div
+            class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12"
+          >
+            <img
+              class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
+              src="/img/pages/ai_form_builder/step-1.svg"
+              alt=""
+            >
+
+            <div
+              class="w-16 h-16 rounded-full bg-blue-50 border-2 border-blue-200 hidden xl:inline-flex items-center justify-center text-blue-600 text-2xl font-semibold leading-none"
+            >
+              1
+            </div>
+
+            <div class="lg:flex-1 lg:shrink-0">
+              <img
+                class="w-auto h-16 hidden lg:block"
+                src="/img/pages/ai_form_builder/icon-create.svg"
+                alt=""
+              >
+
+              <h3
+                class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8"
+              >
+                Building forms made easy
+              </h3>
+              <p
+                class="text-base font-medium leading-7 sm:text-lg sm:leading-8 text-gray-500 mt-4"
+              >
+                OpnForm's easy-to-use online form creator lets you create a
+                beautiful web form in no time. Whether you need to create
+                contact forms and registration forms for a landing page or an
+                online order form for your business, you will no longer need to
+                spend hours working on forms.
+              </p>
+            </div>
           </div>
 
           <div
-            class="space-y-16 text-center lg:text-left sm:max-w-md sm:mx-auto lg:max-w-none lg:space-y-20 xl:space-y-24 mt-8 sm:mt-12 lg:mt-16">
-            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12">
-              <img class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
-              src="/img/pages/ai_form_builder/step-1.svg" alt=""/>
-
-
-              <div
-                class="w-16 h-16 rounded-full bg-blue-50 border-2 border-blue-200 hidden xl:inline-flex items-center justify-center text-blue-600 text-2xl font-semibold leading-none">
-                1
-              </div>
-
-              <div class="lg:flex-1 lg:shrink-0">
-                <img class="w-auto h-16 hidden lg:block" src="/img/pages/ai_form_builder/icon-create.svg" alt=""/>
-
-                <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8">
-                  Building forms made easy
-                </h3>
-                <p class="text-base font-medium leading-7 sm:text-lg sm:leading-8 text-gray-500 mt-4">
-                  OpnForm's easy-to-use online form creator lets you create a beautiful web form in no time. Whether you
-                  need to create
-                  contact forms and registration forms for a landing page or an online order form for your business, you
-                  will no longer
-                  need to spend hours working on forms.
-                </p>
-              </div>
+            class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12"
+          >
+            <img
+              class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm lg:order-3"
+              src="/img/pages/ai_form_builder/step-2.svg"
+              alt=""
+            >
+            <div
+              class="w-16 h-16 lg:order-2 rounded-full bg-blue-50 border-2 border-blue-200 hidden xl:inline-flex items-center justify-center text-blue-600 text-2xl font-semibold leading-none"
+            >
+              2
             </div>
 
-            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12">
+            <div class="lg:flex-1 lg:shrink-0 lg:order-1">
               <img
-                class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm lg:order-3"
-                src="/img/pages/ai_form_builder/step-2.svg" alt=""/>
-              <div
-                class="w-16 h-16 lg:order-2 rounded-full bg-blue-50 border-2 border-blue-200 hidden xl:inline-flex items-center justify-center text-blue-600 text-2xl font-semibold leading-none">
-                2
-              </div>
-
-              <div class="lg:flex-1 lg:shrink-0 lg:order-1">
-                <img class="w-auto h-16 hidden lg:block" src="/img/pages/ai_form_builder/icon-customization.svg" alt=""/>
-
-                <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8">
-                  Customized forms work wonders
-                </h3>
-                <p class="text-base font-medium leading-7 sm:text-lg sm:leading-8 text-gray-500 mt-4">
-                  Did you know that good-looking forms are more likely to convert more responses than ordinary ones? On
-                  OpnForm, you can
-                  customize your form design to the tiniest detail and match your brand image with your forms.
-                </p>
-              </div>
+                class="w-auto h-16 hidden lg:block"
+                src="/img/pages/ai_form_builder/icon-customization.svg"
+                alt=""
+              >
+
+              <h3
+                class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8"
+              >
+                Customized forms work wonders
+              </h3>
+              <p
+                class="text-base font-medium leading-7 sm:text-lg sm:leading-8 text-gray-500 mt-4"
+              >
+                Did you know that good-looking forms are more likely to convert
+                more responses than ordinary ones? On OpnForm, you can customize
+                your form design to the tiniest detail and match your brand
+                image with your forms.
+              </p>
+            </div>
+          </div>
+
+          <div
+            class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12"
+          >
+            <img
+              class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
+              src="/img/pages/ai_form_builder/step-3.svg"
+              alt=""
+            >
+            <div
+              class="w-16 h-16 rounded-full bg-blue-50 border-2 border-blue-200 hidden xl:inline-flex items-center justify-center text-blue-600 text-2xl font-semibold leading-none"
+            >
+              3
             </div>
 
-            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12">
-              <img class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
-              src="/img/pages/ai_form_builder/step-3.svg" alt=""/>
-              <div
-                class="w-16 h-16 rounded-full bg-blue-50 border-2 border-blue-200 hidden xl:inline-flex items-center justify-center text-blue-600 text-2xl font-semibold leading-none">
-                3
-              </div>
-
-              <div class="lg:flex-1 lg:shrink-0">
-                <img class="w-auto h-16 hidden lg:block" src="/img/pages/ai_form_builder/icon-share.svg" alt=""/>
-
-                <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8">
-                  Share your forms anywhere
-                </h3>
-                <p class="text-base font-medium leading-7 sm:text-lg sm:leading-8 text-gray-500 mt-4">
-                  You can share your forms anywhere using their unique weblink or embed them on your landing pages
-                  seamlessly.
-                  Furthermore, you can adjust your form’s privacy settings in order to reach the targeted audience and
-                  prevent others from
-                  viewing your form.
-                </p>
-              </div>
+            <div class="lg:flex-1 lg:shrink-0">
+              <img
+                class="w-auto h-16 hidden lg:block"
+                src="/img/pages/ai_form_builder/icon-share.svg"
+                alt=""
+              >
+
+              <h3
+                class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8"
+              >
+                Share your forms anywhere
+              </h3>
+              <p
+                class="text-base font-medium leading-7 sm:text-lg sm:leading-8 text-gray-500 mt-4"
+              >
+                You can share your forms anywhere using their unique weblink or
+                embed them on your landing pages seamlessly. Furthermore, you
+                can adjust your form’s privacy settings in order to reach the
+                targeted audience and prevent others from viewing your form.
+              </p>
             </div>
           </div>
         </div>
+      </div>
     </section>
     <!-- END HOW IT WORKS -->
 
     <!-- START EXAMPLES -->
-<!--    <section class="bg-gray-50 py-12 sm:py-16 lg:py-20 xl:py-24">-->
-<!--        <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">-->
-<!--          <div class="text-center max-w-3xl mx-auto">-->
-<!--            <h2 class="text-sm font-semibold text-blue-600">-->
-<!--              Examples-->
-<!--            </h2>-->
-<!--            <p-->
-<!--              class="text-3xl mt-4 sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight">-->
-<!--              What our user has created-->
-<!--            </p>-->
-<!--            <p class="text-gray-500 text-base leading-7 sm:text-lg sm:leading-8 font-medium mt-4">-->
-<!--              Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis-->
-<!--              enim velit-->
-<!--              mollit.-->
-<!--            </p>-->
-<!--          </div>-->
-
-<!--          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-8 sm:mt-12 lg:mt-16">-->
-<!--            <div-->
-<!--              class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
-<!--              <img class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
+    <!--    <section class="bg-gray-50 py-12 sm:py-16 lg:py-20 xl:py-24">-->
+    <!--        <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">-->
+    <!--          <div class="text-center max-w-3xl mx-auto">-->
+    <!--            <h2 class="text-sm font-semibold text-blue-600">-->
+    <!--              Examples-->
+    <!--            </h2>-->
+    <!--            <p-->
+    <!--              class="text-3xl mt-4 sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight">-->
+    <!--              What our user has created-->
+    <!--            </p>-->
+    <!--            <p class="text-gray-500 text-base leading-7 sm:text-lg sm:leading-8 font-medium mt-4">-->
+    <!--              Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis-->
+    <!--              enim velit-->
+    <!--              mollit.-->
+    <!--            </p>-->
+    <!--          </div>-->
+
+    <!--          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-8 sm:mt-12 lg:mt-16">-->
+    <!--            <div-->
+    <!--              class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
+    <!--              <img class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
 -->
-<!--              <div class="px-4 py-5 sm:p-6">-->
-<!--                <h3 class="text-lg font-semibold text-gray-900">-->
-<!--                  Example 1-->
-<!--                </h3>-->
-<!--                <p class="text-base font-medium text-gray-500 mt-2 line-clamp-2">-->
-<!--                  Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor-->
-<!--                </p>-->
-<!--              </div>-->
-<!--            </div>-->
-
-<!--            <div-->
-<!--              class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
-<!--              <img class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
+    <!--              <div class="px-4 py-5 sm:p-6">-->
+    <!--                <h3 class="text-lg font-semibold text-gray-900">-->
+    <!--                  Example 1-->
+    <!--                </h3>-->
+    <!--                <p class="text-base font-medium text-gray-500 mt-2 line-clamp-2">-->
+    <!--                  Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor-->
+    <!--                </p>-->
+    <!--              </div>-->
+    <!--            </div>-->
+
+    <!--            <div-->
+    <!--              class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
+    <!--              <img class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
 -->
-<!--              <div class="px-4 py-5 sm:p-6">-->
-<!--                <h3 class="text-lg font-semibold text-gray-900">-->
-<!--                  Example 2-->
-<!--                </h3>-->
-<!--                <p class="text-base font-medium text-gray-500 mt-2 line-clamp-2">-->
-<!--                  Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor-->
-<!--                </p>-->
-<!--              </div>-->
-<!--            </div>-->
-
-<!--            <div-->
-<!--              class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
-<!--              <img class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
+    <!--              <div class="px-4 py-5 sm:p-6">-->
+    <!--                <h3 class="text-lg font-semibold text-gray-900">-->
+    <!--                  Example 2-->
+    <!--                </h3>-->
+    <!--                <p class="text-base font-medium text-gray-500 mt-2 line-clamp-2">-->
+    <!--                  Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor-->
+    <!--                </p>-->
+    <!--              </div>-->
+    <!--            </div>-->
+
+    <!--            <div-->
+    <!--              class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
+    <!--              <img class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
 -->
-<!--              <div class="px-4 py-5 sm:p-6">-->
-<!--                <h3 class="text-lg font-semibold text-gray-900">-->
-<!--                  Example 3-->
-<!--                </h3>-->
-<!--                <p class="text-base font-medium text-gray-500 mt-2 line-clamp-2">-->
-<!--                  Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor-->
-<!--                </p>-->
-<!--              </div>-->
-<!--            </div>-->
-
-<!--            <div-->
-<!--              class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
-<!--              <img class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
+    <!--              <div class="px-4 py-5 sm:p-6">-->
+    <!--                <h3 class="text-lg font-semibold text-gray-900">-->
+    <!--                  Example 3-->
+    <!--                </h3>-->
+    <!--                <p class="text-base font-medium text-gray-500 mt-2 line-clamp-2">-->
+    <!--                  Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor-->
+    <!--                </p>-->
+    <!--              </div>-->
+    <!--            </div>-->
+
+    <!--            <div-->
+    <!--              class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
+    <!--              <img class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
 -->
-<!--              <div class="px-4 py-5 sm:p-6">-->
-<!--                <h3 class="text-lg font-semibold text-gray-900">-->
-<!--                  Example 4-->
-<!--                </h3>-->
-<!--                <p class="text-base font-medium text-gray-500 mt-2 line-clamp-2">-->
-<!--                  Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor-->
-<!--                </p>-->
-<!--              </div>-->
-<!--            </div>-->
-<!--          </div>-->
-
-<!--&lt;!&ndash;          <hr class="mt-12 border-gray-200 sm:mt-16">&ndash;&gt;-->
-
-<!--&lt;!&ndash;          <div class="max-w-2xl mx-auto mt-12 text-center sm:mt-16">&ndash;&gt;-->
-<!--&lt;!&ndash;            <h4 class="text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl lg:text-4xl">&ndash;&gt;-->
-<!--&lt;!&ndash;              Ready to level-up?&ndash;&gt;-->
-<!--&lt;!&ndash;            </h4>&ndash;&gt;-->
-<!--&lt;!&ndash;            <p class="mt-4 text-base leading-7 sm:text-xl sm:leading-9 font-medium text-gray-500">&ndash;&gt;-->
-<!--&lt;!&ndash;              Save time and effortlessly create forms with OpnForm&ndash;&gt;-->
-<!--&lt;!&ndash;            </p>&ndash;&gt;-->
-
-<!--&lt;!&ndash;            <div class="mt-8 flex justify-center">&ndash;&gt;-->
-<!--&lt;!&ndash;              <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms-create-guest' }" :arrow="true">&ndash;&gt;-->
-<!--&lt;!&ndash;                Get started for free&ndash;&gt;-->
-<!--&lt;!&ndash;              </v-button>&ndash;&gt;-->
-<!--&lt;!&ndash;              <v-button v-else class="mr-1" :to="{ name: 'forms-create' }" :arrow="true">&ndash;&gt;-->
-<!--&lt;!&ndash;                Get started for free&ndash;&gt;-->
-<!--&lt;!&ndash;              </v-button>&ndash;&gt;-->
-<!--&lt;!&ndash;            </div>&ndash;&gt;-->
-
-<!--&lt;!&ndash;            <ul&ndash;&gt;-->
-<!--&lt;!&ndash;              class="flex mt-8 sm:mt-12 text-sm font-medium text-gray-900 items-center justify-center flex-wrap gap-x-6 gap-y-4">&ndash;&gt;-->
-<!--&lt;!&ndash;              <li class="flex items-center gap-2">&ndash;&gt;-->
-<!--&lt;!&ndash;                <svg aria-hidden="true" class="h-5 w-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"&ndash;&gt;-->
-<!--&lt;!&ndash;                  viewBox="0 0 20 20" fill="currentColor">&ndash;&gt;-->
-<!--&lt;!&ndash;                  <path fill-rule="evenodd"&ndash;&gt;-->
-<!--&lt;!&ndash;                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"&ndash;&gt;-->
-<!--&lt;!&ndash;                    clip-rule="evenodd" />&ndash;&gt;-->
-<!--&lt;!&ndash;                </svg>&ndash;&gt;-->
-<!--&lt;!&ndash;                No design skills required&ndash;&gt;-->
-<!--&lt;!&ndash;              </li>&ndash;&gt;-->
-
-<!--&lt;!&ndash;              <li class="flex items-center gap-2">&ndash;&gt;-->
-<!--&lt;!&ndash;                <svg aria-hidden="true" class="h-5 w-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"&ndash;&gt;-->
-<!--&lt;!&ndash;                  viewBox="0 0 20 20" fill="currentColor">&ndash;&gt;-->
-<!--&lt;!&ndash;                  <path fill-rule="evenodd"&ndash;&gt;-->
-<!--&lt;!&ndash;                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"&ndash;&gt;-->
-<!--&lt;!&ndash;                    clip-rule="evenodd" />&ndash;&gt;-->
-<!--&lt;!&ndash;                </svg>&ndash;&gt;-->
-<!--&lt;!&ndash;                Setup in minutes&ndash;&gt;-->
-<!--&lt;!&ndash;              </li>&ndash;&gt;-->
-
-<!--&lt;!&ndash;              <li class="flex items-center gap-2">&ndash;&gt;-->
-<!--&lt;!&ndash;                <svg aria-hidden="true" class="h-5 w-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"&ndash;&gt;-->
-<!--&lt;!&ndash;                  viewBox="0 0 20 20" fill="currentColor">&ndash;&gt;-->
-<!--&lt;!&ndash;                  <path fill-rule="evenodd"&ndash;&gt;-->
-<!--&lt;!&ndash;                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"&ndash;&gt;-->
-<!--&lt;!&ndash;                    clip-rule="evenodd" />&ndash;&gt;-->
-<!--&lt;!&ndash;                </svg>&ndash;&gt;-->
-<!--&lt;!&ndash;                It's free&ndash;&gt;-->
-<!--&lt;!&ndash;              </li>&ndash;&gt;-->
-<!--&lt;!&ndash;            </ul>&ndash;&gt;-->
-<!--&lt;!&ndash;          </div>&ndash;&gt;-->
-<!--        </div>-->
-<!--    </section>-->
+    <!--              <div class="px-4 py-5 sm:p-6">-->
+    <!--                <h3 class="text-lg font-semibold text-gray-900">-->
+    <!--                  Example 4-->
+    <!--                </h3>-->
+    <!--                <p class="text-base font-medium text-gray-500 mt-2 line-clamp-2">-->
+    <!--                  Nulla Lorem mollit cupidatat irure. Laborum magna nulla duis ullamco cillum dolor-->
+    <!--                </p>-->
+    <!--              </div>-->
+    <!--            </div>-->
+    <!--          </div>-->
+
+    <!--&lt;!&ndash;          <hr class="mt-12 border-gray-200 sm:mt-16">&ndash;&gt;-->
+
+    <!--&lt;!&ndash;          <div class="max-w-2xl mx-auto mt-12 text-center sm:mt-16">&ndash;&gt;-->
+    <!--&lt;!&ndash;            <h4 class="text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl lg:text-4xl">&ndash;&gt;-->
+    <!--&lt;!&ndash;              Ready to level-up?&ndash;&gt;-->
+    <!--&lt;!&ndash;            </h4>&ndash;&gt;-->
+    <!--&lt;!&ndash;            <p class="mt-4 text-base leading-7 sm:text-xl sm:leading-9 font-medium text-gray-500">&ndash;&gt;-->
+    <!--&lt;!&ndash;              Save time and effortlessly create forms with OpnForm&ndash;&gt;-->
+    <!--&lt;!&ndash;            </p>&ndash;&gt;-->
+
+    <!--&lt;!&ndash;            <div class="mt-8 flex justify-center">&ndash;&gt;-->
+    <!--&lt;!&ndash;              <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms-create-guest' }" :arrow="true">&ndash;&gt;-->
+    <!--&lt;!&ndash;                Get started for free&ndash;&gt;-->
+    <!--&lt;!&ndash;              </v-button>&ndash;&gt;-->
+    <!--&lt;!&ndash;              <v-button v-else class="mr-1" :to="{ name: 'forms-create' }" :arrow="true">&ndash;&gt;-->
+    <!--&lt;!&ndash;                Get started for free&ndash;&gt;-->
+    <!--&lt;!&ndash;              </v-button>&ndash;&gt;-->
+    <!--&lt;!&ndash;            </div>&ndash;&gt;-->
+
+    <!--&lt;!&ndash;            <ul&ndash;&gt;-->
+    <!--&lt;!&ndash;              class="flex mt-8 sm:mt-12 text-sm font-medium text-gray-900 items-center justify-center flex-wrap gap-x-6 gap-y-4">&ndash;&gt;-->
+    <!--&lt;!&ndash;              <li class="flex items-center gap-2">&ndash;&gt;-->
+    <!--&lt;!&ndash;                <svg aria-hidden="true" class="h-5 w-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"&ndash;&gt;-->
+    <!--&lt;!&ndash;                  viewBox="0 0 20 20" fill="currentColor">&ndash;&gt;-->
+    <!--&lt;!&ndash;                  <path fill-rule="evenodd"&ndash;&gt;-->
+    <!--&lt;!&ndash;                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"&ndash;&gt;-->
+    <!--&lt;!&ndash;                    clip-rule="evenodd" />&ndash;&gt;-->
+    <!--&lt;!&ndash;                </svg>&ndash;&gt;-->
+    <!--&lt;!&ndash;                No design skills required&ndash;&gt;-->
+    <!--&lt;!&ndash;              </li>&ndash;&gt;-->
+
+    <!--&lt;!&ndash;              <li class="flex items-center gap-2">&ndash;&gt;-->
+    <!--&lt;!&ndash;                <svg aria-hidden="true" class="h-5 w-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"&ndash;&gt;-->
+    <!--&lt;!&ndash;                  viewBox="0 0 20 20" fill="currentColor">&ndash;&gt;-->
+    <!--&lt;!&ndash;                  <path fill-rule="evenodd"&ndash;&gt;-->
+    <!--&lt;!&ndash;                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"&ndash;&gt;-->
+    <!--&lt;!&ndash;                    clip-rule="evenodd" />&ndash;&gt;-->
+    <!--&lt;!&ndash;                </svg>&ndash;&gt;-->
+    <!--&lt;!&ndash;                Setup in minutes&ndash;&gt;-->
+    <!--&lt;!&ndash;              </li>&ndash;&gt;-->
+
+    <!--&lt;!&ndash;              <li class="flex items-center gap-2">&ndash;&gt;-->
+    <!--&lt;!&ndash;                <svg aria-hidden="true" class="h-5 w-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"&ndash;&gt;-->
+    <!--&lt;!&ndash;                  viewBox="0 0 20 20" fill="currentColor">&ndash;&gt;-->
+    <!--&lt;!&ndash;                  <path fill-rule="evenodd"&ndash;&gt;-->
+    <!--&lt;!&ndash;                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"&ndash;&gt;-->
+    <!--&lt;!&ndash;                    clip-rule="evenodd" />&ndash;&gt;-->
+    <!--&lt;!&ndash;                </svg>&ndash;&gt;-->
+    <!--&lt;!&ndash;                It's free&ndash;&gt;-->
+    <!--&lt;!&ndash;              </li>&ndash;&gt;-->
+    <!--&lt;!&ndash;            </ul>&ndash;&gt;-->
+    <!--&lt;!&ndash;          </div>&ndash;&gt;-->
+    <!--        </div>-->
+    <!--    </section>-->
     <!-- END EXAMPLES -->
 
     <!-- START TESTIMONIALS -->
-<!--    <section class="bg-white py-12 sm:py-16 lg:py-20 xl:py-24">-->
-<!--      <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">-->
-<!--        <div class="text-center max-w-3xl mx-auto">-->
-<!--          <h2 class="text-sm font-semibold text-blue-600">-->
-<!--            Customer Testimonials-->
-<!--          </h2>-->
-<!--          <p-->
-<!--            class="text-3xl mt-4 sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight">-->
-<!--            See what people are saying-->
-<!--          </p>-->
-<!--          <p class="text-gray-500 text-base leading-7 sm:text-lg sm:leading-8 font-medium mt-4">-->
-<!--            These are the stories of our customers who have joined us with great pleasure when using this crazy-->
-<!--            feature.-->
-<!--          </p>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </section>-->
+    <!--    <section class="bg-white py-12 sm:py-16 lg:py-20 xl:py-24">-->
+    <!--      <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">-->
+    <!--        <div class="text-center max-w-3xl mx-auto">-->
+    <!--          <h2 class="text-sm font-semibold text-blue-600">-->
+    <!--            Customer Testimonials-->
+    <!--          </h2>-->
+    <!--          <p-->
+    <!--            class="text-3xl mt-4 sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight">-->
+    <!--            See what people are saying-->
+    <!--          </p>-->
+    <!--          <p class="text-gray-500 text-base leading-7 sm:text-lg sm:leading-8 font-medium mt-4">-->
+    <!--            These are the stories of our customers who have joined us with great pleasure when using this crazy-->
+    <!--            feature.-->
+    <!--          </p>-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--    </section>-->
     <!-- END TESTIMONIALS -->
 
     <!-- START FAQS -->
-<!--    <section class="bg-white py-12 sm:py-16 lg:py-20 xl:py-24 border-t border-gray-200">-->
-<!--      <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">-->
-<!--        <div class="text-center max-w-3xl mx-auto">-->
-<!--          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight">-->
-<!--            Frequently Asked Questions-->
-<!--          </h2>-->
-<!--          <p class="text-gray-500 text-base leading-7 sm:text-lg sm:leading-8 font-medium mt-4">-->
-<!--            We've compiled a list of the most common questions we get asked.-->
-<!--          </p>-->
-<!--        </div>-->
-
-<!--        <div class="mt-12 sm:mt-16 lg:mt-20">-->
-<!--          <dl class="gap-y-12 grid grid-cols-1 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-16 lg:gap-x-10">-->
-<!--            <div>-->
-<!--              <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
-<!--                What's the best thing about Switzerland?-->
-<!--              </dt>-->
-<!--              <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
-<!--                I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit.-->
-<!--                Quas cupiditate-->
-<!--                laboriosam fugiat.-->
-<!--              </dd>-->
-<!--            </div>-->
-
-<!--            <div>-->
-<!--              <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
-<!--                How do you make holy water?-->
-<!--              </dt>-->
-<!--              <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
-<!--                You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam aut-->
-<!--                tempora vitae odio-->
-<!--                inventore fuga aliquam nostrum quod porro. Delectus quia facere id sequi expedita natus.-->
-<!--              </dd>-->
-<!--            </div>-->
-
-<!--            <div>-->
-<!--              <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
-<!--                What do you call someone with no body and no nose?-->
-<!--              </dt>-->
-<!--              <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
-<!--                Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia-->
-<!--                excepturi, quibusdam-->
-<!--                natus exercitationem sapiente tempore labore voluptatem.-->
-<!--              </dd>-->
-<!--            </div>-->
-
-<!--            <div>-->
-<!--              <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
-<!--                Why do you never see elephants hiding in trees?-->
-<!--              </dt>-->
-<!--              <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
-<!--                Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas-->
-<!--                cupiditate laboriosam-->
-<!--                fugiat.-->
-<!--              </dd>-->
-<!--            </div>-->
-
-<!--            <div>-->
-<!--              <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
-<!--                Why can't you hear a pterodactyl go to the bathroom?-->
-<!--              </dt>-->
-<!--              <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
-<!--                Because the pee is silent. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quas-->
-<!--                voluptatibus ex culpa-->
-<!--                ipsum, aspernatur blanditiis fugiat ullam magnam suscipit deserunt illum natus facilis atque vero-->
-<!--                consequatur! Quisquam,-->
-<!--                debitis error.-->
-<!--              </dd>-->
-<!--            </div>-->
-
-<!--            <div>-->
-<!--              <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
-<!--                Why did the invisible man turn down the job offer?-->
-<!--              </dt>-->
-<!--              <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
-<!--                He couldn't see himself doing it. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet-->
-<!--                perspiciatis-->
-<!--                officiis corrupti tenetur. Temporibus ut voluptatibus, perferendis sed unde rerum deserunt eius.-->
-<!--              </dd>-->
-<!--            </div>-->
-<!--          </dl>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </section>-->
+    <!--    <section class="bg-white py-12 sm:py-16 lg:py-20 xl:py-24 border-t border-gray-200">-->
+    <!--      <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">-->
+    <!--        <div class="text-center max-w-3xl mx-auto">-->
+    <!--          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight">-->
+    <!--            Frequently Asked Questions-->
+    <!--          </h2>-->
+    <!--          <p class="text-gray-500 text-base leading-7 sm:text-lg sm:leading-8 font-medium mt-4">-->
+    <!--            We've compiled a list of the most common questions we get asked.-->
+    <!--          </p>-->
+    <!--        </div>-->
+
+    <!--        <div class="mt-12 sm:mt-16 lg:mt-20">-->
+    <!--          <dl class="gap-y-12 grid grid-cols-1 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-16 lg:gap-x-10">-->
+    <!--            <div>-->
+    <!--              <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
+    <!--                What's the best thing about Switzerland?-->
+    <!--              </dt>-->
+    <!--              <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
+    <!--                I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit.-->
+    <!--                Quas cupiditate-->
+    <!--                laboriosam fugiat.-->
+    <!--              </dd>-->
+    <!--            </div>-->
+
+    <!--            <div>-->
+    <!--              <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
+    <!--                How do you make holy water?-->
+    <!--              </dt>-->
+    <!--              <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
+    <!--                You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam aut-->
+    <!--                tempora vitae odio-->
+    <!--                inventore fuga aliquam nostrum quod porro. Delectus quia facere id sequi expedita natus.-->
+    <!--              </dd>-->
+    <!--            </div>-->
+
+    <!--            <div>-->
+    <!--              <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
+    <!--                What do you call someone with no body and no nose?-->
+    <!--              </dt>-->
+    <!--              <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
+    <!--                Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia-->
+    <!--                excepturi, quibusdam-->
+    <!--                natus exercitationem sapiente tempore labore voluptatem.-->
+    <!--              </dd>-->
+    <!--            </div>-->
+
+    <!--            <div>-->
+    <!--              <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
+    <!--                Why do you never see elephants hiding in trees?-->
+    <!--              </dt>-->
+    <!--              <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
+    <!--                Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas-->
+    <!--                cupiditate laboriosam-->
+    <!--                fugiat.-->
+    <!--              </dd>-->
+    <!--            </div>-->
+
+    <!--            <div>-->
+    <!--              <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
+    <!--                Why can't you hear a pterodactyl go to the bathroom?-->
+    <!--              </dt>-->
+    <!--              <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
+    <!--                Because the pee is silent. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quas-->
+    <!--                voluptatibus ex culpa-->
+    <!--                ipsum, aspernatur blanditiis fugiat ullam magnam suscipit deserunt illum natus facilis atque vero-->
+    <!--                consequatur! Quisquam,-->
+    <!--                debitis error.-->
+    <!--              </dd>-->
+    <!--            </div>-->
+
+    <!--            <div>-->
+    <!--              <dt class="sm:text-lg text-base leading-7 font-medium sm:leading-8 text-gray-900">-->
+    <!--                Why did the invisible man turn down the job offer?-->
+    <!--              </dt>-->
+    <!--              <dd class="mt-2 text-base font-medium leading-7 text-gray-500">-->
+    <!--                He couldn't see himself doing it. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet-->
+    <!--                perspiciatis-->
+    <!--                officiis corrupti tenetur. Temporibus ut voluptatibus, perferendis sed unde rerum deserunt eius.-->
+    <!--              </dd>-->
+    <!--            </div>-->
+    <!--          </dl>-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--    </section>-->
     <!-- END FAQS -->
 
     <!-- START CTA -->
-    <section class="bg-gradient-to-b from-gray-100 to-white py-12 sm:py-16 lg:pt-20 xl:pt-24">
+    <section
+      class="bg-gradient-to-b from-gray-100 to-white py-12 sm:py-16 lg:pt-20 xl:pt-24"
+    >
       <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div class="flex items-center justify-center gap-8">
-          <img class="w-auto h-12" src="/img/pages/ai_form_builder/icon-email-input.svg" alt=""/>
-
-          <img class="w-auto h-12" src="/img/pages/ai_form_builder/icon-radio-buttons.svg" alt=""/>
-
-          <img class="w-auto h-12" src="/img/pages/ai_form_builder/icon-textarea.svg" alt=""/>
-
+          <img
+            class="w-auto h-12"
+            src="/img/pages/ai_form_builder/icon-email-input.svg"
+            alt=""
+          >
+
+          <img
+            class="w-auto h-12"
+            src="/img/pages/ai_form_builder/icon-radio-buttons.svg"
+            alt=""
+          >
+
+          <img
+            class="w-auto h-12"
+            src="/img/pages/ai_form_builder/icon-textarea.svg"
+            alt=""
+          >
         </div>
 
         <div class="text-center max-w-3xl mx-auto mt-8 sm:mt-12">
-          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight">
+          <h2
+            class="text-3xl sm:text-4xl lg:text-5xl font-semibold text-gray-900 tracking-tight lg:leading-tight"
+          >
             Create beautiful forms and share them anywhere
           </h2>
-          <p class="mt-4 sm:mt-5 text-base leading-7 sm:text-xl sm:leading-9 font-medium text-gray-500">
-            It takes seconds, you don't need to know how to code and <span class="text-blue-600">it's free</span>.
+          <p
+            class="mt-4 sm:mt-5 text-base leading-7 sm:text-xl sm:leading-9 font-medium text-gray-500"
+          >
+            It takes seconds, you don't need to know how to code and
+            <span class="text-blue-600">it's free</span>.
           </p>
 
           <div class="mt-8 flex justify-center">
-            <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms-create-guest' }" :arrow="true">
+            <v-button
+              v-if="!authenticated"
+              class="mr-1"
+              :to="{ name: 'forms-create-guest' }"
+              :arrow="true"
+            >
               Get started for free
             </v-button>
-            <v-button v-else class="mr-1" :to="{ name: 'forms-create' }" :arrow="true">
+            <v-button
+              v-else
+              class="mr-1"
+              :to="{ name: 'forms-create' }"
+              :arrow="true"
+            >
               Get started for free
             </v-button>
           </div>
 
           <ul
-            class="flex mt-8 sm:mt-12 text-sm font-medium text-gray-900 items-center justify-center flex-wrap gap-x-6 gap-y-4">
+            class="flex mt-8 sm:mt-12 text-sm font-medium text-gray-900 items-center justify-center flex-wrap gap-x-6 gap-y-4"
+          >
             <li class="flex items-center gap-2">
-              <svg aria-hidden="true" class="h-5 w-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd"
+              <svg
+                aria-hidden="true"
+                class="h-5 w-5 text-gray-400 shrink-0"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
                   d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                  clip-rule="evenodd" />
+                  clip-rule="evenodd"
+                />
               </svg>
               No design skills required
             </li>
 
             <li class="flex items-center gap-2">
-              <svg aria-hidden="true" class="h-5 w-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd"
+              <svg
+                aria-hidden="true"
+                class="h-5 w-5 text-gray-400 shrink-0"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
                   d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                  clip-rule="evenodd" />
+                  clip-rule="evenodd"
+                />
               </svg>
               Setup in minutes
             </li>
 
             <li class="flex items-center gap-2">
-              <svg aria-hidden="true" class="h-5 w-5 text-gray-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd"
+              <svg
+                aria-hidden="true"
+                class="h-5 w-5 text-gray-400 shrink-0"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
                   d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                  clip-rule="evenodd" />
+                  clip-rule="evenodd"
+                />
               </svg>
               Free plan available
             </li>
@@ -484,37 +622,36 @@
     </section>
     <!-- END CTA -->
 
-    <open-form-footer class="dark:border-t border-t"/>
-
+    <open-form-footer class="dark:border-t border-t" />
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import { useAuthStore } from '../stores/auth'
+import { computed } from "vue"
+import { useAuthStore } from "../stores/auth"
 
 const authStore = useAuthStore()
 
 useOpnSeoMeta({
-  title: 'Free AI form builder',
-  description: 'Transform your ideas into fully functional forms with OpnForm AI Builder – quick, accurate, and tailored to fit any requirement.'
+  title: "Free AI form builder",
+  description:
+    "Transform your ideas into fully functional forms with OpnForm AI Builder – quick, accurate, and tailored to fit any requirement.",
 })
 defineRouteRules({
-  swr: 3600
+  swr: 3600,
 })
 
-let authenticated = computed(() => authStore.check)
+const authenticated = computed(() => authStore.check)
 </script>
 
 <style lang="scss" scoped>
-
 .customer-logo-container {
   max-width: 130px;
   width: 100%;
 }
 
 .ticks {
-  color:#2563eb;
+  color: #2563eb;
 }
 
 @screen md {
diff --git a/client/pages/forms/[slug]/edit.vue b/client/pages/forms/[slug]/edit.vue
index f9f23b624..5e468fccb 100644
--- a/client/pages/forms/[slug]/edit.vue
+++ b/client/pages/forms/[slug]/edit.vue
@@ -1,22 +1,30 @@
 <template>
   <div class="w-full flex flex-col">
-    <form-editor v-if="!formsLoading || form" ref="editor"
-                 :is-edit="true"
-                 @on-save="formInitialHash=null"
+    <form-editor
+      v-if="(!formsLoading || form ) && !error "
+      ref="editor"
+      :is-edit="true"
+      @on-save="formInitialHash = null"
     />
-    <div v-else-if="!formsLoading && error" class="mt-4 rounded-lg max-w-xl mx-auto p-6 bg-red-100 text-red-500">
+    <div
+      v-else-if="error && !formsLoading"
+      class="mt-4 rounded-lg max-w-xl mx-auto p-6 bg-red-100 text-red-500"
+    >
       {{ error }}
     </div>
-    <div v-else class="text-center mt-4 py-6">
-      <Loader class="h-6 w-6 text-nt-blue mx-auto"/>
+    <div
+      v-else
+      class="text-center mt-4 py-6"
+    >
+      <Loader class="h-6 w-6 text-nt-blue mx-auto" />
     </div>
   </div>
 </template>
 
 <script setup>
-import {computed} from 'vue'
-import FormEditor from "~/components/open/forms/components/FormEditor.vue";
-import {hash} from "~/lib/utils.js";
+import { computed } from "vue"
+import FormEditor from "~/components/open/forms/components/FormEditor.vue"
+import { hash } from "~/lib/utils.js"
 
 const formsStore = useFormsStore()
 const workingFormStore = useWorkingFormStore()
@@ -34,14 +42,19 @@ const formInitialHash = ref(null)
 
 function isDirty() {
   try {
-    return formInitialHash.value && updatedForm.value && formInitialHash.value !== hash(JSON.stringify(updatedForm?.value?.data() ?? null))
+    return (
+      formInitialHash.value &&
+      updatedForm.value &&
+      formInitialHash.value !==
+        hash(JSON.stringify(updatedForm?.value?.data() ?? null))
+    )
   } catch (e) {
     return false
   }
 }
 
 function initUpdatedForm() {
-  if (!form || !form.value) {
+  if (!form.value || !form.value) {
     return
   }
 
@@ -61,11 +74,14 @@ watch(form, (form) => {
 
 onBeforeRouteLeave((to, from, next) => {
   if (isDirty()) {
-    return useAlert().confirm('Changes you made may not be saved. Are you sure want to leave?', () => {
-      window.onbeforeunload = null
-      next()
-    }, () => {
-    })
+    return useAlert().confirm(
+      "Changes you made may not be saved. Are you sure want to leave?",
+      () => {
+        window.onbeforeunload = null
+        next()
+      },
+      () => {},
+    )
   }
   next()
 })
@@ -80,7 +96,7 @@ onBeforeMount(() => {
   }
 
   if (!form.value && !formsStore.allLoaded) {
-    formsStore.loadAll(workspacesStore.currentId).then(()=>{
+    formsStore.loadAll(workspacesStore.currentId).then(() => {
       initUpdatedForm()
     })
   } else {
@@ -89,9 +105,9 @@ onBeforeMount(() => {
 })
 
 useOpnSeoMeta({
-  title: 'Edit ' + ((form && form.value) ? form.value.title : 'Your Form')
+  title: "Edit " + (form.value && form.value ? form.value.title : "Your Form"),
 })
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 </script>
diff --git a/client/pages/forms/[slug]/index.vue b/client/pages/forms/[slug]/index.vue
index 907b9d4c5..557697310 100644
--- a/client/pages/forms/[slug]/index.vue
+++ b/client/pages/forms/[slug]/index.vue
@@ -2,24 +2,39 @@
   <div class="flex flex-col">
     <div v-if="form && !isIframe && (form.logo_picture || form.cover_picture)">
       <div v-if="form.cover_picture">
-        <div id="cover-picture" class="max-h-56 w-full overflow-hidden flex items-center justify-center">
-          <img alt="Form Cover Picture" :src="form.cover_picture" class="w-full"/>
+        <div
+          id="cover-picture"
+          class="max-h-56 w-full overflow-hidden flex items-center justify-center"
+        >
+          <img
+            alt="Form Cover Picture"
+            :src="form.cover_picture"
+            class="w-full"
+          >
         </div>
       </div>
-      <div v-if="form.logo_picture" class="w-full p-5 relative mx-auto"
-           :class="{'pt-20':!form.cover_picture, 'md:w-3/5 lg:w-1/2 md:max-w-2xl': form.width === 'centered', 'max-w-7xl': (form.width === 'full' && !isIframe) }"
+      <div
+        v-if="form.logo_picture"
+        class="w-full p-5 relative mx-auto"
+        :class="{'pt-20':!form.cover_picture, 'md:w-3/5 lg:w-1/2 md:max-w-2xl': form.width === 'centered', 'max-w-7xl': (form.width === 'full' && !isIframe) }"
       >
-        <img alt="Logo Picture" :src="form.logo_picture"
-             :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
-             class="w-20 h-20 object-contain absolute left-5 transition-all"
-        />
+        <img
+          alt="Logo Picture"
+          :src="form.logo_picture"
+          :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
+          class="w-20 h-20 object-contain absolute left-5 transition-all"
+        >
       </div>
     </div>
-    <div class="w-full mx-auto px-4"
-         :class="{'mt-6':!isIframe, 'md:w-3/5 lg:w-1/2 md:max-w-2xl': form && (form.width === 'centered'), 'max-w-7xl': (form && form.width === 'full' && !isIframe)}"
+    <div
+      class="w-full mx-auto px-4"
+      :class="{'mt-6':!isIframe, 'md:w-3/5 lg:w-1/2 md:max-w-2xl': form && (form.width === 'centered'), 'max-w-7xl': (form && form.width === 'full' && !isIframe)}"
     >
       <div v-if="!formLoading && !form">
-        <h1 class="mt-6" v-text="'Whoops'"/>
+        <h1
+          class="mt-6"
+          v-text="'Whoops'"
+        />
         <p class="mt-6">
           Unfortunately we could not find this form. It may have been deleted.
         </p>
@@ -31,17 +46,22 @@
       </div>
       <div v-else-if="formLoading">
         <p class="text-center mt-6 p-4">
-          <loader class="h-6 w-6 text-nt-blue mx-auto"/>
+          <loader class="h-6 w-6 text-nt-blue mx-auto" />
         </p>
       </div>
       <template v-else>
         <div v-if="recordLoading">
           <p class="text-center mt-6 p-4">
-            <loader class="h-6 w-6 text-nt-blue mx-auto"/>
+            <loader class="h-6 w-6 text-nt-blue mx-auto" />
           </p>
         </div>
-        <open-complete-form v-show="!recordLoading" ref="openCompleteForm" :form="form" class="mb-10" :dark-mode="darkMode"
-                            @password-entered="passwordEntered"
+        <OpenCompleteForm
+          v-show="!recordLoading"
+          ref="openCompleteForm"
+          :form="form"
+          class="mb-10"
+          :dark-mode="darkMode"
+          @password-entered="passwordEntered"
         />
       </template>
     </div>
@@ -70,7 +90,6 @@ const formLoading = computed(() => formsStore.loading)
 const recordLoading = computed(() => recordsStore.loading)
 const slug = useRoute().params.slug
 const form = computed(() => formsStore.getByKey(slug))
-const submitted = ref(false)
 
 const openCompleteForm = ref(null)
 
@@ -145,7 +164,7 @@ onMounted(() => {
   }
 })
 
-onBeforeRouteLeave((to, from) => {
+onBeforeRouteLeave(() => {
   document.body.classList.remove('public-page')
   crisp.showChat()
   disableDarkMode()
@@ -168,16 +187,16 @@ useOpnSeoMeta({
     if (pageMeta.value.description) {
       return pageMeta.value.description
     }
-    return (form && form.value?.description) ? form.value?.description.substring(0, 160) : null
+    return (form.value && form.value?.description) ? form.value?.description.substring(0, 160) : null
   },
   ogImage: () => {
     if (pageMeta.value.page_thumbnail) {
       return pageMeta.value.page_thumbnail
     }
-    return (form && form.value?.cover_picture) ? form.value?.cover_picture : null
+    return (form.value && form.value?.cover_picture) ? form.value?.cover_picture : null
   },
   robots: () => {
-    return (form && form.value?.can_be_indexed) ? null : 'noindex, nofollow'
+    return (form.value && form.value?.can_be_indexed) ? null : 'noindex, nofollow'
   }
 })
 useHead({
@@ -186,7 +205,7 @@ useHead({
       // Disable template if custom SEO title
       return titleChunk
     }
-    return titleChunk ? `${titleChunk} - OpnForm` : 'OpnForm';
+    return titleChunk ? `${titleChunk} - OpnForm` : 'OpnForm'
   },
   script: [ { src: '/widgets/iframeResizer.contentWindow.min.js' } ]
 })
diff --git a/client/pages/forms/[slug]/show.vue b/client/pages/forms/[slug]/show.vue
index f56211c74..7c7f250b4 100644
--- a/client/pages/forms/[slug]/show.vue
+++ b/client/pages/forms/[slug]/show.vue
@@ -4,10 +4,24 @@
       <div class="flex bg-gray-50">
         <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
           <div class="pt-4 pb-0">
-            <a href="#" class="flex text-blue mb-2 font-semibold text-sm" @click.prevent="goBack">
-              <svg class="w-3 h-3 text-blue mt-1 mr-1" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M5 9L1 5L5 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
-                  stroke-linejoin="round" />
+            <a
+              href="#"
+              class="flex text-blue mb-2 font-semibold text-sm"
+              @click.prevent="goBack"
+            >
+              <svg
+                class="w-3 h-3 text-blue mt-1 mr-1"
+                viewBox="0 0 6 10"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M5 9L1 5L5 1"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
               </svg>
               Go back
             </a>
@@ -17,34 +31,91 @@
                 {{ form.title }}
               </h2>
               <div class="flex">
-                <extra-menu class="mr-2" :form="form" />
+                <extra-menu
+                  class="mr-2"
+                  :form="form"
+                />
 
-                <v-button v-if="form.visibility === 'draft'" color="white" class="mr-2 text-blue-600 hidden sm:block"
-                  @click="showDraftFormWarningNotification">
-                  <svg class="w-6 h-6 inline -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" stroke="currentColor"
-                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                <v-button
+                  v-if="form.visibility === 'draft'"
+                  color="white"
+                  class="mr-2 text-blue-600 hidden sm:block"
+                  @click="showDraftFormWarningNotification"
+                >
+                  <svg
+                    class="w-6 h-6 inline -mt-1"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
                     <path
                       d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
-                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
                   </svg>
                 </v-button>
-                <v-button v-else v-track.view_form_click="{ form_id: form.id, form_slug: form.slug }" target="_blank"
-                  :href="form.share_url" color="white" class="mr-2 text-blue-600 hidden sm:block">
-                  <svg class="w-6 h-6 inline -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" stroke="currentColor"
-                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                <v-button
+                  v-else
+                  v-track.view_form_click="{
+                    form_id: form.id,
+                    form_slug: form.slug,
+                  }"
+                  target="_blank"
+                  :href="form.share_url"
+                  color="white"
+                  class="mr-2 text-blue-600 hidden sm:block"
+                >
+                  <svg
+                    class="w-6 h-6 inline -mt-1"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
                     <path
                       d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
-                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
                   </svg>
                 </v-button>
-                <v-button class="text-white" :to="{ name: 'forms-slug-edit', params: { slug: slug } }">
-                  <svg class="inline mr-1 -mt-1" width="18" height="17" viewBox="0 0 18 17" fill="none"
-                    xmlns="http://www.w3.org/2000/svg">
+                <v-button
+                  class="text-white"
+                  :to="{ name: 'forms-slug-edit', params: { slug: slug } }"
+                >
+                  <svg
+                    class="inline mr-1 -mt-1"
+                    width="18"
+                    height="17"
+                    viewBox="0 0 18 17"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
                     <path
                       d="M8.99998 15.6662H16.5M1.5 15.6662H2.89545C3.3031 15.6662 3.50693 15.6662 3.69874 15.6202C3.8688 15.5793 4.03138 15.512 4.1805 15.4206C4.34869 15.3175 4.49282 15.1734 4.78107 14.8852L15.25 4.4162C15.9404 3.72585 15.9404 2.60656 15.25 1.9162C14.5597 1.22585 13.4404 1.22585 12.75 1.9162L2.28105 12.3852C1.9928 12.6734 1.84867 12.8175 1.7456 12.9857C1.65422 13.1348 1.58688 13.2974 1.54605 13.4675C1.5 13.6593 1.5 13.8631 1.5 14.2708V15.6662Z"
-                      stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+                      stroke="currentColor"
+                      stroke-width="1.67"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
                   </svg>
                   Edit form
                 </v-button>
@@ -52,51 +123,87 @@
             </div>
 
             <p class="text-gray-500 text-sm">
-              <span class="pr-1">{{ form.views_count }} view{{ form.views_count > 0 ? 's' : '' }}</span>
-              <span class="pr-1">- {{ form.submissions_count }}
-                submission{{ form.submissions_count > 0 ? 's' : '' }}
+              <span class="pr-1">{{ form.views_count }} view{{
+                form.views_count > 0 ? "s" : ""
+              }}</span>
+              <span class="pr-1">- {{ form.submissions_count }} submission{{
+                form.submissions_count > 0 ? "s" : ""
+              }}
               </span>
               <span>- Edited {{ form.last_edited_human }}</span>
             </p>
-            <div v-if="['draft', 'closed'].includes(form.visibility) || (form.tags && form.tags.length > 0)"
-              class="mt-2 flex items-center flex-wrap gap-3">
-              <span v-if="form.visibility == 'draft'"
-                class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700">
+            <div
+              v-if="
+                ['draft', 'closed'].includes(form.visibility) ||
+                  (form.tags && form.tags.length > 0)
+              "
+              class="mt-2 flex items-center flex-wrap gap-3"
+            >
+              <span
+                v-if="form.visibility == 'draft'"
+                class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+              >
                 Draft - not publicly accessible
               </span>
-              <span v-else-if="form.visibility == 'closed'"
-                class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700">
+              <span
+                v-else-if="form.visibility == 'closed'"
+                class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+              >
                 Closed - won't accept new submissions
               </span>
-              <span v-for="(tag, i) in form.tags" :key="tag"
-                class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700">
+              <span
+                v-for="(tag) in form.tags"
+                :key="tag"
+                class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+              >
                 {{ tag }}
               </span>
             </div>
 
-            <p v-if="form.closes_at" class="text-yellow-500">
-              <span v-if="form.is_closed"> This form stopped accepting submissions on the {{
-                displayClosesDate
-              }} </span>
-              <span v-else> This form will stop accepting submissions on the {{ displayClosesDate }} </span>
+            <p
+              v-if="form.closes_at"
+              class="text-yellow-500"
+            >
+              <span v-if="form.is_closed">
+                This form stopped accepting submissions on the
+                {{ displayClosesDate }}
+              </span>
+              <span v-else>
+                This form will stop accepting submissions on the
+                {{ displayClosesDate }}
+              </span>
             </p>
-            <p v-if="form.max_submissions_count > 0" class="text-yellow-500">
-              <span v-if="form.max_number_of_submissions_reached"> The form is now closed because it reached its limit of
-                {{
-                  form.max_submissions_count
-                }} submissions. </span>
-              <span v-else> This form will stop accepting submissions after {{ form.max_submissions_count }} submissions.
+            <p
+              v-if="form.max_submissions_count > 0"
+              class="text-yellow-500"
+            >
+              <span v-if="form.max_number_of_submissions_reached">
+                The form is now closed because it reached its limit of
+                {{ form.max_submissions_count }} submissions.
+              </span>
+              <span v-else>
+                This form will stop accepting submissions after
+                {{ form.max_submissions_count }} submissions.
               </span>
             </p>
 
-            <form-cleanings class="mt-4" :form="form" />
+            <form-cleanings
+              class="mt-4"
+              :form="form"
+            />
 
             <div class="border-b border-gray-200 dark:border-gray-700">
               <ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
-                <li v-for="(tab, i) in tabsList" :key="i + 1" class="mr-6">
-                  <nuxt-link :to="{ name: tab.route }"
+                <li
+                  v-for="(tab, i) in tabsList"
+                  :key="i + 1"
+                  class="mr-6"
+                >
+                  <nuxt-link
+                    :to="{ name: tab.route }"
                     class="hover:no-underline inline-block py-4 rounded-t-lg border-b-2 text-gray-500 hover:text-gray-600"
-                    active-class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500">
+                    active-class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
+                  >
                     {{ tab.name }}
                   </nuxt-link>
                 </li>
@@ -109,31 +216,35 @@
         <NuxtPage :form="form" />
       </div>
     </template>
-    <div v-else-if="loading" class="text-center w-full p-5">
+    <div
+      v-else-if="loading"
+      class="text-center w-full p-5"
+    >
       <Loader class="h-6 w-6 mx-auto" />
     </div>
-    <div v-else class="text-center w-full p-5">
+    <div
+      v-else
+      class="text-center w-full p-5"
+    >
       Form not found.
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import ProTag from '~/components/global/ProTag.vue'
-import VButton from '~/components/global/VButton.vue'
-import ExtraMenu from '../../../components/pages/forms/show/ExtraMenu.vue'
-import FormCleanings from '../../../components/pages/forms/show/FormCleanings.vue'
+import { computed } from "vue"
+import VButton from "~/components/global/VButton.vue"
+import ExtraMenu from "../../../components/pages/forms/show/ExtraMenu.vue"
+import FormCleanings from "../../../components/pages/forms/show/FormCleanings.vue"
 
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 useOpnSeoMeta({
-  title: 'Home'
+  title: "Home",
 })
 
 const route = useRoute()
-const authStore = useAuthStore()
 const formsStore = useFormsStore()
 const workingFormStore = useWorkingFormStore()
 const workspacesStore = useWorkspacesStore()
@@ -141,39 +252,44 @@ const workspacesStore = useWorkspacesStore()
 const slug = useRoute().params.slug
 
 formsStore.startLoading()
-const user = computed(() => authStore.user)
 const form = computed(() => formsStore.getByKey(slug))
-const workspace = computed(() => workspacesStore.getByKey(form?.value?.workspace_id))
+
 const loading = computed(() => formsStore.loading || workspacesStore.loading)
 const displayClosesDate = computed(() => {
   if (form.value && form.value.closes_at) {
     const dateObj = new Date(form.value.closes_at)
-    return dateObj.getFullYear() + '-' +
-      String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
-      String(dateObj.getDate()).padStart(2, '0') + ' ' +
-      String(dateObj.getHours()).padStart(2, '0') + ':' +
-      String(dateObj.getMinutes()).padStart(2, '0')
+    return (
+      dateObj.getFullYear() +
+      "-" +
+      String(dateObj.getMonth() + 1).padStart(2, "0") +
+      "-" +
+      String(dateObj.getDate()).padStart(2, "0") +
+      " " +
+      String(dateObj.getHours()).padStart(2, "0") +
+      ":" +
+      String(dateObj.getMinutes()).padStart(2, "0")
+    )
   }
-  return ''
+  return ""
 })
 
 const tabsList = [
   {
-    name: 'Submissions',
-    route: 'forms-slug-show-submissions'
+    name: "Submissions",
+    route: "forms-slug-show-submissions",
   },
   {
-    name: 'Integrations',
-    route: 'forms-slug-show-integrations'
+    name: "Integrations",
+    route: "forms-slug-show-integrations",
   },
   {
-    name: 'Analytics',
-    route: 'forms-slug-show-stats'
+    name: "Analytics",
+    route: "forms-slug-show-stats",
   },
   {
-    name: 'Share',
-    route: 'forms-slug-show-share'
-  }
+    name: "Share",
+    route: "forms-slug-show-share",
+  },
 ]
 
 onMounted(() => {
@@ -185,17 +301,22 @@ onMounted(() => {
   }
 })
 
-watch(() => form?.value?.id, (id) => {
-  if (id) {
-    workingFormStore.set(form.value)
-  }
-})
+watch(
+  () => form?.value?.id,
+  (id) => {
+    if (id) {
+      workingFormStore.set(form.value)
+    }
+  },
+)
 
 const goBack = () => {
-  useRouter().push({ name: 'home' })
+  useRouter().push({ name: "home" })
 }
 
 const showDraftFormWarningNotification = () => {
-  useAlert().warning('This form is currently in Draft mode and is not publicly accessible, You can change the form status on the edit form page.')
+  useAlert().warning(
+    "This form is currently in Draft mode and is not publicly accessible, You can change the form status on the edit form page.",
+  )
 }
 </script>
diff --git a/client/pages/forms/[slug]/show/index.vue b/client/pages/forms/[slug]/show/index.vue
index 4bef28dce..9a00c5d3e 100644
--- a/client/pages/forms/[slug]/show/index.vue
+++ b/client/pages/forms/[slug]/show/index.vue
@@ -1,7 +1,7 @@
 <script setup>
 definePageMeta({
-  redirect: to => {
-    return { name: 'forms-slug-show-submissions'}
-  }
+  redirect: () => {
+    return { name: "forms-slug-show-submissions" }
+  },
 })
 </script>
diff --git a/client/pages/forms/[slug]/show/integrations/index.vue b/client/pages/forms/[slug]/show/integrations/index.vue
index 36906c642..d9f0f07e8 100644
--- a/client/pages/forms/[slug]/show/integrations/index.vue
+++ b/client/pages/forms/[slug]/show/integrations/index.vue
@@ -9,76 +9,110 @@
         Read, update and create data with dozens of 3rd-party integrations
       </div>
 
-      <div v-if="integrationsLoading" class="my-6">
-        <Loader class="h-6 w-6 mx-auto"/>
+      <div
+        v-if="integrationsLoading"
+        class="my-6"
+      >
+        <Loader class="h-6 w-6 mx-auto" />
       </div>
-      <div v-else-if="formIntegrationsList.length" class="my-6">
-          <IntegrationCard v-for="(row) in formIntegrationsList" :key="row.id" :integration="row" :form="form"/>
+      <div
+        v-else-if="formIntegrationsList.length"
+        class="my-6"
+      >
+        <IntegrationCard
+          v-for="row in formIntegrationsList"
+          :key="row.id"
+          :integration="row"
+          :form="form"
+        />
       </div>
-      <div class="text-gray-500 border shadow rounded-md p-5 mt-4" v-else>
+      <div
+        v-else
+        class="text-gray-500 border shadow rounded-md p-5 mt-4"
+      >
         No integration yet form this form.
       </div>
 
-
       <h1 class="font-semibold mt-8 text-xl">
         Add a new integration
       </h1>
-      <div v-for="(section, sectionName) in sectionsList" :key="sectionName" class="mb-8">
+      <div
+        v-for="(section, sectionName) in sectionsList"
+        :key="sectionName"
+        class="mb-8"
+      >
         <h3 class="text-gray-500">
           {{ sectionName }}
         </h3>
         <div class="flex flex-wrap mt-2 gap-4">
-          <IntegrationListOption v-for="(sectionItem, sectionItemKey) in section"
-                                 @select="openIntegrationModal"
-                                 :key="sectionItemKey" :integration="sectionItem"/>
+          <IntegrationListOption
+            v-for="(sectionItem, sectionItemKey) in section"
+            :key="sectionItemKey"
+            :integration="sectionItem"
+            @select="openIntegrationModal"
+          />
         </div>
       </div>
-      <IntegrationModal v-if="form && selectedIntegrationKey && selectedIntegration" :form="form"
-                        :integration="selectedIntegration" :integrationKey="selectedIntegrationKey"
-                        :show="showIntegrationModal"
-                        @close="closeIntegrationModal"/>
+      <IntegrationModal
+        v-if="form && selectedIntegrationKey && selectedIntegration"
+        :form="form"
+        :integration="selectedIntegration"
+        :integration-key="selectedIntegrationKey"
+        :show="showIntegrationModal"
+        @close="closeIntegrationModal"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import {computed} from 'vue'
-import IntegrationModal from '~/components/open/integrations/components/IntegrationModal.vue'
+import { computed } from "vue"
+import IntegrationModal from "~/components/open/integrations/components/IntegrationModal.vue"
 
 const props = defineProps({
-  form: {type: Object, required: true}
+  form: { type: Object, required: true },
 })
 
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 useOpnSeoMeta({
-  title: (props.form) ? 'Form Integrations - ' + props.form.title : 'Form Integrations'
+  title: props.form
+    ? "Form Integrations - " + props.form.title
+    : "Form Integrations",
 })
 
 const alert = useAlert()
-const crisp = useCrisp()
-const route = useRoute()
 
 const formIntegrationsStore = useFormIntegrationsStore()
 const integrationsLoading = computed(() => formIntegrationsStore.loading)
-const integrations = computed(() => formIntegrationsStore.availableIntegrations)
-const sectionsList = computed(() => formIntegrationsStore.integrationsBySection)
-const formIntegrationsList = computed(() => formIntegrationsStore.getAllByFormId(props.form.id))
+const integrations = computed(
+  () => formIntegrationsStore.availableIntegrations,
+)
+const sectionsList = computed(
+  () => formIntegrationsStore.integrationsBySection,
+)
+const formIntegrationsList = computed(() =>
+  formIntegrationsStore.getAllByFormId(props.form.id),
+)
 
-let showIntegrationModal = ref(false)
-let selectedIntegrationKey = ref(null)
-let selectedIntegration = ref(null)
+const showIntegrationModal = ref(false)
+const selectedIntegrationKey = ref(null)
+const selectedIntegration = ref(null)
 
 onMounted(() => {
   formIntegrationsStore.fetchFormIntegrations(props.form.id)
 })
 
 const openIntegrationModal = (itemKey) => {
-  if (!itemKey || !integrations.value.has(itemKey)) return alert.error('Integration not found')
-  if (integrations.value.get(itemKey).coming_soon) return alert.warning('This integration is not available yet')
+  if (!itemKey || !integrations.value.has(itemKey))
+    return alert.error("Integration not found")
+  if (integrations.value.get(itemKey).coming_soon)
+    return alert.warning("This integration is not available yet")
   selectedIntegrationKey.value = itemKey
-  selectedIntegration.value = integrations.value.get(selectedIntegrationKey.value)
+  selectedIntegration.value = integrations.value.get(
+    selectedIntegrationKey.value,
+  )
   showIntegrationModal.value = true
 }
 const closeIntegrationModal = () => {
diff --git a/client/pages/forms/[slug]/show/share.vue b/client/pages/forms/[slug]/show/share.vue
index 2b3c37e4d..8d56f2d89 100644
--- a/client/pages/forms/[slug]/show/share.vue
+++ b/client/pages/forms/[slug]/show/share.vue
@@ -1,57 +1,81 @@
 <template>
   <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl p-4">
     <div class="mb-20">
-
       <div class="mb-6 pb-6 border-b w-full flex flex-col sm:flex-row gap-2">
-        <regenerate-form-link class="sm:w-1/2 flex" :form="props.form"/>
+        <regenerate-form-link
+          class="sm:w-1/2 flex"
+          :form="props.form"
+        />
 
-        <url-form-prefill class="sm:w-1/2" :form="props.form" :extra-query-param="shareUrlForQueryParams"/>
+        <url-form-prefill
+          class="sm:w-1/2"
+          :form="props.form"
+          :extra-query-param="shareUrlForQueryParams"
+        />
 
-        <embed-form-as-popup-modal class="sm:w-1/2 flex" :form="props.form"/>
+        <embed-form-as-popup-modal
+          class="sm:w-1/2 flex"
+          :form="props.form"
+        />
       </div>
 
-      <share-link class="mt-4" :form="props.form" :extra-query-param="shareUrlForQueryParams"/>
-
-      <embed-code class="mt-6" :form="props.form" :extra-query-param="shareUrlForQueryParams"/>
+      <share-link
+        class="mt-4"
+        :form="props.form"
+        :extra-query-param="shareUrlForQueryParams"
+      />
 
-      <form-qr-code class="mt-6" :form="props.form" :extra-query-param="shareUrlForQueryParams"/>
+      <embed-code
+        class="mt-6"
+        :form="props.form"
+        :extra-query-param="shareUrlForQueryParams"
+      />
 
-      <advanced-form-url-settings :form="props.form" v-model="shareFormConfig"/>
+      <form-qr-code
+        class="mt-6"
+        :form="props.form"
+        :extra-query-param="shareUrlForQueryParams"
+      />
 
+      <advanced-form-url-settings
+        v-model="shareFormConfig"
+        :form="props.form"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import ShareLink from '~/components/pages/forms/show/ShareLink.vue'
-import EmbedCode from '~/components/pages/forms/show/EmbedCode.vue'
-import FormQrCode from '~/components/pages/forms/show/FormQrCode.vue'
-import UrlFormPrefill from '~/components/pages/forms/show/UrlFormPrefill.vue'
-import RegenerateFormLink from '~/components/pages/forms/show/RegenerateFormLink.vue'
-import AdvancedFormUrlSettings from '~/components/open/forms/components/AdvancedFormUrlSettings.vue'
-import EmbedFormAsPopupModal from '~/components/pages/forms/show/EmbedFormAsPopupModal.vue'
+import ShareLink from "~/components/pages/forms/show/ShareLink.vue"
+import EmbedCode from "~/components/pages/forms/show/EmbedCode.vue"
+import FormQrCode from "~/components/pages/forms/show/FormQrCode.vue"
+import UrlFormPrefill from "~/components/pages/forms/show/UrlFormPrefill.vue"
+import RegenerateFormLink from "~/components/pages/forms/show/RegenerateFormLink.vue"
+import AdvancedFormUrlSettings from "~/components/open/forms/components/AdvancedFormUrlSettings.vue"
+import EmbedFormAsPopupModal from "~/components/pages/forms/show/EmbedFormAsPopupModal.vue"
 
 const props = defineProps({
-  form: {type: Object, required: true}
+  form: { type: Object, required: true },
 })
 
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 useOpnSeoMeta({
-  title: (props.form) ? 'Share Form - ' + props.form.title : 'Share Form'
+  title: props.form ? "Share Form - " + props.form.title : "Share Form",
 })
 
 const shareFormConfig = ref({
   hide_title: false,
-  auto_submit: false
+  auto_submit: false,
 })
 
 const shareUrlForQueryParams = computed(() => {
-  let queryStr = ''
+  let queryStr = ""
   for (const [key, value] of Object.entries(shareFormConfig.value)) {
-    if (value && value !== 'false' && value !== false) {
-      queryStr += '&' + encodeURIComponent(key) + "=" + encodeURIComponent(value)
+    if (value && value !== "false" && value !== false) {
+      queryStr +=
+        "&" + encodeURIComponent(key) + "=" + encodeURIComponent(value)
     }
   }
   return queryStr.slice(1)
diff --git a/client/pages/forms/[slug]/show/stats.vue b/client/pages/forms/[slug]/show/stats.vue
index 754c2cfd8..800bc43d3 100644
--- a/client/pages/forms/[slug]/show/stats.vue
+++ b/client/pages/forms/[slug]/show/stats.vue
@@ -3,21 +3,21 @@
     <h3 class="font-semibold mt-4 text-xl">
       Form Analytics (last 30 days)
     </h3>
-    <form-stats :form="form"/>
+    <form-stats :form="form" />
   </div>
 </template>
 
 <script setup>
-import FormStats from '~/components/open/forms/components/FormStats.vue'
+import FormStats from "~/components/open/forms/components/FormStats.vue"
 
 const props = defineProps({
-  form: {type: Object, required: true}
+  form: { type: Object, required: true },
 })
 
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 useOpnSeoMeta({
-  title: (props.form) ? 'Form Analytics - ' + props.form.title : 'Form Analytics'
+  title: props.form ? "Form Analytics - " + props.form.title : "Form Analytics",
 })
 </script>
diff --git a/client/pages/forms/[slug]/show/submissions.vue b/client/pages/forms/[slug]/show/submissions.vue
index dfe58e5f1..b03b060b0 100644
--- a/client/pages/forms/[slug]/show/submissions.vue
+++ b/client/pages/forms/[slug]/show/submissions.vue
@@ -1,23 +1,24 @@
 <template>
-  <form-submissions/>
+  <form-submissions />
 </template>
 
 <script setup>
-import FormSubmissions from '~/components/open/forms/components/FormSubmissions.vue'
+import FormSubmissions from "~/components/open/forms/components/FormSubmissions.vue"
 
 const props = defineProps({
-  form: {type: Object, required: true}
+  form: { type: Object, required: true },
 })
 
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 useOpnSeoMeta({
-  title: (props.form) ? 'Form Submissions - ' + props.form.title : 'Form Submissions'
+  title: props.form
+    ? "Form Submissions - " + props.form.title
+    : "Form Submissions",
 })
 
 onBeforeRouteLeave(() => {
   useRecordsStore().resetState()
 })
-
 </script>
diff --git a/client/pages/forms/create/guest.vue b/client/pages/forms/create/guest.vue
index 87006914f..816e29400 100644
--- a/client/pages/forms/create/guest.vue
+++ b/client/pages/forms/create/guest.vue
@@ -1,36 +1,43 @@
 <template>
   <div class="flex flex-wrap flex-col">
-    <transition v-if="stateReady" name="fade" mode="out-in">
-      <div key="2">
-        <create-form-base-modal :show="showInitialFormModal" @form-generated="formGenerated"
-                                @close="showInitialFormModal=false"
-        />
-        <form-editor v-if="!workspacesLoading" ref="editor"
-                     class="w-full flex flex-grow"
-                     :error="error"
-                     :is-guest="isGuest"
-                     @openRegister="registerModal=true"
-        />
-        <div v-else class="text-center mt-4 py-6">
-          <Loader class="h-6 w-6 text-nt-blue mx-auto"/>
-        </div>
+    <div key="2">
+      <create-form-base-modal
+        :show="showInitialFormModal"
+        @form-generated="formGenerated"
+        @close="showInitialFormModal = false"
+      />
+      <form-editor
+        v-if="!workspacesLoading"
+        ref="editor"
+        class="w-full flex flex-grow"
+        :error="error"
+        :is-guest="isGuest"
+        @open-register="registerModal = true"
+      />
+      <div
+        v-else
+        class="text-center mt-4 py-6"
+      >
+        <Loader class="h-6 w-6 text-nt-blue mx-auto" />
       </div>
-    </transition>
+    </div>
 
-    <quick-register :show-register-modal="registerModal" @close="registerModal=false" @reopen="registerModal=true"
-                    @afterLogin="afterLogin"
+    <quick-register
+      :show-register-modal="registerModal"
+      @close="registerModal = false"
+      @reopen="registerModal = true"
+      @after-login="afterLogin"
     />
   </div>
 </template>
 
 <script setup>
 import FormEditor from "~/components/open/forms/components/FormEditor.vue"
-import QuickRegister from '~/components/pages/auth/components/QuickRegister.vue'
-import CreateFormBaseModal from '../../../components/pages/forms/create/CreateFormBaseModal.vue'
-import {initForm} from "~/composables/forms/initForm.js"
-import {fetchTemplate} from "~/stores/templates.js"
-import {fetchAllWorkspaces} from "~/stores/workspaces.js";
-
+import QuickRegister from "~/components/pages/auth/components/QuickRegister.vue"
+import CreateFormBaseModal from "../../../components/pages/forms/create/CreateFormBaseModal.vue"
+import { initForm } from "~/composables/forms/initForm.js"
+import { fetchTemplate } from "~/stores/templates.js"
+import { fetchAllWorkspaces } from "~/stores/workspaces.js"
 
 const templatesStore = useTemplatesStore()
 const workingFormStore = useWorkingFormStore()
@@ -39,26 +46,24 @@ const route = useRoute()
 
 // Fetch the template
 if (route.query.template !== undefined && route.query.template) {
-  const {data} = await fetchTemplate(route.query.template)
+  const { data } = await fetchTemplate(route.query.template)
   templatesStore.save(data.value)
 }
 
 // Store values
-const workspace = computed(() => workspacesStore.getCurrent)
 const workspacesLoading = computed(() => workspacesStore.loading)
 const form = storeToRefs(workingFormStore).content
 
 useOpnSeoMeta({
-  title: 'Create a new Form for free',
+  title: "Create a new Form for free",
 })
 definePageMeta({
-  middleware: "guest"
+  middleware: "guest",
 })
 
 // Data
 const stateReady = ref(false)
-const loading = ref(false)
-const error = ref('')
+const error = ref("")
 const registerModal = ref(false)
 const isGuest = ref(true)
 const showInitialFormModal = ref(false)
@@ -68,18 +73,20 @@ const editor = ref(null)
 
 onMounted(() => {
   // Set as guest user
-  workspacesStore.set([{
-    id: null,
-    name: 'Guest Workspace',
-    is_enterprise: false,
-    is_pro: false
-  }])
+  workspacesStore.set([
+    {
+      id: null,
+      name: "Guest Workspace",
+      is_enterprise: false,
+      is_pro: false,
+    },
+  ])
 
   form.value = initForm({}, true)
   if (route.query.template !== undefined && route.query.template) {
     const template = templatesStore.getByKey(route.query.template)
     if (template && template.structure) {
-      form.value = useForm({...form.value.data(), ...template.structure})
+      form.value = useForm({ ...form.value.data(), ...template.structure })
     }
   } else {
     // No template loaded, ask how to start
@@ -100,6 +107,6 @@ const afterLogin = () => {
 }
 
 const formGenerated = (newForm) => {
-  form.value = useForm({...form.value.data(), ...newForm})
+  form.value = useForm({ ...form.value.data(), ...newForm })
 }
 </script>
diff --git a/client/pages/forms/create/index.vue b/client/pages/forms/create/index.vue
index 237b87c6c..a69bebdae 100644
--- a/client/pages/forms/create/index.vue
+++ b/client/pages/forms/create/index.vue
@@ -1,54 +1,61 @@
 <template>
   <div class="flex flex-wrap flex-col">
-    <transition name="fade" mode="out-in">
-      <div key="2">
-        <create-form-base-modal :show="showInitialFormModal" @form-generated="formGenerated"
-                                @close="showInitialFormModal=false"
-        />
-
-        <form-editor v-if="form && !workspacesLoading" ref="editor"
-                     class="w-full flex flex-grow"
-                     :error="error"
-                     @on-save="formInitialHash=null"
-        />
-        <div v-else class="text-center mt-4 py-6">
-          <Loader class="h-6 w-6 text-nt-blue mx-auto"/>
-        </div>
+    <div key="2">
+      <create-form-base-modal
+        :show="showInitialFormModal"
+        @form-generated="formGenerated"
+        @close="showInitialFormModal = false"
+      />
+
+      <form-editor
+        v-if="form && !workspacesLoading"
+        ref="editor"
+        class="w-full flex flex-grow"
+        :error="error"
+        @on-save="formInitialHash = null"
+      />
+      <div
+        v-else
+        class="text-center mt-4 py-6"
+      >
+        <Loader class="h-6 w-6 text-nt-blue mx-auto" />
       </div>
-    </transition>
+    </div>
   </div>
 </template>
 
-
 <script setup>
-import {watch} from 'vue'
-import {initForm} from "~/composables/forms/initForm.js"
+import { watch } from "vue"
+import { initForm } from "~/composables/forms/initForm.js"
 import FormEditor from "~/components/open/forms/components/FormEditor.vue"
-import CreateFormBaseModal from '../../../components/pages/forms/create/CreateFormBaseModal.vue'
-import {fetchTemplate} from "~/stores/templates.js"
-import {hash} from "~/lib/utils.js"
-import {onBeforeRouteLeave} from 'vue-router'
+import CreateFormBaseModal from "../../../components/pages/forms/create/CreateFormBaseModal.vue"
+import { fetchTemplate } from "~/stores/templates.js"
+import { hash } from "~/lib/utils.js"
+import { onBeforeRouteLeave } from "vue-router"
 
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 
 useOpnSeoMeta({
-  title: 'Create a new Form'
+  title: "Create a new Form",
 })
 
 onBeforeRouteLeave((to, from, next) => {
   if (isDirty()) {
-    return useAlert().confirm('Changes you made may not be saved. Are you sure want to leave?', () => {
-      window.onbeforeunload = null
-      next()
-    }, () => {})
+    return useAlert().confirm(
+      "Changes you made may not be saved. Are you sure want to leave?",
+      () => {
+        window.onbeforeunload = null
+        next()
+      },
+      () => {},
+    )
   }
   next()
 })
 
 const route = useRoute()
-const authStore = useAuthStore()
 const templatesStore = useTemplatesStore()
 const workingFormStore = useWorkingFormStore()
 const workspacesStore = useWorkspacesStore()
@@ -56,28 +63,30 @@ const formStore = useFormsStore()
 
 // Fetch the template
 if (route.query.template !== undefined && route.query.template) {
-  const {data} = await fetchTemplate(route.query.template)
+  const { data } = await fetchTemplate(route.query.template)
   templatesStore.save(data.value)
 }
 
 const {
   getCurrent: workspace,
-  getAll: workspaces,
-  workspacesLoading: workspacesLoading
+  workspacesLoading: workspacesLoading,
 } = storeToRefs(workspacesStore)
-const {content: form} = storeToRefs(workingFormStore)
+const { content: form } = storeToRefs(workingFormStore)
 
 // State
 const loading = ref(false)
-const error = ref('')
+const error = ref("")
 const showInitialFormModal = ref(false)
 const formInitialHash = ref(null)
 
-watch(() => workspace, () => {
-  if (workspace) {
-    form.workspace_id = workspace.value.id
-  }
-})
+watch(
+  () => workspace,
+  () => {
+    if (workspace) {
+      form.workspace_id = workspace.value.id
+    }
+  },
+)
 
 onMounted(() => {
   if (import.meta.client) {
@@ -92,12 +101,12 @@ onMounted(() => {
     formStore.loadAll(workspace.value.id)
   }
 
-  form.value = initForm({workspace_id: workspace.value?.id}, true)
+  form.value = initForm({ workspace_id: workspace.value?.id }, true)
   formInitialHash.value = hash(JSON.stringify(form.value.data()))
   if (route.query.template !== undefined && route.query.template) {
     const template = templatesStore.getByKey(route.query.template)
     if (template && template.structure) {
-      form.value = useForm({...form.value.data(), ...template.structure})
+      form.value = useForm({ ...form.value.data(), ...template.structure })
     }
   } else {
     // No template loaded, ask how to start
@@ -108,10 +117,14 @@ onMounted(() => {
 
 // Methods
 const formGenerated = (newForm) => {
-  form.value = useForm({...form.value.data(), ...newForm})
+  form.value = useForm({ ...form.value.data(), ...newForm })
 }
 
 const isDirty = () => {
-  return !loading.value && formInitialHash.value && formInitialHash.value !== hash(JSON.stringify(form.value.data()))
+  return (
+    !loading.value &&
+    formInitialHash.value &&
+    formInitialHash.value !== hash(JSON.stringify(form.value.data()))
+  )
 }
 </script>
diff --git a/client/pages/home.vue b/client/pages/home.vue
index da4f3f25a..e92ccbef2 100644
--- a/client/pages/home.vue
+++ b/client/pages/home.vue
@@ -7,11 +7,23 @@
             <h2 class="flex-grow text-gray-900">
               Your Forms
             </h2>
-            <v-button v-track.create_form_click :to="{name:'forms-create'}">
-              <svg class="w-4 h-4 text-white inline mr-1 -mt-1" viewBox="0 0 14 14" fill="none"
-                   xmlns="http://www.w3.org/2000/svg">
-                <path d="M6.99996 1.1665V12.8332M1.16663 6.99984H12.8333" stroke="currentColor" stroke-width="1.67"
-                      stroke-linecap="round" stroke-linejoin="round"/>
+            <v-button
+              v-track.create_form_click
+              :to="{ name: 'forms-create' }"
+            >
+              <svg
+                class="w-4 h-4 text-white inline mr-1 -mt-1"
+                viewBox="0 0 14 14"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.99996 1.1665V12.8332M1.16663 6.99984H12.8333"
+                  stroke="currentColor"
+                  stroke-width="1.67"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
               </svg>
               Create a new form
             </v-button>
@@ -23,118 +35,183 @@
     <div class="flex bg-white">
       <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl">
         <div class="mt-8 pb-0">
-          <text-input v-if="forms.length > 0" class="mb-6 px-4" v-model="search" name="search" label="Search a form"
-                      placeholder="Name of form to search"
+          <text-input
+            v-if="forms.length > 0"
+            v-model="search"
+            class="mb-6 px-4"
+            name="search"
+            label="Search a form"
+            placeholder="Name of form to search"
           />
-          <div v-if="allTags.length > 0" class="mb-4 px-6">
-            <div v-for="tag in allTags" :key="tag"
-                 :class="[
-                   'inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset cursor-pointer mr-2',
-                   {'bg-blue-50 text-blue-600 ring-blue-500/10 dark:bg-blue-400':selectedTags.has(tag),
-                    'bg-gray-50 text-gray-600 ring-gray-500/10 dark:bg-gray-700 hover:bg-blue-50 hover:text-blue-600 hover:ring-blue-500/10 hover:dark:bg-blue-400':!selectedTags.has(tag)}
-                 ]"
-                 title="Click for filter by tag(s)"
-                 @click="onTagClick(tag)"
+          <div
+            v-if="allTags.length > 0"
+            class="mb-4 px-6"
+          >
+            <div
+              v-for="tag in allTags"
+              :key="tag"
+              :class="[
+                'inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset cursor-pointer mr-2',
+                {
+                  'bg-blue-50 text-blue-600 ring-blue-500/10 dark:bg-blue-400':
+                    selectedTags.has(tag),
+                  'bg-gray-50 text-gray-600 ring-gray-500/10 dark:bg-gray-700 hover:bg-blue-50 hover:text-blue-600 hover:ring-blue-500/10 hover:dark:bg-blue-400':
+                    !selectedTags.has(tag),
+                },
+              ]"
+              title="Click for filter by tag(s)"
+              @click="onTagClick(tag)"
             >
               {{ tag }}
             </div>
           </div>
-          <div v-if="!formsLoading && enrichedForms.length === 0" class="flex flex-wrap justify-center max-w-4xl">
-            <img class="w-56"
-                 src="/img/pages/forms/search_notfound.png" alt="search-not-found"
-            />
+          <div
+            v-if="!formsLoading && enrichedForms.length === 0"
+            class="flex flex-wrap justify-center max-w-4xl"
+          >
+            <img
+              class="w-56"
+              src="/img/pages/forms/search_notfound.png"
+              alt="search-not-found"
+            >
 
             <h3 class="w-full mt-4 text-center text-gray-900 font-semibold">
               No forms found
             </h3>
-            <div v-if="isFilteringForms && enrichedForms.length === 0 && search"
-                 class="mt-2 w-full text-center">
-              Your search "{{ search }}" did not match any forms. Please try again.
+            <div
+              v-if="isFilteringForms && enrichedForms.length === 0 && search"
+              class="mt-2 w-full text-center"
+            >
+              Your search "{{ search }}" did not match any forms. Please try
+              again.
             </div>
-            <v-button v-if="forms.length === 0" v-track.create_form_click class="mt-4" :to="{name:'forms-create'}">
-              <svg class="w-4 h-4 text-white inline mr-1 -mt-1" viewBox="0 0 14 14" fill="none"
-                   xmlns="http://www.w3.org/2000/svg">
-                <path d="M6.99996 1.1665V12.8332M1.16663 6.99984H12.8333" stroke="currentColor" stroke-width="1.67"
-                      stroke-linecap="round" stroke-linejoin="round"/>
+            <v-button
+              v-if="forms.length === 0"
+              v-track.create_form_click
+              class="mt-4"
+              :to="{ name: 'forms-create' }"
+            >
+              <svg
+                class="w-4 h-4 text-white inline mr-1 -mt-1"
+                viewBox="0 0 14 14"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.99996 1.1665V12.8332M1.16663 6.99984H12.8333"
+                  stroke="currentColor"
+                  stroke-width="1.67"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
               </svg>
               Create a new form
             </v-button>
           </div>
-          <div v-else-if="forms.length > 0" class="mb-10">
+          <div
+            v-else-if="forms.length > 0"
+            class="mb-10"
+          >
             <div v-if="enrichedForms && enrichedForms.length">
-              <div v-for="(form) in enrichedForms" :key="form.id"
-                   class="mt-4 p-4 flex group bg-white hover:bg-gray-50 dark:bg-notion-dark items-center relative"
+              <div
+                v-for="(form) in enrichedForms"
+                :key="form.id"
+                class="mt-4 p-4 flex group bg-white hover:bg-gray-50 dark:bg-notion-dark items-center relative"
               >
-                <div class="flex-grow items-center truncate cursor-pointer relative">
-                  <NuxtLink :to="{name:'forms-slug-show-submissions', params: {slug:form.slug}}"
-                            class="absolute inset-0"/>
-                  <span class="font-semibold text-gray-900 dark:text-white">{{ form.title }}</span>
+                <div
+                  class="flex-grow items-center truncate cursor-pointer relative"
+                >
+                  <NuxtLink
+                    :to="{name:'forms-slug-show-submissions', params: {slug:form.slug}}"
+                    class="absolute inset-0"
+                  />
+                  <span class="font-semibold text-gray-900 dark:text-white">{{
+                    form.title
+                  }}</span>
                   <ul class="flex text-gray-500 text-sm gap-4">
                     <li class="pr-1 mr-3">
-                      {{ form.views_count }} view{{ form.views_count > 0 ? 's' : '' }}
+                      {{ form.views_count }} view{{
+                        form.views_count > 0 ? "s" : ""
+                      }}
                     </li>
                     <li class="list-disc mr-3">
                       {{ form.submissions_count }}
-                      submission{{ form.submissions_count > 0 ? 's' : '' }}
+                      submission{{ form.submissions_count > 0 ? "s" : "" }}
                     </li>
                     <li class="list-disc mr-3">
                       Edited {{ form.last_edited_human }}
                     </li>
-                    <li class='list-disc hidden lg:list-item' v-if="form.creator">
+                    <li
+                      v-if="form.creator"
+                      class="list-disc hidden lg:list-item"
+                    >
                       By
                       {{ form?.creator?.name }}
                     </li>
                   </ul>
-                  <div v-if="['draft','closed'].includes(form.visibility) || (form.tags && form.tags.length > 0)"
-                       class="mt-1 flex items-center flex-wrap gap-3">
-                    <span v-if="form.visibility=='draft'"
-                          class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700">
+                  <div
+                    v-if="['draft','closed'].includes(form.visibility) || (form.tags && form.tags.length > 0)"
+                    class="mt-1 flex items-center flex-wrap gap-3"
+                  >
+                    <span
+                      v-if="form.visibility=='draft'"
+                      class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+                    >
                       Draft
                     </span>
-                    <span v-else-if="form.visibility=='closed'"
-                          class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700">
+                    <span
+                      v-else-if="form.visibility=='closed'"
+                      class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+                    >
                       Closed
                     </span>
-                    <span v-for="(tag,i) in form.tags" :key="tag"
-                          class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
+                    <span
+                      v-for="(tag) in form.tags"
+                      :key="tag"
+                      class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
                     >
                       {{ tag }}
                     </span>
                   </div>
                 </div>
-                <extra-menu :form="form" :is-main-page="true"/>
+                <extra-menu
+                  :form="form"
+                  :is-main-page="true"
+                />
               </div>
             </div>
           </div>
-          <div v-if="formsLoading" class="text-center">
-            <Loader class="h-6 w-6 text-nt-blue mx-auto"/>
+          <div
+            v-if="formsLoading"
+            class="text-center"
+          >
+            <Loader class="h-6 w-6 text-nt-blue mx-auto" />
           </div>
         </div>
       </div>
     </div>
-    <open-form-footer class="mt-8 border-t"/>
+    <open-form-footer class="mt-8 border-t" />
   </div>
 </template>
 
 <script setup>
-import {useAuthStore} from '../stores/auth'
-import {useFormsStore} from '../stores/forms'
-import {useWorkspacesStore} from '../stores/workspaces'
-import Fuse from 'fuse.js'
-import TextInput from '../components/forms/TextInput.vue'
-import ExtraMenu from '../components/pages/forms/show/ExtraMenu.vue'
-import {refDebounced} from "@vueuse/core"
+import { useFormsStore } from "../stores/forms"
+import { useWorkspacesStore } from "../stores/workspaces"
+import Fuse from "fuse.js"
+import TextInput from "../components/forms/TextInput.vue"
+import ExtraMenu from "../components/pages/forms/show/ExtraMenu.vue"
+import { refDebounced } from "@vueuse/core"
 
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 
 useOpnSeoMeta({
-  title: 'Your Forms',
-  description: 'All of your OpnForm are here. Create new forms, or update your existing forms.'
+  title: "Your Forms",
+  description:
+    "All of your OpnForm are here. Create new forms, or update your existing forms.",
 })
 
-const authStore = useAuthStore()
 const formsStore = useFormsStore()
 const workspacesStore = useWorkspacesStore()
 formsStore.startLoading()
@@ -148,18 +225,17 @@ onMounted(() => {
 })
 
 // State
-const {getAll: forms, loading: formsLoading, allTags} = storeToRefs(formsStore)
-const showEditFormModal = ref(false)
-const selectedForm = ref(null)
-const search = ref('')
+const {
+  getAll: forms,
+  loading: formsLoading,
+  allTags,
+} = storeToRefs(formsStore)
+const search = ref("")
 const debouncedSearch = refDebounced(search, 500)
 const selectedTags = ref(new Set())
 
 // Methods
-const editForm = (form) => {
-  selectedForm.value = form
-  showEditFormModal.value = true
-}
+
 const onTagClick = (tag) => {
   if (selectedTags?.value?.has(tag)) {
     selectedTags.value.remove(tag)
@@ -170,11 +246,14 @@ const onTagClick = (tag) => {
 
 // Computed
 const isFilteringForms = computed(() => {
-  return (search.value !== '' && search.value !== null) || selectedTags.value.size > 0
+  return (
+    (search.value !== "" && search.value !== null) ||
+    selectedTags.value.size > 0
+  )
 })
 
 const enrichedForms = computed(() => {
-  let enrichedForms = forms.value.map((form) => {
+  const enrichedForms = forms.value.map((form) => {
     form.workspace = workspacesStore.getByKey(form.workspace_id)
     return form
   }).filter((form) => {
@@ -184,17 +263,13 @@ const enrichedForms = computed(() => {
     return form.tags && form.tags.length ? [...selectedTags.value].every(r => form.tags.includes(r)) : false
   })
 
-  if (!isFilteringForms || search.value === '' || search.value === null) {
+  if (!isFilteringForms || search.value === "" || search.value === null) {
     return enrichedForms
   }
 
   // Fuze search
   const fuzeOptions = {
-    keys: [
-      'title',
-      'slug',
-      'tags'
-    ]
+    keys: ["title", "slug", "tags"],
   }
   const fuse = new Fuse(enrichedForms, fuzeOptions)
   return fuse.search(debouncedSearch.value).map((res) => {
diff --git a/client/pages/index.vue b/client/pages/index.vue
index 4bcfe4e1a..6f4146435 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -1,81 +1,143 @@
 <template>
   <div>
-    <section class="bg-gradient-to-b relative from-white to-gray-100 py-8 sm:py-16 ">
+    <section
+      class="bg-gradient-to-b relative from-white to-gray-100 py-8 sm:py-16"
+    >
       <div class="absolute inset-0">
-        <img class="w-full h-full object-cover object-top"
-             src="/img/pages/ai_form_builder/background-pattern.svg" alt="Page abstract background"
-        />
+        <img
+          class="w-full h-full object-cover object-top"
+          src="/img/pages/ai_form_builder/background-pattern.svg"
+          alt="Page abstract background"
+        >
       </div>
 
-      <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative -mb-32 md:-mb-52 lg:-mb-72">
+      <div
+        class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative -mb-32 md:-mb-52 lg:-mb-72"
+      >
         <div class="flex justify-center mb-5">
           <div
             class="relative flex items-center shadow-sm bg-white gap-x-4 rounded-full px-4 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
           >
-            <span class="font-semibold text-gray-500">We're Open-Source</span><span class="h-4 w-px bg-gray-900/10"
-                                                                                    aria-hidden="true"
-          />
+            <span class="font-semibold text-gray-500">We're Open-Source</span><span
+              class="h-4 w-px bg-gray-900/10"
+              aria-hidden="true"
+            />
             <a
-              target="_blank" class="flex items-center gap-x-1 hover:no-underline"
-              href="https://github.com/jhumanj/opnform" v-track.welcome_github_click
+              v-track.welcome_github_click
+              target="_blank"
+              class="flex items-center gap-x-1 hover:no-underline"
+              href="https://github.com/jhumanj/opnform"
             >
-              <span class="absolute inset-0" aria-hidden="true"/>
+              <span
+                class="absolute inset-0"
+                aria-hidden="true"
+              />
               Star us on GitHub
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                   stroke="currentColor" aria-hidden="true" class="-mr-2 h-5 w-5 text-gray-400"
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                aria-hidden="true"
+                class="-mr-2 h-5 w-5 text-gray-400"
               >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M8.25 4.5l7.5 7.5-7.5 7.5"
+                />
               </svg>
             </a>
           </div>
         </div>
         <div class="max-w-4xl mx-auto text-center">
-          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-semibold text-gray-900 tracking-tight">
+          <h1
+            class="text-4xl sm:text-5xl lg:text-6xl font-semibold text-gray-900 tracking-tight"
+          >
             Build
             <span
-              class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-blue-400">beautiful forms</span>
+              class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-blue-400"
+            >beautiful forms</span>
             <br>
             in seconds
           </h1>
-          <p class="mt-4 sm:mt-5 text-base leading-7 sm:text-xl sm:leading-9 font-medium text-gray-500">
-            Create beautiful forms and share them anywhere. It super fast, you don't need to know how to code. Get
-            started
+          <p
+            class="mt-4 sm:mt-5 text-base leading-7 sm:text-xl sm:leading-9 font-medium text-gray-500"
+          >
+            Create beautiful forms and share them anywhere. It super fast, you
+            don't need to know how to code. Get started
             <span class="font-semibold">for free</span>!
           </p>
 
           <div class="mt-8 flex justify-center">
-            <v-button v-if="!authenticated" class="mr-1" :to="{ name: 'forms-create-guest' }" :arrow="true">
+            <v-button
+              v-if="!authenticated"
+              class="mr-1"
+              :to="{ name: 'forms-create-guest' }"
+              :arrow="true"
+            >
               Create a form for FREE
             </v-button>
-            <v-button v-else class="mr-1" :to="{ name: 'forms-create' }" :arrow="true">
+            <v-button
+              v-else
+              class="mr-1"
+              :to="{ name: 'forms-create' }"
+              :arrow="true"
+            >
               Create a form for FREE
             </v-button>
           </div>
 
           <div class="justify-center flex gap-2 mt-10">
             <div class="flex items-center text-gray-400 text-sm">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                   stroke="currentColor" class="w-4 h-4 mr-1 ticks"
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                class="w-4 h-4 mr-1 ticks"
               >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M4.5 12.75l6 6 9-13.5"
+                />
               </svg>
               <span>Unlimited forms</span>
             </div>
             <div class="flex items-center text-gray-400 text-sm">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                   stroke="currentColor" class="w-4 h-4 mr-1 ticks"
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                class="w-4 h-4 mr-1 ticks"
               >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M4.5 12.75l6 6 9-13.5"
+                />
               </svg>
-              <span>
-                Unlimited fields
-              </span>
+              <span> Unlimited fields </span>
             </div>
             <div class="flex text-gray-400 text-sm">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                   stroke="currentColor" class="w-4 h-4 mr-1 ticks"
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                class="w-4 h-4 mr-1 ticks"
               >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M4.5 12.75l6 6 9-13.5"
+                />
               </svg>
               <span>Unlimited responses</span>
             </div>
@@ -88,46 +150,58 @@
           <div
             class="-m-2 rounded-xl bg-blue-900/5 p-2 backdrop-blur-sm ring-1 ring-inset ring-blue-900/10 lg:-m-4 lg:rounded-2xl lg:p-4 w-full"
           >
-            <img src="/img/pages/welcome/product-cover.jpg"
-                     sizes="320px sm:650px lg:896px"
-                 alt="Product screenshot" loading="lazy" class="rounded-md w-full shadow-2xl ring-1 ring-gray-900/10"
-            />
+            <img
+              src="/img/pages/welcome/product-cover.jpg"
+              sizes="320px sm:650px lg:896px"
+              alt="Product screenshot"
+              loading="lazy"
+              class="rounded-md w-full shadow-2xl ring-1 ring-gray-900/10"
+            >
           </div>
         </div>
       </div>
     </section>
 
     <div class="flex flex-col bg-gray-50 dark:bg-notion-dark">
-      <div class="bg-white dark:bg-notion-dark-light pt-32 md:pt-52 lg:pt-72 pb-8">
+      <div
+        class="bg-white dark:bg-notion-dark-light pt-32 md:pt-52 lg:pt-72 pb-8"
+      >
         <div class="md:max-w-5xl md:mx-auto w-full">
-          <features class="pb-8"/>
+          <features class="pb-8" />
         </div>
       </div>
 
-      <ai-feature class="bg-white -mb-56"/>
+      <ai-feature class="bg-white -mb-56" />
 
-      <more-features class="pt-56"/>
+      <more-features class="pt-56" />
 
-      <pricing-table v-if="paidPlansEnabled" class="pb-20" :home-page="true">
+      <pricing-table
+        v-if="paidPlansEnabled"
+        class="pb-20"
+        :home-page="true"
+      >
         <template #pricing-table>
           <li class="flex gap-x-3">
-            <NuxtLink :to="{name:'pricing'}" class="flex gap-3">
-              <div class="w-5"/>
+            <NuxtLink
+              :to="{ name: 'pricing' }"
+              class="flex gap-3"
+            >
+              <div class="w-5" />
               Read more about our pricing
             </NuxtLink>
           </li>
         </template>
       </pricing-table>
 
-<!--      <div class="pt-20 pb-5 text-center bg-white dark:bg-notion-dark-light">-->
-<!--        <h3 class="font-semibold text-3xl">See what people are saying</h3>-->
-<!--        <p class="w-full mt-2 mb-8">-->
-<!--          These are the stories of our customers who have joined us with great pleasure when using this crazy feature.-->
-<!--        </p>-->
-<!--        <testimonials/>-->
-<!--      </div>-->
+      <!--      <div class="pt-20 pb-5 text-center bg-white dark:bg-notion-dark-light">-->
+      <!--        <h3 class="font-semibold text-3xl">See what people are saying</h3>-->
+      <!--        <p class="w-full mt-2 mb-8">-->
+      <!--          These are the stories of our customers who have joined us with great pleasure when using this crazy feature.-->
+      <!--        </p>-->
+      <!--        <testimonials/>-->
+      <!--      </div>-->
 
-      <templates-slider class="max-w-full mb-12"/>
+      <templates-slider class="max-w-full mb-12" />
 
       <div class="w-full bg-blue-900 p-12 md:p-24 text-center">
         <h4 class="font-semibold text-3xl text-white">
@@ -137,27 +211,68 @@
           Generous, unlimited free plan.
         </p>
         <div class="mt-6 flex justify-center">
-          <v-button v-track.welcome_create_form_click :to="{ name: 'forms-create-guest' }" :arrow="true" color="blue">
+          <v-button
+            v-track.welcome_create_form_click
+            :to="{ name: 'forms-create-guest' }"
+            :arrow="true"
+            color="blue"
+          >
             Create a form for FREE
           </v-button>
         </div>
         <div class="flex justify-center mt-6">
-          <a target="_blank" :href="configLinks.twitter" class="mr-4">
-            <svg class="w-6 h-6 text-white" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <a
+            target="_blank"
+            :href="configLinks.twitter"
+            class="mr-4"
+          >
+            <svg
+              class="w-6 h-6 text-white"
+              viewBox="0 0 24 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M7.55016 19.7502C16.6045 19.7502 21.5583 12.2469 21.5583 5.74211C21.5583 5.53117 21.5536 5.31554 21.5442 5.1046C22.5079 4.40771 23.3395 3.5445 24 2.55554C23.1025 2.95484 22.1496 3.21563 21.1739 3.32898C22.2013 2.71315 22.9705 1.74572 23.3391 0.606011C22.3726 1.1788 21.3156 1.58286 20.2134 1.80085C19.4708 1.01181 18.489 0.48936 17.4197 0.314295C16.3504 0.13923 15.2532 0.321295 14.2977 0.832341C13.3423 1.34339 12.5818 2.15495 12.1338 3.14156C11.6859 4.12816 11.5754 5.23486 11.8195 6.29054C9.86249 6.19233 7.94794 5.68395 6.19998 4.79834C4.45203 3.91274 2.90969 2.66968 1.67297 1.14976C1.0444 2.23349 0.852057 3.51589 1.13503 4.73634C1.418 5.95678 2.15506 7.02369 3.19641 7.72023C2.41463 7.69541 1.64998 7.48492 0.965625 7.10617V7.1671C0.964925 8.30439 1.3581 9.40683 2.07831 10.287C2.79852 11.1672 3.80132 11.7708 4.91625 11.9952C4.19206 12.1934 3.43198 12.2222 2.69484 12.0796C3.00945 13.0577 3.62157 13.9131 4.44577 14.5266C5.26997 15.14 6.26512 15.4808 7.29234 15.5015C5.54842 16.8714 3.39417 17.6144 1.17656 17.6109C0.783287 17.6103 0.390399 17.5861 0 17.5387C2.25286 18.984 4.87353 19.7516 7.55016 19.7502Z"
                 fill="currentColor"
               />
             </svg>
           </a>
-          <a target="_blank" :href="configLinks.discord" class="mr-4">
-            <svg class="w-6 h-6 text-white" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path fill="currentColor" d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
+          <a
+            target="_blank"
+            :href="configLinks.discord"
+            class="mr-4"
+          >
+            <svg
+              class="w-6 h-6 text-white"
+              role="img"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>Discord</title>
+              <path
+                fill="currentColor"
+                d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
+              />
+            </svg>
           </a>
-          <a v-track.welcome_github_click target="_blank" :href="configLinks.github_url" class="mr-4">
-            <svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" clip-rule="evenodd"
-                    d="M12 0C5.3724 0 0 5.3808 0 12.0204C0 17.3304 3.438 21.8364 8.2068 23.4252C8.8068 23.5356 9.0252 23.1648 9.0252 22.8456C9.0252 22.5612 9.0156 21.804 9.0096 20.802C5.6712 21.528 4.9668 19.1904 4.9668 19.1904C4.422 17.8008 3.6348 17.4312 3.6348 17.4312C2.5452 16.6872 3.7176 16.7016 3.7176 16.7016C4.9212 16.7856 5.5548 17.94 5.5548 17.94C6.6252 19.776 8.364 19.2456 9.0468 18.9384C9.1572 18.162 9.4668 17.6328 9.81 17.3328C7.146 17.0292 4.344 15.9972 4.344 11.3916C4.344 10.08 4.812 9.006 5.5788 8.166C5.4552 7.8624 5.0436 6.6396 5.6964 4.986C5.6964 4.986 6.7044 4.662 8.9964 6.2172C9.97532 5.95022 10.9853 5.81423 12 5.8128C13.02 5.8176 14.046 5.9508 15.0048 6.2172C17.2956 4.662 18.3012 4.9848 18.3012 4.9848C18.9564 6.6396 18.5436 7.8624 18.4212 8.166C19.1892 9.006 19.6548 10.08 19.6548 11.3916C19.6548 16.0092 16.848 17.0256 14.1756 17.3232C14.6064 17.694 14.9892 18.4272 14.9892 19.5492C14.9892 21.1548 14.9748 22.452 14.9748 22.8456C14.9748 23.1672 15.1908 23.5416 15.8004 23.424C18.19 22.6225 20.2672 21.0904 21.7386 19.0441C23.2099 16.9977 24.001 14.5408 24 12.0204C24 5.3808 18.6264 0 12 0Z"
-                    fill="currentColor"
+          <a
+            v-track.welcome_github_click
+            target="_blank"
+            :href="configLinks.github_url"
+            class="mr-4"
+          >
+            <svg
+              class="w-6 h-6 text-white"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M12 0C5.3724 0 0 5.3808 0 12.0204C0 17.3304 3.438 21.8364 8.2068 23.4252C8.8068 23.5356 9.0252 23.1648 9.0252 22.8456C9.0252 22.5612 9.0156 21.804 9.0096 20.802C5.6712 21.528 4.9668 19.1904 4.9668 19.1904C4.422 17.8008 3.6348 17.4312 3.6348 17.4312C2.5452 16.6872 3.7176 16.7016 3.7176 16.7016C4.9212 16.7856 5.5548 17.94 5.5548 17.94C6.6252 19.776 8.364 19.2456 9.0468 18.9384C9.1572 18.162 9.4668 17.6328 9.81 17.3328C7.146 17.0292 4.344 15.9972 4.344 11.3916C4.344 10.08 4.812 9.006 5.5788 8.166C5.4552 7.8624 5.0436 6.6396 5.6964 4.986C5.6964 4.986 6.7044 4.662 8.9964 6.2172C9.97532 5.95022 10.9853 5.81423 12 5.8128C13.02 5.8176 14.046 5.9508 15.0048 6.2172C17.2956 4.662 18.3012 4.9848 18.3012 4.9848C18.9564 6.6396 18.5436 7.8624 18.4212 8.166C19.1892 9.006 19.6548 10.08 19.6548 11.3916C19.6548 16.0092 16.848 17.0256 14.1756 17.3232C14.6064 17.694 14.9892 18.4272 14.9892 19.5492C14.9892 21.1548 14.9748 22.452 14.9748 22.8456C14.9748 23.1672 15.1908 23.5416 15.8004 23.424C18.19 22.6225 20.2672 21.0904 21.7386 19.0441C23.2099 16.9977 24.001 14.5408 24 12.0204C24 5.3808 18.6264 0 12 0Z"
+                fill="currentColor"
               />
             </svg>
           </a>
@@ -166,48 +281,57 @@
         <p class="mt-12 text-white text-lg">
           The form below is an OpnForm, give it a try !
         </p>
-        <div class="md:max-w-5xl md:mx-auto w-full bg-white rounded-md mt-6 p-4 shadow-lg">
-          <iframe class="mt-4" style="border:none;width:100%;" height="480px"
-                  src="https://opnform.com/forms/opnform-contact"
+        <div
+          class="md:max-w-5xl md:mx-auto w-full bg-white rounded-md mt-6 p-4 shadow-lg"
+        >
+          <iframe
+            class="mt-4"
+            style="border: none; width: 100%"
+            height="480px"
+            src="https://opnform.com/forms/opnform-contact"
           />
         </div>
       </div>
 
-      <open-form-footer class="dark:border-t border-t"/>
+      <open-form-footer class="dark:border-t border-t" />
     </div>
   </div>
 </template>
 
 <script>
-import {computed} from 'vue'
-import {useAuthStore} from '../stores/auth'
-import Features from '~/components/pages/welcome/Features.vue'
-import MoreFeatures from '~/components/pages/welcome/MoreFeatures.vue'
-import PricingTable from '../components/pages/pricing/PricingTable.vue'
-import AiFeature from '~/components/pages/welcome/AiFeature.vue'
-import Testimonials from '../components/pages/welcome/Testimonials.vue'
-import TemplatesSlider from '../components/pages/welcome/TemplatesSlider.vue'
-import opnformConfig from "~/opnform.config.js";
+import { computed } from "vue"
+import { useAuthStore } from "../stores/auth"
+import Features from "~/components/pages/welcome/Features.vue"
+import MoreFeatures from "~/components/pages/welcome/MoreFeatures.vue"
+import PricingTable from "../components/pages/pricing/PricingTable.vue"
+import AiFeature from "~/components/pages/welcome/AiFeature.vue"
+import TemplatesSlider from "../components/pages/welcome/TemplatesSlider.vue"
+import opnformConfig from "~/opnform.config.js"
 
 export default {
-  components: {Testimonials, Features, MoreFeatures, PricingTable, AiFeature, TemplatesSlider},
-  layout: 'default',
+  components: {
+    Features,
+    MoreFeatures,
+    PricingTable,
+    AiFeature,
+    TemplatesSlider,
+  },
+  layout: "default",
 
   setup() {
     const authStore = useAuthStore()
     defineRouteRules({
-      swr: 3600
+      swr: 3600,
     })
 
     return {
       authenticated: computed(() => authStore.check),
       config: opnformConfig,
-      runtimeConfig: useRuntimeConfig()
+      runtimeConfig: useRuntimeConfig(),
     }
   },
 
-  data: () => ({
-  }),
+  data: () => ({}),
 
   computed: {
     configLinks() {
@@ -216,12 +340,11 @@ export default {
     paidPlansEnabled() {
       return this.runtimeConfig.public.paidPlansEnabled
     },
-  }
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-
 .customer-logo-container {
   max-width: 130px;
   width: 100%;
diff --git a/client/pages/login.vue b/client/pages/login.vue
index 5e05fe0ed..ea5fcb6a2 100644
--- a/client/pages/login.vue
+++ b/client/pages/login.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="flex mt-6 mb-10">
-      <div class="w-full md:max-w-6xl mx-auto px-4 flex md:flex-row-reverse flex-wrap">
+      <div
+        class="w-full md:max-w-6xl mx-auto px-4 flex md:flex-row-reverse flex-wrap"
+      >
         <div class="w-full md:w-1/2 md:p-6">
           <div class="border rounded-md p-6 shadow-md sticky top-4">
             <h2 class="font-semibold text-2xl">
@@ -12,7 +14,7 @@
             <login-form />
           </div>
         </div>
-        <div class="w-full md:w-1/2 md:p-6 mt-8 md:mt-0 ">
+        <div class="w-full md:w-1/2 md:p-6 mt-8 md:mt-0">
           <h1 class="font-bold">
             Create beautiful forms and share them anywhere
           </h1>
@@ -21,26 +23,53 @@
           </p>
           <div class="flex flex-wrap justify-center">
             <p class="px-3 pb-3 text-sm text-gray-500">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
-                    stroke="currentColor" stroke-width="2"
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4 inline"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
               >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M5 13l4 4L19 7"
+                />
               </svg>
               Unlimited forms
             </p>
             <p class="px-3 pb-3 text-sm text-gray-500">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
-                    stroke="currentColor" stroke-width="2"
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4 inline"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
               >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M5 13l4 4L19 7"
+                />
               </svg>
               Unlimited fields
             </p>
             <p class="px-3 pb-3 text-sm text-gray-500">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
-                    stroke="currentColor" stroke-width="2"
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4 inline"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
               >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M5 13l4 4L19 7"
+                />
               </svg>
               Unlimited submissions
             </p>
@@ -56,9 +85,9 @@
 import LoginForm from "~/components/pages/auth/components/LoginForm.vue"
 
 definePageMeta({
-  middleware: "guest"
+  middleware: "guest",
 })
 useOpnSeoMeta({
-  title: 'Login'
+  title: "Login",
 })
 </script>
diff --git a/client/pages/password/email.vue b/client/pages/password/email.vue
index 289dfe0b6..db5832ce0 100644
--- a/client/pages/password/email.vue
+++ b/client/pages/password/email.vue
@@ -5,14 +5,29 @@
         <h1 class="my-6">
           Reset password
         </h1>
-        <form @submit.prevent="send" @keydown="form.onKeydown($event)">
-          <alert-success :form="form" :message="status" class="mb-4" />
+        <form
+          @submit.prevent="send"
+          @keydown="form.onKeydown($event)"
+        >
+          <alert-success
+            :form="form"
+            :message="status"
+            class="mb-4"
+          />
 
           <!-- Email -->
-          <text-input name="email" :form="form" label="Email" :required="true" />
+          <text-input
+            name="email"
+            :form="form"
+            label="Email"
+            :required="true"
+          />
 
           <!-- Submit Button -->
-          <v-button class="w-full" :loading="form.busy">
+          <v-button
+            class="w-full"
+            :loading="form.busy"
+          >
             Send Password Reset Link
           </v-button>
         </form>
@@ -24,30 +39,30 @@
 
 <script>
 export default {
-  setup () {
+  setup() {
     definePageMeta({
-      middleware: "guest"
+      middleware: "guest",
     })
     useOpnSeoMeta({
-      title: 'Reset Password'
+      title: "Reset Password",
     })
   },
 
   data: () => ({
-    status: '',
+    status: "",
     form: useForm({
-      email: ''
-    })
+      email: "",
+    }),
   }),
 
   methods: {
-    async send () {
-      const { data } = await this.form.post('/password/email')
+    async send() {
+      const { data } = await this.form.post("/password/email")
 
       this.status = data.status
 
       this.form.reset()
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/pages/password/reset/[token].vue b/client/pages/password/reset/[token].vue
index 6c2cd12ec..838fcd811 100644
--- a/client/pages/password/reset/[token].vue
+++ b/client/pages/password/reset/[token].vue
@@ -5,24 +5,48 @@
         <h1 class="my-6">
           Reset Password
         </h1>
-        <form @submit.prevent="reset" @keydown="form.onKeydown($event)">
-          <alert-success class="mb-4" :form="form" :message="status" />
+        <form
+          @submit.prevent="reset"
+          @keydown="form.onKeydown($event)"
+        >
+          <alert-success
+            class="mb-4"
+            :form="form"
+            :message="status"
+          />
 
           <!-- Email -->
-          <text-input name="email" :form="form" label="Email" :required="true" />
+          <text-input
+            name="email"
+            :form="form"
+            label="Email"
+            :required="true"
+          />
 
           <!-- Password -->
-          <text-input native-type="password"
-                      name="password" :form="form" label="Password" :required="true"
+          <text-input
+            native-type="password"
+            name="password"
+            :form="form"
+            label="Password"
+            :required="true"
           />
 
           <!-- Password Confirmation-->
-          <text-input native-type="password" class="mb-5"
-                      name="password_confirmation" :form="form" label="Confirm Password" :required="true"
+          <text-input
+            native-type="password"
+            class="mb-5"
+            name="password_confirmation"
+            :form="form"
+            label="Confirm Password"
+            :required="true"
           />
 
           <!-- Submit Button -->
-          <v-button class="w-full" :loading="form.busy">
+          <v-button
+            class="w-full"
+            :loading="form.busy"
+          >
             Reset Password
           </v-button>
         </form>
@@ -34,38 +58,38 @@
 
 <script>
 export default {
-  setup () {
+  setup() {
     definePageMeta({
-      middleware: "guest"
+      middleware: "guest",
     })
     useOpnSeoMeta({
-      title: 'Reset Password'
+      title: "Reset Password",
     })
   },
 
   data: () => ({
-    status: '',
+    status: "",
     form: useForm({
-      token: '',
-      email: '',
-      password: '',
-      password_confirmation: ''
-    })
+      token: "",
+      email: "",
+      password: "",
+      password_confirmation: "",
+    }),
   }),
 
-  created () {
+  created() {
     this.form.email = this.$route.query.email
     this.form.token = this.$route.params.token
   },
 
   methods: {
-    async reset () {
-      const { data } = await this.form.post('/password/reset')
+    async reset() {
+      const { data } = await this.form.post("/password/reset")
 
       this.status = data.status
 
       this.form.reset()
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/pages/pricing.vue b/client/pages/pricing.vue
index f3ae5f1d7..4039b1e06 100644
--- a/client/pages/pricing.vue
+++ b/client/pages/pricing.vue
@@ -1,172 +1,301 @@
 <template>
   <div>
-    <section class="relative py-12 bg-gradient-to-b from-white to-gray-100 sm:py-16 lg:py-20 xl:py-24">
+    <section
+      class="relative py-12 bg-gradient-to-b from-white to-gray-100 sm:py-16 lg:py-20 xl:py-24"
+    >
       <div class="relative px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
         <div class="max-w-4xl mx-auto text-center">
-          <h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
+          <h1
+            class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl"
+          >
             Simple, transparent pricing. No surprises.
           </h1>
           <p
-            class="max-w-2xl mx-auto mt-4 text-base font-medium leading-7 text-gray-500 sm:mt-5 sm:text-xl sm:leading-9">
-            Just like our codebase, our pricing is 100% transparent. One flat price for all features. No hidden fees.
+            class="max-w-2xl mx-auto mt-4 text-base font-medium leading-7 text-gray-500 sm:mt-5 sm:text-xl sm:leading-9"
+          >
+            Just like our codebase, our pricing is 100% transparent. One flat
+            price for all features. No hidden fees.
           </p>
         </div>
       </div>
     </section>
 
-    <pricing-table/>
+    <pricing-table />
 
     <section class="py-12 bg-white sm:py-16 lg:py-24 xl:py-24">
       <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
         <div class="max-w-2xl mx-auto text-center">
-          <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl lg:leading-tight">
-            <span class="text-blue-600">99%</span> of features are available to all users for free and without
-            limits.
+          <h2
+            class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl lg:leading-tight"
+          >
+            <span class="text-blue-600">99%</span> of features are available to
+            all users for free and without limits.
           </h2>
         </div>
 
         <div
-          class="grid max-w-5xl grid-cols-2 mx-auto mt-12 text-center gap-y-8 gap-x-4 sm:grid-cols-3 md:gap-x-12 md:text-left sm:mt-16">
+          class="grid max-w-5xl grid-cols-2 mx-auto mt-12 text-center gap-y-8 gap-x-4 sm:grid-cols-3 md:gap-x-12 md:text-left sm:mt-16"
+        >
           <div class="flex flex-col items-center gap-3 md:flex-row">
-            <svg aria-hidden="true" class="w-6 h-6 shrink-0 stroke-blue-600" viewBox="0 0 24 24" fill="none"
-                 xmlns="http://www.w3.org/2000/svg">
+            <svg
+              aria-hidden="true"
+              class="w-6 h-6 shrink-0 stroke-blue-600"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M3 9H21M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
             </svg>
-            <p class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950">
+            <p
+              class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950"
+            >
               Unlimited forms
             </p>
           </div>
 
           <div class="flex flex-col items-center gap-3 md:flex-row">
-            <svg aria-hidden="true" class="w-6 h-6 shrink-0 stroke-blue-600" viewBox="0 0 24 24" fill="none"
-                 xmlns="http://www.w3.org/2000/svg">
+            <svg
+              aria-hidden="true"
+              class="w-6 h-6 shrink-0 stroke-blue-600"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M9 3.5V2M5.06066 5.06066L4 4M5.06066 13L4 14.0607M13 5.06066L14.0607 4M3.5 9H2M8.5 8.5L12.6111 21.2778L15.5 18.3889L19.1111 22L22 19.1111L18.3889 15.5L21.2778 12.6111L8.5 8.5Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
             </svg>
-            <p class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950">
+            <p
+              class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950"
+            >
               Unlimited submissions
             </p>
           </div>
 
           <div class="flex flex-col items-center gap-3 md:flex-row">
-            <svg aria-hidden="true" class="w-6 h-6 shrink-0 stroke-blue-600" viewBox="0 0 24 24" fill="none"
-                 xmlns="http://www.w3.org/2000/svg">
+            <svg
+              aria-hidden="true"
+              class="w-6 h-6 shrink-0 stroke-blue-600"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M17.8 10C18.9201 10 19.4802 10 19.908 9.78201C20.2843 9.59027 20.5903 9.28431 20.782 8.90798C21 8.48016 21 7.92011 21 6.8V6.2C21 5.0799 21 4.51984 20.782 4.09202C20.5903 3.7157 20.2843 3.40973 19.908 3.21799C19.4802 3 18.9201 3 17.8 3L6.2 3C5.0799 3 4.51984 3 4.09202 3.21799C3.71569 3.40973 3.40973 3.71569 3.21799 4.09202C3 4.51984 3 5.07989 3 6.2L3 6.8C3 7.9201 3 8.48016 3.21799 8.90798C3.40973 9.28431 3.71569 9.59027 4.09202 9.78201C4.51984 10 5.07989 10 6.2 10L17.8 10Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
               <path
                 d="M17.8 21C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V17.2C21 16.0799 21 15.5198 20.782 15.092C20.5903 14.7157 20.2843 14.4097 19.908 14.218C19.4802 14 18.9201 14 17.8 14L6.2 14C5.0799 14 4.51984 14 4.09202 14.218C3.71569 14.4097 3.40973 14.7157 3.21799 15.092C3 15.5198 3 16.0799 3 17.2L3 17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21H17.8Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
             </svg>
-            <p class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950">
+            <p
+              class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950"
+            >
               Unlimited fields
             </p>
           </div>
 
           <div class="flex flex-col items-center gap-3 md:flex-row">
-            <svg aria-hidden="true" class="w-6 h-6 shrink-0 stroke-blue-600" viewBox="0 0 24 24" fill="none"
-                 xmlns="http://www.w3.org/2000/svg">
+            <svg
+              aria-hidden="true"
+              class="w-6 h-6 shrink-0 stroke-blue-600"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M9 11L12 14L22 4M16 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V12"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
             </svg>
-            <p class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950">
+            <p
+              class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950"
+            >
               Multiple input types
             </p>
           </div>
 
           <div class="flex flex-col items-center gap-3 md:flex-row">
-            <svg aria-hidden="true" class="w-6 h-6 shrink-0 stroke-blue-600" viewBox="0 0 24 24" fill="none"
-                 xmlns="http://www.w3.org/2000/svg">
+            <svg
+              aria-hidden="true"
+              class="w-6 h-6 shrink-0 stroke-blue-600"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M22 11V8.2C22 7.0799 22 6.51984 21.782 6.09202C21.5903 5.71569 21.2843 5.40973 20.908 5.21799C20.4802 5 19.9201 5 18.8 5H5.2C4.0799 5 3.51984 5 3.09202 5.21799C2.71569 5.40973 2.40973 5.71569 2.21799 6.09202C2 6.51984 2 7.0799 2 8.2V11.8C2 12.9201 2 13.4802 2.21799 13.908C2.40973 14.2843 2.71569 14.5903 3.09202 14.782C3.51984 15 4.0799 15 5.2 15H11M12 10H12.005M17 10H17.005M7 10H7.005M19.25 17V15.25C19.25 14.2835 18.4665 13.5 17.5 13.5C16.5335 13.5 15.75 14.2835 15.75 15.25V17M12.25 10C12.25 10.1381 12.1381 10.25 12 10.25C11.8619 10.25 11.75 10.1381 11.75 10C11.75 9.86193 11.8619 9.75 12 9.75C12.1381 9.75 12.25 9.86193 12.25 10ZM17.25 10C17.25 10.1381 17.1381 10.25 17 10.25C16.8619 10.25 16.75 10.1381 16.75 10C16.75 9.86193 16.8619 9.75 17 9.75C17.1381 9.75 17.25 9.86193 17.25 10ZM7.25 10C7.25 10.1381 7.13807 10.25 7 10.25C6.86193 10.25 6.75 10.1381 6.75 10C6.75 9.86193 6.86193 9.75 7 9.75C7.13807 9.75 7.25 9.86193 7.25 10ZM15.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V18.6C21 18.0399 21 17.7599 20.891 17.546C20.7951 17.3578 20.6422 17.2049 20.454 17.109C20.2401 17 19.9601 17 19.4 17H15.6C15.0399 17 14.7599 17 14.546 17.109C14.3578 17.2049 14.2049 17.3578 14.109 17.546C14 17.7599 14 18.0399 14 18.6V19.4C14 19.9601 14 20.2401 14.109 20.454C14.2049 20.6422 14.3578 20.7951 14.546 20.891C14.7599 21 15.0399 21 15.6 21Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
             </svg>
-            <p class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950">
+            <p
+              class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950"
+            >
               Form password
             </p>
           </div>
 
           <div class="flex flex-col items-center gap-3 md:flex-row">
-            <svg aria-hidden="true" class="w-6 h-6 shrink-0 stroke-blue-600" viewBox="0 0 24 24" fill="none"
-                 xmlns="http://www.w3.org/2000/svg">
+            <svg
+              aria-hidden="true"
+              class="w-6 h-6 shrink-0 stroke-blue-600"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M18 15C16.3431 15 15 16.3431 15 18C15 19.6569 16.3431 21 18 21C19.6569 21 21 19.6569 21 18C21 16.3431 19.6569 15 18 15ZM18 15V8C18 7.46957 17.7893 6.96086 17.4142 6.58579C17.0391 6.21071 16.5304 6 16 6H13M6 9C7.65685 9 9 7.65685 9 6C9 4.34315 7.65685 3 6 3C4.34315 3 3 4.34315 3 6C3 7.65685 4.34315 9 6 9ZM6 9V21"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
             </svg>
-            <p class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950">
+            <p
+              class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950"
+            >
               Webhooks
             </p>
           </div>
 
           <div class="flex flex-col items-center gap-3 md:flex-row">
-            <svg aria-hidden="true" class="w-6 h-6 shrink-0 stroke-blue-600" viewBox="0 0 24 24" fill="none"
-                 xmlns="http://www.w3.org/2000/svg">
+            <svg
+              aria-hidden="true"
+              class="w-6 h-6 shrink-0 stroke-blue-600"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M21 8H3M16 2V5M8 2V5M12 18V12M9 15H15M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
             </svg>
-            <p class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950">
+            <p
+              class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950"
+            >
               Closing date
             </p>
           </div>
 
-          <div class="flex flex-col items-center col-span-2 gap-3 md:flex-row sm:col-span-1">
-            <svg aria-hidden="true" class="w-6 h-6 shrink-0 stroke-blue-600" viewBox="0 0 24 24" fill="none"
-                 xmlns="http://www.w3.org/2000/svg">
+          <div
+            class="flex flex-col items-center col-span-2 gap-3 md:flex-row sm:col-span-1"
+          >
+            <svg
+              aria-hidden="true"
+              class="w-6 h-6 shrink-0 stroke-blue-600"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
               <path
                 d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
               <path
                 d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
               <path
                 d="M19 6C19.5523 6 20 5.55228 20 5C20 4.44772 19.5523 4 19 4C18.4477 4 18 4.44772 18 5C18 5.55228 18.4477 6 19 6Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
               <path
                 d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
               <path
                 d="M19 20C19.5523 20 20 19.5523 20 19C20 18.4477 19.5523 18 19 18C18.4477 18 18 18.4477 18 19C18 19.5523 18.4477 20 19 20Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
               <path
                 d="M5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
               <path
                 d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
               <path
                 d="M5 20C5.55228 20 6 19.5523 6 19C6 18.4477 5.55228 18 5 18C4.44772 18 4 18.4477 4 19C4 19.5523 4.44772 20 5 20Z"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
             </svg>
-            <p class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950">
+            <p
+              class="text-base font-semibold sm:text-lg lg:text-xl text-gray-950"
+            >
               And much more...
             </p>
           </div>
         </div>
 
-        <div class="max-w-3xl p-6 mx-auto mt-12 sm:mt-16 bg-yellow-50 ring-1 ring-inset ring-yellow-200 rounded-2xl">
+        <div
+          class="max-w-3xl p-6 mx-auto mt-12 sm:mt-16 bg-yellow-50 ring-1 ring-inset ring-yellow-200 rounded-2xl"
+        >
           <div class="flex items-start gap-4">
-            <svg aria-hidden="true" class="w-8 h-8 shrink-0 stroke-yellow-500" viewBox="0 0 24 24" fill="none"
-                 xmlns="http://www.w3.org/2000/svg">
+            <svg
+              aria-hidden="true"
+              class="w-8 h-8 shrink-0 stroke-yellow-500"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <path
                 d="M12 21L11.8999 20.8499C11.2053 19.808 10.858 19.287 10.3991 18.9098C9.99286 18.5759 9.52476 18.3254 9.02161 18.1726C8.45325 18 7.82711 18 6.57482 18H5.2C4.07989 18 3.51984 18 3.09202 17.782C2.71569 17.5903 2.40973 17.2843 2.21799 16.908C2 16.4802 2 15.9201 2 14.8V6.2C2 5.07989 2 4.51984 2.21799 4.09202C2.40973 3.71569 2.71569 3.40973 3.09202 3.21799C3.51984 3 4.07989 3 5.2 3H5.6C7.84021 3 8.96031 3 9.81596 3.43597C10.5686 3.81947 11.1805 4.43139 11.564 5.18404C12 6.03968 12 7.15979 12 9.4M12 21V9.4M12 21L12.1001 20.8499C12.7947 19.808 13.142 19.287 13.6009 18.9098C14.0071 18.5759 14.4752 18.3254 14.9784 18.1726C15.5467 18 16.1729 18 17.4252 18H18.8C19.9201 18 20.4802 18 20.908 17.782C21.2843 17.5903 21.5903 17.2843 21.782 16.908C22 16.4802 22 15.9201 22 14.8V6.2C22 5.07989 22 4.51984 21.782 4.09202C21.5903 3.71569 21.2843 3.40973 20.908 3.21799C20.4802 3 19.9201 3 18.8 3H18.4C16.1598 3 15.0397 3 14.184 3.43597C13.4314 3.81947 12.8195 4.43139 12.436 5.18404C12 6.03968 12 7.15979 12 9.4"
-                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
             </svg>
             <div>
               <p class="text-lg font-semibold text-yellow-600">
                 Nonprofit & Student Discount — 50%
               </p>
               <p class="mt-1 text-base font-medium leading-7 text-yellow-600">
-                Whether your nonprofit is large or small, OpnForm’s online Form Builder helps your organization help
-                others. It takes just a few minutes to create and publish your forms online. As an exclusive benefit,
-                we offer nonprofits & students a 50-percent discount!
+                Whether your nonprofit is large or small, OpnForm’s online Form
+                Builder helps your organization help others. It takes just a few
+                minutes to create and publish your forms online. As an exclusive
+                benefit, we offer nonprofits & students a 50-percent discount!
               </p>
             </div>
           </div>
@@ -174,46 +303,64 @@
       </div>
     </section>
 
-    <section class="py-12 bg-gray-50 border-t border-gray-200 sm:py-16 lg:py-20 xl:py-24">
+    <section
+      class="py-12 bg-gray-50 border-t border-gray-200 sm:py-16 lg:py-20 xl:py-24"
+    >
       <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
         <div class="max-w-3xl mx-auto text-center">
-          <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl lg:leading-tight">
+          <h2
+            class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl lg:leading-tight"
+          >
             Got any question?
           </h2>
-          <p class="max-w-2xl mx-auto mt-4 text-base font-medium leading-7 text-gray-600 sm:text-lg sm:leading-8">
+          <p
+            class="max-w-2xl mx-auto mt-4 text-base font-medium leading-7 text-gray-600 sm:text-lg sm:leading-8"
+          >
             We've compiled a list of the most common questions we get asked.
           </p>
         </div>
 
         <dl
-          class="grid max-w-5xl grid-cols-1 mx-auto mt-12 gap-y-12 sm:grid-cols-2 sm:mt-16 sm:gap-x-8 sm:gap-y-12 lg:gap-x-10">
-          <div v-for="q in [
-            {
-              'question':'Is there a free version of OpnForm available?',
-              'answer':'Yes, OpnForm offers a free version with access to 99% of features, including unlimited forms, submissions, fields, and more. Our goal is to provide robust functionality for all users without limitations.',
-            },
-            {
-              'question':'What does the Pro Plan include?',
-              'answer':'The OpnForm Pro Plan is designed to meet the advanced needs of teams and creators. It includes features like form confirmation emails, Slack and Discord notifications, editable submissions, custom domain, custom code integration, larger file uploads, removal of OpnForm branding, priority support, and more.',
-            },
-            {
-              'question':'Can I try the Pro Plan before subscribing?',
-              'answer':'Absolutely! We offer a free 3-day trial of the OpnForm Pro Plan. This allows you to explore all the empowering features and experience the value it brings to your form-building process. The trial is automatically applied.',
-            },
-            {
-              'question':'Is there a discount for annual plans?',
-              'answer':'Yes, we offer a 20% discount for annual Pro Plan subscriptions. By choosing the yearly billing option, you can enjoy the same great features at a reduced cost.',
-            },
-            {
-              'question':'How does the nonprofit and student discount work?',
-              'answer':'OpnForm is committed to supporting nonprofits and students. We provide an exclusive 50% discount on the Pro Plan for nonprofit organizations and students. This discount helps you make the most of our form builder while staying within your budget.',
-            },
-            {
-              'question':'Can I cancel or change my plan at any time?',
-              'answer':'Yes, you have the flexibility to upgrade, downgrade, or cancel your OpnForm Pro Plan at any time. Changes will take effect immediately, and you\'ll only be billed based on the plan you\'re currently on.',
-            },
-          ]" :key="q.question">
-            <dt class="text-base font-semibold leading-7 text-gray-950 sm:text-lg sm:leading-8">
+          class="grid max-w-5xl grid-cols-1 mx-auto mt-12 gap-y-12 sm:grid-cols-2 sm:mt-16 sm:gap-x-8 sm:gap-y-12 lg:gap-x-10"
+        >
+          <div
+            v-for="q in [
+              {
+                question: 'Is there a free version of OpnForm available?',
+                answer:
+                  'Yes, OpnForm offers a free version with access to 99% of features, including unlimited forms, submissions, fields, and more. Our goal is to provide robust functionality for all users without limitations.',
+              },
+              {
+                question: 'What does the Pro Plan include?',
+                answer:
+                  'The OpnForm Pro Plan is designed to meet the advanced needs of teams and creators. It includes features like form confirmation emails, Slack and Discord notifications, editable submissions, custom domain, custom code integration, larger file uploads, removal of OpnForm branding, priority support, and more.',
+              },
+              {
+                question: 'Can I try the Pro Plan before subscribing?',
+                answer:
+                  'Absolutely! We offer a free 3-day trial of the OpnForm Pro Plan. This allows you to explore all the empowering features and experience the value it brings to your form-building process. The trial is automatically applied.',
+              },
+              {
+                question: 'Is there a discount for annual plans?',
+                answer:
+                  'Yes, we offer a 20% discount for annual Pro Plan subscriptions. By choosing the yearly billing option, you can enjoy the same great features at a reduced cost.',
+              },
+              {
+                question: 'How does the nonprofit and student discount work?',
+                answer:
+                  'OpnForm is committed to supporting nonprofits and students. We provide an exclusive 50% discount on the Pro Plan for nonprofit organizations and students. This discount helps you make the most of our form builder while staying within your budget.',
+              },
+              {
+                question: 'Can I cancel or change my plan at any time?',
+                answer:
+                  'Yes, you have the flexibility to upgrade, downgrade, or cancel your OpnForm Pro Plan at any time. Changes will take effect immediately, and you\'ll only be billed based on the plan you\'re currently on.',
+              },
+            ]"
+            :key="q.question"
+          >
+            <dt
+              class="text-base font-semibold leading-7 text-gray-950 sm:text-lg sm:leading-8"
+            >
               {{ q.question }}
             </dt>
             <dd class="mt-2 text-base font-medium leading-7 text-gray-600">
@@ -224,55 +371,61 @@
 
         <div class="mt-12 text-center sm:mt-16">
           <p class="text-base font-medium text-gray-950">
-            Didn't find the answer? <a href="#" @click.prevent="contactUs"
-                                       class="font-semibold text-blue-600 hover:underline">Contact us</a>
+            Didn't find the answer?
+            <a
+              href="#"
+              class="font-semibold text-blue-600 hover:underline"
+              @click.prevent="contactUs"
+            >Contact us</a>
           </p>
         </div>
       </div>
     </section>
 
-    <open-form-footer/>
+    <open-form-footer />
   </div>
 </template>
 
 <script>
-import { computed } from 'vue'
-import { useAuthStore } from '../stores/auth';
-import PricingTable from '../components/pages/pricing/PricingTable.vue'
+import { computed } from "vue"
+import { useAuthStore } from "../stores/auth"
+import PricingTable from "../components/pages/pricing/PricingTable.vue"
 
 export default {
-  components: {PricingTable},
-  layout: 'default',
+  components: { PricingTable },
+  layout: "default",
 
-  setup () {
+  setup() {
     useOpnSeoMeta({
-      title: 'Pricing',
-      description: 'All of our core features are free, and there is no quantity limit. You can also created more advanced and customized forms with OpnForms Pro.'
+      title: "Pricing",
+      description:
+        "All of our core features are free, and there is no quantity limit. You can also created more advanced and customized forms with OpnForms Pro.",
     })
 
     definePageMeta({
       middleware: [
-        function (to, from) {
+        function () {
           // Custom inline middleware
-          if (!useRuntimeConfig().public.paidPlansEnabled) {  // If no paid plan so no need this page
-            return navigateTo('/', { redirectCode: 301 })
+          if (!useRuntimeConfig().public.paidPlansEnabled) {
+            // If no paid plan so no need this page
+            return navigateTo("/", { redirectCode: 301 })
           }
         },
       ],
-    });
+    })
 
     const authStore = useAuthStore()
 
     return {
-      user : computed(() => authStore.user),
-      authenticated : computed(() => authStore.check)
+      user: computed(() => authStore.user),
+      authenticated: computed(() => authStore.check),
     }
   },
 
   methods: {
     contactUs() {
       useCrisp().openAndShowChat()
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/pages/privacy-policy.vue b/client/pages/privacy-policy.vue
index 1ef420af9..2322a0ebf 100644
--- a/client/pages/privacy-policy.vue
+++ b/client/pages/privacy-policy.vue
@@ -5,7 +5,10 @@
         <h1 class="sm:text-5xl">
           Privacy Policy
         </h1>
-        <NotionPage :block-map="blockMap" :loading="loading"  />
+        <NotionPage
+          :block-map="blockMap"
+          :loading="loading"
+        />
       </div>
     </div>
     <open-form-footer />
@@ -13,19 +16,21 @@
 </template>
 
 <script setup>
-import {useNotionPagesStore} from "~/stores/notion_pages.js";
-import {computed} from "vue";
+import { useNotionPagesStore } from "~/stores/notion_pages.js"
+import { computed } from "vue"
 
 useOpnSeoMeta({
-  title: 'Privacy Policy'
+  title: "Privacy Policy",
 })
 defineRouteRules({
-  swr: 3600
+  swr: 3600,
 })
 
 const notionPageStore = useNotionPagesStore()
-await notionPageStore.load('9c97349ceda7455aab9b341d1ff70f79')
+await notionPageStore.load("9c97349ceda7455aab9b341d1ff70f79")
 
 const loading = computed(() => notionPageStore.loading)
-const blockMap = computed(() => notionPageStore.getByKey('9c97349ceda7455aab9b341d1ff70f79'))
+const blockMap = computed(() =>
+  notionPageStore.getByKey("9c97349ceda7455aab9b341d1ff70f79"),
+)
 </script>
diff --git a/client/pages/register.vue b/client/pages/register.vue
index 17a4bb9c6..38ab2c61e 100644
--- a/client/pages/register.vue
+++ b/client/pages/register.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="flex mt-6 mb-10">
-      <div class="w-full md:max-w-6xl mx-auto px-4 flex items-center md:flex-row-reverse flex-wrap">
+      <div
+        class="w-full md:max-w-6xl mx-auto px-4 flex items-center md:flex-row-reverse flex-wrap"
+      >
         <div class="w-full lg:w-1/2 md:p-6">
           <app-sumo-register class="mb-10 p-6 lg:hidden" />
           <div class="border rounded-md p-6 shadow-md sticky top-4">
@@ -12,7 +14,7 @@
             <register-form />
           </div>
         </div>
-        <div class="w-full hidden lg:block lg:w-1/2 md:p-6 mt-8 md:mt-0 ">
+        <div class="w-full hidden lg:block lg:w-1/2 md:p-6 mt-8 md:mt-0">
           <app-sumo-register class="mb-10" />
           <h1 class="font-bold">
             Create beautiful forms and share them anywhere
@@ -22,26 +24,53 @@
           </p>
           <div class="flex flex-wrap justify-center">
             <p class="px-3 pb-3 text-sm text-gray-500">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
-                   stroke="currentColor" stroke-width="2"
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4 inline"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
               >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M5 13l4 4L19 7"
+                />
               </svg>
               Unlimited forms
             </p>
             <p class="px-3 pb-3 text-sm text-gray-500">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
-                   stroke="currentColor" stroke-width="2"
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4 inline"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
               >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M5 13l4 4L19 7"
+                />
               </svg>
               Unlimited fields
             </p>
             <p class="px-3 pb-3 text-sm text-gray-500">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
-                   stroke="currentColor" stroke-width="2"
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4 inline"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
               >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M5 13l4 4L19 7"
+                />
               </svg>
               Unlimited submissions
             </p>
@@ -60,28 +89,27 @@ import AppSumoRegister from "~/components/vendor/appsumo/AppSumoRegister.vue"
 export default {
   components: {
     AppSumoRegister,
-    RegisterForm
+    RegisterForm,
   },
 
   setup() {
     useOpnSeoMeta({
-      title: 'Register'
+      title: "Register",
     })
 
     definePageMeta({
-      middleware: "guest"
+      middleware: "guest",
     })
 
     defineRouteRules({
-      swr: 3600
+      swr: 3600,
     })
   },
 
-  data: () => ({
-  }),
+  data: () => ({}),
 
   computed: {},
 
-  methods: {}
+  methods: {},
 }
 </script>
diff --git a/client/pages/settings.vue b/client/pages/settings.vue
index 9bf166c57..7b00cda82 100644
--- a/client/pages/settings.vue
+++ b/client/pages/settings.vue
@@ -1,90 +1,95 @@
 <template>
-    <div class="bg-white">
-      <div class="flex bg-gray-50">
-        <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
-          <div class="pt-4 pb-0">
-            <div class="flex">
-              <h2 class="flex-grow text-gray-900">
-                My Account
-              </h2>
-            </div>
-            <ul class="flex text-gray-500">
-              <li>{{ user.email }}</li>
-            </ul>
+  <div class="bg-white">
+    <div class="flex bg-gray-50">
+      <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
+        <div class="pt-4 pb-0">
+          <div class="flex">
+            <h2 class="flex-grow text-gray-900">
+              My Account
+            </h2>
+          </div>
+          <ul class="flex text-gray-500">
+            <li>{{ user.email }}</li>
+          </ul>
 
-            <div class="mt-4 border-b border-gray-200 dark:border-gray-700">
-              <ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
-                <li v-for="(tab, i) in tabsList" :key="i+1" class="mr-6">
-                  <nuxt-link :to="{ name: tab.route }"
-                               class="hover:no-underline inline-block py-4 rounded-t-lg border-b-2 text-gray-500 hover:text-gray-600"
-                               active-class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
-                  >
-                    {{ tab.name }}
-                  </nuxt-link>
-                </li>
-              </ul>
-            </div>
+          <div class="mt-4 border-b border-gray-200 dark:border-gray-700">
+            <ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
+              <li
+                v-for="(tab, i) in tabsList"
+                :key="i + 1"
+                class="mr-6"
+              >
+                <nuxt-link
+                  :to="{ name: tab.route }"
+                  class="hover:no-underline inline-block py-4 rounded-t-lg border-b-2 text-gray-500 hover:text-gray-600"
+                  active-class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
+                >
+                  {{ tab.name }}
+                </nuxt-link>
+              </li>
+            </ul>
           </div>
         </div>
       </div>
-      <div class="flex bg-white">
-        <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
-          <div class="mt-8 pb-0">
-            <NuxtPage />
-          </div>
+    </div>
+    <div class="flex bg-white">
+      <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
+        <div class="mt-8 pb-0">
+          <NuxtPage />
         </div>
       </div>
     </div>
-  </template>
+  </div>
+</template>
 
-  <script setup>
-  import { computed } from 'vue'
-  import { useAuthStore } from '../stores/auth'
+<script setup>
+import { computed } from "vue"
+import { useAuthStore } from "../stores/auth"
 
-  definePageMeta({
-    middleware: "auth"
-  })
+definePageMeta({
+  middleware: "auth",
+})
 
-  useOpnSeoMeta({
-    title: 'Settings'
-  })
+useOpnSeoMeta({
+  title: "Settings",
+})
 
-  const authStore = useAuthStore()
-  const user = computed(() => authStore.user)
-  const tabsList = computed(() => {
-    const tabs = [
-      {
-        name: 'Profile',
-        route: 'settings-profile'
-      },
-      {
-        name: 'Workspace Settings',
-        route: 'settings-workspace'
-      },
-      {
-        name: 'Password',
-        route: 'settings-password'
-      },
-      {
-        name: 'Delete Account',
-        route: 'settings-account'
-      }
-    ]
+const authStore = useAuthStore()
+const user = computed(() => authStore.user)
+const tabsList = computed(() => {
+  const tabs = [
+    {
+      name: "Profile",
+      route: "settings-profile",
+    },
+    {
+      name: "Workspace Settings",
+      route: "settings-workspace",
+    },
+    {
+      name: "Password",
+      route: "settings-password",
+    },
+    {
+      name: "Delete Account",
+      route: "settings-account",
+    },
+  ]
 
-    if (user?.value?.is_subscribed) {
-      tabs.splice(1, 0, {
-        name: 'Billing',
-        route: 'settings-billing'
-      })
-    }
+  if (user?.value?.is_subscribed) {
+    tabs.splice(1, 0, {
+      name: "Billing",
+      route: "settings-billing",
+    })
+  }
 
-    if (user?.value?.admin) {
-      tabs.push({
-        name: 'Admin',
-        route: 'settings-admin'
-      })
-    }
+  if (user?.value?.admin) {
+    tabs.push({
+      name: "Admin",
+      route: "settings-admin",
+    })
+  }
 
-    return tabs
-  })
-  </script>
+  return tabs
+})
+</script>
diff --git a/client/pages/settings/account.vue b/client/pages/settings/account.vue
index aae5e1ddb..afb7405a5 100644
--- a/client/pages/settings/account.vue
+++ b/client/pages/settings/account.vue
@@ -1,45 +1,58 @@
 <template>
   <div>
-    <h3 class="font-semibold text-2xl text-gray-900">Danger zone</h3>
+    <h3 class="font-semibold text-2xl text-gray-900">
+      Danger zone
+    </h3>
     <p class="text-gray-600 text-sm mt-2">
-      This will permanently delete your entire account. All your forms, submissions and workspaces will be deleted.
-    <span class="text-red-500">
-      This cannot be undone.
-    </span>
+      This will permanently delete your entire account. All your forms,
+      submissions and workspaces will be deleted.
+      <span class="text-red-500"> This cannot be undone. </span>
     </p>
 
     <!-- Submit Button -->
-    <v-button :loading="loading" class="mt-4" color="red" @click="useAlert().confirm('Do you really want to delete your account?',deleteAccount)">
+    <v-button
+      :loading="loading"
+      class="mt-4"
+      color="red"
+      @click="
+        useAlert().confirm(
+          'Do you really want to delete your account?',
+          deleteAccount,
+        )
+      "
+    >
       Delete account
     </v-button>
   </div>
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router"
 
 const router = useRouter()
 const authStore = useAuthStore()
 let loading = false
 
 useOpnSeoMeta({
-  title: 'Account'
+  title: "Account",
 })
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 
 const deleteAccount = () => {
   loading = true
-  opnFetch('/user', {method:'DELETE'}).then(async (data) => {
-    loading = false
-    useAlert().success(data.message)
+  opnFetch("/user", { method: "DELETE" })
+    .then(async (data) => {
+      loading = false
+      useAlert().success(data.message)
 
-    authStore.logout()
-    router.push({ name: 'login' })
-  }).catch((error) => {
-    useAlert().error(error.data.message)
-    loading = false
-  })
+      authStore.logout()
+      router.push({ name: "login" })
+    })
+    .catch((error) => {
+      useAlert().error(error.data.message)
+      loading = false
+    })
 }
 </script>
diff --git a/client/pages/settings/admin.vue b/client/pages/settings/admin.vue
index 4861e9583..4e5841888 100644
--- a/client/pages/settings/admin.vue
+++ b/client/pages/settings/admin.vue
@@ -1,83 +1,108 @@
 <template>
   <div>
-    <h3 class="font-semibold text-2xl text-gray-900">Admin settings</h3>
+    <h3 class="font-semibold text-2xl text-gray-900">
+      Admin settings
+    </h3>
     <small class="text-gray-600">Manage settings.</small>
 
-
     <h3 class="mt-3 text-lg font-semibold mb-4">
       Tools
     </h3>
     <div class="flex flex-wrap mb-5">
-      <a :href="statsUrl" target="_blank">
-        <v-button class="mx-1" color="gray" shade="lighter">
-          Stats
-        </v-button>
+      <a
+        :href="statsUrl"
+        target="_blank"
+      >
+        <v-button
+          class="mx-1"
+          color="gray"
+          shade="lighter"
+        > Stats </v-button>
       </a>
-      <a :href="horizonUrl" target="_blank">
-        <v-button class="mx-1" color="gray" shade="lighter">
-          Horizon
-        </v-button>
+      <a
+        :href="horizonUrl"
+        target="_blank"
+      >
+        <v-button
+          class="mx-1"
+          color="gray"
+          shade="lighter"
+        > Horizon </v-button>
       </a>
     </div>
     <h3 class="text-lg font-semibold mb-4">
       Impersonate User
     </h3>
-    <form @submit.prevent="impersonate" @keydown="form.onKeydown($event)">
+    <form
+      @submit.prevent="impersonate"
+      @keydown="form.onKeydown($event)"
+    >
       <!-- Password -->
-      <text-input name="identifier" :form="form" label="Identifier"
-                  :required="true" help="User Id, User Email or Form Slug"
+      <text-input
+        name="identifier"
+        :form="form"
+        label="Identifier"
+        :required="true"
+        help="User Id, User Email or Form Slug"
       />
 
       <!-- Submit Button -->
-      <v-button :loading="loading" class="mt-4">Impersonate User</v-button>
+      <v-button
+        :loading="loading"
+        class="mt-4"
+      >
+        Impersonate User
+      </v-button>
     </form>
   </div>
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
-import {opnFetch} from "~/composables/useOpnApi.js";
-import {fetchAllWorkspaces} from "~/stores/workspaces.js";
+import { useRouter } from "vue-router"
+import { opnFetch } from "~/composables/useOpnApi.js"
+import { fetchAllWorkspaces } from "~/stores/workspaces.js"
 
 definePageMeta({
-  middleware: "moderator"
+  middleware: "moderator",
 })
 
 useOpnSeoMeta({
-  title: 'Admin'
+  title: "Admin",
 })
 
 const authStore = useAuthStore()
 const workspacesStore = useWorkspacesStore()
 const router = useRouter()
-let form = useForm({
-  identifier: ''
+const form = useForm({
+  identifier: "",
 })
 const loading = ref(false)
 
 const runtimeConfig = useRuntimeConfig()
-const statsUrl = runtimeConfig.public.apiBase + '/stats'
-const horizonUrl = runtimeConfig.public.apiBase + '/horizon'
+const statsUrl = runtimeConfig.public.apiBase + "/stats"
+const horizonUrl = runtimeConfig.public.apiBase + "/horizon"
 
 const impersonate = () => {
   loading.value = true
   authStore.startImpersonating()
-  opnFetch('/admin/impersonate/' + encodeURI(form.identifier)).then(async (data) => {
-    // Save the token.
-    authStore.setToken(data.token, false)
+  opnFetch("/admin/impersonate/" + encodeURI(form.identifier))
+    .then(async (data) => {
+      // Save the token.
+      authStore.setToken(data.token, false)
 
-    // Fetch the user.
-    const userData = await opnFetch('user')
-    authStore.setUser(userData)
-    const workspaces = await fetchAllWorkspaces()
-    workspacesStore.set(workspaces.data.value)
-    loading.value = false
+      // Fetch the user.
+      const userData = await opnFetch("user")
+      authStore.setUser(userData)
+      const workspaces = await fetchAllWorkspaces()
+      workspacesStore.set(workspaces.data.value)
+      loading.value = false
 
-    router.push({ name: 'home' })
-  }).catch((error) => {
-    console.error(error)
-    useAlert().error(error.data.message)
-    loading.value = false
-  })
+      router.push({ name: "home" })
+    })
+    .catch((error) => {
+      console.error(error)
+      useAlert().error(error.data.message)
+      loading.value = false
+    })
 }
 </script>
diff --git a/client/pages/settings/billing.vue b/client/pages/settings/billing.vue
index df98d0998..81d85c193 100644
--- a/client/pages/settings/billing.vue
+++ b/client/pages/settings/billing.vue
@@ -5,11 +5,16 @@
     </h3>
 
     <template v-if="user.has_customer_id">
-      <small class="text-gray-600">Manage your billing. Download invoices, update your plan, or cancel it at any
-        time.</small>
+      <small class="text-gray-600">Manage your billing. Download invoices, update your plan, or cancel it
+        at any time.</small>
 
       <div class="mt-4">
-        <v-button color="gray" shade="light" :loading="billingLoading" @click.prevent="openBillingDashboard">
+        <v-button
+          color="gray"
+          shade="light"
+          :loading="billingLoading"
+          @click.prevent="openBillingDashboard"
+        >
           Manage Subscription
         </v-button>
       </div>
@@ -20,30 +25,33 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import { useAuthStore } from '../../stores/auth'
-import AppSumoBilling from '../../components/vendor/appsumo/AppSumoBilling.vue'
+import { computed } from "vue"
+import { useAuthStore } from "../../stores/auth"
+import AppSumoBilling from "../../components/vendor/appsumo/AppSumoBilling.vue"
 
 useOpnSeoMeta({
-  title: 'Billing'
+  title: "Billing",
 })
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 
 const authStore = useAuthStore()
-let user = computed(() => authStore.user)
+const user = computed(() => authStore.user)
 let billingLoading = false
 
 const openBillingDashboard = () => {
   billingLoading = true
-  opnFetch('/subscription/billing-portal').then((data) => {
-    const url = data.portal_url
-    window.location = url
-  }).catch((error) => {
-    useAlert().error(error.data.message)
-  }).finally(() => {
-    billingLoading = false
-  })
+  opnFetch("/subscription/billing-portal")
+    .then((data) => {
+      const url = data.portal_url
+      window.location = url
+    })
+    .catch((error) => {
+      useAlert().error(error.data.message)
+    })
+    .finally(() => {
+      billingLoading = false
+    })
 }
 </script>
diff --git a/client/pages/settings/index.vue b/client/pages/settings/index.vue
index c12a212ca..be3048840 100644
--- a/client/pages/settings/index.vue
+++ b/client/pages/settings/index.vue
@@ -1,7 +1,7 @@
 <script setup>
 definePageMeta({
-  redirect: to => {
-    return { name: 'settings-profile'}
-  }
+  redirect: () => {
+    return { name: "settings-profile" }
+  },
 })
 </script>
diff --git a/client/pages/settings/password.vue b/client/pages/settings/password.vue
index 5d836b5f2..b81a3a5d5 100644
--- a/client/pages/settings/password.vue
+++ b/client/pages/settings/password.vue
@@ -5,19 +5,34 @@
     </h3>
     <small class="text-gray-600">Manage your password.</small>
 
-    <form class="mt-3" @submit.prevent="update" @keydown="form.onKeydown($event)">
+    <form
+      class="mt-3"
+      @submit.prevent="update"
+      @keydown="form.onKeydown($event)"
+    >
       <!-- Password -->
-      <text-input native-type="password"
-                  name="password" :form="form" label="Password" :required="true"
+      <text-input
+        native-type="password"
+        name="password"
+        :form="form"
+        label="Password"
+        :required="true"
       />
 
       <!-- Password Confirmation-->
-      <text-input native-type="password"
-                  name="password_confirmation" :form="form" label="Confirm Password" :required="true"
+      <text-input
+        native-type="password"
+        name="password_confirmation"
+        :form="form"
+        label="Confirm Password"
+        :required="true"
       />
 
       <!-- Submit Button -->
-      <v-button :loading="form.busy" class="mt-4">
+      <v-button
+        :loading="form.busy"
+        class="mt-4"
+      >
         Update password
       </v-button>
     </form>
@@ -26,23 +41,26 @@
 
 <script setup>
 useOpnSeoMeta({
-  title: 'Password'
+  title: "Password",
 })
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 
-let form = useForm({
-  password: '',
-  password_confirmation: ''
+const form = useForm({
+  password: "",
+  password_confirmation: "",
 })
 
 const update = () => {
-  form.patch('/settings/password').then((response) => {
-    form.reset()
-    useAlert().success('Password updated.')
-  }).catch((error) => {
-    console.error(error)
-  })
+  form
+    .patch("/settings/password")
+    .then(() => {
+      form.reset()
+      useAlert().success("Password updated.")
+    })
+    .catch((error) => {
+      console.error(error)
+    })
 }
 </script>
diff --git a/client/pages/settings/profile.vue b/client/pages/settings/profile.vue
index 6a193c348..7c4ebb1b7 100644
--- a/client/pages/settings/profile.vue
+++ b/client/pages/settings/profile.vue
@@ -5,15 +5,32 @@
     </h3>
     <small class="text-gray-600">Update your username and manage your account details.</small>
 
-    <form class="mt-3" @submit.prevent="update" @keydown="form.onKeydown($event)">
+    <form
+      class="mt-3"
+      @submit.prevent="update"
+      @keydown="form.onKeydown($event)"
+    >
       <!-- Name -->
-      <text-input name="name" :form="form" label="Name" :required="true" />
+      <text-input
+        name="name"
+        :form="form"
+        label="Name"
+        :required="true"
+      />
 
       <!-- Email -->
-      <text-input name="email" :form="form" label="Email" :required="true" />
+      <text-input
+        name="email"
+        :form="form"
+        label="Email"
+        :required="true"
+      />
 
       <!-- Submit Button -->
-      <v-button :loading="form.busy" class="mt-4">
+      <v-button
+        :loading="form.busy"
+        class="mt-4"
+      >
         Save changes
       </v-button>
     </form>
@@ -25,27 +42,27 @@ const authStore = useAuthStore()
 const user = computed(() => authStore.user)
 
 useOpnSeoMeta({
-  title: 'Profile'
+  title: "Profile",
 })
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 
-let form = useForm({
-  name: '',
-  email: ''
+const form = useForm({
+  name: "",
+  email: "",
 })
 
 const update = () => {
-  form.patch('/settings/profile').then((response) => {
+  form.patch("/settings/profile").then((response) => {
     authStore.updateUser(response)
-    useAlert().success('Your info has been updated!')
+    useAlert().success("Your info has been updated!")
   })
 }
 
 onBeforeMount(() => {
   // Fill the form with user data.
-  form.keys().forEach(key => {
+  form.keys().forEach((key) => {
     form[key] = user.value[key]
   })
 })
diff --git a/client/pages/settings/workspace.vue b/client/pages/settings/workspace.vue
index 7da8ff933..e33bc7794 100644
--- a/client/pages/settings/workspace.vue
+++ b/client/pages/settings/workspace.vue
@@ -7,29 +7,48 @@
         </h3>
         <small class="text-gray-600">Manage your workspaces.</small>
       </div>
-      <v-button color="outline-blue" :loading="loading" @click="workspaceModal=true">
-        <svg class="inline -mt-1 mr-1 h-4 w-4" viewBox="0 0 14 14" fill="none"
-             xmlns="http://www.w3.org/2000/svg"
+      <v-button
+        color="outline-blue"
+        :loading="loading"
+        @click="workspaceModal = true"
+      >
+        <svg
+          class="inline -mt-1 mr-1 h-4 w-4"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <path d="M6.99996 1.16699V12.8337M1.16663 7.00033H12.8333" stroke="currentColor" stroke-width="1.67"
-                stroke-linecap="round" stroke-linejoin="round"
+          <path
+            d="M6.99996 1.16699V12.8337M1.16663 7.00033H12.8333"
+            stroke="currentColor"
+            stroke-width="1.67"
+            stroke-linecap="round"
+            stroke-linejoin="round"
           />
         </svg>
         Create new workspace
       </v-button>
     </div>
 
-    <div v-if="loading" class="w-full text-blue-500 text-center">
+    <div
+      v-if="loading"
+      class="w-full text-blue-500 text-center"
+    >
       <Loader class="h-10 w-10 p-5" />
     </div>
     <div v-else-if="workspace">
       <div class="mt-4 flex group bg-white items-center">
         <div class="flex space-x-4 flex-grow items-center">
-          <img v-if="isUrl(workspace.icon)" :src="workspace.icon" :alt="workspace.name + ' icon'"
-               class="rounded-full h-12 w-12"
-          />
-          <div v-else class="rounded-2xl bg-gray-100 h-12 w-12 text-2xl pt-2 text-center overflow-hidden"
-               v-text="workspace.icon"
+          <img
+            v-if="isUrl(workspace.icon)"
+            :src="workspace.icon"
+            :alt="workspace.name + ' icon'"
+            class="rounded-full h-12 w-12"
+          >
+          <div
+            v-else
+            class="rounded-2xl bg-gray-100 h-12 w-12 text-2xl pt-2 text-center overflow-hidden"
+            v-text="workspace.icon"
           />
           <div class="space-y-4 py-1">
             <div class="font-bold truncate">
@@ -40,38 +59,70 @@
       </div>
 
       <template v-if="customDomainsEnabled">
-        <text-area-input :form="customDomainsForm" name="custom_domains" class="mt-4" :required="false"
-                         :disabled="!workspace.is_pro"
-                         label="Workspace Custom Domains" wrapper-class="" placeholder="yourdomain.com - 1 per line"
+        <text-area-input
+          :form="customDomainsForm"
+          name="custom_domains"
+          class="mt-4"
+          :required="false"
+          :disabled="!workspace.is_pro"
+          label="Workspace Custom Domains"
+          wrapper-class=""
+          placeholder="yourdomain.com - 1 per line"
         />
         <p class="text-gray-500 text-sm">
-          Read our <a href="#"
-                      @click.prevent="crisp.openHelpdeskArticle('how-to-use-my-own-domain-9m77g7')"
-        >custom domain instructions</a> to learn how to use your own domain.
+          Read our
+          <a
+            href="#"
+            @click.prevent="
+              crisp.openHelpdeskArticle('how-to-use-my-own-domain-9m77g7')
+            "
+          >custom domain instructions</a>
+          to learn how to use your own domain.
         </p>
       </template>
 
       <div class="flex flex-wrap justify-between gap-2 mt-4">
-        <v-button v-if="customDomainsEnabled" class="w-full sm:w-auto" :loading="customDomainsLoading"
-                  @click="saveChanges">
-          <svg class="w-4 h-4 text-white inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
-               xmlns="http://www.w3.org/2000/svg"
+        <v-button
+          v-if="customDomainsEnabled"
+          class="w-full sm:w-auto"
+          :loading="customDomainsLoading"
+          @click="saveChanges"
+        >
+          <svg
+            class="w-4 h-4 text-white inline mr-1 -mt-1"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
           >
             <path
               d="M17 21V13H7V21M7 3V8H15M19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16L21 8V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21Z"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
             />
           </svg>
           Save Domains
         </v-button>
-        <v-button v-if="workspaces.length > 1" color="white" class="group w-full sm:w-auto" :loading="loading"
-                  @click="deleteWorkspace(workspace.id)"
+        <v-button
+          v-if="workspaces.length > 1"
+          color="white"
+          class="group w-full sm:w-auto"
+          :loading="loading"
+          @click="deleteWorkspace(workspace.id)"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 -mt-1 inline group-hover:text-red-700" fill="none"
-               viewBox="0 0 24 24" stroke="currentColor"
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5 -mt-1 inline group-hover:text-red-700"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
           >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
             />
           </svg>
           Remove workspace
@@ -80,12 +131,24 @@
     </div>
 
     <!--  Workspace modal  -->
-    <modal :show="workspaceModal" max-width="lg" @close="workspaceModal=false">
+    <modal
+      :show="workspaceModal"
+      max-width="lg"
+      @close="workspaceModal = false"
+    >
       <template #icon>
-        <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          class="w-8 h-8"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path
             d="M12 8V16M8 12H16M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
           />
         </svg>
       </template>
@@ -93,18 +156,32 @@
         Create Workspace
       </template>
       <div class="px-4">
-        <form @submit.prevent="createWorkspace" @keydown="form.onKeydown($event)">
+        <form
+          @submit.prevent="createWorkspace"
+          @keydown="form.onKeydown($event)"
+        >
           <div>
-            <text-input name="name" class="mt-4" :form="form" :required="true"
-                        label="Workspace Name"
+            <text-input
+              name="name"
+              class="mt-4"
+              :form="form"
+              :required="true"
+              label="Workspace Name"
             />
-            <text-input name="emoji" class="mt-4" :form="form" :required="false"
-                        label="Emoji"
+            <text-input
+              name="emoji"
+              class="mt-4"
+              :form="form"
+              :required="false"
+              label="Emoji"
             />
           </div>
 
           <div class="w-full mt-6">
-            <v-button :loading="form.busy" class="w-full my-3">
+            <v-button
+              :loading="form.busy"
+              class="w-full my-3"
+            >
               Save
             </v-button>
           </div>
@@ -115,37 +192,42 @@
 </template>
 
 <script setup>
-import {watch} from "vue";
-import {fetchAllWorkspaces} from "~/stores/workspaces.js";
+import { watch } from "vue"
+import { fetchAllWorkspaces } from "~/stores/workspaces.js"
 
 const crisp = useCrisp()
 const workspacesStore = useWorkspacesStore()
 const workspaces = computed(() => workspacesStore.getAll)
-let loading = computed(() => workspacesStore.loading)
+const loading = computed(() => workspacesStore.loading)
 
 useOpnSeoMeta({
-  title: 'Workspaces'
+  title: "Workspaces",
 })
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 
-let form = useForm({
-  name: '',
-  emoji: ''
+const form = useForm({
+  name: "",
+  emoji: "",
 })
-let workspaceModal = ref(false)
-let customDomainsForm = useForm({
-  custom_domain: ''
+const workspaceModal = ref(false)
+const customDomainsForm = useForm({
+  custom_domain: "",
 })
-let customDomainsLoading = ref(false)
+const customDomainsLoading = ref(false)
 
-let workspace = computed(() => workspacesStore.getCurrent)
-let customDomainsEnabled = computed(() => useRuntimeConfig().public.customDomainsEnabled)
+const workspace = computed(() => workspacesStore.getCurrent)
+const customDomainsEnabled = computed(
+  () => useRuntimeConfig().public.customDomainsEnabled,
+)
 
-watch(() => workspace, () => {
-  initCustomDomains()
-})
+watch(
+  () => workspace,
+  () => {
+    initCustomDomains()
+  },
+)
 
 onMounted(() => {
   fetchAllWorkspaces()
@@ -157,56 +239,72 @@ const saveChanges = () => {
   customDomainsLoading.value = true
 
   // Update the workspace custom domain
-  customDomainsForm.put('/open/workspaces/' + workspace.value.id + '/custom-domains', {
-    data: {
-      custom_domains: customDomainsForm?.custom_domains?.split('\n')
-        .map(domain => domain ? domain.trim() : null)
-        .filter(domain => domain && domain.length > 0)
-    }
-  }).then((data) => {
-    workspacesStore.save(data)
-    useAlert().success('Custom domains saved.')
-  }).catch((error) => {
-    useAlert().error('Failed to update custom domains: ' + error.response.data.message)
-  }).finally(() => {
-    customDomainsLoading.value = false
-  })
+  customDomainsForm
+    .put("/open/workspaces/" + workspace.value.id + "/custom-domains", {
+      data: {
+        custom_domains: customDomainsForm?.custom_domains
+          ?.split("\n")
+          .map((domain) => (domain ? domain.trim() : null))
+          .filter((domain) => domain && domain.length > 0),
+      },
+    })
+    .then((data) => {
+      workspacesStore.save(data)
+      useAlert().success("Custom domains saved.")
+    })
+    .catch((error) => {
+      useAlert().error(
+        "Failed to update custom domains: " + error.response.data.message,
+      )
+    })
+    .finally(() => {
+      customDomainsLoading.value = false
+    })
 }
 
 const initCustomDomains = () => {
   if (!workspace || !workspace.value.custom_domains) return
-  customDomainsForm.custom_domains = workspace.value?.custom_domains.join('\n')
+  customDomainsForm.custom_domains = workspace.value?.custom_domains.join("\n")
 }
 
 const deleteWorkspace = (workspaceId) => {
   if (workspaces.length <= 1) {
-    useAlert().error('You cannot delete your only workspace.')
+    useAlert().error("You cannot delete your only workspace.")
     return
   }
-  useAlert().confirm('Do you really want to delete this workspace? All forms created in this workspace will be removed.', () => {
-    opnFetch('/open/workspaces/' + workspaceId, {method: 'DELETE'}).then((data) => {
-      useAlert().success('Workspace successfully removed.')
-      workspacesStore.remove(workspaceId)
-    })
-  })
+  useAlert().confirm(
+    "Do you really want to delete this workspace? All forms created in this workspace will be removed.",
+    () => {
+      opnFetch("/open/workspaces/" + workspaceId, { method: "DELETE" }).then(
+        () => {
+          useAlert().success("Workspace successfully removed.")
+          workspacesStore.remove(workspaceId)
+        },
+      )
+    },
+  )
 }
 
 const isUrl = (str) => {
-  const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
-    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
-    '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
-    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
-    '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
-    '(\\#[-a-z\\d_]*)?$', 'i') // fragment locator
+  const pattern = new RegExp(
+    "^(https?:\\/\\/)?" + // protocol
+      "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
+      "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
+      "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
+      "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
+      "(\\#[-a-z\\d_]*)?$",
+    "i",
+  ) // fragment locator
   return !!pattern.test(str)
 }
 const createWorkspace = () => {
-  form.post('/open/workspaces/create').then((data) => {
+  form.post("/open/workspaces/create").then((data) => {
     workspacesStore.save(data.workspace)
     workspacesStore.currentId = data.workspace.id
     workspaceModal.value = false
-    useAlert().success('Workspace successfully created! You are now editing settings for your new workspace.')
+    useAlert().success(
+      "Workspace successfully created! You are now editing settings for your new workspace.",
+    )
   })
 }
-
 </script>
diff --git a/client/pages/subscriptions/error.vue b/client/pages/subscriptions/error.vue
index 871eaa9d1..42e4779a9 100644
--- a/client/pages/subscriptions/error.vue
+++ b/client/pages/subscriptions/error.vue
@@ -1,33 +1,34 @@
 <template />
 
 <script>
-import { computed } from 'vue'
-import { useAuthStore } from '../../stores/auth'
+import { computed } from "vue"
+import { useAuthStore } from "../../stores/auth"
 
 export default {
-  components: { },
-  layout: 'default',
-  middleware: 'auth',
+  components: {},
+  layout: "default",
+  middleware: "auth",
 
-  setup () {
+  setup() {
     useOpnSeoMeta({
-      title: 'Error'
+      title: "Error",
     })
 
     const authStore = useAuthStore()
     return {
-      authenticated : computed(() => authStore.check),
+      authenticated: computed(() => authStore.check),
     }
   },
 
-  data: () => ({
-  }),
+  data: () => ({}),
 
-  mounted () {
-    this.$router.push({ name: 'pricing' })
-    useAlert().error('Unfortunately we could not confirm your subscription. Please try again and contact us if the issue persists.')
-  },
+  computed: {},
 
-  computed: {}
+  mounted() {
+    this.$router.push({ name: "pricing" })
+    useAlert().error(
+      "Unfortunately we could not confirm your subscription. Please try again and contact us if the issue persists.",
+    )
+  },
 }
 </script>
diff --git a/client/pages/subscriptions/success.vue b/client/pages/subscriptions/success.vue
index 83e7db38e..44869a29e 100644
--- a/client/pages/subscriptions/success.vue
+++ b/client/pages/subscriptions/success.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="flex flex-col min-h-screen">
-    <div class="w-full md:max-w-3xl md:mx-auto px-4 mb-10 md:pb-20 md:pt-16 text-center flex-grow">
+    <div
+      class="w-full md:max-w-3xl md:mx-auto px-4 mb-10 md:pb-20 md:pt-16 text-center flex-grow"
+    >
       <h1 class="text-4xl font-semibold">
         Thank you!
       </h1>
@@ -16,63 +18,71 @@
 </template>
 
 <script>
-import { computed } from 'vue'
-import { useAuthStore } from '../../stores/auth'
+import { computed } from "vue"
+import { useAuthStore } from "../../stores/auth"
 
 export default {
-  layout: 'default',
-  middleware: 'auth',
+  layout: "default",
+  middleware: "auth",
 
-  setup () {
+  setup() {
     useOpnSeoMeta({
-      title: 'Subscription Success'
+      title: "Subscription Success",
     })
 
     const authStore = useAuthStore()
     return {
       authStore,
-      authenticated : computed(() => authStore.check),
-      user : computed(() => authStore.user),
-      crisp: useCrisp()
+      authenticated: computed(() => authStore.check),
+      user: computed(() => authStore.user),
+      crisp: useCrisp(),
     }
   },
 
   data: () => ({
-    interval: null
+    interval: null,
   }),
 
-  mounted () {
+  computed: {},
+
+  mounted() {
     this.redirectIfSubscribed()
     this.interval = setInterval(() => this.checkSubscription(), 5000)
   },
 
-  beforeUnmount () {
+  beforeUnmount() {
     clearInterval(this.interval)
   },
 
   methods: {
-    async checkSubscription () {
+    async checkSubscription() {
       // Fetch the user.
       await this.authStore.fetchUser()
       this.redirectIfSubscribed()
     },
-    redirectIfSubscribed () {
+    redirectIfSubscribed() {
       if (this.user.is_subscribed) {
-        useAmplitude().logEvent('subscribed', { plan: this.user.has_enterprise_subscription ? 'enterprise' : 'pro' })
-        this.crisp.pushEvent('subscribed', { plan: this.user.has_enterprise_subscription ? 'enterprise' : 'pro' })
-        this.$router.push({ name: 'home' })
+        useAmplitude().logEvent("subscribed", {
+          plan: this.user.has_enterprise_subscription ? "enterprise" : "pro",
+        })
+        this.crisp.pushEvent("subscribed", {
+          plan: this.user.has_enterprise_subscription ? "enterprise" : "pro",
+        })
+        this.$router.push({ name: "home" })
 
         if (this.user.has_enterprise_subscription) {
-          useAlert().success('Awesome! Your subscription to OpnForm is now confirmed! You now have access to all Enterprise ' +
-            'features. No need to invite your teammates, just ask them to create a OpnForm account and to connect the same Notion workspace. Feel free to contact us if you have any question 🙌')
+          useAlert().success(
+            "Awesome! Your subscription to OpnForm is now confirmed! You now have access to all Enterprise " +
+              "features. No need to invite your teammates, just ask them to create a OpnForm account and to connect the same Notion workspace. Feel free to contact us if you have any question 🙌",
+          )
         } else {
-          useAlert().success('Awesome! Your subscription to OpnForm is now confirmed! You now have access to all Pro ' +
-            'features. Feel free to contact us if you have any question 🙌')
+          useAlert().success(
+            "Awesome! Your subscription to OpnForm is now confirmed! You now have access to all Pro " +
+              "features. Feel free to contact us if you have any question 🙌",
+          )
         }
       }
-    }
+    },
   },
-
-  computed: {}
 }
 </script>
diff --git a/client/pages/templates/[slug].vue b/client/pages/templates/[slug].vue
index 4e594ddc9..0ae1c615f 100644
--- a/client/pages/templates/[slug].vue
+++ b/client/pages/templates/[slug].vue
@@ -1,52 +1,89 @@
 <template>
   <div class="flex flex-col min-h-full">
-    <breadcrumb :path="breadcrumbs" v-if="template">
-        <template #left>
-          <div v-if="canEditTemplate" class="ml-5">
-            <v-button color="gray" size="small" @click.prevent="showFormTemplateModal=true">
-              Edit Template
-            </v-button>
-            <form-template-modal v-if="form" :form="form" :template="template" :show="showFormTemplateModal"
-                                 @close="showFormTemplateModal=false"
-            />
-          </div>
-        </template>
-        <template #right>
-          <v-button v-if="canEditTemplate" v-track.copy_template_button_clicked size="small" color="white" class="mr-5"
-                    @click.prevent="copyTemplateUrl"
-          >
-            Copy Template URL
-          </v-button>
-          <v-button v-track.use_template_button_clicked size="small" class="mr-5"
-                    :to="createFormWithTemplateUrl"
+    <breadcrumb
+      v-if="template"
+      :path="breadcrumbs"
+    >
+      <template #left>
+        <div
+          v-if="canEditTemplate"
+          class="ml-5"
+        >
+          <v-button
+            color="gray"
+            size="small"
+            @click.prevent="showFormTemplateModal = true"
           >
-            Use this template
+            Edit Template
           </v-button>
-        </template>
+          <form-template-modal
+            v-if="form"
+            :form="form"
+            :template="template"
+            :show="showFormTemplateModal"
+            @close="showFormTemplateModal = false"
+          />
+        </div>
+      </template>
+      <template #right>
+        <v-button
+          v-if="canEditTemplate"
+          v-track.copy_template_button_clicked
+          size="small"
+          color="white"
+          class="mr-5"
+          @click.prevent="copyTemplateUrl"
+        >
+          Copy Template URL
+        </v-button>
+        <v-button
+          v-track.use_template_button_clicked
+          size="small"
+          class="mr-5"
+          :to="createFormWithTemplateUrl"
+        >
+          Use this template
+        </v-button>
+      </template>
     </breadcrumb>
 
-    <p v-if="template === null || !template" class="text-center my-4">
+    <p
+      v-if="template === null || !template"
+      class="text-center my-4"
+    >
       We could not find this template.
     </p>
     <template v-else>
       <section class="pt-12 bg-gray-50 sm:pt-16 border-b pb-[250px] relative">
         <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
-          <div class="flex flex-col items-center justify-center max-w-4xl gap-8 mx-auto md:gap-12 md:flex-row">
-            <div class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-sm">
-              <img class="object-cover w-full transition-all duration-200 group-hover:scale-110 h-[240px]"
-                   :src="template.image_url" alt="Template cover image" width="500px" height="380px"
-              />
+          <div
+            class="flex flex-col items-center justify-center max-w-4xl gap-8 mx-auto md:gap-12 md:flex-row"
+          >
+            <div
+              class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-sm"
+            >
+              <img
+                class="object-cover w-full transition-all duration-200 group-hover:scale-110 h-[240px]"
+                :src="template.image_url"
+                alt="Template cover image"
+                width="500px"
+                height="380px"
+              >
             </div>
 
             <div class="flex-1 text-center md:text-left relative">
-              <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+              <h1
+                class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"
+              >
                 {{ template.name }}
               </h1>
               <p class="mt-2 text-lg font-normal text-gray-600">
                 {{ cleanQuotes(template.short_description) }}
               </p>
-              <template-tags :template="template" :display-all="true"
-                             class="flex flex-wrap items-center justify-center gap-3 mt-4 md:justify-start"
+              <template-tags
+                :template="template"
+                :display-all="true"
+                class="flex flex-wrap items-center justify-center gap-3 mt-4 md:justify-start"
               />
             </div>
           </div>
@@ -61,8 +98,11 @@
             <p class="text-sm font-medium text-center text-gray-500 -mt-2 mb-2">
               Template Preview
             </p>
-            <open-complete-form ref="open-complete-form" :form="form" :creating="true"
-                                class="mb-4 p-4 bg-gray-50 border border-gray-200 border-dashed rounded-lg"
+            <open-complete-form
+              ref="open-complete-form"
+              :form="form"
+              :creating="true"
+              class="mb-4 p-4 bg-gray-50 border border-gray-200 border-dashed rounded-lg"
             />
           </div>
         </div>
@@ -70,8 +110,11 @@
         <div class="absolute bottom-0 translate-y-full inset-x-0">
           <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl -mt-[20px]">
             <div class="flex items-center justify-center">
-              <v-button v-track.use_template_button_clicked class="mx-auto w-full max-w-[300px]"
-                        :to="createFormWithTemplateUrl">
+              <v-button
+                v-track.use_template_button_clicked
+                class="mx-auto w-full max-w-[300px]"
+                :to="createFormWithTemplateUrl"
+              >
                 Use this template
               </v-button>
             </div>
@@ -88,14 +131,21 @@
 
       <section class="pt-20 pb-12 bg-white sm:pb-16">
         <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
-          <div class="max-w-2xl mx-auto mt-16 space-y-12 sm:mt-16 sm:space-y-16">
-            <div class="nf-text" v-html="template.description"/>
+          <div
+            class="max-w-2xl mx-auto mt-16 space-y-12 sm:mt-16 sm:space-y-16"
+          >
+            <div
+              class="nf-text"
+              v-html="template.description"
+            />
 
             <template v-if="template.questions.length > 0">
               <hr class="mt-12 border-gray-200">
               <div>
                 <div class="text-center">
-                  <h3 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+                  <h3
+                    class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl"
+                  >
                     Frequently asked questions
                   </h3>
                   <p class="mt-2 text-base font-normal text-gray-600">
@@ -103,11 +153,18 @@
                   </p>
                 </div>
                 <dl class="mt-12 space-y-10">
-                  <div v-for="(ques,ques_key) in template.questions" :key="ques_key" class="space-y-4">
+                  <div
+                    v-for="(ques, ques_key) in template.questions"
+                    :key="ques_key"
+                    class="space-y-4"
+                  >
                     <dt class="font-semibold text-gray-900 dark:text-gray-100">
                       {{ ques.question }}
                     </dt>
-                    <dd class="mt-2 leading-6 text-gray-600 dark:text-gray-400" v-html="ques.answer"/>
+                    <dd
+                      class="mt-2 leading-6 text-gray-600 dark:text-gray-400"
+                      v-html="ques.answer"
+                    />
                   </div>
                 </dl>
               </div>
@@ -116,20 +173,35 @@
         </div>
       </section>
 
-      <section v-if="relatedTemplates && relatedTemplates.length > 0"
-               class="py-12 bg-white border-t border-gray-200 sm:py-16">
+      <section
+        v-if="relatedTemplates && relatedTemplates.length > 0"
+        class="py-12 bg-white border-t border-gray-200 sm:py-16"
+      >
         <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
           <div class="flex items-center justify-between">
-            <h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+            <h4
+              class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl"
+            >
               Related templates
             </h4>
-            <v-button :to="{name:'templates'}" color="white" size="small" :arrow="true">
+            <v-button
+              :to="{ name: 'templates' }"
+              color="white"
+              size="small"
+              :arrow="true"
+            >
               View All
             </v-button>
           </div>
 
-          <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:gap-y-12">
-            <single-template v-for="related in relatedTemplates" :key="related.id" :template="related"/>
+          <div
+            class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:gap-y-12"
+          >
+            <single-template
+              v-for="related in relatedTemplates"
+              :key="related.id"
+              :template="related"
+            />
           </div>
         </div>
       </section>
@@ -137,7 +209,9 @@
       <section class="py-12 bg-white border-t border-gray-200 sm:py-16">
         <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
           <div class="text-center">
-            <h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+            <h4
+              class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl"
+            >
               How OpnForm works
             </h4>
           </div>
@@ -159,8 +233,8 @@
                   <NuxtLink :to="createFormWithTemplateUrl">
                     Click here to copy this template
                   </NuxtLink>
-                  and start customizing it. Change the questions, add new ones, choose colors and
-                  more.
+                  and start customizing it. Change the questions, add new ones,
+                  choose colors and more.
                 </p>
               </div>
             </div>
@@ -178,7 +252,8 @@
                   Embed the form or share it via a link
                 </h5>
                 <p class="mt-2 text-sm font-normal text-gray-600">
-                  You can directly share your form link, or embed the form on your website. It's magic! 🪄
+                  You can directly share your form link, or embed the form on
+                  your website. It's magic! 🪄
                 </p>
               </div>
             </div>
@@ -190,23 +265,23 @@
       </section>
     </template>
 
-    <open-form-footer class="mt-8 border-t"/>
+    <open-form-footer class="mt-8 border-t" />
   </div>
 </template>
 
 <script setup>
-import {computed} from 'vue'
-import OpenCompleteForm from '../../components/open/forms/OpenCompleteForm.vue'
-import Breadcrumb from '~/components/global/Breadcrumb.vue'
-import SingleTemplate from '../../components/pages/templates/SingleTemplate.vue'
-import {fetchTemplate} from "~/stores/templates.js"
-import FormTemplateModal from '~/components/open/forms/components/templates/FormTemplateModal.vue'
+import { computed } from "vue"
+import OpenCompleteForm from "../../components/open/forms/OpenCompleteForm.vue"
+import Breadcrumb from "~/components/global/Breadcrumb.vue"
+import SingleTemplate from "../../components/pages/templates/SingleTemplate.vue"
+import { fetchTemplate } from "~/stores/templates.js"
+import FormTemplateModal from "~/components/open/forms/components/templates/FormTemplateModal.vue"
 
 defineRouteRules({
-  swr: 3600
+  swr: 3600,
 })
 
-const {copy} = useClipboard()
+const { copy } = useClipboard()
 const authStore = useAuthStore()
 const templatesStore = useTemplatesStore()
 
@@ -218,19 +293,24 @@ const form = computed(() => template.value.structure)
 
 // Fetch the template
 if (!template.value) {
-  const {data} = await fetchTemplate(slug.value)
+  const { data } = await fetchTemplate(slug.value)
   templatesStore.save(data.value)
 }
 
 // Fetch related templates
-const {data: relatedTemplatesData} = await useAsyncData('related-templates', () => {
-  return Promise.all(template.value.related_templates.map((slug) => {
-    if (templatesStore.getByKey(slug)) {
-      return Promise.resolve(templatesStore.getByKey(slug))
-    }
-    return fetchTemplate(slug).then((res) => res.data.value)
-  }))
-})
+const { data: relatedTemplatesData } = await useAsyncData(
+  "related-templates",
+  () => {
+    return Promise.all(
+      template.value.related_templates.map((slug) => {
+        if (templatesStore.getByKey(slug)) {
+          return Promise.resolve(templatesStore.getByKey(slug))
+        }
+        return fetchTemplate(slug).then((res) => res.data.value)
+      }),
+    )
+  },
+)
 templatesStore.save(relatedTemplatesData.value)
 templatesStore.initTypesAndIndustries()
 
@@ -240,49 +320,67 @@ const showFormTemplateModal = ref(false)
 // Computed
 const breadcrumbs = computed(() => {
   if (!template.value) {
-    return [{route: {name: 'templates'}, label: 'Templates'}]
+    return [{ route: { name: "templates" }, label: "Templates" }]
   }
-  return [{route: {name: 'templates'}, label: 'Templates'}, {label: template.value.name}]
+  return [
+    { route: { name: "templates" }, label: "Templates" },
+    { label: template.value.name },
+  ]
 })
-const relatedTemplates = computed(() => templatesStore.getByKey(template?.value?.related_templates))
-const canEditTemplate = computed(() => authStore.check && template.value && (authStore.user.admin || authStore.user.template_editor || template.creator_id === authStore.user.id))
+const relatedTemplates = computed(() =>
+  templatesStore.getByKey(template?.value?.related_templates),
+)
+const canEditTemplate = computed(
+  () =>
+    authStore.check &&
+    template.value &&
+    (authStore.user.admin ||
+      authStore.user.template_editor ||
+      template.value.creator_id === authStore.user.id),
+)
 const createFormWithTemplateUrl = computed(() => {
-  return {name: (authStore.check) ? 'forms-create' : 'forms-create-guest', query: {template: template?.value?.slug}}
+  return {
+    name: authStore.check ? "forms-create" : "forms-create-guest",
+    query: { template: template?.value?.slug },
+  }
 })
 
 // methods
 const cleanQuotes = (str) => {
   // Remove starting and ending quotes if any
-  return (str) ? str.replace(/^"/, '').replace(/"$/, '') : ''
+  return str ? str.replace(/^"/, "").replace(/"$/, "") : ""
 }
 
 const copyTemplateUrl = () => {
   copy(template.value.share_url)
-  useAlert().success('Copied!')
+  useAlert().success("Copied!")
 }
 
 useOpnSeoMeta({
   title: () => {
-    if (!template || !template.value) return 'Form Template'
+    if (!template.value || !template.value) return "Form Template"
     return template.value.name
   },
   description() {
-    if (!template || !template.value) return null
+    if (!template.value || !template.value) return null
     // take the first 140 characters of the description
-    return template.value.short_description?.substring(0, 140) + '... | Customize any template and create your own form in minutes.'
+    return (
+      template.value.short_description?.substring(0, 140) +
+      "... | Customize any template and create your own form in minutes."
+    )
   },
   ogImage() {
-    if (!template || !template.value) return null
+    if (!template.value || !template.value) return null
     return template.value.image_url
   },
   robots: () => {
-    if (!template || !template.value) return null
-    return template.value.publicly_listed ? null : 'noindex'
-  }
+    if (!template.value || !template.value) return null
+    return template.value.publicly_listed ? null : "noindex"
+  },
 })
 </script>
 
-<style lang='scss'>
+<style lang="scss">
 .nf-text {
   @apply space-y-4;
   h2 {
diff --git a/client/pages/templates/index.vue b/client/pages/templates/index.vue
index b8c8347af..7b9670365 100644
--- a/client/pages/templates/index.vue
+++ b/client/pages/templates/index.vue
@@ -3,7 +3,9 @@
     <section class="py-12 sm:py-16 bg-gray-50 border-b border-gray-200">
       <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div class="text-center max-w-xl mx-auto">
-          <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900">
+          <h1
+            class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900"
+          >
             Form Templates
           </h1>
           <p class="text-gray-600 mt-4 text-lg font-normal">
@@ -13,22 +15,26 @@
       </div>
     </section>
 
-    <templates-list :templates="templates" :loading="loading"/>
+    <templates-list
+      :templates="templates"
+      :loading="loading"
+    />
 
-    <open-form-footer class="mt-8 border-t"/>
+    <open-form-footer class="mt-8 border-t" />
   </div>
 </template>
 
 <script setup>
-import {loadAllTemplates} from "~/stores/templates.js";
+import { loadAllTemplates } from "~/stores/templates.js"
 
 defineRouteRules({
-  swr: 3600
+  swr: 3600,
 })
 
 useOpnSeoMeta({
-  title: 'Form Templates',
-  description: 'Our collection of beautiful templates to create your own forms!'
+  title: "Form Templates",
+  description:
+    "Our collection of beautiful templates to create your own forms!",
 })
 
 const templatesStore = useTemplatesStore()
diff --git a/client/pages/templates/industries/[slug].vue b/client/pages/templates/industries/[slug].vue
index 029bb0619..3db6feec9 100644
--- a/client/pages/templates/industries/[slug].vue
+++ b/client/pages/templates/industries/[slug].vue
@@ -1,8 +1,11 @@
 <template>
   <div class="flex flex-col min-h-full">
-    <breadcrumb :path="breadcrumbs"/>
+    <breadcrumb :path="breadcrumbs" />
 
-    <p v-if="industry === null || !industry" class="text-center my-4">
+    <p
+      v-if="industry === null || !industry"
+      class="text-center my-4"
+    >
       We could not find this industry.
     </p>
     <template v-else>
@@ -12,7 +15,9 @@
             <div class="font-semibold sm:w-full text-blue-500 mb-3">
               {{ industry.name }}
             </div>
-            <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900">
+            <h1
+              class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900"
+            >
               {{ industry.meta_title }}
             </h1>
             <p class="max-w-xl mx-auto text-gray-600 mt-4 text-lg font-normal">
@@ -22,8 +27,11 @@
         </div>
       </section>
 
-
-      <templates-list :templates="templates" :filter-industries="false" :show-industries="false">
+      <templates-list
+        :templates="templates"
+        :filter-industries="false"
+        :show-industries="false"
+      >
         <template #before-lists>
           <section class="py-12 bg-white border-t border-gray-200 sm:py-16">
             <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
@@ -36,66 +44,77 @@
       </templates-list>
     </template>
 
-    <open-form-footer class="mt-8 border-t"/>
+    <open-form-footer class="mt-8 border-t" />
   </div>
 </template>
 
 <script setup>
-import {computed} from 'vue'
-import Breadcrumb from '~/components/global/Breadcrumb.vue'
-import {loadAllTemplates} from "~/stores/templates.js";
+import { computed } from "vue"
+import Breadcrumb from "~/components/global/Breadcrumb.vue"
+import { loadAllTemplates } from "~/stores/templates.js"
 
 defineRouteRules({
-  swr: 3600
+  swr: 3600,
 })
 
 const route = useRoute()
-const authStore = useAuthStore()
 const templatesStore = useTemplatesStore()
 
 loadAllTemplates(templatesStore)
 
 // Computed
-const authenticated = computed(() => authStore.check)
-const user = computed(() => authStore.user)
-const templates = computed(() => templatesStore.getAll.filter((item) => {
-  return (item.industries && item.industries.length > 0) ? item.industries.includes(route.params.slug) : false
-}))
+const templates = computed(() =>
+  templatesStore.getAll.filter((item) => {
+    return item.industries && item.industries.length > 0
+      ? item.industries.includes(route.params.slug)
+      : false
+  }),
+)
 const breadcrumbs = computed(() => {
-  if (!industry) {
-    return [{route: {name: 'templates'}, label: 'Templates'}]
+  if (!industry.value) {
+    return [{ route: { name: "templates" }, label: "Templates" }]
   }
-  return [{route: {name: 'templates'}, label: 'Templates'}, {label: industry.value.name}]
+  return [
+    { route: { name: "templates" }, label: "Templates" },
+    { label: industry.value.name },
+  ]
 })
 
-const industry = computed(() => templatesStore.industries.get(route.params.slug))
+const industry = computed(() =>
+  templatesStore.industries.get(route.params.slug),
+)
 
 useOpnSeoMeta({
   title: () => {
-    if (!industry.value) return 'Form Templates'
+    if (!industry.value) return "Form Templates"
     if (industry.value.meta_title.length > 60) {
       return industry.value.meta_title
     }
     return industry.value.meta_title
   },
-  description: () => industry.value ? industry.value.meta_description: 'Our collection of beautiful templates to create your own forms!'
+  description: () =>
+    industry.value
+      ? industry.value.meta_description
+      : "Our collection of beautiful templates to create your own forms!",
 })
 useHead({
   titleTemplate: (titleChunk) => {
     // Disable title template for longer titles
-    if (industry.value
-      && industry.value.meta_title.length < 60
-      && !industry.value.meta_title.toLowerCase().includes('opnform')
+    if (
+      industry.value &&
+      industry.value.meta_title.length < 60 &&
+      !industry.value.meta_title.toLowerCase().includes("opnform")
     ) {
-      return titleChunk ? `${titleChunk} - OpnForm` : 'Form Templates - OpnForm'
+      return titleChunk
+        ? `${titleChunk} - OpnForm`
+        : "Form Templates - OpnForm"
     }
-    return titleChunk ? titleChunk : 'Form Templates - OpnForm'
-  }
+    return titleChunk ? titleChunk : "Form Templates - OpnForm"
+  },
 })
-
 </script>
 
-<style lang='scss'>
+<style lang="scss">
 .nf-text {
   @apply space-y-4;
   h2 {
@@ -115,4 +134,3 @@ useHead({
   }
 }
 </style>
-
diff --git a/client/pages/templates/my-templates.vue b/client/pages/templates/my-templates.vue
index e8d62a708..901648ed1 100644
--- a/client/pages/templates/my-templates.vue
+++ b/client/pages/templates/my-templates.vue
@@ -3,7 +3,9 @@
     <section class="py-12 sm:py-16 bg-gray-50 border-b border-gray-200">
       <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div class="text-center max-w-xl mx-auto">
-          <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900">
+          <h1
+            class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900"
+          >
             My Form Templates
           </h1>
           <p class="text-gray-600 mt-4 text-lg font-normal">
@@ -13,26 +15,32 @@
       </div>
     </section>
 
-   <templates-list :templates="templates" :loading="loading" :show-types="false" :show-industries="false"/>
+    <templates-list
+      :templates="templates"
+      :loading="loading"
+      :show-types="false"
+      :show-industries="false"
+    />
   </div>
 </template>
 
 <script setup>
 definePageMeta({
-  middleware: "auth"
+  middleware: "auth",
 })
 
 useOpnSeoMeta({
-  title: 'My Templates',
-  description: 'Our collection of beautiful templates to create your own forms!'
+  title: "My Templates",
+  description:
+    "Our collection of beautiful templates to create your own forms!",
 })
 
-let loading = ref(false)
-let templates = ref([])
+const loading = ref(false)
+const templates = ref([])
 
 onMounted(() => {
   loading.value = true
-  opnFetch('templates',{query: {onlymy: true}}).then((data) => {
+  opnFetch("templates", { query: { onlymy: true } }).then((data) => {
     loading.value = false
     templates.value = data
   })
diff --git a/client/pages/templates/types/[slug].vue b/client/pages/templates/types/[slug].vue
index 8b23d84a9..589cfc47f 100644
--- a/client/pages/templates/types/[slug].vue
+++ b/client/pages/templates/types/[slug].vue
@@ -1,8 +1,11 @@
 <template>
   <div class="flex flex-col min-h-full">
-    <breadcrumb :path="breadcrumbs"/>
+    <breadcrumb :path="breadcrumbs" />
 
-    <p v-if="type === null || !type" class="text-center my-4">
+    <p
+      v-if="type === null || !type"
+      class="text-center my-4"
+    >
       We could not find this type.
     </p>
     <template v-else>
@@ -12,7 +15,9 @@
             <div class="font-semibold sm:w-full text-blue-500 mb-3">
               {{ type.name }}
             </div>
-            <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900">
+            <h1
+              class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900"
+            >
               {{ type.meta_title }}
             </h1>
             <p class="max-w-xl mx-auto text-gray-600 mt-4 text-lg font-normal">
@@ -22,8 +27,11 @@
         </div>
       </section>
 
-
-      <templates-list :templates="templates" :filter-types="false" :show-industries="false">
+      <templates-list
+        :templates="templates"
+        :filter-types="false"
+        :show-industries="false"
+      >
         <template #before-lists>
           <section class="py-12 bg-white border-t border-gray-200 sm:py-16">
             <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
@@ -36,67 +44,76 @@
       </templates-list>
     </template>
 
-    <open-form-footer class="mt-8 border-t"/>
+    <open-form-footer class="mt-8 border-t" />
   </div>
 </template>
 
 <script setup>
-import {computed} from 'vue'
-import OpenFormFooter from '../../../components/pages/OpenFormFooter.vue'
-import Breadcrumb from '~/components/global/Breadcrumb.vue'
-import {loadAllTemplates} from "~/stores/templates.js";
+import { computed } from "vue"
+import OpenFormFooter from "../../../components/pages/OpenFormFooter.vue"
+import Breadcrumb from "~/components/global/Breadcrumb.vue"
+import { loadAllTemplates } from "~/stores/templates.js"
 
 defineRouteRules({
-  swr: 3600
+  swr: 3600,
 })
 
 const route = useRoute()
-const authStore = useAuthStore()
 const templatesStore = useTemplatesStore()
 
 loadAllTemplates(templatesStore)
 
 // Computed
-const authenticated = computed(() => authStore.check)
-const user = computed(() => authStore.user)
-const templates = computed(() => templatesStore.getAll.filter((item) => {
-  return (item.types && item.types.length > 0) ? item.types.includes(route.params.slug) : false
-}))
+const templates = computed(() =>
+  templatesStore.getAll.filter((item) => {
+    return item.types && item.types.length > 0
+      ? item.types.includes(route.params.slug)
+      : false
+  }),
+)
 const breadcrumbs = computed(() => {
-  if (!type) {
-    return [{route: {name: 'templates'}, label: 'Templates'}]
+  if (!type.value) {
+    return [{ route: { name: "templates" }, label: "Templates" }]
   }
-  return [{route: {name: 'templates'}, label: 'Templates'}, {label: type.value.name}]
+  return [
+    { route: { name: "templates" }, label: "Templates" },
+    { label: type.value.name },
+  ]
 })
 
 const type = computed(() => templatesStore.types.get(route.params.slug))
 
 useOpnSeoMeta({
   title: () => {
-    if (!type.value) return 'Form Templates'
+    if (!type.value) return "Form Templates"
     if (type.value.meta_title.length > 60) {
       return type.value.meta_title
     }
     return type.value.meta_title
   },
-  description: () => type.value ? type.value.meta_description: 'Our collection of beautiful templates to create your own forms!'
+  description: () =>
+    type.value
+      ? type.value.meta_description
+      : "Our collection of beautiful templates to create your own forms!",
 })
 useHead({
   titleTemplate: (titleChunk) => {
     // Disable title template for longer titles
-    if (type.value
-      && type.value.meta_title.length < 60
-      && !type.value.meta_title.toLowerCase().includes('opnform')
+    if (
+      type.value &&
+      type.value.meta_title.length < 60 &&
+      !type.value.meta_title.toLowerCase().includes("opnform")
     ) {
-      return titleChunk ? `${titleChunk} - OpnForm` : 'Form Templates - OpnForm'
+      return titleChunk
+        ? `${titleChunk} - OpnForm`
+        : "Form Templates - OpnForm"
     }
-    return titleChunk ? titleChunk : 'Form Templates - OpnForm'
-  }
+    return titleChunk ? titleChunk : "Form Templates - OpnForm"
+  },
 })
-
 </script>
 
-<style lang='scss'>
+<style lang="scss">
 .nf-text {
   @apply space-y-4;
   h2 {
@@ -116,4 +133,3 @@ useHead({
   }
 }
 </style>
-
diff --git a/client/pages/terms-conditions.vue b/client/pages/terms-conditions.vue
index 39ac9daf2..3ed70dd3a 100644
--- a/client/pages/terms-conditions.vue
+++ b/client/pages/terms-conditions.vue
@@ -5,27 +5,32 @@
         <h1 class="sm:text-5xl">
           Terms & Conditions
         </h1>
-        <NotionPage :block-map="blockMap" :loading="loading"  />
+        <NotionPage
+          :block-map="blockMap"
+          :loading="loading"
+        />
       </div>
     </div>
-    <open-form-footer/>
+    <open-form-footer />
   </div>
 </template>
 
 <script setup>
-import {useNotionPagesStore} from "~/stores/notion_pages.js";
-import {computed} from "vue";
+import { useNotionPagesStore } from "~/stores/notion_pages.js"
+import { computed } from "vue"
 
 useOpnSeoMeta({
-  title: 'Terms & Conditions'
+  title: "Terms & Conditions",
 })
 defineRouteRules({
-  swr: 3600
+  swr: 3600,
 })
 
 const notionPageStore = useNotionPagesStore()
-await notionPageStore.load('246420da2834480ca04047b0c5a00929')
+await notionPageStore.load("246420da2834480ca04047b0c5a00929")
 
 const loading = computed(() => notionPageStore.loading)
-const blockMap = computed(() => notionPageStore.getByKey('246420da2834480ca04047b0c5a00929'))
+const blockMap = computed(() =>
+  notionPageStore.getByKey("246420da2834480ca04047b0c5a00929"),
+)
 </script>
diff --git a/client/plugins/amplitude.js b/client/plugins/amplitude.js
index efe5dc477..108ed06b0 100644
--- a/client/plugins/amplitude.js
+++ b/client/plugins/amplitude.js
@@ -1,24 +1,25 @@
-
 // Hook function used by event listener
-function hookLogEvent (binding) {
+function hookLogEvent(binding) {
   const modifiers = Object.keys(binding.modifiers)
   if (modifiers.length !== 1) {
-    throw new Error('Amplitude directive takes only one modifier which is the event name.')
+    throw new Error(
+      "Amplitude directive takes only one modifier which is the event name.",
+    )
   }
   const eventName = modifiers[0]
 
   useAmplitude().logEvent(eventName, binding.value)
 }
 
-export default defineNuxtPlugin(nuxtApp => {
+export default defineNuxtPlugin((nuxtApp) => {
   // Doing something with nuxtApp
   const registeredListeners = {}
-  nuxtApp.vueApp.directive('track', {
-    beforeMount (el, binding, vnode) {
+  nuxtApp.vueApp.directive("track", {
+    beforeMount(el, binding) {
       registeredListeners[el] = () => {
         hookLogEvent(binding)
       }
-      el.addEventListener('click', registeredListeners[el])
-    }
+      el.addEventListener("click", registeredListeners[el])
+    },
   })
 })
diff --git a/client/plugins/crisp.client.js b/client/plugins/crisp.client.js
index 753a7da46..a7d8cbf31 100644
--- a/client/plugins/crisp.client.js
+++ b/client/plugins/crisp.client.js
@@ -1,11 +1,10 @@
-import {Crisp} from "crisp-sdk-web"
-import config from "~/opnform.config.js";
+import { Crisp } from "crisp-sdk-web"
 
-export default defineNuxtPlugin(nuxtApp => {
+export default defineNuxtPlugin(() => {
   const isIframe = useIsIframe()
   const crispWebsiteId = useRuntimeConfig().public.crispWebsiteId
   if (crispWebsiteId && !isIframe) {
     Crisp.configure(crispWebsiteId)
     window.Crisp = Crisp
   }
-});
+})
diff --git a/client/plugins/sentry.js b/client/plugins/sentry.js
index f5dce0f77..2439aa267 100644
--- a/client/plugins/sentry.js
+++ b/client/plugins/sentry.js
@@ -1,25 +1,24 @@
-import * as Sentry from "@sentry/vue";
+import * as Sentry from "@sentry/vue"
 
 function getSentryIntegrations() {
   // don't load on server
-  if (!import.meta.client) return [];
+  if (!import.meta.client) return []
 
-  const router = useRouter();
+  const router = useRouter()
   const browserTracing = new Sentry.BrowserTracing({
     routingInstrumentation: Sentry.vueRouterInstrumentation(router),
-  });
+  })
 
-  return [browserTracing];
+  return [browserTracing]
 }
 
-
 export default defineNuxtPlugin({
-  name: 'sentry',
+  name: "sentry",
   parallel: true,
   async setup(nuxtApp) {
-    const vueApp = nuxtApp.vueApp;
+    const vueApp = nuxtApp.vueApp
 
-    const config = useRuntimeConfig();
+    const config = useRuntimeConfig()
 
     Sentry.init({
       app: vueApp,
@@ -45,14 +44,16 @@ export default defineNuxtPlugin({
       beforeSend(event) {
         if (event.exception.values.length) {
           // Don't send validation exceptions to Sentry
-          if (event.exception.values[0].type === 'FetchError' &&
-            (event.exception.values[0].value.includes('422') || event.exception.values[0].value.includes('401'))
+          if (
+            event.exception.values[0].type === "FetchError" &&
+            (event.exception.values[0].value.includes("422") ||
+              event.exception.values[0].value.includes("401"))
           ) {
             return null
           }
         }
-        return event;
+        return event
       },
     })
-  }
-});
+  },
+})
diff --git a/client/plugins/vue-confetti.client.js b/client/plugins/vue-confetti.client.js
index 282d8f0c0..866d812b4 100644
--- a/client/plugins/vue-confetti.client.js
+++ b/client/plugins/vue-confetti.client.js
@@ -1,5 +1,5 @@
-import VueConfetti from 'vue-confetti'
+import VueConfetti from "vue-confetti"
 
-export default defineNuxtPlugin(nuxtApp => {
+export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(VueConfetti)
-})
\ No newline at end of file
+})
diff --git a/client/public/widgets/embed-min.js b/client/public/widgets/embed-min.js
index 931510646..38960d5cf 100644
--- a/client/public/widgets/embed-min.js
+++ b/client/public/widgets/embed-min.js
@@ -1,20 +1,40 @@
-!(function (n, e) {
-    if (typeof document !== 'undefined') {
-      const e = document.head || document.getElementsByTagName('head')[0]; const t = document.createElement('style')
-      t.type = 'text/css', e.appendChild(t), t.styleSheet ? t.styleSheet.cssText = n : t.appendChild(document.createTextNode(n))
-    }
-  }('.nf-main {\n      position: fixed;\n      width: 100%;\n      height: 100vh;\n      top: 0px;\n      bottom: 0px;\n      left: 0px;\n      right: 0px;\n      z-index: 500;\n      pointer-events: none;\n    }\n    .nf-main .nf-emoji {\n       pointer-events: auto;\n       width:60px;\n       height: 60px;\n       display: flex;\n       align-items:center;\n       justify-content:center;\n       text-align: center;\n       background-color: #3B82F6;\n       padding: 8px 10px;\n       border: none;\n       cursor: pointer;\n       position: fixed;\n       bottom: 23px;\n       right: 28px;\n       border-radius: 100%;\n       z-index: 999\n     }\n     .nf-main.nf-left .nf-emoji{\n        left: 28px !important;\n        right: inherit !important\n     }\n     .nf-main .nf-emoji .nf-emoji-icon, .nf-main .nf-emoji .nf-emoji-icon-close{\n        font-size: 30px;\n        color:white;\n      }\n    .nf-main .nf-emoji .nf-emoji-icon-close {\n       display: none;\n     }\n    .nf-main.open .nf-emoji .nf-emoji-icon{\n       display: none !important\n    }\n    .nf-main.open .nf-emoji .nf-emoji-icon-close{\n       display: block !important\n    }\n    .nf-main .nf-popup {\n\n       display: flex;\n       align-items: end;\n       flex-direction: column-reverse;\n       align-content: flex-end;\n       padding: 20px;\n       padding-bottom: 100px;\n       width: 100%;\n       height: 100vh;\n       visibility: hidden;\n       opacity:0; transition:\n       opacity 0.2s, 0.2s ease-in-out;\n       transform: translateY(30px);\n    }\n    .nf-main.open .nf-popup {\n      visibility: visible !important;\n      opacity: 1;\n      transform: translateY(0px);\n    }\n    .nf-main .nf-popup iframe {\n      width: 100%;\n      pointer-events: auto;\n      z-index: 999!important;\n      bottom: 100px;\n      right: 20px;\n      height: 450px;\n      background: #fff;\n      border-radius: 12px;\n      box-shadow: 0 6px 6px 0 rgba(0,0,0,.02),0 8px 24px 0 rgba(0,0,0,.12)!important\n    }\n    .nf-main.nf-left .nf-popup {\n      align-items: start !important;\n    }')), (function () {
-    const n = JSON.parse(document.currentScript.getAttribute('data-nf'))
+!(function (n,) {
+  if (typeof document !== "undefined") {
+    const e = document.head || document.getElementsByTagName("head")[0]
+    const t = document.createElement("style");
+    (t.type = "text/css"),
+      e.appendChild(t),
+      t.styleSheet
+        ? (t.styleSheet.cssText = n)
+        : t.appendChild(document.createTextNode(n))
+  }
+})(
+  ".nf-main {\n      position: fixed;\n      width: 100%;\n      height: 100vh;\n      top: 0px;\n      bottom: 0px;\n      left: 0px;\n      right: 0px;\n      z-index: 500;\n      pointer-events: none;\n    }\n    .nf-main .nf-emoji {\n       pointer-events: auto;\n       width:60px;\n       height: 60px;\n       display: flex;\n       align-items:center;\n       justify-content:center;\n       text-align: center;\n       background-color: #3B82F6;\n       padding: 8px 10px;\n       border: none;\n       cursor: pointer;\n       position: fixed;\n       bottom: 23px;\n       right: 28px;\n       border-radius: 100%;\n       z-index: 999\n     }\n     .nf-main.nf-left .nf-emoji{\n        left: 28px !important;\n        right: inherit !important\n     }\n     .nf-main .nf-emoji .nf-emoji-icon, .nf-main .nf-emoji .nf-emoji-icon-close{\n        font-size: 30px;\n        color:white;\n      }\n    .nf-main .nf-emoji .nf-emoji-icon-close {\n       display: none;\n     }\n    .nf-main.open .nf-emoji .nf-emoji-icon{\n       display: none !important\n    }\n    .nf-main.open .nf-emoji .nf-emoji-icon-close{\n       display: block !important\n    }\n    .nf-main .nf-popup {\n\n       display: flex;\n       align-items: end;\n       flex-direction: column-reverse;\n       align-content: flex-end;\n       padding: 20px;\n       padding-bottom: 100px;\n       width: 100%;\n       height: 100vh;\n       visibility: hidden;\n       opacity:0; transition:\n       opacity 0.2s, 0.2s ease-in-out;\n       transform: translateY(30px);\n    }\n    .nf-main.open .nf-popup {\n      visibility: visible !important;\n      opacity: 1;\n      transform: translateY(0px);\n    }\n    .nf-main .nf-popup iframe {\n      width: 100%;\n      pointer-events: auto;\n      z-index: 999!important;\n      bottom: 100px;\n      right: 20px;\n      height: 450px;\n      background: #fff;\n      border-radius: 12px;\n      box-shadow: 0 6px 6px 0 rgba(0,0,0,.02),0 8px 24px 0 rgba(0,0,0,.12)!important\n    }\n    .nf-main.nf-left .nf-popup {\n      align-items: start !important;\n    }",
+),
+  (function () {
+    const n = JSON.parse(document.currentScript.getAttribute("data-nf"))
     let e = n?.formurl || null
-    if (window.location !== window.parent.location || window.frameElement || !e) return !1
-    e = e + (e.indexOf('?') === -1 ? '?' : '&') + 'popup=true'
-    const t = n?.emoji || '💬'; const i = n?.position === 'left' ? 'nf-left' : ''; const o = n?.bgcolor || '#3B82F6'
-    const a = n?.width || 500; const r = document.body.querySelector('.nf-main')
+    if (window.location !== window.parent.location || window.frameElement || !e)
+      return !1
+    e = e + (e.indexOf("?") === -1 ? "?" : "&") + "popup=true"
+    const t = n?.emoji || "💬"
+    const i = n?.position === "left" ? "nf-left" : ""
+    const o = n?.bgcolor || "#3B82F6"
+    const a = n?.width || 500
+    const r = document.body.querySelector(".nf-main")
     r && r.remove()
-    const p = document.createElement('div')
-    p.className = `nf-main ${i}`, p.innerHTML = `<div class='nf-popup'><iframe src='${e}' frameborder='0' marginheight='0' marginwidth='0' title='OpnForm'></iframe></div>`
-    p.querySelector('iframe').style.maxWidth = `${a}px`
-    const s = document.createElement('div')
-    s.className = 'nf-emoji', s.role = 'button', s.style.backgroundColor = `${o}`, s.innerHTML = `<span class='nf-emoji-icon'>${t}</span><span class='nf-emoji-icon-close'><svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-8 h-8'>\n  <path stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' />\n</svg>\n</span>`, s.onclick = () => { p.classList.toggle('open') }, p.appendChild(s), document.body.appendChild(p)
-  }())
-  
\ No newline at end of file
+    const p = document.createElement("div");
+    (p.className = `nf-main ${i}`),
+      (p.innerHTML = `<div class='nf-popup'><iframe src='${e}' frameborder='0' marginheight='0' marginwidth='0' title='OpnForm'></iframe></div>`)
+    p.querySelector("iframe").style.maxWidth = `${a}px`
+    const s = document.createElement("div");
+    (s.className = "nf-emoji"),
+      (s.role = "button"),
+      (s.style.backgroundColor = `${o}`),
+      (s.innerHTML = `<span class='nf-emoji-icon'>${t}</span><span class='nf-emoji-icon-close'><svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-8 h-8'>\n  <path stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' />\n</svg>\n</span>`),
+      (s.onclick = () => {
+        p.classList.toggle("open")
+      }),
+      p.appendChild(s),
+      document.body.appendChild(p)
+  })()
diff --git a/client/public/widgets/embed.js b/client/public/widgets/embed.js
index 825da8a74..6fae6a907 100644
--- a/client/public/widgets/embed.js
+++ b/client/public/widgets/embed.js
@@ -3,14 +3,17 @@
  * All changes to this file should be followed by an update of the minified version (embed-min.js)
  */
 !(function () {
-  !(function (e, t) {
-    if (e && typeof document !== 'undefined') {
-      const head = document.head || document.getElementsByTagName('head')[0]
-      const styleEl = document.createElement('style')
-      styleEl.type = 'text/css', head.appendChild(styleEl), styleEl.styleSheet ? styleEl.styleSheet.cssText = e : styleEl.appendChild(document.createTextNode(e))
+  !(function (e) {
+    if (e && typeof document !== "undefined") {
+      const head = document.head || document.getElementsByTagName("head")[0]
+      const styleEl = document.createElement("style");
+      (styleEl.type = "text/css"),
+        head.appendChild(styleEl),
+        styleEl.styleSheet
+          ? (styleEl.styleSheet.cssText = e)
+          : styleEl.appendChild(document.createTextNode(e))
     }
-  }
-  (`.nf-main {
+  })(`.nf-main {
       position: fixed;
       width: 100%;
       height: 100vh;
@@ -89,49 +92,55 @@
     }
     .nf-main.nf-left .nf-popup {
       align-items: start !important;
-    }`))
-}());
+    }`)
+})();
 
 (function () {
-  const nfData = JSON.parse(document.currentScript.getAttribute('data-nf'))
+  const nfData = JSON.parse(document.currentScript.getAttribute("data-nf"))
   let formUrl = nfData?.formurl || null
-  if (window.location !== window.parent.location || window.frameElement || !formUrl) {
+  if (
+    window.location !== window.parent.location ||
+    window.frameElement ||
+    !formUrl
+  ) {
     // Do nothing
     return false
   }
 
   // Add popup param to formUrl
-  formUrl = formUrl + (formUrl.indexOf('?') === -1 ? '?' : '&') + 'popup=true'
+  formUrl = formUrl + (formUrl.indexOf("?") === -1 ? "?" : "&") + "popup=true"
 
   // Settings
-  const emoji = nfData?.emoji || '💬'
-  const position = (nfData?.position === 'left') ? 'nf-left' : ''
-  const emojiBgColor = nfData?.bgcolor || '#3B82F6'
+  const emoji = nfData?.emoji || "💬"
+  const position = nfData?.position === "left" ? "nf-left" : ""
+  const emojiBgColor = nfData?.bgcolor || "#3B82F6"
   const width = nfData?.width || 500
 
   // Remove old popup, if there
-  const oldEl = document.body.querySelector('.nf-main')
+  const oldEl = document.body.querySelector(".nf-main")
   if (oldEl) {
     oldEl.remove()
   }
 
   // Iframe popup
-  const mainDiv = document.createElement('div')
+  const mainDiv = document.createElement("div")
   mainDiv.className = `nf-main ${position}`
   mainDiv.innerHTML = `<div class='nf-popup'><iframe src='${formUrl}' frameborder='0' marginheight='0' marginwidth='0' title='OpnForm'></iframe></div>`
-  const iframe = mainDiv.querySelector('iframe')
+  const iframe = mainDiv.querySelector("iframe")
   iframe.style.maxWidth = `${width}px`
 
   // Emoji button
-  const emojiButton = document.createElement('div')
-  emojiButton.className = 'nf-emoji'
-  emojiButton.role = 'button'
+  const emojiButton = document.createElement("div")
+  emojiButton.className = "nf-emoji"
+  emojiButton.role = "button"
   emojiButton.style.backgroundColor = `${emojiBgColor}`
   emojiButton.innerHTML = `<span class='nf-emoji-icon'>${emoji}</span><span class='nf-emoji-icon-close'><svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-8 h-8'>
   <path stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' />
 </svg>
 </span>`
-  emojiButton.onclick = () => { mainDiv.classList.toggle('open') }
+  emojiButton.onclick = () => {
+    mainDiv.classList.toggle("open")
+  }
   mainDiv.appendChild(emojiButton)
 
   // Append to the body
diff --git a/client/public/widgets/iframeResize.min.js b/client/public/widgets/iframeResize.min.js
index 4ad7495a3..4aa8b2f4e 100644
--- a/client/public/widgets/iframeResize.min.js
+++ b/client/public/widgets/iframeResize.min.js
@@ -1,8 +1,856 @@
+/* eslint-disable */
+
 /*! iFrame Resizer (iframeSizer.min.js ) - v4.3.9 - 2023-11-10
  *  Desc: Force cross domain iframes to size to content.
  *  Requires: iframeResizer.contentWindow.min.js to be loaded into the target frame.
  *  Copyright: (c) 2023 David J. Bradshaw - dave@bradshaw.net
  *  License: MIT
  */
-!function(d){var c,u,a,v,x,I,M,r,f,k,i,l,z;function m(){return window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver}function F(e,n,i){e.addEventListener(n,i,!1)}function B(e,n,i){e.removeEventListener(n,i,!1)}function p(e){return x+"["+(n="Host page: "+(e=e),n=window.top!==window.self?window.parentIFrame&&window.parentIFrame.getId?window.parentIFrame.getId()+": "+e:"Nested host page: "+e:n)+"]";var n}function t(e){return k[e]?k[e].log:u}function O(e,n){o("log",e,n,t(e))}function E(e,n){o("info",e,n,t(e))}function R(e,n){o("warn",e,n,!0)}function o(e,n,i,t){!0===t&&"object"==typeof window.console&&console[e](p(n),i)}function w(e){function i(){t("Height"),t("Width"),P(function(){H(w),C(b),l("onResized",w)},w,"init")}function n(){var e=p.slice(I).split(":"),n=e[1]?parseInt(e[1],10):0,i=k[e[0]]&&k[e[0]].iframe,t=getComputedStyle(i);return{iframe:i,id:e[0],height:n+function(e){if("border-box"!==e.boxSizing)return 0;var n=e.paddingTop?parseInt(e.paddingTop,10):0,e=e.paddingBottom?parseInt(e.paddingBottom,10):0;return n+e}(t)+function(e){if("border-box"!==e.boxSizing)return 0;var n=e.borderTopWidth?parseInt(e.borderTopWidth,10):0,e=e.borderBottomWidth?parseInt(e.borderBottomWidth,10):0;return n+e}(t),width:e[2],type:e[3]}}function t(e){var n=Number(k[b]["max"+e]),i=Number(k[b]["min"+e]),e=e.toLowerCase(),t=Number(w[e]);O(b,"Checking "+e+" is in range "+i+"-"+n),t<i&&(t=i,O(b,"Set "+e+" to min value")),n<t&&(t=n,O(b,"Set "+e+" to max value")),w[e]=""+t}function o(){var t=e.origin,o=k[b]&&k[b].checkOrigin;if(o&&""+t!="null"&&!function(){if(o.constructor!==Array)return e=k[b]&&k[b].remoteHost,O(b,"Checking connection is from: "+e),t===e;var e,n=0,i=!1;for(O(b,"Checking connection is from allowed list of origins: "+o);n<o.length;n++)if(o[n]===t){i=!0;break}return i}())throw new Error("Unexpected message received from: "+t+" for "+w.iframe.id+". Message was: "+e.data+". This error can be disabled by setting the checkOrigin: false option or by providing of array of trusted domains.");return 1}function a(e){return p.slice(p.indexOf(":")+v+e)}function s(i,t){var e,n,o;e=function(){var e,n;A("Send Page Info","pageInfo:"+(e=document.body.getBoundingClientRect(),n=w.iframe.getBoundingClientRect(),JSON.stringify({iframeHeight:n.height,iframeWidth:n.width,clientHeight:Math.max(document.documentElement.clientHeight,window.innerHeight||0),clientWidth:Math.max(document.documentElement.clientWidth,window.innerWidth||0),offsetTop:parseInt(n.top-e.top,10),offsetLeft:parseInt(n.left-e.left,10),scrollTop:window.pageYOffset,scrollLeft:window.pageXOffset,documentHeight:document.documentElement.clientHeight,documentWidth:document.documentElement.clientWidth,windowHeight:window.innerHeight,windowWidth:window.innerWidth})),i,t)},n=32,z[o=t]||(z[o]=setTimeout(function(){z[o]=null,e()},n))}function r(e){e=e.getBoundingClientRect();return W(b),{x:Math.floor(Number(e.left)+Number(M.x)),y:Math.floor(Number(e.top)+Number(M.y))}}function d(e){var n=e?r(w.iframe):{x:0,y:0},i={x:Number(w.width)+n.x,y:Number(w.height)+n.y};O(b,"Reposition requested from iFrame (offset x:"+n.x+" y:"+n.y+")"),window.top===window.self?(M=i,c(),O(b,"--")):window.parentIFrame?window.parentIFrame["scrollTo"+(e?"Offset":"")](i.x,i.y):R(b,"Unable to scroll to requested position, window.parentIFrame not found")}function c(){!1===l("onScroll",M)?S():C(b)}function u(e){var e=e.split("#")[1]||"",n=decodeURIComponent(e),n=document.getElementById(n)||document.getElementsByName(n)[0];n?(n=r(n),O(b,"Moving to in page link (#"+e+") at x: "+n.x+" y: "+n.y),M={x:n.x,y:n.y},c(),O(b,"--")):window.top===window.self?O(b,"In page link #"+e+" not found"):window.parentIFrame?window.parentIFrame.moveToAnchor(e):O(b,"In page link #"+e+" not found and window.parentIFrame not found")}function f(e){var n,i={};i=0===Number(w.width)&&0===Number(w.height)?{x:(n=a(9).split(":"))[1],y:n[0]}:{x:w.width,y:w.height},l(e,{iframe:w.iframe,screenX:Number(i.x),screenY:Number(i.y),type:w.type})}function l(e,n){return T(b,e,n)}function m(){switch(k[b]&&k[b].firstRun&&k[b]&&(k[b].firstRun=!1),w.type){case"close":N(w.iframe);break;case"message":n=a(6),O(b,"onMessage passed: {iframe: "+w.iframe.id+", message: "+n+"}"),l("onMessage",{iframe:w.iframe,message:JSON.parse(n)}),O(b,"--");break;case"mouseenter":f("onMouseEnter");break;case"mouseleave":f("onMouseLeave");break;case"autoResize":k[b].autoResize=JSON.parse(a(9));break;case"scrollTo":d(!1);break;case"scrollToOffset":d(!0);break;case"pageInfo":s(k[b]&&k[b].iframe,b),r=b,e("Add ",F),k[r]&&(k[r].stopPageInfo=o);break;case"pageInfoStop":k[b]&&k[b].stopPageInfo&&(k[b].stopPageInfo(),delete k[b].stopPageInfo);break;case"inPageLink":u(a(9));break;case"reset":j(w);break;case"init":i(),l("onInit",w.iframe);break;default:0===Number(w.width)&&0===Number(w.height)?R("Unsupported message received ("+w.type+"), this is likely due to the iframe containing a later version of iframe-resizer than the parent page"):i()}function e(n,i){function t(){k[r]?s(k[r].iframe,r):o()}["scroll","resize"].forEach(function(e){O(r,n+e+" listener for sendPageInfo"),i(window,e,t)})}function o(){e("Remove ",B)}var r,n}var g,h,p=e.data,w={},b=null;if("[iFrameResizerChild]Ready"===p)for(var y in k)A("iFrame requested init",L(y),k[y].iframe,y);else x===(""+p).slice(0,I)&&p.slice(I).split(":")[0]in k?(w=n(),b=w.id,k[b]&&(k[b].loaded=!0),(h=w.type in{true:1,false:1,undefined:1})&&O(b,"Ignoring init message from meta parent page"),!h&&(h=!0,k[g=b]||(h=!1,R(w.type+" No settings for "+g+". Message was: "+p)),h)&&(O(b,"Received: "+p),g=!0,null===w.iframe&&(R(b,"IFrame ("+w.id+") not found"),g=!1),g&&o()&&m())):E(b,"Ignored: "+p)}function T(e,n,i){var t=null,o=null;if(k[e]){if("function"!=typeof(t=k[e][n]))throw new TypeError(n+" on iFrame["+e+"] is not a function");o=t(i)}return o}function g(e){e=e.id;delete k[e]}function N(e){var n=e.id;if(!1===T(n,"onClose",n))O(n,"Close iframe cancelled by onClose event");else{O(n,"Removing iFrame: "+n);try{e.parentNode&&e.parentNode.removeChild(e)}catch(e){R(e)}T(n,"onClosed",n),O(n,"--"),g(e)}}function W(e){null===M&&O(e,"Get page position: "+(M={x:window.pageXOffset===d?document.documentElement.scrollLeft:window.pageXOffset,y:window.pageYOffset===d?document.documentElement.scrollTop:window.pageYOffset}).x+","+M.y)}function C(e){null!==M&&(window.scrollTo(M.x,M.y),O(e,"Set page position: "+M.x+","+M.y),S())}function S(){M=null}function j(e){O(e.id,"Size reset requested by "+("init"===e.type?"host page":"iFrame")),W(e.id),P(function(){H(e),A("reset","reset",e.iframe,e.id)},e,"reset")}function H(o){function i(e){var n;function i(){Object.keys(k).forEach(function(e){function n(e){return"0px"===(k[i]&&k[i].iframe.style[e])}var i;k[i=e]&&null!==k[i].iframe.offsetParent&&(n("height")||n("width"))&&A("Visibility change","resize",k[i].iframe,i)})}function t(e){O("window","Mutation observed: "+e[0].target+" "+e[0].type),h(i,16)}!a&&"0"===o[e]&&(a=!0,O(r,"Hidden iFrame detected, creating visibility listener"),e=m())&&(n=document.querySelector("body"),new e(t).observe(n,{attributes:!0,attributeOldValue:!1,characterData:!0,characterDataOldValue:!1,childList:!0,subtree:!0}))}function e(e){var n;n=e,o.id?(o.iframe.style[n]=o[n]+"px",O(o.id,"IFrame ("+r+") "+n+" set to "+o[n]+"px")):O("undefined","messageData id not set"),i(e)}var r=o.iframe.id;k[r]&&(k[r].sizeHeight&&e("height"),k[r].sizeWidth)&&e("width")}function P(e,n,i){i!==n.type&&r&&!window.jasmine?(O(n.id,"Requesting animation frame"),r(e)):e()}function A(n,i,t,o,e){function r(){var e;t&&"contentWindow"in t&&null!==t.contentWindow?(e=k[o]&&k[o].targetOrigin,O(o,"["+n+"] Sending msg to iframe["+o+"] ("+i+") targetOrigin: "+e),t.contentWindow.postMessage(x+i,e)):R(o,"["+n+"] IFrame("+o+") not found")}function a(){e&&k[o]&&k[o].warningTimeout&&(k[o].msgTimeout=setTimeout(function(){!k[o]||k[o].loaded||s||(s=!0,R(o,"IFrame has not responded within "+k[o].warningTimeout/1e3+" seconds. Check iFrameResizer.contentWindow.js has been loaded in iFrame. This message can be ignored if everything is working, or you can set the warningTimeout option to a higher value or zero to suppress this warning."))},k[o].warningTimeout))}var s=!1;o=o||t.id,k[o]&&(r(),a())}function L(e){return e+":"+k[e].bodyMarginV1+":"+k[e].sizeWidth+":"+k[e].log+":"+k[e].interval+":"+k[e].enablePublicMethods+":"+k[e].autoResize+":"+k[e].bodyMargin+":"+k[e].heightCalculationMethod+":"+k[e].bodyBackground+":"+k[e].bodyPadding+":"+k[e].tolerance+":"+k[e].inPageLinks+":"+k[e].resizeFrom+":"+k[e].widthCalculationMethod+":"+k[e].mouseEvents}function s(t,i){function e(i){var e=m();e&&(e=e,t.parentNode)&&new e(function(e){e.forEach(function(e){Array.prototype.slice.call(e.removedNodes).forEach(function(e){e===t&&N(t)})})}).observe(t.parentNode,{childList:!0}),F(t,"load",function(){var e,n;A("iFrame.onload",i,t,d,!0),e=k[r]&&k[r].firstRun,n=k[r]&&k[r].heightCalculationMethod in f,!e&&n&&j({iframe:t,height:0,width:0,type:"init"})}),A("init",i,t,d,!0)}function o(e){var n=e.split("Callback");2===n.length&&(this[n="on"+n[0].charAt(0).toUpperCase()+n[0].slice(1)]=this[e],delete this[e],R(r,"Deprecated: '"+e+"' has been renamed '"+n+"'. The old method will be removed in the next major version."))}function n(e){if(e=e||{},k[r]=Object.create(null),k[r].iframe=t,k[r].firstRun=!0,k[r].remoteHost=t.src&&t.src.split("/").slice(0,3).join("/"),"object"!=typeof e)throw new TypeError("Options is not an object");Object.keys(e).forEach(o,e);var n,i=e;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(k[r][n]=(Object.prototype.hasOwnProperty.call(i,n)?i:l)[n]);k[r]&&(k[r].targetOrigin=!0!==k[r].checkOrigin||""===(e=k[r].remoteHost)||null!==e.match(/^(about:blank|javascript:|file:\/\/)/)?"*":e)}var r=function(e){if("string"!=typeof e)throw new TypeError("Invaild id for iFrame. Expected String");var n;return""===e&&(t.id=(n=i&&i.id||l.id+c++,null!==document.getElementById(n)&&(n+=c++),e=n),u=(i||{}).log,O(e,"Added missing iframe ID: "+e+" ("+t.src+")")),e}(t.id);if(r in k&&"iFrameResizer"in t)R(r,"Ignored iFrame, already setup.");else{switch(n(i),O(r,"IFrame scrolling "+(k[r]&&k[r].scrolling?"enabled":"disabled")+" for "+r),t.style.overflow=!1===(k[r]&&k[r].scrolling)?"hidden":"auto",k[r]&&k[r].scrolling){case"omit":break;case!0:t.scrolling="yes";break;case!1:t.scrolling="no";break;default:t.scrolling=k[r]?k[r].scrolling:"no"}s("Height"),s("Width"),a("maxHeight"),a("minHeight"),a("maxWidth"),a("minWidth"),"number"!=typeof(k[r]&&k[r].bodyMargin)&&"0"!==(k[r]&&k[r].bodyMargin)||(k[r].bodyMarginV1=k[r].bodyMargin,k[r].bodyMargin=k[r].bodyMargin+"px"),e(L(r)),k[r]&&(k[r].iframe.iFrameResizer={close:N.bind(null,k[r].iframe),removeListeners:g.bind(null,k[r].iframe),resize:A.bind(null,"Window resize","resize",k[r].iframe),moveToAnchor:function(e){A("Move to anchor","moveToAnchor:"+e,k[r].iframe,r)},sendMessage:function(e){A("Send Message","message:"+(e=JSON.stringify(e)),k[r].iframe,r)}})}function a(e){var n=k[r][e];1/0!==n&&0!==n&&(t.style[e]="number"==typeof n?n+"px":n,O(r,"Set "+e+" = "+t.style[e]))}function s(e){if(k[r]["min"+e]>k[r]["max"+e])throw new Error("Value for min"+e+" can not be greater than max"+e)}}function h(e,n){null===i&&(i=setTimeout(function(){i=null,e()},n))}function e(){"hidden"!==document.visibilityState&&(O("document","Trigger event: Visibility change"),h(function(){b("Tab Visible","resize")},16))}function b(i,t){Object.keys(k).forEach(function(e){var n;k[n=e]&&"parent"===k[n].resizeFrom&&k[n].autoResize&&!k[n].firstRun&&A(i,t,k[e].iframe,e)})}function y(){F(window,"message",w),F(window,"resize",function(){var e;O("window","Trigger event: "+(e="resize")),h(function(){b("Window "+e,"resize")},16)}),F(document,"visibilitychange",e),F(document,"-webkit-visibilitychange",e)}function n(){function t(e,n){if(n){if(!n.tagName)throw new TypeError("Object is not a valid DOM element");if("IFRAME"!==n.tagName.toUpperCase())throw new TypeError("Expected <IFRAME> tag, found <"+n.tagName+">");s(n,e),o.push(n)}}for(var o,e=["moz","webkit","o","ms"],n=0;n<e.length&&!r;n+=1)r=window[e[n]+"RequestAnimationFrame"];return r?r=r.bind(window):O("setup","RequestAnimationFrame not supported"),y(),function(e,n){var i;switch(o=[],(i=e)&&i.enablePublicMethods&&R("enablePublicMethods option has been removed, public methods are now always available in the iFrame"),typeof n){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(n||"iframe"),t.bind(d,e));break;case"object":t(e,n);break;default:throw new TypeError("Unexpected data type ("+typeof n+")")}return o}}function q(e){e.fn?e.fn.iFrameResize||(e.fn.iFrameResize=function(i){return this.filter("iframe").each(function(e,n){s(n,i)}).end()}):E("","Unable to bind to jQuery, it is not fully loaded.")}"undefined"!=typeof window&&(c=0,a=u=!1,v="message".length,I=(x="[iFrameSizer]").length,M=null,r=window.requestAnimationFrame,f=Object.freeze({max:1,scroll:1,bodyScroll:1,documentElementScroll:1}),k={},i=null,l=Object.freeze({autoResize:!0,bodyBackground:null,bodyMargin:null,bodyMarginV1:8,bodyPadding:null,checkOrigin:!0,inPageLinks:!1,enablePublicMethods:!0,heightCalculationMethod:"bodyOffset",id:"iFrameResizer",interval:32,log:!1,maxHeight:1/0,maxWidth:1/0,minHeight:0,minWidth:0,mouseEvents:!0,resizeFrom:"parent",scrolling:!1,sizeHeight:!0,sizeWidth:!1,warningTimeout:5e3,tolerance:0,widthCalculationMethod:"scroll",onClose:function(){return!0},onClosed:function(){},onInit:function(){},onMessage:function(){R("onMessage function not defined")},onMouseEnter:function(){},onMouseLeave:function(){},onResized:function(){},onScroll:function(){return!0}}),z={},window.jQuery!==d&&q(window.jQuery),"function"==typeof define&&define.amd?define([],n):"object"==typeof module&&"object"==typeof module.exports&&(module.exports=n()),window.iFrameResize=window.iFrameResize||n())}();
+!(function (d) {
+  var c, u, a, v, x, I, M, r, f, k, i, l, z
+  function m() {
+    return (
+      window.MutationObserver ||
+      window.WebKitMutationObserver ||
+      window.MozMutationObserver
+    )
+  }
+  function F(e, n, i) {
+    e.addEventListener(n, i, !1)
+  }
+  function B(e, n, i) {
+    e.removeEventListener(n, i, !1)
+  }
+  function p(e) {
+    return (
+      x +
+      "[" +
+      ((n = "Host page: " + (e = e)),
+      (n =
+        window.top !== window.self
+          ? window.parentIFrame && window.parentIFrame.getId
+            ? window.parentIFrame.getId() + ": " + e
+            : "Nested host page: " + e
+          : n)) +
+      "]"
+    )
+    var n
+  }
+  function t(e) {
+    return k[e] ? k[e].log : u
+  }
+  function O(e, n) {
+    o("log", e, n, t(e))
+  }
+  function E(e, n) {
+    o("info", e, n, t(e))
+  }
+  function R(e, n) {
+    o("warn", e, n, !0)
+  }
+  function o(e, n, i, t) {
+    !0 === t && "object" == typeof window.console && console[e](p(n), i)
+  }
+  function w(e) {
+    function i() {
+      t("Height"),
+        t("Width"),
+        P(
+          function () {
+            H(w), C(b), l("onResized", w)
+          },
+          w,
+          "init",
+        )
+    }
+    function n() {
+      var e = p.slice(I).split(":"),
+        n = e[1] ? parseInt(e[1], 10) : 0,
+        i = k[e[0]] && k[e[0]].iframe,
+        t = getComputedStyle(i)
+      return {
+        iframe: i,
+        id: e[0],
+        height:
+          n +
+          (function (e) {
+            if ("border-box" !== e.boxSizing) return 0
+            var n = e.paddingTop ? parseInt(e.paddingTop, 10) : 0,
+              e = e.paddingBottom ? parseInt(e.paddingBottom, 10) : 0
+            return n + e
+          })(t) +
+          (function (e) {
+            if ("border-box" !== e.boxSizing) return 0
+            var n = e.borderTopWidth ? parseInt(e.borderTopWidth, 10) : 0,
+              e = e.borderBottomWidth ? parseInt(e.borderBottomWidth, 10) : 0
+            return n + e
+          })(t),
+        width: e[2],
+        type: e[3],
+      }
+    }
+    function t(e) {
+      var n = Number(k[b]["max" + e]),
+        i = Number(k[b]["min" + e]),
+        e = e.toLowerCase(),
+        t = Number(w[e])
+      O(b, "Checking " + e + " is in range " + i + "-" + n),
+        t < i && ((t = i), O(b, "Set " + e + " to min value")),
+        n < t && ((t = n), O(b, "Set " + e + " to max value")),
+        (w[e] = "" + t)
+    }
+    function o() {
+      var t = e.origin,
+        o = k[b] && k[b].checkOrigin
+      if (
+        o &&
+        "" + t != "null" &&
+        !(function () {
+          if (o.constructor !== Array)
+            return (
+              (e = k[b] && k[b].remoteHost),
+              O(b, "Checking connection is from: " + e),
+              t === e
+            )
+          var e,
+            n = 0,
+            i = !1
+          for (
+            O(b, "Checking connection is from allowed list of origins: " + o);
+            n < o.length;
+            n++
+          )
+            if (o[n] === t) {
+              i = !0
+              break
+            }
+          return i
+        })()
+      )
+        throw new Error(
+          "Unexpected message received from: " +
+            t +
+            " for " +
+            w.iframe.id +
+            ". Message was: " +
+            e.data +
+            ". This error can be disabled by setting the checkOrigin: false option or by providing of array of trusted domains.",
+        )
+      return 1
+    }
+    function a(e) {
+      return p.slice(p.indexOf(":") + v + e)
+    }
+    function s(i, t) {
+      var e, n, o;
+      (e = function () {
+        var e, n
+        A(
+          "Send Page Info",
+          "pageInfo:" +
+            ((e = document.body.getBoundingClientRect()),
+            (n = w.iframe.getBoundingClientRect()),
+            JSON.stringify({
+              iframeHeight: n.height,
+              iframeWidth: n.width,
+              clientHeight: Math.max(
+                document.documentElement.clientHeight,
+                window.innerHeight || 0,
+              ),
+              clientWidth: Math.max(
+                document.documentElement.clientWidth,
+                window.innerWidth || 0,
+              ),
+              offsetTop: parseInt(n.top - e.top, 10),
+              offsetLeft: parseInt(n.left - e.left, 10),
+              scrollTop: window.pageYOffset,
+              scrollLeft: window.pageXOffset,
+              documentHeight: document.documentElement.clientHeight,
+              documentWidth: document.documentElement.clientWidth,
+              windowHeight: window.innerHeight,
+              windowWidth: window.innerWidth,
+            })),
+          i,
+          t,
+        )
+      }),
+        (n = 32),
+        z[(o = t)] ||
+          (z[o] = setTimeout(function () {
+            (z[o] = null), e()
+          }, n))
+    }
+    function r(e) {
+      e = e.getBoundingClientRect()
+      return (
+        W(b),
+        {
+          x: Math.floor(Number(e.left) + Number(M.x)),
+          y: Math.floor(Number(e.top) + Number(M.y)),
+        }
+      )
+    }
+    function d(e) {
+      var n = e ? r(w.iframe) : { x: 0, y: 0 },
+        i = { x: Number(w.width) + n.x, y: Number(w.height) + n.y }
+      O(
+        b,
+        "Reposition requested from iFrame (offset x:" + n.x + " y:" + n.y + ")",
+      ),
+        window.top === window.self
+          ? ((M = i), c(), O(b, "--"))
+          : window.parentIFrame
+            ? window.parentIFrame["scrollTo" + (e ? "Offset" : "")](i.x, i.y)
+            : R(
+                b,
+                "Unable to scroll to requested position, window.parentIFrame not found",
+              )
+    }
+    function c() {
+      !1 === l("onScroll", M) ? S() : C(b)
+    }
+    function u(e) {
+      var e = e.split("#")[1] || "",
+        n = decodeURIComponent(e),
+        n = document.getElementById(n) || document.getElementsByName(n)[0]
+      n
+        ? ((n = r(n)),
+          O(
+            b,
+            "Moving to in page link (#" + e + ") at x: " + n.x + " y: " + n.y,
+          ),
+          (M = { x: n.x, y: n.y }),
+          c(),
+          O(b, "--"))
+        : window.top === window.self
+          ? O(b, "In page link #" + e + " not found")
+          : window.parentIFrame
+            ? window.parentIFrame.moveToAnchor(e)
+            : O(
+                b,
+                "In page link #" +
+                  e +
+                  " not found and window.parentIFrame not found",
+              )
+    }
+    function f(e) {
+      var n,
+        i = {};
+      (i =
+        0 === Number(w.width) && 0 === Number(w.height)
+          ? { x: (n = a(9).split(":"))[1], y: n[0] }
+          : { x: w.width, y: w.height }),
+        l(e, {
+          iframe: w.iframe,
+          screenX: Number(i.x),
+          screenY: Number(i.y),
+          type: w.type,
+        })
+    }
+    function l(e, n) {
+      return T(b, e, n)
+    }
+    function m() {
+      switch ((k[b] && k[b].firstRun && k[b] && (k[b].firstRun = !1), w.type)) {
+        case "close":
+          N(w.iframe)
+          break
+        case "message":
+          (n = a(6)),
+            O(
+              b,
+              "onMessage passed: {iframe: " +
+                w.iframe.id +
+                ", message: " +
+                n +
+                "}",
+            ),
+            l("onMessage", { iframe: w.iframe, message: JSON.parse(n) }),
+            O(b, "--")
+          break
+        case "mouseenter":
+          f("onMouseEnter")
+          break
+        case "mouseleave":
+          f("onMouseLeave")
+          break
+        case "autoResize":
+          k[b].autoResize = JSON.parse(a(9))
+          break
+        case "scrollTo":
+          d(!1)
+          break
+        case "scrollToOffset":
+          d(!0)
+          break
+        case "pageInfo":
+          s(k[b] && k[b].iframe, b),
+            (r = b),
+            e("Add ", F),
+            k[r] && (k[r].stopPageInfo = o)
+          break
+        case "pageInfoStop":
+          k[b] &&
+            k[b].stopPageInfo &&
+            (k[b].stopPageInfo(), delete k[b].stopPageInfo)
+          break
+        case "inPageLink":
+          u(a(9))
+          break
+        case "reset":
+          j(w)
+          break
+        case "init":
+          i(), l("onInit", w.iframe)
+          break
+        default:
+          0 === Number(w.width) && 0 === Number(w.height)
+            ? R(
+                "Unsupported message received (" +
+                  w.type +
+                  "), this is likely due to the iframe containing a later version of iframe-resizer than the parent page",
+              )
+            : i()
+      }
+      function e(n, i) {
+        function t() {
+          k[r] ? s(k[r].iframe, r) : o()
+        }
+        ["scroll", "resize"].forEach(function (e) {
+          O(r, n + e + " listener for sendPageInfo"), i(window, e, t)
+        })
+      }
+      function o() {
+        e("Remove ", B)
+      }
+      var r, n
+    }
+    var g,
+      h,
+      p = e.data,
+      w = {},
+      b = null
+    if ("[iFrameResizerChild]Ready" === p)
+      for (var y in k) A("iFrame requested init", L(y), k[y].iframe, y)
+    else
+      x === ("" + p).slice(0, I) && p.slice(I).split(":")[0] in k
+        ? ((w = n()),
+          (b = w.id),
+          k[b] && (k[b].loaded = !0),
+          (h = w.type in { true: 1, false: 1, undefined: 1 }) &&
+            O(b, "Ignoring init message from meta parent page"),
+          !h &&
+            ((h = !0),
+            k[(g = b)] ||
+              ((h = !1),
+              R(w.type + " No settings for " + g + ". Message was: " + p)),
+            h) &&
+            (O(b, "Received: " + p),
+            (g = !0),
+            null === w.iframe &&
+              (R(b, "IFrame (" + w.id + ") not found"), (g = !1)),
+            g && o() && m()))
+        : E(b, "Ignored: " + p)
+  }
+  function T(e, n, i) {
+    var t = null,
+      o = null
+    if (k[e]) {
+      if ("function" != typeof (t = k[e][n]))
+        throw new TypeError(n + " on iFrame[" + e + "] is not a function")
+      o = t(i)
+    }
+    return o
+  }
+  function g(e) {
+    e = e.id
+    delete k[e]
+  }
+  function N(e) {
+    var n = e.id
+    if (!1 === T(n, "onClose", n))
+      O(n, "Close iframe cancelled by onClose event")
+    else {
+      O(n, "Removing iFrame: " + n)
+      try {
+        e.parentNode && e.parentNode.removeChild(e)
+      } catch (e) {
+        R(e)
+      }
+      T(n, "onClosed", n), O(n, "--"), g(e)
+    }
+  }
+  function W(e) {
+    null === M &&
+      O(
+        e,
+        "Get page position: " +
+          (M = {
+            x:
+              window.pageXOffset === d
+                ? document.documentElement.scrollLeft
+                : window.pageXOffset,
+            y:
+              window.pageYOffset === d
+                ? document.documentElement.scrollTop
+                : window.pageYOffset,
+          }).x +
+          "," +
+          M.y,
+      )
+  }
+  function C(e) {
+    null !== M &&
+      (window.scrollTo(M.x, M.y),
+      O(e, "Set page position: " + M.x + "," + M.y),
+      S())
+  }
+  function S() {
+    M = null
+  }
+  function j(e) {
+    O(
+      e.id,
+      "Size reset requested by " + ("init" === e.type ? "host page" : "iFrame"),
+    ),
+      W(e.id),
+      P(
+        function () {
+          H(e), A("reset", "reset", e.iframe, e.id)
+        },
+        e,
+        "reset",
+      )
+  }
+  function H(o) {
+    function i(e) {
+      var n
+      function i() {
+        Object.keys(k).forEach(function (e) {
+          function n(e) {
+            return "0px" === (k[i] && k[i].iframe.style[e])
+          }
+          var i
+          k[(i = e)] &&
+            null !== k[i].iframe.offsetParent &&
+            (n("height") || n("width")) &&
+            A("Visibility change", "resize", k[i].iframe, i)
+        })
+      }
+      function t(e) {
+        O("window", "Mutation observed: " + e[0].target + " " + e[0].type),
+          h(i, 16)
+      }
+      !a &&
+        "0" === o[e] &&
+        ((a = !0),
+        O(r, "Hidden iFrame detected, creating visibility listener"),
+        (e = m())) &&
+        ((n = document.querySelector("body")),
+        new e(t).observe(n, {
+          attributes: !0,
+          attributeOldValue: !1,
+          characterData: !0,
+          characterDataOldValue: !1,
+          childList: !0,
+          subtree: !0,
+        }))
+    }
+    function e(e) {
+      var n;
+      (n = e),
+        o.id
+          ? ((o.iframe.style[n] = o[n] + "px"),
+            O(o.id, "IFrame (" + r + ") " + n + " set to " + o[n] + "px"))
+          : O("undefined", "messageData id not set"),
+        i(e)
+    }
+    var r = o.iframe.id
+    k[r] && (k[r].sizeHeight && e("height"), k[r].sizeWidth) && e("width")
+  }
+  function P(e, n, i) {
+    i !== n.type && r && !window.jasmine
+      ? (O(n.id, "Requesting animation frame"), r(e))
+      : e()
+  }
+  function A(n, i, t, o, e) {
+    function r() {
+      var e
+      t && "contentWindow" in t && null !== t.contentWindow
+        ? ((e = k[o] && k[o].targetOrigin),
+          O(
+            o,
+            "[" +
+              n +
+              "] Sending msg to iframe[" +
+              o +
+              "] (" +
+              i +
+              ") targetOrigin: " +
+              e,
+          ),
+          t.contentWindow.postMessage(x + i, e))
+        : R(o, "[" + n + "] IFrame(" + o + ") not found")
+    }
+    function a() {
+      e &&
+        k[o] &&
+        k[o].warningTimeout &&
+        (k[o].msgTimeout = setTimeout(function () {
+          !k[o] ||
+            k[o].loaded ||
+            s ||
+            ((s = !0),
+            R(
+              o,
+              "IFrame has not responded within " +
+                k[o].warningTimeout / 1e3 +
+                " seconds. Check iFrameResizer.contentWindow.js has been loaded in iFrame. This message can be ignored if everything is working, or you can set the warningTimeout option to a higher value or zero to suppress this warning.",
+            ))
+        }, k[o].warningTimeout))
+    }
+    var s = !1;
+    (o = o || t.id), k[o] && (r(), a())
+  }
+  function L(e) {
+    return (
+      e +
+      ":" +
+      k[e].bodyMarginV1 +
+      ":" +
+      k[e].sizeWidth +
+      ":" +
+      k[e].log +
+      ":" +
+      k[e].interval +
+      ":" +
+      k[e].enablePublicMethods +
+      ":" +
+      k[e].autoResize +
+      ":" +
+      k[e].bodyMargin +
+      ":" +
+      k[e].heightCalculationMethod +
+      ":" +
+      k[e].bodyBackground +
+      ":" +
+      k[e].bodyPadding +
+      ":" +
+      k[e].tolerance +
+      ":" +
+      k[e].inPageLinks +
+      ":" +
+      k[e].resizeFrom +
+      ":" +
+      k[e].widthCalculationMethod +
+      ":" +
+      k[e].mouseEvents
+    )
+  }
+  function s(t, i) {
+    function e(i) {
+      var e = m()
+      e &&
+        ((e = e), t.parentNode) &&
+        new e(function (e) {
+          e.forEach(function (e) {
+            Array.prototype.slice.call(e.removedNodes).forEach(function (e) {
+              e === t && N(t)
+            })
+          })
+        }).observe(t.parentNode, { childList: !0 }),
+        F(t, "load", function () {
+          var e, n
+          A("iFrame.onload", i, t, d, !0),
+            (e = k[r] && k[r].firstRun),
+            (n = k[r] && k[r].heightCalculationMethod in f),
+            !e && n && j({ iframe: t, height: 0, width: 0, type: "init" })
+        }),
+        A("init", i, t, d, !0)
+    }
+    function o(e) {
+      var n = e.split("Callback")
+      2 === n.length &&
+        ((this[(n = "on" + n[0].charAt(0).toUpperCase() + n[0].slice(1))] =
+          this[e]),
+        delete this[e],
+        R(
+          r,
+          "Deprecated: '" +
+            e +
+            "' has been renamed '" +
+            n +
+            "'. The old method will be removed in the next major version.",
+        ))
+    }
+    function n(e) {
+      if (
+        ((e = e || {}),
+        (k[r] = Object.create(null)),
+        (k[r].iframe = t),
+        (k[r].firstRun = !0),
+        (k[r].remoteHost = t.src && t.src.split("/").slice(0, 3).join("/")),
+        "object" != typeof e)
+      )
+        throw new TypeError("Options is not an object")
+      Object.keys(e).forEach(o, e)
+      var n,
+        i = e
+      for (n in l)
+        Object.prototype.hasOwnProperty.call(l, n) &&
+          (k[r][n] = (Object.prototype.hasOwnProperty.call(i, n) ? i : l)[n])
+      k[r] &&
+        (k[r].targetOrigin =
+          !0 !== k[r].checkOrigin ||
+          "" === (e = k[r].remoteHost) ||
+          null !== e.match(/^(about:blank|javascript:|file:\/\/)/)
+            ? "*"
+            : e)
+    }
+    var r = (function (e) {
+      if ("string" != typeof e)
+        throw new TypeError("Invaild id for iFrame. Expected String")
+      var n
+      return (
+        "" === e &&
+          ((t.id =
+            ((n = (i && i.id) || l.id + c++),
+            null !== document.getElementById(n) && (n += c++),
+            (e = n))),
+          (u = (i || {}).log),
+          O(e, "Added missing iframe ID: " + e + " (" + t.src + ")")),
+        e
+      )
+    })(t.id)
+    if (r in k && "iFrameResizer" in t) R(r, "Ignored iFrame, already setup.")
+    else {
+      switch (
+        (n(i),
+        O(
+          r,
+          "IFrame scrolling " +
+            (k[r] && k[r].scrolling ? "enabled" : "disabled") +
+            " for " +
+            r,
+        ),
+        (t.style.overflow =
+          !1 === (k[r] && k[r].scrolling) ? "hidden" : "auto"),
+        k[r] && k[r].scrolling)
+      ) {
+        case "omit":
+          break
+        case !0:
+          t.scrolling = "yes"
+          break
+        case !1:
+          t.scrolling = "no"
+          break
+        default:
+          t.scrolling = k[r] ? k[r].scrolling : "no"
+      }
+      s("Height"),
+        s("Width"),
+        a("maxHeight"),
+        a("minHeight"),
+        a("maxWidth"),
+        a("minWidth"),
+        ("number" != typeof (k[r] && k[r].bodyMargin) &&
+          "0" !== (k[r] && k[r].bodyMargin)) ||
+          ((k[r].bodyMarginV1 = k[r].bodyMargin),
+          (k[r].bodyMargin = k[r].bodyMargin + "px")),
+        e(L(r)),
+        k[r] &&
+          (k[r].iframe.iFrameResizer = {
+            close: N.bind(null, k[r].iframe),
+            removeListeners: g.bind(null, k[r].iframe),
+            resize: A.bind(null, "Window resize", "resize", k[r].iframe),
+            moveToAnchor: function (e) {
+              A("Move to anchor", "moveToAnchor:" + e, k[r].iframe, r)
+            },
+            sendMessage: function (e) {
+              A(
+                "Send Message",
+                "message:" + (e = JSON.stringify(e)),
+                k[r].iframe,
+                r,
+              )
+            },
+          })
+    }
+    function a(e) {
+      var n = k[r][e]
+      1 / 0 !== n &&
+        0 !== n &&
+        ((t.style[e] = "number" == typeof n ? n + "px" : n),
+        O(r, "Set " + e + " = " + t.style[e]))
+    }
+    function s(e) {
+      if (k[r]["min" + e] > k[r]["max" + e])
+        throw new Error(
+          "Value for min" + e + " can not be greater than max" + e,
+        )
+    }
+  }
+  function h(e, n) {
+    null === i &&
+      (i = setTimeout(function () {
+        (i = null), e()
+      }, n))
+  }
+  function e() {
+    "hidden" !== document.visibilityState &&
+      (O("document", "Trigger event: Visibility change"),
+      h(function () {
+        b("Tab Visible", "resize")
+      }, 16))
+  }
+  function b(i, t) {
+    Object.keys(k).forEach(function (e) {
+      var n
+      k[(n = e)] &&
+        "parent" === k[n].resizeFrom &&
+        k[n].autoResize &&
+        !k[n].firstRun &&
+        A(i, t, k[e].iframe, e)
+    })
+  }
+  function y() {
+    F(window, "message", w),
+      F(window, "resize", function () {
+        var e
+        O("window", "Trigger event: " + (e = "resize")),
+          h(function () {
+            b("Window " + e, "resize")
+          }, 16)
+      }),
+      F(document, "visibilitychange", e),
+      F(document, "-webkit-visibilitychange", e)
+  }
+  function n() {
+    function t(e, n) {
+      if (n) {
+        if (!n.tagName)
+          throw new TypeError("Object is not a valid DOM element")
+        if ("IFRAME" !== n.tagName.toUpperCase())
+          throw new TypeError(
+            "Expected <IFRAME> tag, found <" + n.tagName + ">",
+          )
+        s(n, e), o.push(n)
+      }
+    }
+    for (
+      var o, e = ["moz", "webkit", "o", "ms"], n = 0;
+      n < e.length && !r;
+      n += 1
+    )
+      r = window[e[n] + "RequestAnimationFrame"]
+    return (
+      r
+        ? (r = r.bind(window))
+        : O("setup", "RequestAnimationFrame not supported"),
+      y(),
+      function (e, n) {
+        var i
+        switch (
+          ((o = []),
+          (i = e) &&
+            i.enablePublicMethods &&
+            R(
+              "enablePublicMethods option has been removed, public methods are now always available in the iFrame",
+            ),
+          typeof n)
+        ) {
+          case "undefined":
+          case "string":
+            Array.prototype.forEach.call(
+              document.querySelectorAll(n || "iframe"),
+              t.bind(d, e),
+            )
+            break
+          case "object":
+            t(e, n)
+            break
+          default:
+            throw new TypeError("Unexpected data type (" + typeof n + ")")
+        }
+        return o
+      }
+    )
+  }
+  function q(e) {
+    e.fn
+      ? e.fn.iFrameResize ||
+        (e.fn.iFrameResize = function (i) {
+          return this.filter("iframe")
+            .each(function (e, n) {
+              s(n, i)
+            })
+            .end()
+        })
+      : E("", "Unable to bind to jQuery, it is not fully loaded.")
+  }
+  "undefined" != typeof window &&
+    ((c = 0),
+    (a = u = !1),
+    (v = "message".length),
+    (I = (x = "[iFrameSizer]").length),
+    (M = null),
+    (r = window.requestAnimationFrame),
+    (f = Object.freeze({
+      max: 1,
+      scroll: 1,
+      bodyScroll: 1,
+      documentElementScroll: 1,
+    })),
+    (k = {}),
+    (i = null),
+    (l = Object.freeze({
+      autoResize: !0,
+      bodyBackground: null,
+      bodyMargin: null,
+      bodyMarginV1: 8,
+      bodyPadding: null,
+      checkOrigin: !0,
+      inPageLinks: !1,
+      enablePublicMethods: !0,
+      heightCalculationMethod: "bodyOffset",
+      id: "iFrameResizer",
+      interval: 32,
+      log: !1,
+      maxHeight: 1 / 0,
+      maxWidth: 1 / 0,
+      minHeight: 0,
+      minWidth: 0,
+      mouseEvents: !0,
+      resizeFrom: "parent",
+      scrolling: !1,
+      sizeHeight: !0,
+      sizeWidth: !1,
+      warningTimeout: 5e3,
+      tolerance: 0,
+      widthCalculationMethod: "scroll",
+      onClose: function () {
+        return !0
+      },
+      onClosed: function () {},
+      onInit: function () {},
+      onMessage: function () {
+        R("onMessage function not defined")
+      },
+      onMouseEnter: function () {},
+      onMouseLeave: function () {},
+      onResized: function () {},
+      onScroll: function () {
+        return !0
+      },
+    })),
+    (z = {}),
+    window.jQuery !== d && q(window.jQuery),
+    "function" == typeof define && define.amd
+      ? define([], n)
+      : "object" == typeof module &&
+        "object" == typeof module.exports &&
+        (module.exports = n()),
+    (window.iFrameResize = window.iFrameResize || n()))
+})()
 //# sourceMappingURL=iframeResizer.map
diff --git a/client/public/widgets/iframeResizer.contentWindow.min.js b/client/public/widgets/iframeResizer.contentWindow.min.js
index 2729538d6..652559f94 100644
--- a/client/public/widgets/iframeResizer.contentWindow.min.js
+++ b/client/public/widgets/iframeResizer.contentWindow.min.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
 /*! iFrame Resizer (iframeSizer.contentWindow.min.js) - v4.3.9 - 2023-11-10
  *  Desc: Include this file in any page being loaded into an iframe
  *        to force the iframe to resize to the content size.
@@ -5,5 +6,776 @@
  *  Copyright: (c) 2023 David J. Bradshaw - dave@bradshaw.net
  *  License: MIT
  */
-!function(a){if("undefined"!=typeof window){var r=!0,P="",u=0,c="",s=null,D="",d=!1,j={resize:1,click:1},l=128,q=!0,f=1,n="bodyOffset",m=n,H=!0,W="",h={},g=32,B=null,p=!1,v=!1,y="[iFrameSizer]",J=y.length,w="",U={max:1,min:1,bodyScroll:1,documentElementScroll:1},b="child",V=!0,X=window.parent,T="*",E=0,i=!1,Y=null,O=16,S=1,K="scroll",M=K,Q=window,G=function(){x("onMessage function not defined")},Z=function(){},$=function(){},_={height:function(){return x("Custom height calculation function not defined"),document.documentElement.offsetHeight},width:function(){return x("Custom width calculation function not defined"),document.body.scrollWidth}},ee={},te=!1;try{var ne=Object.create({},{passive:{get:function(){te=!0}}});window.addEventListener("test",ae,ne),window.removeEventListener("test",ae,ne)}catch(e){}var oe,o,I,ie,N,A,C={bodyOffset:function(){return document.body.offsetHeight+ye("marginTop")+ye("marginBottom")},offset:function(){return C.bodyOffset()},bodyScroll:function(){return document.body.scrollHeight},custom:function(){return _.height()},documentElementOffset:function(){return document.documentElement.offsetHeight},documentElementScroll:function(){return document.documentElement.scrollHeight},max:function(){return Math.max.apply(null,e(C))},min:function(){return Math.min.apply(null,e(C))},grow:function(){return C.max()},lowestElement:function(){return Math.max(C.bodyOffset()||C.documentElementOffset(),we("bottom",Te()))},taggedElement:function(){return be("bottom","data-iframe-height")}},z={bodyScroll:function(){return document.body.scrollWidth},bodyOffset:function(){return document.body.offsetWidth},custom:function(){return _.width()},documentElementScroll:function(){return document.documentElement.scrollWidth},documentElementOffset:function(){return document.documentElement.offsetWidth},scroll:function(){return Math.max(z.bodyScroll(),z.documentElementScroll())},max:function(){return Math.max.apply(null,e(z))},min:function(){return Math.min.apply(null,e(z))},rightMostElement:function(){return we("right",Te())},taggedElement:function(){return be("right","data-iframe-width")}},re=(oe=Ee,N=null,A=0,function(){var e=Date.now(),t=O-(e-(A=A||e));return o=this,I=arguments,t<=0||O<t?(N&&(clearTimeout(N),N=null),A=e,ie=oe.apply(o,I),N||(o=I=null)):N=N||setTimeout(Oe,t),ie});k(window,"message",function(t){var n={init:function(){W=t.data,X=t.source,se(),q=!1,setTimeout(function(){H=!1},l)},reset:function(){H?R("Page reset ignored by init"):(R("Page size reset by host page"),Me("resetPage"))},resize:function(){L("resizeParent","Parent window requested size check")},moveToAnchor:function(){h.findTarget(i())},inPageLink:function(){this.moveToAnchor()},pageInfo:function(){var e=i();R("PageInfoFromParent called from parent: "+e),$(JSON.parse(e)),R(" --")},message:function(){var e=i();R("onMessage called from parent: "+e),G(JSON.parse(e)),R(" --")}};function o(){return t.data.split("]")[1].split(":")[0]}function i(){return t.data.slice(t.data.indexOf(":")+1)}function r(){return t.data.split(":")[2]in{true:1,false:1}}function e(){var e=o();e in n?n[e]():("undefined"==typeof module||!module.exports)&&"iFrameResize"in window||window.jQuery!==a&&"iFrameResize"in window.jQuery.prototype||r()||x("Unexpected message ("+t.data+")")}y===(""+t.data).slice(0,J)&&(!1===q?e():r()?n.init():R('Ignored message of type "'+o()+'". Received before initialization.'))}),k(window,"readystatechange",Ne),Ne()}function ae(){}function k(e,t,n,o){e.addEventListener(t,n,!!te&&(o||{}))}function ue(e){return e.charAt(0).toUpperCase()+e.slice(1)}function ce(e){return y+"["+w+"] "+e}function R(e){p&&"object"==typeof window.console&&console.log(ce(e))}function x(e){"object"==typeof window.console&&console.warn(ce(e))}function se(){function e(e){return"true"===e}function t(e,t){return"function"==typeof e&&(R("Setup custom "+t+"CalcMethod"),_[t]=e,e="custom"),e}{var n;n=W.slice(J).split(":"),w=n[0],u=a===n[1]?u:Number(n[1]),d=a===n[2]?d:e(n[2]),p=a===n[3]?p:e(n[3]),g=a===n[4]?g:Number(n[4]),r=a===n[6]?r:e(n[6]),c=n[7],m=a===n[8]?m:n[8],P=n[9],D=n[10],E=a===n[11]?E:Number(n[11]),h.enable=a!==n[12]&&e(n[12]),b=a===n[13]?b:n[13],M=a===n[14]?M:n[14],v=a===n[15]?v:e(n[15]),R("Initialising iFrame ("+window.location.href+")"),"iFrameResizer"in window&&Object===window.iFrameResizer.constructor&&(n=window.iFrameResizer,R("Reading data from page: "+JSON.stringify(n)),Object.keys(n).forEach(de,n),G="onMessage"in n?n.onMessage:G,Z="onReady"in n?n.onReady:Z,T="targetOrigin"in n?n.targetOrigin:T,m="heightCalculationMethod"in n?n.heightCalculationMethod:m,M="widthCalculationMethod"in n?n.widthCalculationMethod:M,m=t(m,"height"),M=t(M,"width"))}function o(e){F(0,0,e.type,e.screenY+":"+e.screenX)}function i(e,t){R("Add event listener: "+t),k(window.document,e,o)}R("TargetOrigin for parent set to: "+T),le("margin",function(e,t){-1!==t.indexOf("-")&&(x("Negative CSS value ignored for "+e),t="");return t}("margin",c=a===c?u+"px":c)),le("background",P),le("padding",D),(n=document.createElement("div")).style.clear="both",n.style.display="block",n.style.height="0",document.body.appendChild(n),he(),ge(),document.documentElement.style.height="",document.body.style.height="",R('HTML & body height set to "auto"'),R("Enable public methods"),Q.parentIFrame={autoResize:function(e){return!0===e&&!1===r?(r=!0,pe()):!1===e&&!0===r&&(r=!1,fe("remove"),null!==s&&s.disconnect(),clearInterval(B)),F(0,0,"autoResize",JSON.stringify(r)),r},close:function(){F(0,0,"close")},getId:function(){return w},getPageInfo:function(e){"function"==typeof e?($=e,F(0,0,"pageInfo")):($=function(){},F(0,0,"pageInfoStop"))},moveToAnchor:function(e){h.findTarget(e)},reset:function(){Ie("parentIFrame.reset")},scrollTo:function(e,t){F(t,e,"scrollTo")},scrollToOffset:function(e,t){F(t,e,"scrollToOffset")},sendMessage:function(e,t){F(0,0,"message",JSON.stringify(e),t)},setHeightCalculationMethod:function(e){m=e,he()},setWidthCalculationMethod:function(e){M=e,ge()},setTargetOrigin:function(e){R("Set targetOrigin: "+e),T=e},size:function(e,t){L("size","parentIFrame.size("+((e||"")+(t?","+t:""))+")",e,t)}},!0===v&&(i("mouseenter","Mouse Enter"),i("mouseleave","Mouse Leave")),pe(),h=function(){function n(e){var e=e.getBoundingClientRect(),t={x:window.pageXOffset===a?document.documentElement.scrollLeft:window.pageXOffset,y:window.pageYOffset===a?document.documentElement.scrollTop:window.pageYOffset};return{x:parseInt(e.left,10)+parseInt(t.x,10),y:parseInt(e.top,10)+parseInt(t.y,10)}}function o(e){var e=e.split("#")[1]||e,t=decodeURIComponent(e),t=document.getElementById(t)||document.getElementsByName(t)[0];a===t?(R("In page link (#"+e+") not found in iFrame, so sending to parent"),F(0,0,"inPageLink","#"+e)):(t=n(t=t),R("Moving to in page link (#"+e+") at x: "+t.x+" y: "+t.y),F(t.y,t.x,"scrollToOffset"))}function e(){var e=window.location.hash,t=window.location.href;""!==e&&"#"!==e&&o(t)}function t(){Array.prototype.forEach.call(document.querySelectorAll('a[href^="#"]'),function(e){"#"!==e.getAttribute("href")&&k(e,"click",function(e){e.preventDefault(),o(this.getAttribute("href"))})})}function i(){Array.prototype.forEach&&document.querySelectorAll?(R("Setting up location.hash handlers"),t(),k(window,"hashchange",e),setTimeout(e,l)):x("In page linking not fully supported in this browser! (See README.md for IE8 workaround)")}h.enable?i():R("In page linking not enabled");return{findTarget:o}}(),L("init","Init message from host page"),Z()}function de(e){var t=e.split("Callback");2===t.length&&(this[t="on"+t[0].charAt(0).toUpperCase()+t[0].slice(1)]=this[e],delete this[e],x("Deprecated: '"+e+"' has been renamed '"+t+"'. The old method will be removed in the next major version."))}function le(e,t){a!==t&&""!==t&&"null"!==t&&R("Body "+e+' set to "'+(document.body.style[e]=t)+'"')}function t(n){var e={add:function(e){function t(){L(n.eventName,n.eventType)}ee[e]=t,k(window,e,t,{passive:!0})},remove:function(e){var t=ee[e];delete ee[e],window.removeEventListener(e,t,!1)}};n.eventNames&&Array.prototype.map?(n.eventName=n.eventNames[0],n.eventNames.map(e[n.method])):e[n.method](n.eventName),R(ue(n.method)+" event listener: "+n.eventType)}function fe(e){t({method:e,eventType:"Animation Start",eventNames:["animationstart","webkitAnimationStart"]}),t({method:e,eventType:"Animation Iteration",eventNames:["animationiteration","webkitAnimationIteration"]}),t({method:e,eventType:"Animation End",eventNames:["animationend","webkitAnimationEnd"]}),t({method:e,eventType:"Input",eventName:"input"}),t({method:e,eventType:"Mouse Up",eventName:"mouseup"}),t({method:e,eventType:"Mouse Down",eventName:"mousedown"}),t({method:e,eventType:"Orientation Change",eventName:"orientationchange"}),t({method:e,eventType:"Print",eventNames:["afterprint","beforeprint"]}),t({method:e,eventType:"Ready State Change",eventName:"readystatechange"}),t({method:e,eventType:"Touch Start",eventName:"touchstart"}),t({method:e,eventType:"Touch End",eventName:"touchend"}),t({method:e,eventType:"Touch Cancel",eventName:"touchcancel"}),t({method:e,eventType:"Transition Start",eventNames:["transitionstart","webkitTransitionStart","MSTransitionStart","oTransitionStart","otransitionstart"]}),t({method:e,eventType:"Transition Iteration",eventNames:["transitioniteration","webkitTransitionIteration","MSTransitionIteration","oTransitionIteration","otransitioniteration"]}),t({method:e,eventType:"Transition End",eventNames:["transitionend","webkitTransitionEnd","MSTransitionEnd","oTransitionEnd","otransitionend"]}),"child"===b&&t({method:e,eventType:"IFrame Resized",eventName:"resize"})}function me(e,t,n,o){return t!==e&&(e in n||(x(e+" is not a valid option for "+o+"CalculationMethod."),e=t),R(o+' calculation method set to "'+e+'"')),e}function he(){m=me(m,n,C,"height")}function ge(){M=me(M,K,z,"width")}function pe(){var e;!0===r?(fe("add"),e=g<0,window.MutationObserver||window.WebKitMutationObserver?e?ve():s=function(){function t(e){function t(e){!1===e.complete&&(R("Attach listeners to "+e.src),e.addEventListener("load",i,!1),e.addEventListener("error",r,!1),u.push(e))}"attributes"===e.type&&"src"===e.attributeName?t(e.target):"childList"===e.type&&Array.prototype.forEach.call(e.target.querySelectorAll("img"),t)}function o(e){R("Remove listeners from "+e.src),e.removeEventListener("load",i,!1),e.removeEventListener("error",r,!1),u.splice(u.indexOf(e),1)}function n(e,t,n){o(e.target),L(t,n+": "+e.target.src)}function i(e){n(e,"imageLoad","Image loaded")}function r(e){n(e,"imageLoadFailed","Image load failed")}function a(e){L("mutationObserver","mutationObserver: "+e[0].target+" "+e[0].type),e.forEach(t)}var u=[],c=window.MutationObserver||window.WebKitMutationObserver,s=function(){var e=document.querySelector("body");return s=new c(a),R("Create body MutationObserver"),s.observe(e,{attributes:!0,attributeOldValue:!1,characterData:!0,characterDataOldValue:!1,childList:!0,subtree:!0}),s}();return{disconnect:function(){"disconnect"in s&&(R("Disconnect body MutationObserver"),s.disconnect(),u.forEach(o))}}}():(R("MutationObserver not supported in this browser!"),ve())):R("Auto Resize disabled")}function ve(){0!==g&&(R("setInterval: "+g+"ms"),B=setInterval(function(){L("interval","setInterval: "+g)},Math.abs(g)))}function ye(e,t){return t=t||document.body,t=null===(t=document.defaultView.getComputedStyle(t,null))?0:t[e],parseInt(t,10)}function we(e,t){for(var n,o=t.length,i=0,r=ue(e),a=Date.now(),u=0;u<o;u++)i<(n=t[u].getBoundingClientRect()[e]+ye("margin"+r,t[u]))&&(i=n);return a=Date.now()-a,R("Parsed "+o+" HTML elements"),R("Element position calculated in "+a+"ms"),O/2<(a=a)&&R("Event throttle increased to "+(O=2*a)+"ms"),i}function e(e){return[e.bodyOffset(),e.bodyScroll(),e.documentElementOffset(),e.documentElementScroll()]}function be(e,t){var n=document.querySelectorAll("["+t+"]");return 0===n.length&&(x("No tagged elements ("+t+") found on page"),document.querySelectorAll("body *")),we(e,n)}function Te(){return document.querySelectorAll("body *")}function Ee(e,t,n,o){function i(){e in{init:1,interval:1,size:1}||!(m in U||d&&M in U)?e in{interval:1}||R("No change in size detected"):Ie(t)}function r(e,t){return!(Math.abs(e-t)<=E)}n=a===n?C[m]():n,o=a===o?z[M]():o,r(f,n)||d&&r(S,o)||"init"===e?(Se(),F(f=n,S=o,e)):i()}function Oe(){A=Date.now(),N=null,ie=oe.apply(o,I),N||(o=I=null)}function L(e,t,n,o){i&&e in j?R("Trigger event cancelled: "+e):(e in{reset:1,resetPage:1,init:1}||R("Trigger event: "+t),("init"===e?Ee:re)(e,t,n,o))}function Se(){i||(i=!0,R("Trigger event lock on")),clearTimeout(Y),Y=setTimeout(function(){i=!1,R("Trigger event lock off"),R("--")},l)}function Me(e){f=C[m](),S=z[M](),F(f,S,e)}function Ie(e){var t=m;m=n,R("Reset trigger event: "+e),Se(),Me("reset"),m=t}function F(e,t,n,o,i){!0===V&&(a===i?i=T:R("Message targetOrigin: "+i),R("Sending message to host page ("+(e=w+":"+(e+":"+t)+":"+n+(a===o?"":":"+o))+")"),X.postMessage(y+e,i))}function Ne(){"loading"!==document.readyState&&window.parent.postMessage("[iFrameResizerChild]Ready","*")}}();
+!(function (a) {
+  if ("undefined" != typeof window) {
+    var r = !0,
+      P = "",
+      u = 0,
+      c = "",
+      s = null,
+      D = "",
+      d = !1,
+      j = { resize: 1, click: 1 },
+      l = 128,
+      q = !0,
+      f = 1,
+      n = "bodyOffset",
+      m = n,
+      H = !0,
+      W = "",
+      h = {},
+      g = 32,
+      B = null,
+      p = !1,
+      v = !1,
+      y = "[iFrameSizer]",
+      J = y.length,
+      w = "",
+      U = { max: 1, min: 1, bodyScroll: 1, documentElementScroll: 1 },
+      b = "child",
+      V = !0,
+      X = window.parent,
+      T = "*",
+      E = 0,
+      i = !1,
+      Y = null,
+      O = 16,
+      S = 1,
+      K = "scroll",
+      M = K,
+      Q = window,
+      G = function () {
+        x("onMessage function not defined")
+      },
+      Z = function () {},
+      $ = function () {},
+      _ = {
+        height: function () {
+          return (
+            x("Custom height calculation function not defined"),
+            document.documentElement.offsetHeight
+          )
+        },
+        width: function () {
+          return (
+            x("Custom width calculation function not defined"),
+            document.body.scrollWidth
+          )
+        },
+      },
+      ee = {},
+      te = !1
+    try {
+      var ne = Object.create(
+        {},
+        {
+          passive: {
+            get: function () {
+              te = !0
+            },
+          },
+        },
+      )
+      window.addEventListener("test", ae, ne),
+        window.removeEventListener("test", ae, ne)
+    } catch (e) {
+      console.erroe(e)
+    }
+    var oe,
+      o,
+      I,
+      ie,
+      N,
+      A,
+      C = {
+        bodyOffset: function () {
+          return (
+            document.body.offsetHeight + ye("marginTop") + ye("marginBottom")
+          )
+        },
+        offset: function () {
+          return C.bodyOffset()
+        },
+        bodyScroll: function () {
+          return document.body.scrollHeight
+        },
+        custom: function () {
+          return _.height()
+        },
+        documentElementOffset: function () {
+          return document.documentElement.offsetHeight
+        },
+        documentElementScroll: function () {
+          return document.documentElement.scrollHeight
+        },
+        max: function () {
+          return Math.max.apply(null, e(C))
+        },
+        min: function () {
+          return Math.min.apply(null, e(C))
+        },
+        grow: function () {
+          return C.max()
+        },
+        lowestElement: function () {
+          return Math.max(
+            C.bodyOffset() || C.documentElementOffset(),
+            we("bottom", Te()),
+          )
+        },
+        taggedElement: function () {
+          return be("bottom", "data-iframe-height")
+        },
+      },
+      z = {
+        bodyScroll: function () {
+          return document.body.scrollWidth
+        },
+        bodyOffset: function () {
+          return document.body.offsetWidth
+        },
+        custom: function () {
+          return _.width()
+        },
+        documentElementScroll: function () {
+          return document.documentElement.scrollWidth
+        },
+        documentElementOffset: function () {
+          return document.documentElement.offsetWidth
+        },
+        scroll: function () {
+          return Math.max(z.bodyScroll(), z.documentElementScroll())
+        },
+        max: function () {
+          return Math.max.apply(null, e(z))
+        },
+        min: function () {
+          return Math.min.apply(null, e(z))
+        },
+        rightMostElement: function () {
+          return we("right", Te())
+        },
+        taggedElement: function () {
+          return be("right", "data-iframe-width")
+        },
+      },
+      re =
+        ((oe = Ee),
+        (N = null),
+        (A = 0),
+        function () {
+          var e = Date.now(),
+            t = O - (e - (A = A || e))
+          return (
+            (o = this),
+            (I = arguments),
+            t <= 0 || O < t
+              ? (N && (clearTimeout(N), (N = null)),
+                (A = e),
+                (ie = oe.apply(o, I)),
+                N || (o = I = null))
+              : (N = N || setTimeout(Oe, t)),
+            ie
+          )
+        })
+    k(window, "message", function (t) {
+      var n = {
+        init: function () {
+          (W = t.data),
+            (X = t.source),
+            se(),
+            (q = !1),
+            setTimeout(function () {
+              H = !1
+            }, l)
+        },
+        reset: function () {
+          H
+            ? R("Page reset ignored by init")
+            : (R("Page size reset by host page"), Me("resetPage"))
+        },
+        resize: function () {
+          L("resizeParent", "Parent window requested size check")
+        },
+        moveToAnchor: function () {
+          h.findTarget(i())
+        },
+        inPageLink: function () {
+          this.moveToAnchor()
+        },
+        pageInfo: function () {
+          var e = i()
+          R("PageInfoFromParent called from parent: " + e),
+            $(JSON.parse(e)),
+            R(" --")
+        },
+        message: function () {
+          var e = i()
+          R("onMessage called from parent: " + e), G(JSON.parse(e)), R(" --")
+        },
+      }
+      function o() {
+        return t.data.split("]")[1].split(":")[0]
+      }
+      function i() {
+        return t.data.slice(t.data.indexOf(":") + 1)
+      }
+      function r() {
+        return t.data.split(":")[2] in { true: 1, false: 1 }
+      }
+      function e() {
+        var e = o()
+        e in n
+          ? n[e]()
+          : (("undefined" == typeof module || !module.exports) &&
+              "iFrameResize" in window) ||
+            (window.jQuery !== a &&
+              "iFrameResize" in window.jQuery.prototype) ||
+            r() ||
+            x("Unexpected message (" + t.data + ")")
+      }
+      y === ("" + t.data).slice(0, J) &&
+        (!1 === q
+          ? e()
+          : r()
+            ? n.init()
+            : R(
+                'Ignored message of type "' +
+                  o() +
+                  '". Received before initialization.',
+              ))
+    }),
+      k(window, "readystatechange", Ne),
+      Ne()
+  }
+  function ae() {}
+  function k(e, t, n, o) {
+    e.addEventListener(t, n, !!te && (o || {}))
+  }
+  function ue(e) {
+    return e.charAt(0).toUpperCase() + e.slice(1)
+  }
+  function ce(e) {
+    return y + "[" + w + "] " + e
+  }
+  function R(e) {
+    p && "object" == typeof window.console && console.log(ce(e))
+  }
+  function x(e) {
+    "object" == typeof window.console && console.warn(ce(e))
+  }
+  function se() {
+    function e(e) {
+      return "true" === e
+    }
+    function t(e, t) {
+      return (
+        "function" == typeof e &&
+          (R("Setup custom " + t + "CalcMethod"), (_[t] = e), (e = "custom")),
+        e
+      )
+    }
+    {
+      var n;
+      (n = W.slice(J).split(":")),
+        (w = n[0]),
+        (u = a === n[1] ? u : Number(n[1])),
+        (d = a === n[2] ? d : e(n[2])),
+        (p = a === n[3] ? p : e(n[3])),
+        (g = a === n[4] ? g : Number(n[4])),
+        (r = a === n[6] ? r : e(n[6])),
+        (c = n[7]),
+        (m = a === n[8] ? m : n[8]),
+        (P = n[9]),
+        (D = n[10]),
+        (E = a === n[11] ? E : Number(n[11])),
+        (h.enable = a !== n[12] && e(n[12])),
+        (b = a === n[13] ? b : n[13]),
+        (M = a === n[14] ? M : n[14]),
+        (v = a === n[15] ? v : e(n[15])),
+        R("Initialising iFrame (" + window.location.href + ")"),
+        "iFrameResizer" in window &&
+          Object === window.iFrameResizer.constructor &&
+          ((n = window.iFrameResizer),
+          R("Reading data from page: " + JSON.stringify(n)),
+          Object.keys(n).forEach(de, n),
+          (G = "onMessage" in n ? n.onMessage : G),
+          (Z = "onReady" in n ? n.onReady : Z),
+          (T = "targetOrigin" in n ? n.targetOrigin : T),
+          (m = "heightCalculationMethod" in n ? n.heightCalculationMethod : m),
+          (M = "widthCalculationMethod" in n ? n.widthCalculationMethod : M),
+          (m = t(m, "height")),
+          (M = t(M, "width")))
+    }
+    function o(e) {
+      F(0, 0, e.type, e.screenY + ":" + e.screenX)
+    }
+    function i(e, t) {
+      R("Add event listener: " + t), k(window.document, e, o)
+    }
+    R("TargetOrigin for parent set to: " + T),
+      le(
+        "margin",
+        (function (e, t) {
+          -1 !== t.indexOf("-") &&
+            (x("Negative CSS value ignored for " + e), (t = ""))
+          return t
+        })("margin", (c = a === c ? u + "px" : c)),
+      ),
+      le("background", P),
+      le("padding", D),
+      ((n = document.createElement("div")).style.clear = "both"),
+      (n.style.display = "block"),
+      (n.style.height = "0"),
+      document.body.appendChild(n),
+      he(),
+      ge(),
+      (document.documentElement.style.height = ""),
+      (document.body.style.height = ""),
+      R('HTML & body height set to "auto"'),
+      R("Enable public methods"),
+      (Q.parentIFrame = {
+        autoResize: function (e) {
+          return (
+            !0 === e && !1 === r
+              ? ((r = !0), pe())
+              : !1 === e &&
+                !0 === r &&
+                ((r = !1),
+                fe("remove"),
+                null !== s && s.disconnect(),
+                clearInterval(B)),
+            F(0, 0, "autoResize", JSON.stringify(r)),
+            r
+          )
+        },
+        close: function () {
+          F(0, 0, "close")
+        },
+        getId: function () {
+          return w
+        },
+        getPageInfo: function (e) {
+          "function" == typeof e
+            ? (($ = e), F(0, 0, "pageInfo"))
+            : (($ = function () {}), F(0, 0, "pageInfoStop"))
+        },
+        moveToAnchor: function (e) {
+          h.findTarget(e)
+        },
+        reset: function () {
+          Ie("parentIFrame.reset")
+        },
+        scrollTo: function (e, t) {
+          F(t, e, "scrollTo")
+        },
+        scrollToOffset: function (e, t) {
+          F(t, e, "scrollToOffset")
+        },
+        sendMessage: function (e, t) {
+          F(0, 0, "message", JSON.stringify(e), t)
+        },
+        setHeightCalculationMethod: function (e) {
+          (m = e), he()
+        },
+        setWidthCalculationMethod: function (e) {
+          (M = e), ge()
+        },
+        setTargetOrigin: function (e) {
+          R("Set targetOrigin: " + e), (T = e)
+        },
+        size: function (e, t) {
+          L(
+            "size",
+            "parentIFrame.size(" + ((e || "") + (t ? "," + t : "")) + ")",
+            e,
+            t,
+          )
+        },
+      }),
+      !0 === v &&
+        (i("mouseenter", "Mouse Enter"), i("mouseleave", "Mouse Leave")),
+      pe(),
+      (h = (function () {
+        function n(e) {
+          var e = e.getBoundingClientRect(),
+            t = {
+              x:
+                window.pageXOffset === a
+                  ? document.documentElement.scrollLeft
+                  : window.pageXOffset,
+              y:
+                window.pageYOffset === a
+                  ? document.documentElement.scrollTop
+                  : window.pageYOffset,
+            }
+          return {
+            x: parseInt(e.left, 10) + parseInt(t.x, 10),
+            y: parseInt(e.top, 10) + parseInt(t.y, 10),
+          }
+        }
+        function o(e) {
+          var e = e.split("#")[1] || e,
+            t = decodeURIComponent(e),
+            t = document.getElementById(t) || document.getElementsByName(t)[0]
+          a === t
+            ? (R(
+                "In page link (#" +
+                  e +
+                  ") not found in iFrame, so sending to parent",
+              ),
+              F(0, 0, "inPageLink", "#" + e))
+            : ((t = n((t = t))),
+              R(
+                "Moving to in page link (#" +
+                  e +
+                  ") at x: " +
+                  t.x +
+                  " y: " +
+                  t.y,
+              ),
+              F(t.y, t.x, "scrollToOffset"))
+        }
+        function e() {
+          var e = window.location.hash,
+            t = window.location.href
+          "" !== e && "#" !== e && o(t)
+        }
+        function t() {
+          Array.prototype.forEach.call(
+            document.querySelectorAll('a[href^="#"]'),
+            function (e) {
+              "#" !== e.getAttribute("href") &&
+                k(e, "click", function (e) {
+                  e.preventDefault(), o(this.getAttribute("href"))
+                })
+            },
+          )
+        }
+        function i() {
+          Array.prototype.forEach && document.querySelectorAll
+            ? (R("Setting up location.hash handlers"),
+              t(),
+              k(window, "hashchange", e),
+              setTimeout(e, l))
+            : x(
+                "In page linking not fully supported in this browser! (See README.md for IE8 workaround)",
+              )
+        }
+        h.enable ? i() : R("In page linking not enabled")
+        return { findTarget: o }
+      })()),
+      L("init", "Init message from host page"),
+      Z()
+  }
+  function de(e) {
+    var t = e.split("Callback")
+    2 === t.length &&
+      ((this[(t = "on" + t[0].charAt(0).toUpperCase() + t[0].slice(1))] =
+        this[e]),
+      delete this[e],
+      x(
+        "Deprecated: '" +
+          e +
+          "' has been renamed '" +
+          t +
+          "'. The old method will be removed in the next major version.",
+      ))
+  }
+  function le(e, t) {
+    a !== t &&
+      "" !== t &&
+      "null" !== t &&
+      R("Body " + e + ' set to "' + (document.body.style[e] = t) + '"')
+  }
+  function t(n) {
+    var e = {
+      add: function (e) {
+        function t() {
+          L(n.eventName, n.eventType)
+        }
+        (ee[e] = t), k(window, e, t, { passive: !0 })
+      },
+      remove: function (e) {
+        var t = ee[e]
+        delete ee[e], window.removeEventListener(e, t, !1)
+      },
+    }
+    n.eventNames && Array.prototype.map
+      ? ((n.eventName = n.eventNames[0]), n.eventNames.map(e[n.method]))
+      : e[n.method](n.eventName),
+      R(ue(n.method) + " event listener: " + n.eventType)
+  }
+  function fe(e) {
+    t({
+      method: e,
+      eventType: "Animation Start",
+      eventNames: ["animationstart", "webkitAnimationStart"],
+    }),
+      t({
+        method: e,
+        eventType: "Animation Iteration",
+        eventNames: ["animationiteration", "webkitAnimationIteration"],
+      }),
+      t({
+        method: e,
+        eventType: "Animation End",
+        eventNames: ["animationend", "webkitAnimationEnd"],
+      }),
+      t({ method: e, eventType: "Input", eventName: "input" }),
+      t({ method: e, eventType: "Mouse Up", eventName: "mouseup" }),
+      t({ method: e, eventType: "Mouse Down", eventName: "mousedown" }),
+      t({
+        method: e,
+        eventType: "Orientation Change",
+        eventName: "orientationchange",
+      }),
+      t({
+        method: e,
+        eventType: "Print",
+        eventNames: ["afterprint", "beforeprint"],
+      }),
+      t({
+        method: e,
+        eventType: "Ready State Change",
+        eventName: "readystatechange",
+      }),
+      t({ method: e, eventType: "Touch Start", eventName: "touchstart" }),
+      t({ method: e, eventType: "Touch End", eventName: "touchend" }),
+      t({ method: e, eventType: "Touch Cancel", eventName: "touchcancel" }),
+      t({
+        method: e,
+        eventType: "Transition Start",
+        eventNames: [
+          "transitionstart",
+          "webkitTransitionStart",
+          "MSTransitionStart",
+          "oTransitionStart",
+          "otransitionstart",
+        ],
+      }),
+      t({
+        method: e,
+        eventType: "Transition Iteration",
+        eventNames: [
+          "transitioniteration",
+          "webkitTransitionIteration",
+          "MSTransitionIteration",
+          "oTransitionIteration",
+          "otransitioniteration",
+        ],
+      }),
+      t({
+        method: e,
+        eventType: "Transition End",
+        eventNames: [
+          "transitionend",
+          "webkitTransitionEnd",
+          "MSTransitionEnd",
+          "oTransitionEnd",
+          "otransitionend",
+        ],
+      }),
+      "child" === b &&
+        t({ method: e, eventType: "IFrame Resized", eventName: "resize" })
+  }
+  function me(e, t, n, o) {
+    return (
+      t !== e &&
+        (e in n ||
+          (x(e + " is not a valid option for " + o + "CalculationMethod."),
+          (e = t)),
+        R(o + ' calculation method set to "' + e + '"')),
+      e
+    )
+  }
+  function he() {
+    m = me(m, n, C, "height")
+  }
+  function ge() {
+    M = me(M, K, z, "width")
+  }
+  function pe() {
+    var e
+    !0 === r
+      ? (fe("add"),
+        (e = g < 0),
+        window.MutationObserver || window.WebKitMutationObserver
+          ? e
+            ? ve()
+            : (s = (function () {
+                function t(e) {
+                  function t(e) {
+                    !1 === e.complete &&
+                      (R("Attach listeners to " + e.src),
+                      e.addEventListener("load", i, !1),
+                      e.addEventListener("error", r, !1),
+                      u.push(e))
+                  }
+                  "attributes" === e.type && "src" === e.attributeName
+                    ? t(e.target)
+                    : "childList" === e.type &&
+                      Array.prototype.forEach.call(
+                        e.target.querySelectorAll("img"),
+                        t,
+                      )
+                }
+                function o(e) {
+                  R("Remove listeners from " + e.src),
+                    e.removeEventListener("load", i, !1),
+                    e.removeEventListener("error", r, !1),
+                    u.splice(u.indexOf(e), 1)
+                }
+                function n(e, t, n) {
+                  o(e.target), L(t, n + ": " + e.target.src)
+                }
+                function i(e) {
+                  n(e, "imageLoad", "Image loaded")
+                }
+                function r(e) {
+                  n(e, "imageLoadFailed", "Image load failed")
+                }
+                function a(e) {
+                  L(
+                    "mutationObserver",
+                    "mutationObserver: " + e[0].target + " " + e[0].type,
+                  ),
+                    e.forEach(t)
+                }
+                var u = [],
+                  c = window.MutationObserver || window.WebKitMutationObserver,
+                  s = (function () {
+                    var e = document.querySelector("body")
+                    return (
+                      (s = new c(a)),
+                      R("Create body MutationObserver"),
+                      s.observe(e, {
+                        attributes: !0,
+                        attributeOldValue: !1,
+                        characterData: !0,
+                        characterDataOldValue: !1,
+                        childList: !0,
+                        subtree: !0,
+                      }),
+                      s
+                    )
+                  })()
+                return {
+                  disconnect: function () {
+                    "disconnect" in s &&
+                      (R("Disconnect body MutationObserver"),
+                      s.disconnect(),
+                      u.forEach(o))
+                  },
+                }
+              })())
+          : (R("MutationObserver not supported in this browser!"), ve()))
+      : R("Auto Resize disabled")
+  }
+  function ve() {
+    0 !== g &&
+      (R("setInterval: " + g + "ms"),
+      (B = setInterval(function () {
+        L("interval", "setInterval: " + g)
+      }, Math.abs(g))))
+  }
+  function ye(e, t) {
+    return (
+      (t = t || document.body),
+      (t =
+        null === (t = document.defaultView.getComputedStyle(t, null))
+          ? 0
+          : t[e]),
+      parseInt(t, 10)
+    )
+  }
+  function we(e, t) {
+    for (
+      var n, o = t.length, i = 0, r = ue(e), a = Date.now(), u = 0;
+      u < o;
+      u++
+    )
+      i < (n = t[u].getBoundingClientRect()[e] + ye("margin" + r, t[u])) &&
+        (i = n)
+    return (
+      (a = Date.now() - a),
+      R("Parsed " + o + " HTML elements"),
+      R("Element position calculated in " + a + "ms"),
+      O / 2 < (a = a) && R("Event throttle increased to " + (O = 2 * a) + "ms"),
+      i
+    )
+  }
+  function e(e) {
+    return [
+      e.bodyOffset(),
+      e.bodyScroll(),
+      e.documentElementOffset(),
+      e.documentElementScroll(),
+    ]
+  }
+  function be(e, t) {
+    var n = document.querySelectorAll("[" + t + "]")
+    return (
+      0 === n.length &&
+        (x("No tagged elements (" + t + ") found on page"),
+        document.querySelectorAll("body *")),
+      we(e, n)
+    )
+  }
+  function Te() {
+    return document.querySelectorAll("body *")
+  }
+  function Ee(e, t, n, o) {
+    function i() {
+      e in { init: 1, interval: 1, size: 1 } || !(m in U || (d && M in U))
+        ? e in { interval: 1 } || R("No change in size detected")
+        : Ie(t)
+    }
+    function r(e, t) {
+      return !(Math.abs(e - t) <= E)
+    }
+    (n = a === n ? C[m]() : n),
+      (o = a === o ? z[M]() : o),
+      r(f, n) || (d && r(S, o)) || "init" === e
+        ? (Se(), F((f = n), (S = o), e))
+        : i()
+  }
+  function Oe() {
+    (A = Date.now()), (N = null), (ie = oe.apply(o, I)), N || (o = I = null)
+  }
+  function L(e, t, n, o) {
+    i && e in j
+      ? R("Trigger event cancelled: " + e)
+      : (e in { reset: 1, resetPage: 1, init: 1 } || R("Trigger event: " + t),
+        ("init" === e ? Ee : re)(e, t, n, o))
+  }
+  function Se() {
+    i || ((i = !0), R("Trigger event lock on")),
+      clearTimeout(Y),
+      (Y = setTimeout(function () {
+        (i = !1), R("Trigger event lock off"), R("--")
+      }, l))
+  }
+  function Me(e) {
+    (f = C[m]()), (S = z[M]()), F(f, S, e)
+  }
+  function Ie(e) {
+    var t = m;
+    (m = n), R("Reset trigger event: " + e), Se(), Me("reset"), (m = t)
+  }
+  function F(e, t, n, o, i) {
+    !0 === V &&
+      (a === i ? (i = T) : R("Message targetOrigin: " + i),
+      R(
+        "Sending message to host page (" +
+          (e = w + ":" + (e + ":" + t) + ":" + n + (a === o ? "" : ":" + o)) +
+          ")",
+      ),
+      X.postMessage(y + e, i))
+  }
+  function Ne() {
+    "loading" !== document.readyState &&
+      window.parent.postMessage("[iFrameResizerChild]Ready", "*")
+  }
+})()
 //# sourceMappingURL=iframeResizer.contentWindow.map
diff --git a/client/server/plugins/embeddable.js b/client/server/plugins/embeddable.js
index cdfe1f060..86c15d2a3 100644
--- a/client/server/plugins/embeddable.js
+++ b/client/server/plugins/embeddable.js
@@ -1,12 +1,12 @@
-export default defineNitroPlugin(nitroApp => {
-  nitroApp.hooks.hook('render:response', (response, { event }) => {
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook("render:response", (response, { event }) => {
     const routePath = event.node?.req?.url || event.node?.req?.originalUrl
     // const routePath= event.context.params._
-    if (routePath && !routePath.startsWith('/forms/')) {
+    if (routePath && !routePath.startsWith("/forms/")) {
       // Only allow embedding of forms
-      response.headers['X-Frame-Options'] = 'sameorigin'
+      response.headers["X-Frame-Options"] = "sameorigin"
     }
 
-    delete response.headers['x-powered-by']
+    delete response.headers["x-powered-by"]
   })
 })
diff --git a/client/sitemap.js b/client/sitemap.js
index 939c9a820..d15e12120 100644
--- a/client/sitemap.js
+++ b/client/sitemap.js
@@ -1,7 +1,5 @@
 export default {
-  exclude: ['/settings/**', '/subscriptions/**', '/templates/my-templates'],
-  sources: [
-    process.env.NUXT_PUBLIC_API_BASE + '/sitemap-urls'
-  ],
-  cacheMaxAgeSeconds: 3600
+  exclude: ["/settings/**", "/subscriptions/**", "/templates/my-templates"],
+  sources: [process.env.NUXT_PUBLIC_API_BASE + "/sitemap-urls"],
+  cacheMaxAgeSeconds: 3600,
 }
diff --git a/client/stores/app.js b/client/stores/app.js
index e40e8f896..853285f7c 100644
--- a/client/stores/app.js
+++ b/client/stores/app.js
@@ -1,10 +1,9 @@
+import { defineStore } from "pinia"
+import { nextTick } from "vue"
 
-import { defineStore } from 'pinia'
-import { nextTick } from 'vue'
-
-export const useAppStore = defineStore('app', {
+export const useAppStore = defineStore("app", {
   state: () => ({
-    layout: 'default',
+    layout: "default",
     navbarHidden: false,
 
     // App Loader
@@ -14,36 +13,36 @@ export const useAppStore = defineStore('app', {
       canSuccess: true,
       duration: 3000,
       _timer: null,
-      _cut: null
-    }
+      _cut: null,
+    },
   }),
   actions: {
-    hideNavbar () {
+    hideNavbar() {
       this.navbarHidden = true
     },
-    showNavbar () {
+    showNavbar() {
       this.navbarHidden = false
     },
-    setLayout (layout) {
-      this.layout = layout ?? 'default'
+    setLayout(layout) {
+      this.layout = layout ?? "default"
     },
-    loaderIncrease (num) {
+    loaderIncrease(num) {
       this.loader.percent = this.loader.percent + Math.floor(num)
     },
-    loaderDecrease (num) {
+    loaderDecrease(num) {
       this.loader.percent = this.loader.percent - Math.floor(num)
     },
-    loaderFinish () {
+    loaderFinish() {
       this.loader.percent = 100
       this.loaderHide()
     },
-    loaderSetTimer (timerVal) {
+    loaderSetTimer(timerVal) {
       this.loader._timer = timerVal
     },
-    loaderPause () {
+    loaderPause() {
       clearInterval(this.loader._timer)
     },
-    loaderHide () {
+    loaderHide() {
       this.loaderPause()
       this.loader._timer = null
       setTimeout(() => {
@@ -55,10 +54,10 @@ export const useAppStore = defineStore('app', {
         })
       }, 500)
     },
-    loaderFail () {
+    loaderFail() {
       this.loader.canSuccess = false
     },
-    loaderStart () {
+    loaderStart() {
       this.loader.show = true
       this.loader.canSuccess = true
       if (this.loader._timer) {
@@ -67,12 +66,14 @@ export const useAppStore = defineStore('app', {
       }
       this.loader._cut = 10000 / Math.floor(this.loader.duration)
 
-      this.loaderSetTimer(setInterval(() => {
-        this.loaderIncrease(this.loader._cut * Math.random())
-        if (this.loader.percent > 95) {
-          this.loaderFinish()
-        }
-      }, 100))
-    }
-  }
+      this.loaderSetTimer(
+        setInterval(() => {
+          this.loaderIncrease(this.loader._cut * Math.random())
+          if (this.loader.percent > 95) {
+            this.loaderFinish()
+          }
+        }, 100),
+      )
+    },
+  },
 })
diff --git a/client/stores/auth.js b/client/stores/auth.js
index 980715540..099db9cff 100644
--- a/client/stores/auth.js
+++ b/client/stores/auth.js
@@ -1,6 +1,6 @@
-import {defineStore} from 'pinia'
+import { defineStore } from "pinia"
 
-export const useAuthStore = defineStore('auth', {
+export const useAuthStore = defineStore("auth", {
   state: () => {
     return {
       token: null,
@@ -9,8 +9,9 @@ export const useAuthStore = defineStore('auth', {
     }
   },
   getters: {
-    check: (state) => (state.user !== null && state.user !== undefined),
-    isImpersonating: (state) => (state.admin_token !== null && state.admin_token !== undefined)
+    check: (state) => state.user !== null && state.user !== undefined,
+    isImpersonating: (state) =>
+      state.admin_token !== null && state.admin_token !== undefined,
   },
   actions: {
     // Stores admin token temporarily for impersonation
@@ -24,12 +25,12 @@ export const useAuthStore = defineStore('auth', {
     },
 
     setToken(token) {
-      this.setCookie('token', token)
+      this.setCookie("token", token)
       this.token = token
     },
 
     setAdminToken(token) {
-      this.setCookie('admin_token', token)
+      this.setCookie("admin_token", token)
       this.admin_token = token
     },
 
@@ -46,7 +47,7 @@ export const useAuthStore = defineStore('auth', {
 
     setUser(user) {
       if (!user) {
-        console.error('No user, logging out.')
+        console.error("No user, logging out.")
         this.setToken(null)
       }
 
@@ -68,16 +69,15 @@ export const useAuthStore = defineStore('auth', {
     },
 
     logout() {
-      opnFetch('logout', {method: 'POST'}).catch((error) => {
-      })
+      opnFetch("logout", { method: "POST" }).catch(() => {})
 
       this.user = null
       this.setToken(null)
     },
 
-    async fetchOauthUrl(provider) {
+    // async fetchOauthUrl() {
       // const {data} = await axios.post(`/api/oauth/${provider}`)
       // return data.url
-    }
-  }
+    // },
+  },
 })
diff --git a/client/stores/errors.js b/client/stores/errors.js
index 30d97ec2b..32ed20093 100644
--- a/client/stores/errors.js
+++ b/client/stores/errors.js
@@ -1,15 +1,15 @@
-import { defineStore } from 'pinia'
+import { defineStore } from "pinia"
 
-export const useErrorsStore = defineStore('errors', {
+export const useErrorsStore = defineStore("errors", {
   state: () => ({
-    content: null
+    content: null,
   }),
   actions: {
-    set (error) {
+    set(error) {
       this.content = error
     },
-    clear () {
+    clear() {
       this.content = null
-    }
-  }
+    },
+  },
 })
diff --git a/client/stores/form_integrations.js b/client/stores/form_integrations.js
index d92cde08b..6d1cffef4 100644
--- a/client/stores/form_integrations.js
+++ b/client/stores/form_integrations.js
@@ -1,13 +1,12 @@
-import {defineStore} from 'pinia'
-import {useContentStore} from "~/composables/stores/useContentStore.js";
-import integrationsList from '~/data/forms/integrations.json'
+import { defineStore } from "pinia"
+import { useContentStore } from "~/composables/stores/useContentStore.js"
+import integrationsList from "~/data/forms/integrations.json"
 
-export const formIntegrationsEndpoint = '/open/forms/{formid}/integrations'
-
-export const useFormIntegrationsStore = defineStore('form_integrations', () => {
+export const formIntegrationsEndpoint = "/open/forms/{formid}/integrations"
 
+export const useFormIntegrationsStore = defineStore("form_integrations", () => {
   const contentStore = useContentStore()
-  const integrations = ref(new Map)
+  const integrations = ref(new Map())
 
   const availableIntegrations = computed(() => {
     const user = useAuthStore().user
@@ -18,7 +17,7 @@ export const useFormIntegrationsStore = defineStore('form_integrations', () => {
       enrichedIntegrations.set(key, {
         ...integration,
         id: key,
-        requires_subscription: !user.is_subscribed && integration.is_pro
+        requires_subscription: !user.is_subscribed && integration.is_pro,
       })
     }
 
@@ -26,29 +25,31 @@ export const useFormIntegrationsStore = defineStore('form_integrations', () => {
   })
 
   const integrationsBySection = computed(() => {
-    const groupedObject = {};
+    const groupedObject = {}
     for (const [key, integration] of availableIntegrations.value.entries()) {
-      const sectionName = integration.section_name;
+      const sectionName = integration.section_name
       if (!groupedObject[sectionName]) {
-        groupedObject[sectionName] = {};
+        groupedObject[sectionName] = {}
       }
       groupedObject[sectionName][key] = integration
     }
-    return groupedObject;
+    return groupedObject
   })
 
   const fetchFormIntegrations = (formId) => {
     contentStore.resetState()
     contentStore.startLoading()
-    return useOpnApi(formIntegrationsEndpoint.replace('{formid}', formId)).then((response) => {
-      contentStore.save(response.data.value)
-      contentStore.stopLoading()
-    })
+    return useOpnApi(formIntegrationsEndpoint.replace("{formid}", formId)).then(
+      (response) => {
+        contentStore.save(response.data.value)
+        contentStore.stopLoading()
+      },
+    )
   }
 
   const getAllByFormId = (formId) => {
     return contentStore.getAll.value.filter((item) => {
-      return (item.form_id) ? item.form_id === formId : false
+      return item.form_id ? item.form_id === formId : false
     })
   }
 
diff --git a/client/stores/forms.js b/client/stores/forms.js
index 799b9dde9..41c02b56e 100644
--- a/client/stores/forms.js
+++ b/client/stores/forms.js
@@ -1,18 +1,19 @@
-import {defineStore} from 'pinia'
-import {useContentStore} from "~/composables/stores/useContentStore.js";
+import { defineStore } from "pinia"
+import { useContentStore } from "~/composables/stores/useContentStore.js"
 
-export const formsEndpoint = '/open/workspaces/{workspaceId}/forms'
-export const singleFormEndpoint = '/open/forms/{slug}'
+export const formsEndpoint = "/open/workspaces/{workspaceId}/forms"
+export const singleFormEndpoint = "/open/forms/{slug}"
 
-export const useFormsStore = defineStore('forms', () => {
-
-  const contentStore = useContentStore('slug')
+export const useFormsStore = defineStore("forms", () => {
+  const contentStore = useContentStore("slug")
   const allLoaded = ref(false)
   const currentPage = ref(1)
 
   const loadAll = (workspaceId) => {
     contentStore.startLoading()
-    return opnFetch(formsEndpoint.replace('{workspaceId}', workspaceId),{query: {page: currentPage.value}})
+    return opnFetch(formsEndpoint.replace("{workspaceId}", workspaceId), {
+      query: { page: currentPage.value },
+    })
       .then((response) => {
         if (currentPage.value === 1) {
           contentStore.resetState()
@@ -28,7 +29,8 @@ export const useFormsStore = defineStore('forms', () => {
           contentStore.stopLoading()
           currentPage.value = 1
         }
-      }).catch((error) => {
+      })
+      .catch((error) => {
         contentStore.stopLoading()
         currentPage.value = 1
         throw error
@@ -36,8 +38,8 @@ export const useFormsStore = defineStore('forms', () => {
   }
   const loadForm = (slug) => {
     contentStore.startLoading()
-    return opnFetch(singleFormEndpoint.replace('{slug}', slug))
-      .then(response => {
+    return opnFetch(singleFormEndpoint.replace("{slug}", slug))
+      .then((response) => {
         contentStore.save(response)
       })
       .finally(() => {
@@ -47,10 +49,11 @@ export const useFormsStore = defineStore('forms', () => {
 
   const load = (workspaceId, slug) => {
     contentStore.startLoading()
-    return opnFetch(formsEndpoint.replace('{workspaceId}', workspaceId) + '/' + slug)
-      .finally(() => {
-        contentStore.stopLoading()
-      })
+    return opnFetch(
+      formsEndpoint.replace("{workspaceId}", workspaceId) + "/" + slug,
+    ).finally(() => {
+      contentStore.stopLoading()
+    })
   }
 
   /**
@@ -58,20 +61,20 @@ export const useFormsStore = defineStore('forms', () => {
    */
   const publicLoad = (slug) => {
     contentStore.startLoading()
-    return useOpnApi('/forms/' + slug)
+    return useOpnApi("/forms/" + slug)
   }
 
   const publicFetch = (slug) => {
     contentStore.startLoading()
-    return opnFetch('/forms/' + slug)
+    return opnFetch("/forms/" + slug)
   }
 
   const allTags = computed(() => {
     let tags = []
     contentStore.getAll.value.forEach((form) => {
       if (form.tags && form.tags.length) {
-        if (typeof form.tags === 'string' || form.tags instanceof String ) {
-          tags = tags.concat(form.tags.split(','))
+        if (typeof form.tags === "string" || form.tags instanceof String) {
+          tags = tags.concat(form.tags.split(","))
         } else if (Array.isArray(form.tags)) {
           tags = tags.concat(form.tags)
         }
diff --git a/client/stores/notion_pages.js b/client/stores/notion_pages.js
index f5031f164..608f78c94 100644
--- a/client/stores/notion_pages.js
+++ b/client/stores/notion_pages.js
@@ -1,8 +1,7 @@
-import {defineStore} from 'pinia'
-import {useContentStore} from "~/composables/stores/useContentStore.js";
-import opnformConfig from "~/opnform.config.js";
-export const useNotionPagesStore = defineStore('notion_pages', () => {
-
+import { defineStore } from "pinia"
+import { useContentStore } from "~/composables/stores/useContentStore.js"
+import opnformConfig from "~/opnform.config.js"
+export const useNotionPagesStore = defineStore("notion_pages", () => {
   const contentStore = useContentStore()
 
   const load = (pageId) => {
@@ -10,9 +9,9 @@ export const useNotionPagesStore = defineStore('notion_pages', () => {
 
     const apiUrl = opnformConfig.notion.worker
     return useFetch(`${apiUrl}/page/${pageId}`)
-      .then(({data, error})=> {
+      .then(({ data }) => {
         const val = data.value
-        val['id'] = pageId
+        val["id"] = pageId
         contentStore.save(val)
       })
       .finally(() => {
@@ -22,6 +21,6 @@ export const useNotionPagesStore = defineStore('notion_pages', () => {
 
   return {
     ...contentStore,
-    load
+    load,
   }
 })
diff --git a/client/stores/records.js b/client/stores/records.js
index 7dde38f29..2d2ed7fce 100644
--- a/client/stores/records.js
+++ b/client/stores/records.js
@@ -1,14 +1,13 @@
-import { defineStore } from 'pinia'
-import { useContentStore } from '~/composables/stores/useContentStore'
+import { defineStore } from "pinia"
+import { useContentStore } from "~/composables/stores/useContentStore"
 
 /**
  * Loads records from database
  */
-export const useRecordsStore = defineStore('records', ()=>{
-
+export const useRecordsStore = defineStore("records", () => {
   const contentStore = useContentStore()
 
-  const loadRecord = (request)=> {
+  const loadRecord = (request) => {
     contentStore.resetState()
     contentStore.startLoading()
     return request.then((data) => {
@@ -16,6 +15,5 @@ export const useRecordsStore = defineStore('records', ()=>{
       contentStore.stopLoading()
     })
   }
-  return {...contentStore, loadRecord}
-
+  return { ...contentStore, loadRecord }
 })
diff --git a/client/stores/templates.js b/client/stores/templates.js
index 10ecdcf0b..7fa9ab2c9 100644
--- a/client/stores/templates.js
+++ b/client/stores/templates.js
@@ -1,28 +1,31 @@
-import {defineStore} from 'pinia'
-import {useContentStore} from "~/composables/stores/useContentStore.js";
+import { defineStore } from "pinia"
+import { useContentStore } from "~/composables/stores/useContentStore.js"
 import templateTypes from "~/data/forms/templates/types.json"
 import industryTypes from "~/data/forms/templates/industries.json"
 
-const templatesEndpoint = 'templates'
-export const useTemplatesStore = defineStore('templates', () => {
-
-  const contentStore = useContentStore('slug')
+const templatesEndpoint = "templates"
+export const useTemplatesStore = defineStore("templates", () => {
+  const contentStore = useContentStore("slug")
 
   const allLoaded = ref(false)
-  const industries = ref(new Map)
-  const types = ref(new Map)
+  const industries = ref(new Map())
+  const types = ref(new Map())
 
   const getTemplateTypes = (slugs) => {
     if (!slugs) return []
-    return slugs.map((slug) => {
-      return types.value.get(slug)
-    }).filter((item) => item !== undefined)
+    return slugs
+      .map((slug) => {
+        return types.value.get(slug)
+      })
+      .filter((item) => item !== undefined)
   }
   const getTemplateIndustries = (slugs) => {
     if (!slugs) return []
-    return slugs.map((slug) => {
-      return industries.value.get(slug)
-    }).filter((item) => item !== undefined)
+    return slugs
+      .map((slug) => {
+        return industries.value.get(slug)
+      })
+      .filter((item) => item !== undefined)
   }
 
   const initTypesAndIndustries = () => {
@@ -41,23 +44,23 @@ export const useTemplatesStore = defineStore('templates', () => {
     allLoaded,
     getTemplateTypes,
     getTemplateIndustries,
-    initTypesAndIndustries
+    initTypesAndIndustries,
   }
 })
 
 export const fetchTemplate = (slug, options = {}) => {
-  return useOpnApi(templatesEndpoint + '/' + slug, options)
+  return useOpnApi(templatesEndpoint + "/" + slug, options)
 }
 
 export const fetchAllTemplates = (options = {}) => {
   return useOpnApi(templatesEndpoint, options)
 }
 
-export const loadAllTemplates = async (store, options={}) => {
+export const loadAllTemplates = async (store, options = {}) => {
   if (!store.allLoaded) {
     store.startLoading()
     store.initTypesAndIndustries()
-    const {data,error} = await fetchAllTemplates(options)
+    const { data } = await fetchAllTemplates(options)
     store.set(data.value)
     store.stopLoading()
     store.allLoaded = true
diff --git a/client/stores/working_form.js b/client/stores/working_form.js
index 307443a96..496cdfdc4 100644
--- a/client/stores/working_form.js
+++ b/client/stores/working_form.js
@@ -1,54 +1,58 @@
-import { defineStore } from 'pinia'
+import { defineStore } from "pinia"
 
-export const useWorkingFormStore = defineStore('working_form', {
+export const useWorkingFormStore = defineStore("working_form", {
   state: () => ({
     content: null,
 
     // Field being edited
     selectedFieldIndex: null,
     showEditFieldSidebar: null,
-    showAddFieldSidebar: null
+    showAddFieldSidebar: null,
   }),
   actions: {
-    set (form) {
+    set(form) {
       this.content = form
     },
-    setProperties (properties) {
+    setProperties(properties) {
       this.content.properties = [...properties]
     },
-    openSettingsForField (index) {
+    openSettingsForField(index) {
       // If field is passed, compute index
-      if (typeof index === 'object') {
-        index = this.content.properties.findIndex(prop => prop.id === index.id)
+      if (typeof index === "object") {
+        index = this.content.properties.findIndex(
+          (prop) => prop.id === index.id,
+        )
       }
       this.selectedFieldIndex = index
       this.showEditFieldSidebar = true
       this.showAddFieldSidebar = false
     },
-    closeEditFieldSidebar () {
+    closeEditFieldSidebar() {
       this.selectedFieldIndex = null
       this.showEditFieldSidebar = false
       this.showAddFieldSidebar = false
     },
-    openAddFieldSidebar (index) {
+    openAddFieldSidebar(index) {
       // If field is passed, compute index
-      if (index !== null && typeof index === 'object') {
-        index = this.content.properties.findIndex(prop => prop.id === index.id)
+      if (index !== null && typeof index === "object") {
+        index = this.content.properties.findIndex(
+          (prop) => prop.id === index.id,
+        )
       }
       this.selectedFieldIndex = index
       this.showAddFieldSidebar = true
       this.showEditFieldSidebar = false
     },
-    closeAddFieldSidebar () {
+    closeAddFieldSidebar() {
       this.selectedFieldIndex = null
       this.showAddFieldSidebar = false
       this.showEditFieldSidebar = false
     },
-    reset () {
+    reset() {
       this.content = null
       this.selectedFieldIndex = null
       this.showEditFieldSidebar = null
       this.showAddFieldSidebar = null
-    }
-  }
+    },
+  },
 })
diff --git a/client/stores/workspaces.js b/client/stores/workspaces.js
index be7f96ade..9b5fa6359 100644
--- a/client/stores/workspaces.js
+++ b/client/stores/workspaces.js
@@ -1,12 +1,10 @@
-import {defineStore} from 'pinia'
-import {useStorage} from "@vueuse/core"
-import {useContentStore} from "~/composables/stores/useContentStore.js";
+import { defineStore } from "pinia"
+import { useContentStore } from "~/composables/stores/useContentStore.js"
 
-export const workspaceEndpoint = 'open/workspaces/'
+export const workspaceEndpoint = "open/workspaces/"
 
-export const useWorkspacesStore = defineStore('workspaces', () => {
-
-  const storedWorkspaceId = useCookie('currentWorkspace')
+export const useWorkspacesStore = defineStore("workspaces", () => {
+  const storedWorkspaceId = useCookie("currentWorkspace")
 
   const contentStore = useContentStore()
   const currentId = ref(storedWorkspaceId)
@@ -21,13 +19,13 @@ export const useWorkspacesStore = defineStore('workspaces', () => {
   }
 
   const set = (items) => {
-    contentStore.content.value = new Map
+    contentStore.content.value = new Map()
     save(items)
   }
 
   const save = (items) => {
     contentStore.save(items)
-    if ((getCurrent.value == null) && contentStore.length.value) {
+    if (getCurrent.value == null && contentStore.length.value) {
       setCurrentId(items[0].id)
     }
   }
@@ -35,7 +33,9 @@ export const useWorkspacesStore = defineStore('workspaces', () => {
   const remove = (itemId) => {
     contentStore.remove(itemId)
     if (currentId.value === itemId) {
-      setCurrentId(contentStore.length.value > 0 ? contentStore.getAll.value[0].id : null)
+      setCurrentId(
+        contentStore.length.value > 0 ? contentStore.getAll.value[0].id : null,
+      )
     }
   }
 
@@ -46,7 +46,7 @@ export const useWorkspacesStore = defineStore('workspaces', () => {
     setCurrentId,
     set,
     save,
-    remove
+    remove,
   }
 })
 
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 33f76d551..0fcf89985 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -1,5 +1,5 @@
-const colors = require('tailwindcss/colors')
-const plugin = require('tailwindcss/plugin')
+const colors = require("tailwindcss/colors")
+const plugin = require("tailwindcss/plugin")
 
 module.exports = {
   content: [
@@ -9,86 +9,89 @@ module.exports = {
     "./plugins/**/*.{js,ts}",
     "./app.vue",
     "./error.vue",
-    "./lib/forms/form-themes.js"
+    "./lib/forms/form-themes.js",
   ],
   safelist: [
     {
       pattern: /.*bg-(blue|gray|red|yellow|green).*/,
     },
-    ...['green', 'red', 'blue', 'yellow'].map((color) => ['bg-' + color + '-100', 'border-' + color + '-500']).flat(), // Alerts
-    ...['dark:hover:bg-notion-dark-light']
+    ...["green", "red", "blue", "yellow"]
+      .map((color) => ["bg-" + color + "-100", "border-" + color + "-500"])
+      .flat(), // Alerts
+    ...["dark:hover:bg-notion-dark-light"],
   ],
-  darkMode: 'class', // or 'media' or 'class'
+  darkMode: "class", // or 'media' or 'class'
   theme: {
     extend: {
       keyframes: {
-        'bonce-slow': {
-          '0%, 20%': {transform: 'translateY(0)'},
-          '8%': {transform: 'translateY(-25%)'},
-          '16%': {transform: 'translateY(+10%)'}
+        "bonce-slow": {
+          "0%, 20%": { transform: "translateY(0)" },
+          "8%": { transform: "translateY(-25%)" },
+          "16%": { transform: "translateY(+10%)" },
+        },
+        "infinite-scroll": {
+          from: { transform: "translateX(0)" },
+          to: { transform: "translateX(-100%)" },
         },
-        'infinite-scroll': {
-          from: {transform: 'translateX(0)'},
-          to: {transform: 'translateX(-100%)'},
-        }
       },
       animation: {
-        'bounce-slow': 'bonce-slow 3s ease-in-out infinite',
-        'infinite-scroll': 'infinite-scroll 50s linear infinite',
+        "bounce-slow": "bonce-slow 3s ease-in-out infinite",
+        "infinite-scroll": "infinite-scroll 50s linear infinite",
       },
       maxHeight: {
-        42: '10.5rem'
+        42: "10.5rem",
       },
       minHeight: {
-        6: '1.5rem',
-        8: '2rem'
+        6: "1.5rem",
+        8: "2rem",
       },
       maxWidth: {
-        15: '15rem',
-        10: '10rem',
-        8: '2rem'
+        15: "15rem",
+        10: "10rem",
+        8: "2rem",
       },
       translate: {
-        5.5: '1.4rem'
+        5.5: "1.4rem",
       },
       boxShadow: {
-        'inner-notion': '#0f0f0f1a 0px 0px 0px 1px inset',
-        'focus-notion': '#2eaadcb3 0px 0px 0px 1px inset, #2eaadc66 0px 0px 0px 2px !important'
+        "inner-notion": "#0f0f0f1a 0px 0px 0px 1px inset",
+        "focus-notion":
+          "#2eaadcb3 0px 0px 0px 1px inset, #2eaadc66 0px 0px 0px 2px !important",
       },
       colors: {
         gray: colors.slate,
-        'nt-blue': {
-          lighter: colors.blue['100'],
-          light: colors.blue['300'],
-          default: colors.blue['600'],
-          DEFAULT: colors.blue['600'],
-          dark: colors.blue['800']
+        "nt-blue": {
+          lighter: colors.blue["100"],
+          light: colors.blue["300"],
+          default: colors.blue["600"],
+          DEFAULT: colors.blue["600"],
+          dark: colors.blue["800"],
         },
-        'notion-dark': {
-          DEFAULT: '#191919',
-          light: '#2e2e2e'
+        "notion-dark": {
+          DEFAULT: "#191919",
+          light: "#2e2e2e",
         },
-        'notion-input': {
-          background: '#F7F6F3',
-          backgroundDark: '#272B2C',
-          help: '#37352f99',
-          helpDark: '#fff9'
+        "notion-input": {
+          background: "#F7F6F3",
+          backgroundDark: "#272B2C",
+          help: "#37352f99",
+          helpDark: "#fff9",
         },
-        'form-color': 'var(--bg-form-color)'
+        "form-color": "var(--bg-form-color)",
       },
       transitionProperty: {
-        height: 'height',
-        width: 'width',
-        maxWidth: 'max-width',
-        spacing: 'margin, padding'
-      }
-    }
+        height: "height",
+        width: "width",
+        maxWidth: "max-width",
+        spacing: "margin, padding",
+      },
+    },
   },
   plugins: [
-    require('@tailwindcss/aspect-ratio'),
-    plugin(function ({addVariant}) {
-      addVariant('between', '&:not(:first-child):not(:last-child)')
-      addVariant('hocus', ['&:hover', '&:focus'])
-    })
-  ]
+    require("@tailwindcss/aspect-ratio"),
+    plugin(function ({ addVariant }) {
+      addVariant("between", "&:not(:first-child):not(:last-child)")
+      addVariant("hocus", ["&:hover", "&:focus"])
+    }),
+  ],
 }

From dbf5fd5bcc87701e4e25ac2fc836f368ad8f371d Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com>
Date: Wed, 17 Apr 2024 20:04:26 +0530
Subject: [PATCH 2/3] =?UTF-8?q?Field=E2=80=99s=20setting=20sidebar=20UI=20?=
 =?UTF-8?q?improvement=20(#378)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FormBlockLogicEditor.vue                  |   2 +-
 .../forms/fields/components/BlockOptions.vue  |  12 +-
 .../forms/fields/components/FieldOptions.vue  | 147 +++++++-----------
 3 files changed, 63 insertions(+), 98 deletions(-)

diff --git a/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue b/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
index 20e4040c8..f8ee610f6 100644
--- a/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
+++ b/client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue
@@ -75,7 +75,7 @@
     <h5 class="font-semibold mt-3">
       2. Actions
     </h5>
-    <select-input
+    <flat-select-input
       :key="resetKey"
       v-model="logic.actions"
       name="actions"
diff --git a/client/components/open/forms/fields/components/BlockOptions.vue b/client/components/open/forms/fields/components/BlockOptions.vue
index 412c36d16..f5c97980c 100644
--- a/client/components/open/forms/fields/components/BlockOptions.vue
+++ b/client/components/open/forms/fields/components/BlockOptions.vue
@@ -8,14 +8,12 @@
       <p class="text-gray-400 mb-3 text-xs">
         Exclude this field or make it required.
       </p>
-      <v-checkbox
-        v-model="field.hidden"
-        class="mb-3"
-        :name="field.id + '_hidden'"
+      <toggle-switch-input
+        :form="field"
+        name="hidden"
+        label="Hidden"
         @update:model-value="onFieldHiddenChange"
-      >
-        Hidden
-      </v-checkbox>
+      />
       <select-input
         name="width"
         class="mt-3"
diff --git a/client/components/open/forms/fields/components/FieldOptions.vue b/client/components/open/forms/fields/components/FieldOptions.vue
index 58fb64c1b..fae062cfb 100644
--- a/client/components/open/forms/fields/components/FieldOptions.vue
+++ b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -42,17 +42,12 @@
       <p class="text-gray-400 mb-3 text-xs">
         Advanced options for checkbox.
       </p>
-      <v-checkbox
-        v-model="field.use_toggle_switch"
-        class="mt-3"
+      <toggle-switch-input
+        :form="field"
         name="use_toggle_switch"
-        help=""
-      >
-        Use toggle switch
-      </v-checkbox>
-      <p class="text-gray-400 mb-3 text-xs">
-        If enabled, checkbox will be replaced with a toggle switch
-      </p>
+        label="Use toggle switch"
+        help="If enabled, checkbox will be replaced with a toggle switch"
+      />
     </div>
 
     <!-- File Uploads -->
@@ -60,23 +55,19 @@
       v-if="field.type === 'files'"
       class="border-b py-2 px-4"
     >
-      <h3 class="font-semibold block text-lg">
+      <h3 class="font-semibold block text-lg mb-3">
         File uploads
       </h3>
-      <v-checkbox
-        v-model="field.multiple"
-        class="mt-3"
-        :name="field.id + '_multiple'"
-      >
-        Allow multiple files
-      </v-checkbox>
-      <v-checkbox
-        v-model="field.camera_upload"
-        class="mt-3"
-        :name="field.id+'_camera_upload'"
-      >
-        Allow Camera uploads
-      </v-checkbox>
+      <toggle-switch-input
+        :form="field"
+        name="multiple"
+        label="Allow multiple files"
+      />
+      <toggle-switch-input
+        :form="field"
+        name="camera_upload"
+        label="Allow Camera uploads"
+      />
       <text-input
         name="allowed_file_types"
         class="mt-3"
@@ -207,14 +198,12 @@
       <p class="text-gray-400 mb-3 text-xs">
         Keep it simple or make it a multi-lines input.
       </p>
-      <v-checkbox
-        v-model="field.multi_lines"
-        class="mb-2"
-        :name="field.id + '_multi_lines'"
+      <toggle-switch-input
+        :form="field"
+        name="multi_lines"
+        label="Multi-lines input"
         @update:model-value="field.multi_lines = $event"
-      >
-        Multi-lines input
-      </v-checkbox>
+      />
     </div>
 
     <!--   Date Options   -->
@@ -293,26 +282,19 @@
         help="Add one option per line"
         @update:model-value="onFieldOptionsChange"
       />
-      <v-checkbox
-        v-model="field.allow_creation"
+      <toggle-switch-input
+        :form="field"
         name="allow_creation"
-        help=""
+        label="Allow respondent to create new options"
         @update:model-value="onFieldAllowCreationChange"
-      >
-        Allow respondent to create new options
-      </v-checkbox>
-      <v-checkbox
-        v-model="field.without_dropdown"
-        class="mt-3"
+      />
+      <toggle-switch-input
+        :form="field"
         name="without_dropdown"
-        help=""
+        label="Always show all select options"
+        help="Options won't be in a dropdown anymore, but will all be visible"
         @update:model-value="onFieldWithoutDropdownChange"
-      >
-        Always show all select options
-      </v-checkbox>
-      <p class="text-gray-400 mb-3 text-xs">
-        Options won't be in a dropdown anymore, but will all be visible
-      </p>
+      />
     </div>
 
     <!-- Customization - Placeholder, Prefill, Relabel, Field Help    -->
@@ -336,22 +318,18 @@
         label="Field Name"
       />
 
-      <v-checkbox
-        v-model="field.hide_field_name"
-        class="mt-3"
-        :name="field.id + '_hide_field_name'"
-      >
-        Hide field name
-      </v-checkbox>
+      <toggle-switch-input
+        :form="field"
+        name="hide_field_name"
+        label="Hide field name"
+      />
 
-      <v-checkbox
+      <toggle-switch-input
         v-if="field.type === 'phone_number'"
-        v-model="field.use_simple_text_input"
-        class="mt-3"
-        :name="field.id + '_use_simple_text_input'"
-      >
-        Use simple text input
-      </v-checkbox>
+        :form="field"
+        name="use_simple_text_input"
+        label="Use simple text input"
+      />
       <template v-if="field.type === 'phone_number' && !field.use_simple_text_input">
         <select-input
           v-model="field.unavailable_countries"
@@ -414,15 +392,13 @@
       </template>
 
       <!-- Pre-fill depends on type -->
-      <v-checkbox
+      <toggle-switch-input
         v-if="field.type == 'checkbox'"
-        v-model="field.prefill"
-        class="mt-3"
-        :name="field.id + '_prefill'"
+        :form="field"
+        name="prefill"
+        label="Pre-filled value"
         @update:model-value="field.prefill = $event"
-      >
-        Pre-filled value
-      </v-checkbox>
+      />
       <select-input
         v-else-if="['select', 'multi_select'].includes(field.type)"
         name="prefill"
@@ -559,29 +535,20 @@
       <h3 class="font-semibold block text-lg mb-3">
         Advanced Options
       </h3>
-
-      <v-checkbox
-        v-model="field.generates_uuid"
-        :name="field.id + '_generates_uuid'"
+      <toggle-switch-input
+        :form="field"
+        name="generates_uuid"
+        label="Generates a unique id"
+        help="If you enable this, we will hide this field and fill it with a unique id (UUID format) on each new form submission"
         @update:model-value="onFieldGenUIdChange"
-      >
-        Generates a unique id
-      </v-checkbox>
-      <p class="text-gray-400 mb-3 text-xs">
-        If you enable this, we will hide this field and fill it with a unique id (UUID format) on each new form
-        submission
-      </p>
-
-      <v-checkbox
-        v-model="field.generates_auto_increment_id"
-        :name="field.id + '_generates_auto_increment_id'"
+      />
+      <toggle-switch-input
+        :form="field"
+        name="generates_auto_increment_id"
+        label="Generates an auto-incremented id"
+        help="If you enable this, we will hide this field and fill it a unique incrementing number on each new form submission"
         @update:model-value="onFieldGenAutoIdChange"
-      >
-        Generates an auto-incremented id
-      </v-checkbox>
-      <p class="text-gray-400 mb-3 text-xs">
-        If you enable this, we will hide this field and fill it a unique incrementing number on each new form submission
-      </p>
+      />
     </div>
 
     <!--  Logic Block -->

From 8776414facdb9b55b976c1fa25d3979d3be88f9f Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com>
Date: Wed, 17 Apr 2024 20:07:13 +0530
Subject: [PATCH 3/3] form editor goback improvement (#379)

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/components/open/forms/components/FormEditor.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/components/open/forms/components/FormEditor.vue b/client/components/open/forms/components/FormEditor.vue
index d661724c0..d3bd1ee25 100644
--- a/client/components/open/forms/components/FormEditor.vue
+++ b/client/components/open/forms/components/FormEditor.vue
@@ -10,7 +10,7 @@
         v-if="backButton"
         href="#"
         class="ml-2 flex text-blue font-semibold text-sm"
-        @click.prevent="$router.back()"
+        @click.prevent="goBack"
       >
         <svg
           class="w-3 h-3 text-blue mt-1 mr-1"
@@ -257,6 +257,13 @@ export default {
   },
 
   methods: {
+    goBack() {
+      if (this.isEdit) {
+        useRouter().push({ name: 'forms-slug-show-submissions', params: {slug:this.form.slug} })
+      } else {
+        useRouter().push({ name: 'home' })
+      }
+    },
     displayFormModificationAlert(responseData) {
       const alert = useAlert()
       if (