diff --git a/packages/nc-gui/components/dlg/ConvertToSandbox.vue b/packages/nc-gui/components/dlg/ConvertToSandbox.vue
index 00ac3a5c15..5b64bd98a7 100644
--- a/packages/nc-gui/components/dlg/ConvertToSandbox.vue
+++ b/packages/nc-gui/components/dlg/ConvertToSandbox.vue
@@ -139,7 +139,7 @@ watch(visible, (isVisible) => {
         <div class="text-xs text-nc-content-gray-subtle2">{{ $t('labels.publishToAppStore') }}</div>
       </div>
 
-      <NcButton size="small" type="text" @click="visible = false" class="self-start">
+      <NcButton size="small" type="text" class="self-start" @click="visible = false">
         <GeneralIcon icon="close" class="text-nc-content-gray-subtle2" />
       </NcButton>
     </div>
@@ -149,7 +149,7 @@ watch(visible, (isVisible) => {
         <template #header>
           <NcAlert
             type="info"
-            :align="'top'"
+            align="top"
             description="Convert this base into a living application that can be published to the App Store. You'll be able to manage versions and push updates to all installations."
             class="!p-3 !items-start bg-nc-bg-blue-light border-1 !border-nc-blue-200 rounded-lg p-3 mb-4"
           >
diff --git a/packages/nc-gui/components/nc/form-builder/index.vue b/packages/nc-gui/components/nc/form-builder/index.vue
index 20547e7df3..cc19278a3e 100644
--- a/packages/nc-gui/components/nc/form-builder/index.vue
+++ b/packages/nc-gui/components/nc/form-builder/index.vue
@@ -30,8 +30,8 @@ const selectMode = (field: FormBuilderElement) => {
   return field.selectMode === 'multipleWithInput' || field.selectMode === 'singleWithInput'
     ? 'tags'
     : field.selectMode === 'multiple'
-      ? 'multiple'
-      : undefined
+    ? 'multiple'
+    : undefined
 }
 
 const haveIntegrationInput = computed(() => {
@@ -204,28 +204,44 @@ watch(
         <div class="nc-form-section">
           <div v-if="category !== FORM_BUILDER_NON_CATEGORIZED" class="nc-form-section-title">{{ category }}</div>
           <div class="nc-form-section-body-grid">
-            <template v-for="(field, fieldIndex) in formElementsCategorized[category]"
-              :key="field.model || `space-${fieldIndex}`">
+            <template
+              v-for="(field, fieldIndex) in formElementsCategorized[category]"
+              :key="field.model || `space-${fieldIndex}`"
+            >
               <template v-if="field.type === FormBuilderInputType.Space">
-                <div :style="{
-                  gridColumn: `span ${field.span || 24}`,
-                }"></div>
+                <div
+                  :style="{
+                    gridColumn: `span ${field.span || 24}`,
+                  }"
+                ></div>
               </template>
 
               <template v-else>
                 <!-- Group toggle button (shown before first field in a collapsible group) -->
-                <div v-if="
-                  field.group &&
-                  isGroupCollapsibleInCategory(category, field.group) &&
-                  (fieldIndex === 0 || formElementsCategorized[category][fieldIndex - 1]?.group !== field.group)
-                " class="nc-group-toggle" :style="{ gridColumn: 'span 24' }">
-                  <NcButton type="text" size="small" class="!text-nc-content-gray"
-                    @click="toggleGroup(`${category}-${field.group}`)">
+                <div
+                  v-if="
+                    field.group &&
+                    isGroupCollapsibleInCategory(category, field.group) &&
+                    (fieldIndex === 0 || formElementsCategorized[category][fieldIndex - 1]?.group !== field.group)
+                  "
+                  class="nc-group-toggle"
+                  :style="{ gridColumn: 'span 24' }"
+                >
+                  <NcButton
+                    type="text"
+                    size="small"
+                    class="!text-nc-content-gray"
+                    @click="toggleGroup(`${category}-${field.group}`)"
+                  >
                     <div class="flex items-center gap-2">
-                      <GeneralIcon :icon="isGroupCollapsed(`${category}-${field.group}`, getGroupDefaultCollapsed(category, field.group))
-                        ? 'ncChevronDown'
-                        : 'ncChevronUp'
-                        " class="flex-none" />
+                      <GeneralIcon
+                        :icon="
+                          isGroupCollapsed(`${category}-${field.group}`, getGroupDefaultCollapsed(category, field.group))
+                            ? 'ncChevronDown'
+                            : 'ncChevronUp'
+                        "
+                        class="flex-none"
+                      />
                       <span>{{
                         isGroupCollapsed(`${category}-${field.group}`, getGroupDefaultCollapsed(category, field.group))
                           ? field.groupLabel || $t('general.showMore')
@@ -236,26 +252,36 @@ watch(
                 </div>
 
                 <!-- Regular form field -->
-                <a-form-item v-if="
-                  !field.group ||
-                  !isGroupCollapsibleInCategory(category, field.group) ||
-                  !isGroupCollapsed(`${category}-${field.group}`, getGroupDefaultCollapsed(category, field.group))
-                " v-bind="validateInfos[field.model]" class="nc-form-item" :style="{
-                  gridColumn: `span ${field.span || 24}`,
-                }" :required="false" :data-testid="`nc-form-input-${field.model}`">
-                  <template v-if="![FormBuilderInputType.Switch, FormBuilderInputType.Checkbox].includes(field.type)"
-                    #label>
+                <a-form-item
+                  v-if="
+                    !field.group ||
+                    !isGroupCollapsibleInCategory(category, field.group) ||
+                    !isGroupCollapsed(`${category}-${field.group}`, getGroupDefaultCollapsed(category, field.group))
+                  "
+                  v-bind="validateInfos[field.model]"
+                  class="nc-form-item"
+                  :style="{
+                    gridColumn: `span ${field.span || 24}`,
+                  }"
+                  :required="false"
+                  :data-testid="`nc-form-input-${field.model}`"
+                >
+                  <template v-if="![FormBuilderInputType.Switch, FormBuilderInputType.Checkbox].includes(field.type)" #label>
                     <div class="flex items-center gap-1 w-full">
                       <div class="flex-1 flex items-center gap-1">
                         <span>{{ field.label }}</span>
-                        <span v-if="
-                          field.required &&
-                          ![
-                            FormBuilderInputType.Select,
-                            FormBuilderInputType.SelectIntegration,
-                            FormBuilderInputType.SelectBase,
-                          ].includes(field.type)
-                        " class="text-nc-content-red-medium">*</span>
+                        <span
+                          v-if="
+                            field.required &&
+                            ![
+                              FormBuilderInputType.Select,
+                              FormBuilderInputType.SelectIntegration,
+                              FormBuilderInputType.SelectBase,
+                            ].includes(field.type)
+                          "
+                          class="text-nc-content-red-medium"
+                          >*</span
+                        >
                         <NcTooltip v-if="field.helpText && field.showHintAsTooltip">
                           <template #title>
                             <div class="text-xs">
@@ -266,16 +292,26 @@ watch(
                         </NcTooltip>
                       </div>
 
-                      <a v-if="field.docsLink" :href="field.docsLink" target="_blank" rel="noopener noreferrer"
-                        class="text-xs justify-self-end no-underline hover:underline">
+                      <a
+                        v-if="field.docsLink"
+                        :href="field.docsLink"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="text-xs justify-self-end no-underline hover:underline"
+                      >
                         {{ $t('title.docs') }}
                       </a>
                     </div>
                   </template>
                   <template v-if="field.type === FormBuilderInputType.Input">
-                    <a-input autocomplete="off" class="!w-full" :disabled="disabled" :value="deepReference(field.model)"
-                      :placeholder="field.placeholder" @update:value="setFormStateWithEmit(field.model, $event)">
-
+                    <a-input
+                      autocomplete="off"
+                      class="!w-full"
+                      :disabled="disabled"
+                      :value="deepReference(field.model)"
+                      :placeholder="field.placeholder"
+                      @update:value="setFormStateWithEmit(field.model, $event)"
+                    >
                       <!-- Todo: @rameshmane7218 slots customization  -->
                       <!-- <template v-if="$slots[getValidSlotName(field.model, 'prefix')]" #prefix>
                         <slot :name="getValidSlotName(field.model, 'prefix')" />
@@ -286,31 +322,55 @@ watch(
                     </a-input>
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.Textarea">
-                    <a-textarea class="!w-full !rounded-lg !text-sm !min-h-[90px] max-h-[500px] nc-scrollbar-thin"
-                      size="large" hide-details :value="deepReference(field.model)" :placeholder="field.placeholder"
-                      @update:value="setFormStateWithEmit(field.model, $event)" />
+                    <a-textarea
+                      class="!w-full !rounded-lg !text-sm !min-h-[90px] max-h-[500px] nc-scrollbar-thin"
+                      size="large"
+                      hide-details
+                      :value="deepReference(field.model)"
+                      :placeholder="field.placeholder"
+                      @update:value="setFormStateWithEmit(field.model, $event)"
+                    />
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.Number">
-                    <a-input-number autocomplete="off" class="!w-full !rounded-lg" :controls="false"
-                      :disabled="disabled" :value="deepReference(field.model)" :placeholder="field.placeholder"
-                      @update:value="setFormStateWithEmit(field.model, $event)" />
+                    <a-input-number
+                      autocomplete="off"
+                      class="!w-full !rounded-lg"
+                      :controls="false"
+                      :disabled="disabled"
+                      :value="deepReference(field.model)"
+                      :placeholder="field.placeholder"
+                      @update:value="setFormStateWithEmit(field.model, $event)"
+                    />
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.Password">
-                    <a-input-password readonly :disabled="disabled" onfocus="this.removeAttribute('readonly');"
-                      onblur="this.setAttribute('readonly', true);" autocomplete="off"
-                      :value="deepReference(field.model)" :placeholder="field.placeholder"
-                      @update:value="setFormStateWithEmit(field.model, $event)" />
+                    <a-input-password
+                      readonly
+                      :disabled="disabled"
+                      onfocus="this.removeAttribute('readonly');"
+                      onblur="this.setAttribute('readonly', true);"
+                      autocomplete="off"
+                      :value="deepReference(field.model)"
+                      :placeholder="field.placeholder"
+                      @update:value="setFormStateWithEmit(field.model, $event)"
+                    />
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.Select">
                     <NcFormBuilderInputMountedWrapper @mounted="loadOptions(field)">
-                      <NcSelect :disabled="disabled" :value="getSelectValue(field)" :mode="selectMode(field)"
-                        :max-tag-count="field.selectMode === 'singleWithInput' ? 1 : undefined" show-search
+                      <NcSelect
+                        :disabled="disabled"
+                        :value="getSelectValue(field)"
+                        :mode="selectMode(field)"
+                        :max-tag-count="field.selectMode === 'singleWithInput' ? 1 : undefined"
+                        show-search
                         :placeholder="field.placeholder"
                         :loading="field.fetchOptionsKey && getIsLoadingFieldOptions(field.model)"
-                        @update:value="handleSelectChange(field, $event)">
+                        @update:value="handleSelectChange(field, $event)"
+                      >
                         <a-select-option
                           v-for="option in field.fetchOptionsKey ? getFieldOptions(field.model) : field.options"
-                          :key="option.value" :value="option.value">
+                          :key="option.value"
+                          :value="option.value"
+                        >
                           <div class="w-full flex gap-2 items-center" :data-testid="option.value">
                             <GeneralIcon v-if="option.icon" :icon="option.icon" class="flex-none h-4 w-4" />
                             <NcTooltip class="flex-1 truncate min-w-0" show-on-truncate-only>
@@ -319,11 +379,16 @@ watch(
                               </template>
                               {{ option.label }}
                             </NcTooltip>
-                            <component :is="iconMap.check" v-if="
-                              ncIsArray(getSelectValue(field))
-                                ? getSelectValue(field).includes(option.value)
-                                : getSelectValue(field) === option.value
-                            " id="nc-selected-item-icon" class="text-nc-content-brand w-4 h-4" />
+                            <component
+                              :is="iconMap.check"
+                              v-if="
+                                ncIsArray(getSelectValue(field))
+                                  ? getSelectValue(field).includes(option.value)
+                                  : getSelectValue(field) === option.value
+                              "
+                              id="nc-selected-item-icon"
+                              class="text-nc-content-brand w-4 h-4"
+                            />
                           </div>
                         </a-select-option>
                       </NcSelect>
@@ -332,8 +397,11 @@ watch(
                   <template v-else-if="field.type === FormBuilderInputType.Switch">
                     <div class="flex flex-col px-2" :class="field.border ? 'border-1 rounded-lg shadow' : ''">
                       <div class="flex items-center aa">
-                        <NcSwitch :disabled="disabled" :checked="!!deepReference(field.model)"
-                          @update:checked="setFormStateWithEmit(field.model, $event)" />
+                        <NcSwitch
+                          :disabled="disabled"
+                          :checked="!!deepReference(field.model)"
+                          @update:checked="setFormStateWithEmit(field.model, $event)"
+                        />
                         <span class="ml-[6px] font-bold">{{ field.label }}</span>
                         <NcTooltip v-if="field.helpText">
                           <template #title>
@@ -350,15 +418,25 @@ watch(
                     </div>
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.SelectIntegration">
-                    <a-select :value="deepReference(field.model)" :options="integrationOptions[field.model]"
-                      dropdown-match-select-width class="nc-select nc-select-shadow" placeholder="Select Integration"
-                      allow-clear :disabled="disabled" show-search
-                      @update:value="setFormStateWithEmit(field.model, $event)">
+                    <a-select
+                      :value="deepReference(field.model)"
+                      :options="integrationOptions[field.model]"
+                      dropdown-match-select-width
+                      class="nc-select nc-select-shadow"
+                      placeholder="Select Integration"
+                      allow-clear
+                      :disabled="disabled"
+                      show-search
+                      @update:value="setFormStateWithEmit(field.model, $event)"
+                    >
                       <template #suffixIcon>
                         <GeneralIcon icon="ncChevronDown" class="text-nc-content-gray-muted" />
                       </template>
-                      <a-select-option v-for="integration in filteredIntegrations[field.model]" :key="integration.id"
-                        :value="integration.id">
+                      <a-select-option
+                        v-for="integration in filteredIntegrations[field.model]"
+                        :key="integration.id"
+                        :value="integration.id"
+                      >
                         <div class="w-full flex gap-2 items-center" :data-testid="integration.title">
                           <GeneralIntegrationIcon v-if="integration?.sub_type" :type="integration.sub_type" />
                           <NcTooltip class="flex-1 truncate" show-on-truncate-only>
@@ -367,16 +445,23 @@ watch(
                             </template>
                             {{ integration.title }}
                           </NcTooltip>
-                          <component :is="iconMap.check" v-if="formState.fk_integration_id === integration.id"
-                            id="nc-selected-item-icon" class="text-nc-content-brand w-4 h-4" />
+                          <component
+                            :is="iconMap.check"
+                            v-if="formState.fk_integration_id === integration.id"
+                            id="nc-selected-item-icon"
+                            class="text-nc-content-brand w-4 h-4"
+                          />
                         </div>
                       </a-select-option>
 
                       <template #dropdownRender="{ menuNode: menu }">
                         <component :is="menu" />
                         <a-divider style="margin: 4px 0" />
-                        <div class="px-1.5 flex items-center text-nc-content-brand text-sm cursor-pointer"
-                          @mousedown.prevent @click="handleAddNewConnection(field)">
+                        <div
+                          class="px-1.5 flex items-center text-nc-content-brand text-sm cursor-pointer"
+                          @mousedown.prevent
+                          @click="handleAddNewConnection(field)"
+                        >
                           <div class="w-full flex items-center gap-2 px-2 py-2 rounded-md hover:bg-nc-bg-gray-light">
                             <GeneralIcon icon="plus" class="flex-none" />
                             {{ $t('general.new') }} {{ $t('general.connection').toLowerCase() }}
@@ -386,39 +471,59 @@ watch(
                     </a-select>
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.SelectBase">
-                    <NcFormBuilderInputSelectBase :value="deepReference(field.model)" :disabled="disabled"
-                      @update:value="setFormStateWithEmit(field.model, $event)" />
+                    <NcFormBuilderInputSelectBase
+                      :value="deepReference(field.model)"
+                      :disabled="disabled"
+                      @update:value="setFormStateWithEmit(field.model, $event)"
+                    />
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.SelectTable">
                     <NcFormBuilderInputMountedWrapper @mounted="loadOptions(field)">
-                      <NcFormBuilderInputSelectTable :multiple="field?.selectMode === 'multiple'"
-                        :value="deepReference(field.model)" :disabled="disabled" :options="getFieldOptions(field.model)"
-                        @update:value="setFormStateWithEmit(field.model, $event)" />
+                      <NcFormBuilderInputSelectTable
+                        :multiple="field?.selectMode === 'multiple'"
+                        :value="deepReference(field.model)"
+                        :disabled="disabled"
+                        :options="getFieldOptions(field.model)"
+                        @update:value="setFormStateWithEmit(field.model, $event)"
+                      />
                     </NcFormBuilderInputMountedWrapper>
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.SelectView">
                     <NcFormBuilderInputMountedWrapper @mounted="loadOptions(field)">
-                      <NcFormBuilderInputSelectView :multiple="field?.selectMode === 'multiple'"
-                        :value="deepReference(field.model)" :disabled="disabled" :options="getFieldOptions(field.model)"
-                        @update:value="setFormStateWithEmit(field.model, $event)" />
+                      <NcFormBuilderInputSelectView
+                        :multiple="field?.selectMode === 'multiple'"
+                        :value="deepReference(field.model)"
+                        :disabled="disabled"
+                        :options="getFieldOptions(field.model)"
+                        @update:value="setFormStateWithEmit(field.model, $event)"
+                      />
                     </NcFormBuilderInputMountedWrapper>
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.SelectField">
                     <NcFormBuilderInputMountedWrapper @mounted="loadOptions(field)">
-                      <NcFormBuilderInputSelectField :multiple="field?.selectMode === 'multiple'"
-                        :value="deepReference(field.model)" :disabled="disabled" :options="getFieldOptions(field.model)"
-                        @update:value="setFormStateWithEmit(field.model, $event)" />
+                      <NcFormBuilderInputSelectField
+                        :multiple="field?.selectMode === 'multiple'"
+                        :value="deepReference(field.model)"
+                        :disabled="disabled"
+                        :options="getFieldOptions(field.model)"
+                        @update:value="setFormStateWithEmit(field.model, $event)"
+                      />
                     </NcFormBuilderInputMountedWrapper>
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.OAuth">
-                    <NcFormBuilderInputOAuth :value="deepReference(field.model)" :element="field"
-                      :have-value="!!deepReference(field.model)" :form-data="formState"
-                      @update:value="setFormStateWithEmit(field.model, $event)" />
+                    <NcFormBuilderInputOAuth
+                      :value="deepReference(field.model)"
+                      :element="field"
+                      :have-value="!!deepReference(field.model)"
+                      :form-data="formState"
+                      @update:value="setFormStateWithEmit(field.model, $event)"
+                    />
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.Checkbox">
                     <div
                       class="px-3 py-2 border-1 cursor-pointer rounded-lg shadow-default transition-shadow border-nc-border-gray-medium"
-                      @click="setFormStateWithEmit(field.model, !deepReference(field.model))">
+                      @click="setFormStateWithEmit(field.model, !deepReference(field.model))"
+                    >
                       <div class="flex gap-3">
                         <NcCheckbox :disabled="disabled" :checked="deepReference(field.model)" />
                         <div class="text-nc-content-gray text-caption">
@@ -431,19 +536,30 @@ watch(
                     </div>
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.WorkflowInput">
-                    <NcFormBuilderInputWorkflowInput :model-value="deepReference(field.model)"
-                      :placeholder="field.placeholder" :variables="workflowVariables" :read-only="disabled"
-                      :plugins="field.plugins" :grouped-variables="workflowVariablesGrouped"
-                      @update:model-value="setFormStateWithEmit(field.model, $event)" />
+                    <NcFormBuilderInputWorkflowInput
+                      :model-value="deepReference(field.model)"
+                      :placeholder="field.placeholder"
+                      :variables="workflowVariables"
+                      :read-only="disabled"
+                      :plugins="field.plugins"
+                      :grouped-variables="workflowVariablesGrouped"
+                      @update:model-value="setFormStateWithEmit(field.model, $event)"
+                    />
                   </template>
                   <template v-else-if="field.type === FormBuilderInputType.FieldMapping">
                     <NcFormBuilderInputMountedWrapper @mounted="loadOptions(field)">
-                      <NcFormBuilderInputFieldMapping :model-value="deepReference(field.model)" :element="field"
-                        :disabled="disabled" @update:model-value="setFormStateWithEmit(field.model, $event)" />
+                      <NcFormBuilderInputFieldMapping
+                        :model-value="deepReference(field.model)"
+                        :element="field"
+                        :disabled="disabled"
+                        @update:model-value="setFormStateWithEmit(field.model, $event)"
+                      />
                     </NcFormBuilderInputMountedWrapper>
                   </template>
-                  <div v-if="field.helpText && field.type !== FormBuilderInputType.Switch && !field.showHintAsTooltip"
-                    class="w-full mt-1">
+                  <div
+                    v-if="field.helpText && field.type !== FormBuilderInputType.Switch && !field.showHintAsTooltip"
+                    class="w-full mt-1"
+                  >
                     <div class="text-xs text-nc-content-gray-muted">{{ field.helpText }}</div>
                   </div>
                 </a-form-item>
@@ -454,8 +570,11 @@ watch(
       </template>
     </a-form>
     <template v-if="haveIntegrationInput && activeModel">
-      <WorkspaceIntegrationsTab is-modal :filter-category="filterIntegration.type"
-        :filter-integration="filterIntegration.sub_type" />
+      <WorkspaceIntegrationsTab
+        is-modal
+        :filter-category="filterIntegration.type"
+        :filter-integration="filterIntegration.sub_type"
+      />
       <WorkspaceIntegrationsEditOrAdd />
     </template>
     <general-overlay :model-value="isLoading" inline transition class="!bg-opacity-15">
@@ -501,7 +620,6 @@ watch(
 }
 
 .nc-form-builder {
-
   :deep(.ant-input-affix-wrapper),
   :deep(.ant-input),
   :deep(.ant-select) {
@@ -589,7 +707,7 @@ watch(
   :deep(.ant-row:not(.ant-form-item)) {
     @apply !-mx-1.5;
 
-    &>.ant-col {
+    & > .ant-col {
       @apply !px-1.5;
     }
   }
diff --git a/packages/nc-gui/components/project/Action/Item.vue b/packages/nc-gui/components/project/Action/Item.vue
index 2004ebe5fe..b53610a445 100644
--- a/packages/nc-gui/components/project/Action/Item.vue
+++ b/packages/nc-gui/components/project/Action/Item.vue
@@ -9,14 +9,17 @@ defineProps<{
 </script>
 
 <template>
-  <div role="button" class="nc-base-view-all-table-btn" :class="{
-    disabled,
-    'loading cursor-wait': isLoading,
-    'cursor-pointer': !isLoading,
-  }">
+  <div
+    role="button"
+    class="nc-base-view-all-table-btn"
+    :class="{
+      disabled,
+      'loading cursor-wait': isLoading,
+      'cursor-pointer': !isLoading,
+    }"
+  >
     <div class="icon-wrapper">
-      <a-skeleton-avatar v-if="isLoading" active shape="square"
-        class="!h-full !w-full !children:(rounded-md w-8 h-8)" />
+      <a-skeleton-avatar v-if="isLoading" active shape="square" class="!h-full !w-full !children:(rounded-md w-8 h-8)" />
       <slot v-else name="icon">
         <GeneralIcon v-if="icon" :icon="icon" />
       </slot>
diff --git a/packages/nc-gui/components/project/Overview.vue b/packages/nc-gui/components/project/Overview.vue
index fe6e0b95bc..5b552da6fc 100644
--- a/packages/nc-gui/components/project/Overview.vue
+++ b/packages/nc-gui/components/project/Overview.vue
@@ -64,43 +64,67 @@ const onCreateBaseClick = () => {
 </script>
 
 <template>
-  <div class="nc-all-tables-view p-6 nc-scrollbar-thin" :style="{
-    height: 'calc(100vh - var(--topbar-height) - 44px)',
-  }">
+  <div
+    class="nc-all-tables-view p-6 nc-scrollbar-thin"
+    :style="{
+      height: 'calc(100vh - var(--topbar-height) - 44px)',
+    }"
+  >
     <div class="text-subHeading2 text-nc-content-gray mb-5">{{ $t('labels.actions') }}</div>
 
-    <div class="flex flex-row gap-6 flex-wrap max-w-[1000px]" :class="{
-      'pointer-events-none': base?.isLoading,
-    }">
+    <div
+      class="flex flex-row gap-6 flex-wrap max-w-[1000px]"
+      :class="{
+        'pointer-events-none': base?.isLoading,
+      }"
+    >
       <template v-if="base?.isLoading">
         <ProjectActionItem v-for="item in 7" :key="item" is-loading label="loading" />
       </template>
       <template v-else>
-        <ProjectActionItem v-if="isUIAllowed('tableCreate', { source: base?.sources?.[0] })"
-          :label="$t('dashboards.create_new_table')" :subtext="$t('msg.subText.startFromScratch')"
-          data-testid="proj-view-btn__add-new-table" @click="openTableCreateDialog()">
+        <ProjectActionItem
+          v-if="isUIAllowed('tableCreate', { source: base?.sources?.[0] })"
+          :label="$t('dashboards.create_new_table')"
+          :subtext="$t('msg.subText.startFromScratch')"
+          data-testid="proj-view-btn__add-new-table"
+          @click="openTableCreateDialog()"
+        >
           <template #icon>
             <GeneralIcon icon="addOutlineBox" class="!h-8 !w-8 !text-nc-content-brand" />
           </template>
         </ProjectActionItem>
 
-        <ProjectActionItem v-if="isUIAllowed('tableCreate', { source: base?.sources?.[0] })" v-e="['c:table:import']"
-          data-testid="proj-view-btn__import-data" :label="`${$t('activity.import')} ${$t('general.data')}`"
-          :subtext="$t('msg.subText.importData')" @click="isImportModalOpen = true">
+        <ProjectActionItem
+          v-if="isUIAllowed('tableCreate', { source: base?.sources?.[0] })"
+          v-e="['c:table:import']"
+          data-testid="proj-view-btn__import-data"
+          :label="`${$t('activity.import')} ${$t('general.data')}`"
+          :subtext="$t('msg.subText.importData')"
+          @click="isImportModalOpen = true"
+        >
           <template #icon>
             <GeneralIcon icon="download" class="!h-7.5 !w-7.5 !text-nc-content-orange-dark" />
           </template>
         </ProjectActionItem>
 
-        <NcTooltip v-if="isUIAllowed('sourceCreate')" placement="bottom" :disabled="!isDataSourceLimitReached"
-          class="flex-none flex">
+        <NcTooltip
+          v-if="isUIAllowed('sourceCreate')"
+          placement="bottom"
+          :disabled="!isDataSourceLimitReached"
+          class="flex-none flex"
+        >
           <template #title>
             {{ $t('tooltip.reachedSourceLimit') }}
           </template>
 
-          <ProjectActionItem v-e="['c:table:create-source']" data-testid="proj-view-btn__create-source"
-            :disabled="isDataSourceLimitReached" :label="$t('labels.connectDataSource')"
-            :subtext="$t('msg.subText.connectExternalData')" @click="onCreateBaseClick">
+          <ProjectActionItem
+            v-e="['c:table:create-source']"
+            data-testid="proj-view-btn__create-source"
+            :disabled="isDataSourceLimitReached"
+            :label="$t('labels.connectDataSource')"
+            :subtext="$t('msg.subText.connectExternalData')"
+            @click="onCreateBaseClick"
+          >
             <template #icon>
               <GeneralIcon icon="server1" class="!h-7 !w-7 !text-nc-content-green-dark" />
             </template>
diff --git a/packages/nc-gui/components/smartsheet/topbar/SandboxModal.vue b/packages/nc-gui/components/smartsheet/topbar/SandboxModal.vue
index 6e0d86039b..ee8d0e8bdb 100644
--- a/packages/nc-gui/components/smartsheet/topbar/SandboxModal.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/SandboxModal.vue
@@ -202,8 +202,7 @@ watch(
 </script>
 
 <template>
-  <NcModal :visible="visible" size="lg" nc-modal-class-name="!p-0" centered
-    @update:visible="emit('update:visible', $event)">
+  <NcModal :visible="visible" size="lg" nc-modal-class-name="!p-0" centered @update:visible="emit('update:visible', $event)">
     <div class="flex flex-col h-full">
       <!-- Header -->
       <div class="flex items-center justify-between px-4 py-3 border-b border-nc-border-gray-medium">
@@ -212,33 +211,46 @@ watch(
           <div class="text-bodySm text-nc-content-gray-subtle2">Manage versions and track deployments</div>
         </div>
 
-
-        <NcButton size="small" type="text" @click="emit('update:visible', false)" class="self-start">
+        <NcButton size="small" type="text" class="self-start" @click="emit('update:visible', false)">
           <GeneralIcon icon="close" class="text-nc-content-gray-subtle2" />
         </NcButton>
       </div>
 
       <!-- Tabs -->
       <div class="flex gap-6 px-6 pt-3 border-b border-nc-border-gray-medium">
-        <button v-if="isDraft" class="pb-2 px-1 text-sm font-medium transition-colors border-b-2" :class="[
-          activeTab === 'publish'
-            ? 'border-nc-content-brand text-nc-content-brand'
-            : 'border-transparent text-nc-content-gray hover:text-nc-content-gray-emphasis',
-        ]" @click="activeTab = 'publish'">
+        <button
+          v-if="isDraft"
+          class="pb-2 px-1 text-sm font-medium transition-colors border-b-2"
+          :class="[
+            activeTab === 'publish'
+              ? 'border-nc-content-brand text-nc-content-brand'
+              : 'border-transparent text-nc-content-gray hover:text-nc-content-gray-emphasis',
+          ]"
+          @click="activeTab = 'publish'"
+        >
           Publish
         </button>
-        <button v-if="isPublished" class="pb-2 px-1 text-sm font-medium transition-colors border-b-2" :class="[
-          activeTab === 'fork'
-            ? 'border-nc-content-brand text-nc-content-brand'
-            : 'border-transparent text-nc-content-gray hover:text-nc-content-gray-emphasis',
-        ]" @click="activeTab = 'fork'">
+        <button
+          v-if="isPublished"
+          class="pb-2 px-1 text-sm font-medium transition-colors border-b-2"
+          :class="[
+            activeTab === 'fork'
+              ? 'border-nc-content-brand text-nc-content-brand'
+              : 'border-transparent text-nc-content-gray hover:text-nc-content-gray-emphasis',
+          ]"
+          @click="activeTab = 'fork'"
+        >
           Fork
         </button>
-        <button class="pb-2 px-1 text-sm font-medium transition-colors border-b-2" :class="[
-          activeTab === 'deployments'
-            ? 'border-nc-content-brand text-nc-content-brand'
-            : 'border-transparent text-nc-content-gray hover:text-nc-content-gray-emphasis',
-        ]" @click="activeTab = 'deployments'">
+        <button
+          class="pb-2 px-1 text-sm font-medium transition-colors border-b-2"
+          :class="[
+            activeTab === 'deployments'
+              ? 'border-nc-content-brand text-nc-content-brand'
+              : 'border-transparent text-nc-content-gray hover:text-nc-content-gray-emphasis',
+          ]"
+          @click="activeTab = 'deployments'"
+        >
           Deployments
         </button>
       </div>
@@ -251,8 +263,7 @@ watch(
             <div class="flex gap-3">
               <GeneralIcon icon="info" class="w-5 h-5 text-nc-content-blue-dark mt-0.5 flex-shrink-0" />
               <div class="text-sm text-nc-content-gray">
-                Publishing version <strong>{{ currentVersion?.version }}</strong> will make it available in the App
-                Store and
+                Publishing version <strong>{{ currentVersion?.version }}</strong> will make it available in the App Store and
                 automatically update all installations.
               </div>
             </div>
@@ -270,18 +281,22 @@ watch(
 
             <div>
               <label class="text-nc-content-gray text-sm font-medium mb-2 block">Release Notes (Optional)</label>
-              <a-textarea v-model:value="publishForm.releaseNotes" placeholder="Describe what's new in this version"
-                :rows="6" size="large" class="rounded-lg nc-input-sm" />
+              <a-textarea
+                v-model:value="publishForm.releaseNotes"
+                placeholder="Describe what's new in this version"
+                :rows="6"
+                size="large"
+                class="rounded-lg nc-input-sm"
+              />
             </div>
           </div>
         </div>
 
         <!-- Fork Tab -->
         <div v-if="activeTab === 'fork'" class="p-6">
-         
           <NcAlert
             type="info"
-            :align="'top'"
+            align="top"
             description="Convert this base into a living application that can be published to the App Store. You'll be able to manage versions and push updates to all installations."
             class="!p-3 !items-start bg-nc-bg-blue-light border-1 !border-nc-blue-200 rounded-lg p-3 mb-4"
           >
@@ -300,13 +315,17 @@ watch(
               <label class="text-nc-content-gray text-sm font-medium mb-2 block">
                 New Version <span class="text-nc-content-red-dark">*</span>
               </label>
-              <a-input v-model:value="forkForm.version" placeholder="e.g., 2.0.0" size="large" class="rounded-lg nc-input-sm nc-input-shadow">
+              <a-input
+                v-model:value="forkForm.version"
+                placeholder="e.g., 2.0.0"
+                size="large"
+                class="rounded-lg nc-input-sm nc-input-shadow"
+              >
                 <template #prefix>
                   <span class="text-nc-content-gray-subtle2">v</span>
                 </template>
               </a-input>
-              <div class="text-xs text-nc-content-gray-subtle2 mt-1.5">Use semantic versioning (e.g., 2.0.0, 2.1.0)
-              </div>
+              <div class="text-xs text-nc-content-gray-subtle2 mt-1.5">Use semantic versioning (e.g., 2.0.0, 2.1.0)</div>
             </div>
           </div>
         </div>
@@ -330,8 +349,7 @@ watch(
                 <div class="text-3xl font-bold text-nc-content-gray-emphasis mb-1">
                   {{ deploymentStats.statistics?.totalDeployments || 0 }}
                 </div>
-                <div class="text-xs font-medium text-nc-content-gray-subtle2 uppercase tracking-wide">Total Deployments
-                </div>
+                <div class="text-xs font-medium text-nc-content-gray-subtle2 uppercase tracking-wide">Total Deployments</div>
               </div>
 
               <!-- Active -->
@@ -382,8 +400,11 @@ watch(
 
             <!-- Version List with Real Stats -->
             <div v-if="deploymentStats.versionStats && deploymentStats.versionStats.length > 0" class="space-y-2">
-              <div v-for="(versionStat, index) in deploymentStats.versionStats" :key="versionStat.versionId"
-                class="bg-nc-bg-gray-light border border-nc-border-gray-light rounded-lg p-4 hover:border-nc-border-brand hover:shadow-sm transition-all duration-200">
+              <div
+                v-for="(versionStat, index) in deploymentStats.versionStats"
+                :key="versionStat.versionId"
+                class="bg-nc-bg-gray-light border border-nc-border-gray-light rounded-lg p-4 hover:border-nc-border-brand hover:shadow-sm transition-all duration-200"
+              >
                 <div class="flex items-center justify-between">
                   <div class="flex items-center gap-4 flex-1">
                     <!-- Version Badge -->
@@ -393,10 +414,13 @@ watch(
                       </div>
                       <div>
                         <div class="flex items-center gap-2">
-                          <span class="font-mono font-bold text-base text-nc-content-gray-emphasis">v{{
-                            versionStat.version }}</span>
-                          <div v-if="index === 0 && versionStat.status === 'published'"
-                            class="px-2 py-0.5 text-xs rounded-full bg-nc-bg-green-light text-nc-content-green-dark font-semibold">
+                          <span class="font-mono font-bold text-base text-nc-content-gray-emphasis"
+                            >v{{ versionStat.version }}</span
+                          >
+                          <div
+                            v-if="index === 0 && versionStat.status === 'published'"
+                            class="px-2 py-0.5 text-xs rounded-full bg-nc-bg-green-light text-nc-content-green-dark font-semibold"
+                          >
                             Current
                           </div>
                         </div>
@@ -410,11 +434,11 @@ watch(
                   <!-- Deployment Count -->
                   <template v-if="versionStat.deploymentCount === 0">
                     <div
-                      class="flex items-center gap-3 px-4 py-2 bg-white dark:bg-nc-bg-gray-medium rounded-lg border border-nc-border-gray-light transition-all">
+                      class="flex items-center gap-3 px-4 py-2 bg-white dark:bg-nc-bg-gray-medium rounded-lg border border-nc-border-gray-light transition-all"
+                    >
                       <GeneralIcon icon="ncServer" class="w-4 h-4 text-nc-content-gray-subtle2" />
                       <div class="text-right">
-                        <div class="text-lg font-bold text-nc-content-gray-emphasis">{{ versionStat.deploymentCount }}
-                        </div>
+                        <div class="text-lg font-bold text-nc-content-gray-emphasis">{{ versionStat.deploymentCount }}</div>
                       </div>
                     </div>
                   </template>
@@ -422,11 +446,11 @@ watch(
                     <a-tooltip placement="top" title="Click to view deployments">
                       <div
                         class="flex items-center gap-3 px-4 py-2 bg-white dark:bg-nc-bg-gray-medium rounded-lg border border-nc-border-gray-light cursor-pointer hover:border-nc-border-brand hover:shadow-sm transition-all"
-                        @click="openVersionDeploymentsModal(versionStat)">
+                        @click="openVersionDeploymentsModal(versionStat)"
+                      >
                         <GeneralIcon icon="ncServer" class="w-4 h-4 text-nc-content-gray-subtle2" />
                         <div class="text-right">
-                          <div class="text-lg font-bold text-nc-content-gray-emphasis">{{ versionStat.deploymentCount }}
-                          </div>
+                          <div class="text-lg font-bold text-nc-content-gray-emphasis">{{ versionStat.deploymentCount }}</div>
                         </div>
                       </div>
                     </a-tooltip>
@@ -441,8 +465,7 @@ watch(
                 <GeneralIcon icon="ncServer" class="w-8 h-8 text-nc-content-gray-subtle2" />
               </div>
               <div class="text-base font-medium text-nc-content-gray-emphasis mb-1">No deployments yet</div>
-              <div class="text-sm text-nc-content-gray-subtle2">Users will appear here once they install your
-                application</div>
+              <div class="text-sm text-nc-content-gray-subtle2">Users will appear here once they install your application</div>
             </div>
           </template>
 
@@ -461,16 +484,21 @@ watch(
         <div class="flex justify-end gap-2">
           <NcButton type="secondary" size="small" @click="emit('update:visible', false)"> Cancel </NcButton>
 
-          <NcButton v-if="activeTab === 'publish'" type="primary" size="small" :loading="isLoading"
-            @click="publishCurrentDraft">
+          <NcButton v-if="activeTab === 'publish'" type="primary" size="small" :loading="isLoading" @click="publishCurrentDraft">
             <template #icon>
               <GeneralIcon icon="upload" />
             </template>
             Publish Version
           </NcButton>
 
-          <NcButton v-if="activeTab === 'fork'" type="primary" size="small" :loading="isLoading"
-            :disabled="!forkForm.version" @click="createNewDraft">
+          <NcButton
+            v-if="activeTab === 'fork'"
+            type="primary"
+            size="small"
+            :loading="isLoading"
+            :disabled="!forkForm.version"
+            @click="createNewDraft"
+          >
             <template #icon>
               <GeneralIcon icon="plus" />
             </template>
@@ -481,7 +509,10 @@ watch(
     </div>
 
     <!-- Version Deployments Modal -->
-    <SmartsheetTopbarSandboxVersionDeploymentsModal v-model:visible="showVersionDeploymentsModal" :sandbox="sandbox"
-      :version="selectedVersion" />
+    <SmartsheetTopbarSandboxVersionDeploymentsModal
+      v-model:visible="showVersionDeploymentsModal"
+      :sandbox="sandbox"
+      :version="selectedVersion"
+    />
   </NcModal>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/topbar/SandboxStatus.vue b/packages/nc-gui/components/smartsheet/topbar/SandboxStatus.vue
index 2ae30d3b3c..34e74e5ad6 100644
--- a/packages/nc-gui/components/smartsheet/topbar/SandboxStatus.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/SandboxStatus.vue
@@ -107,9 +107,8 @@ watch(
   />
 </template>
 
-
 <style lang="scss" scoped>
-  :deep(.nc-sanbox-status-info-icon path.nc-icon-inner) {
-    stroke: var(--nc-bg-gray-light) !important;
-  }
-</style>
\ No newline at end of file
+:deep(.nc-sanbox-status-info-icon path.nc-icon-inner) {
+  stroke: var(--nc-bg-gray-light) !important;
+}
+</style>
diff --git a/packages/nc-gui/components/workspace/CreateProjectBtn.vue b/packages/nc-gui/components/workspace/CreateProjectBtn.vue
index bf4ef0a997..ae9837e3a4 100644
--- a/packages/nc-gui/components/workspace/CreateProjectBtn.vue
+++ b/packages/nc-gui/components/workspace/CreateProjectBtn.vue
@@ -31,16 +31,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <NcButton v-if="isUIAllowed('baseCreate', { roles: workspaceRoles ?? orgRoles }) && !isSharedBase"
-    v-e="['c:base:create']" type="text" :size="size" :centered="centered" full-width @click="baseCreateDlg = true">
+  <NcButton
+    v-if="isUIAllowed('baseCreate', { roles: workspaceRoles ?? orgRoles }) && !isSharedBase"
+    v-e="['c:base:create']"
+    type="text"
+    :size="size"
+    :centered="centered"
+    full-width
+    @click="baseCreateDlg = true"
+  >
     <slot>
       <div class="flex items-center gap-2 w-full">
         <GeneralIcon icon="ncPlusCircleSolid" />
 
         <div class="flex flex-1">{{ $t('title.createBase') }}</div>
 
-        <div
-          class="px-1 flex-none text-bodySmBold !leading-[18px] text-nc-content-gray-subtle bg-nc-bg-gray-medium rounded">
+        <div class="px-1 flex-none text-bodySmBold !leading-[18px] text-nc-content-gray-subtle bg-nc-bg-gray-medium rounded">
           {{ renderAltOrOptlKey(true) }} D
         </div>
       </div>
diff --git a/packages/nc-gui/components/workspace/CreateProjectDlg.vue b/packages/nc-gui/components/workspace/CreateProjectDlg.vue
index b355aa8027..a0a0f4dc0a 100644
--- a/packages/nc-gui/components/workspace/CreateProjectDlg.vue
+++ b/packages/nc-gui/components/workspace/CreateProjectDlg.vue
@@ -18,8 +18,6 @@ const basesStore = useBases()
 
 const { createProject: _createProject } = basesStore
 
-const { isSharedBase } = storeToRefs(useBase())
-
 const { navigateToProject } = useGlobal()
 
 const { refreshCommandPalette } = useCommandPalette()
@@ -91,19 +89,15 @@ const onInit = () => {
   }, 5)
 }
 
-
-
 watch(dialogShow, (n) => {
   if (n) {
     onInit()
   }
 })
-
 </script>
 
 <template>
   <NcModal v-model:visible="dialogShow" size="small" :show-separator="false" wrap-class-name="nc-modal-wrapper">
-
     <template #header>
       <!-- Create A New Base -->
       <div class="flex flex-row items-center text-base text-nc-content-gray">
@@ -117,21 +111,42 @@ watch(dialogShow, (n) => {
     </template>
 
     <div class="mt-1">
-      <a-form ref="form" :model="formState" name="basic" layout="vertical" class="w-full !mx-auto" no-style
-        autocomplete="off" @finish="createProject">
+      <a-form
+        ref="form"
+        :model="formState"
+        name="basic"
+        layout="vertical"
+        class="w-full !mx-auto"
+        no-style
+        autocomplete="off"
+        @finish="createProject"
+      >
         <a-form-item name="title" :rules="nameValidationRules" class="!mb-0">
-          <a-input ref="input" v-model:value="formState.title" name="title"
-            class="nc-metadb-base-name nc-input-sm nc-input-shadow" placeholder="Title" />
+          <a-input
+            ref="input"
+            v-model:value="formState.title"
+            name="title"
+            class="nc-metadb-base-name nc-input-sm nc-input-shadow"
+            placeholder="Title"
+          />
         </a-form-item>
       </a-form>
 
       <div class="flex flex-row justify-end mt-5 gap-x-2">
         <NcButton type="secondary" size="small" :disabled="creating" @click="dialogShow = false">{{
           $t('general.cancel')
-          }}</NcButton>
-        <NcButton v-e="['a:base:create']" data-testid="docs-create-proj-dlg-create-btn" :loading="creating"
-          type="primary" size="small" :disabled="creating" :label="`${$t('general.create')} Base`"
-          :loading-label="`${$t('general.creating')} Base`" @click="createProject">
+        }}</NcButton>
+        <NcButton
+          v-e="['a:base:create']"
+          data-testid="docs-create-proj-dlg-create-btn"
+          :loading="creating"
+          type="primary"
+          size="small"
+          :disabled="creating"
+          :label="`${$t('general.create')} Base`"
+          :loading-label="`${$t('general.creating')} Base`"
+          @click="createProject"
+        >
           {{
             $t('general.createEntity', {
               entity: 'Base',
diff --git a/packages/nc-gui/components/workspace/project/AiCreateProject.vue b/packages/nc-gui/components/workspace/project/AiCreateProject.vue
index 49007d05ad..5de59f92a5 100644
--- a/packages/nc-gui/components/workspace/project/AiCreateProject.vue
+++ b/packages/nc-gui/components/workspace/project/AiCreateProject.vue
@@ -374,8 +374,10 @@ onMounted(() => {
     </div>
 
     <div class="h-[calc(100%_-_49px)] flex">
-      <div ref="leftPaneContentRef"
-        class="w-[480px] h-full relative flex flex-col nc-scrollbar-thin border-r-1 border-nc-border-purple-light">
+      <div
+        ref="leftPaneContentRef"
+        class="w-[480px] h-full relative flex flex-col nc-scrollbar-thin border-r-1 border-nc-border-purple-light"
+      >
         <!-- create base config panel -->
         <div class="flex-1 p-6 flex flex-col gap-6">
           <div class="text-sm font-bold text-nc-content-purple-dark dark:text-nc-content-purple-medium">
@@ -385,27 +387,38 @@ onMounted(() => {
             <!-- Predefined tags -->
 
             <template v-for="prompt of predefinedBasePrompts" :key="prompt.tag">
-              <a-tag class="nc-ai-base-schema-tag nc-ai-suggested-tag relative" :class="{
-                'nc-selected': prompt.description === aiFormState.prompt.trim(),
-                'nc-disabled': !aiIntegrationAvailable || (aiLoading && callFunction === 'onPredictSchema'),
-              }" :disabled="!aiIntegrationAvailable || (aiLoading && callFunction === 'onPredictSchema')"
-                @mouseover="handleMouseOverTag(prompt.description)" @mouseleave="handleMouseLeaveTag"
-                @click="handleUpdatePrompt(prompt.description)">
+              <a-tag
+                class="nc-ai-base-schema-tag nc-ai-suggested-tag relative"
+                :class="{
+                  'nc-selected': prompt.description === aiFormState.prompt.trim(),
+                  'nc-disabled': !aiIntegrationAvailable || (aiLoading && callFunction === 'onPredictSchema'),
+                }"
+                :disabled="!aiIntegrationAvailable || (aiLoading && callFunction === 'onPredictSchema')"
+                @mouseover="handleMouseOverTag(prompt.description)"
+                @mouseleave="handleMouseLeaveTag"
+                @click="handleUpdatePrompt(prompt.description)"
+              >
                 <div class="flex flex-row items-center gap-1 py-1 text-sm">
                   <div>{{ prompt.tag }}</div>
                 </div>
-                <div v-if="prompt.description === aiFormState.prompt.trim()"
-                  class="bg-nc-fill-purple-dark text-nc-content-inverted-primary rounded-full absolute -right-[3px] -top-[4px] h-3 w-3 grid place-items-center">
+                <div
+                  v-if="prompt.description === aiFormState.prompt.trim()"
+                  class="bg-nc-fill-purple-dark text-nc-content-inverted-primary rounded-full absolute -right-[3px] -top-[4px] h-3 w-3 grid place-items-center"
+                >
                   <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
-                    <path d="M6.66659 2L2.99992 5.66667L1.33325 4" stroke="currentColor" stroke-width="1.33333"
-                      stroke-linecap="round" stroke-linejoin="round" />
+                    <path
+                      d="M6.66659 2L2.99992 5.66667L1.33325 4"
+                      stroke="currentColor"
+                      stroke-width="1.33333"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
                   </svg>
                 </div>
               </a-tag>
             </template>
 
-            <NcButton size="xs" type="text" icon-position="right" class="nc-show-more-tags-btn"
-              @click="onToggleShowMore">
+            <NcButton size="xs" type="text" icon-position="right" class="nc-show-more-tags-btn" @click="onToggleShowMore">
               {{ isExpandedPredefiendBasePromts ? $t('general.showLess') : $t('general.showMore') }}
 
               <template #icon>
@@ -414,11 +427,16 @@ onMounted(() => {
             </NcButton>
           </div>
           <div>
-            <a-textarea ref="aiPromptInputRef" :value="aiFormState.onHoverTagPrompt || aiFormState.prompt"
+            <a-textarea
+              ref="aiPromptInputRef"
+              :value="aiFormState.onHoverTagPrompt || aiFormState.prompt"
               placeholder="Type something..."
               class="!w-full !min-h-[120px] !rounded-lg mt-2 overflow-y-auto nc-scrollbar-thin nc-input-shadow nc-ai-input"
-              size="middle" :disabled="!aiIntegrationAvailable || (aiLoading && callFunction === 'onPredictSchema')"
-              :maxlength="8192" @update:value="aiFormState.prompt = $event" />
+              size="middle"
+              :disabled="!aiIntegrationAvailable || (aiLoading && callFunction === 'onPredictSchema')"
+              :maxlength="8192"
+              @update:value="aiFormState.prompt = $event"
+            />
           </div>
 
           <a-collapse v-model:active-key="expansionPanel" ghost class="flex-1 flex flex-col">
@@ -426,13 +444,22 @@ onMounted(() => {
             <a-collapse-panel :key="ExpansionPanelKeys.additionalDetails" collapsible="disabled">
               <template #header>
                 <div class="flex">
-                  <NcButton size="small" type="text" icon-position="right" class="-ml-[7px]"
-                    @click="handleUpdateExpansionPanel(ExpansionPanelKeys.additionalDetails)">
+                  <NcButton
+                    size="small"
+                    type="text"
+                    icon-position="right"
+                    class="-ml-[7px]"
+                    @click="handleUpdateExpansionPanel(ExpansionPanelKeys.additionalDetails)"
+                  >
                     {{ $t('title.additionalDetails') }}
                     <template #icon>
-                      <GeneralIcon icon="arrowDown" class="transform transition-all opacity-80" :class="{
-                        'rotate-180': expansionPanel.includes(ExpansionPanelKeys.additionalDetails),
-                      }" />
+                      <GeneralIcon
+                        icon="arrowDown"
+                        class="transform transition-all opacity-80"
+                        :class="{
+                          'rotate-180': expansionPanel.includes(ExpansionPanelKeys.additionalDetails),
+                        }"
+                      />
                     </template>
                   </NcButton>
                 </div>
@@ -441,18 +468,25 @@ onMounted(() => {
               <div class="flex flex-col gap-6 pt-6">
                 <div v-for="field of additionalDetails" :key="field.title" class="flex items-center gap-2">
                   <div class="min-w-[120px] text-nc-content-gray">{{ field.title }}</div>
-                  <a-input v-model:value="aiFormState[field.key]" class="nc-input-sm nc-input-shadow nc-ai-input"
-                    hide-details :placeholder="field.placeholder"
-                    :disabled="!aiIntegrationAvailable || (aiLoading && callFunction === 'onPredictSchema')" />
+                  <a-input
+                    v-model:value="aiFormState[field.key]"
+                    class="nc-input-sm nc-input-shadow nc-ai-input"
+                    hide-details
+                    :placeholder="field.placeholder"
+                    :disabled="!aiIntegrationAvailable || (aiLoading && callFunction === 'onPredictSchema')"
+                  />
                 </div>
               </div>
             </a-collapse-panel>
           </a-collapse>
         </div>
-        <div class="sticky bottom-0 w-full bg-nc-bg-default px-6 pt-3 pb-6 border-t-1 flex flex-col gap-3" :class="{
-          'border-nc-border-gray-medium': showBtnTopBorder,
-          'border-transparent': !showBtnTopBorder,
-        }">
+        <div
+          class="sticky bottom-0 w-full bg-nc-bg-default px-6 pt-3 pb-6 border-t-1 flex flex-col gap-3"
+          :class="{
+            'border-nc-border-gray-medium': showBtnTopBorder,
+            'border-transparent': !showBtnTopBorder,
+          }"
+        >
           <div v-if="aiError" class="w-full flex items-start gap-3 bg-nc-bg-red-light rounded-lg p-4">
             <GeneralIcon icon="ncInfoSolid" class="flex-none !text-nc-content-red-dark w-6 h-6" />
 
@@ -467,20 +501,35 @@ onMounted(() => {
             </div>
           </div>
           <div v-if="aiIntegrationAvailable" class="flex items-center gap-3">
-            <NcButton size="small" :type="aiStep !== AI_STEP.MODIFY || isOldPromptChanged ? 'primary' : 'secondary'"
-              theme="ai" class="w-1/2"
+            <NcButton
+              size="small"
+              :type="aiStep !== AI_STEP.MODIFY || isOldPromptChanged ? 'primary' : 'secondary'"
+              theme="ai"
+              class="w-1/2"
               :disabled="!aiFormState.prompt?.trim() || (aiLoading && callFunction === 'onPredictSchema')"
-              :loading="aiLoading && callFunction === 'onPredictSchema'" @click="onPredictSchema">
+              :loading="aiLoading && callFunction === 'onPredictSchema'"
+              @click="onPredictSchema"
+            >
               <template #icon>
                 <GeneralIcon icon="ncAutoAwesome" class="h-4 w-4" />
               </template>
               {{ $t('labels.suggestTablesViews') }}
             </NcButton>
-            <NcButton v-e="['a:base:ai:create']" type="primary" size="small" theme="ai" class="w-1/2" :disabled="aiStep !== AI_STEP.MODIFY ||
-              finalSchema?.tables?.length === 0 ||
-              (aiLoading && callFunction === 'onCreateSchema') ||
-              isOldPromptChanged
-              " :loading="aiLoading && callFunction === 'onCreateSchema'" @click="onCreateSchema">
+            <NcButton
+              v-e="['a:base:ai:create']"
+              type="primary"
+              size="small"
+              theme="ai"
+              class="w-1/2"
+              :disabled="
+                aiStep !== AI_STEP.MODIFY ||
+                finalSchema?.tables?.length === 0 ||
+                (aiLoading && callFunction === 'onCreateSchema') ||
+                isOldPromptChanged
+              "
+              :loading="aiLoading && callFunction === 'onCreateSchema'"
+              @click="onCreateSchema"
+            >
               {{ $t('activity.createProject') }}
             </NcButton>
           </div>
@@ -501,8 +550,10 @@ onMounted(() => {
         <!-- create base preview panel -->
 
         <template v-if="aiStep === AI_STEP.LOADING || aiStep === AI_STEP.PROMPT">
-          <div v-if="aiStep === AI_STEP.LOADING"
-            class="text-sm font-bold text-nc-content-purple-dark dark:text-nc-content-purple-medium">
+          <div
+            v-if="aiStep === AI_STEP.LOADING"
+            class="text-sm font-bold text-nc-content-purple-dark dark:text-nc-content-purple-medium"
+          >
             {{ $t('title.generatingBaseTailoredToYourRequirement') }}
           </div>
           <div v-else class="text-sm font-bold text-nc-content-purple-dark dark:text-nc-content-purple-medium">
@@ -510,23 +561,34 @@ onMounted(() => {
           </div>
 
           <template v-if="aiStep === AI_STEP.LOADING">
-            <div v-for="(loadingText, idx) of activeLoadingText" :key="idx"
-              class="text-sm text-nc-content-purple-light flex items-center">
+            <div
+              v-for="(loadingText, idx) of activeLoadingText"
+              :key="idx"
+              class="text-sm text-nc-content-purple-light flex items-center"
+            >
               {{ loadingText }}
               <div v-if="loadingText.length === loadingMessages[idx]?.length" class="nc-animate-dots"></div>
             </div>
 
             <div class="rounded-xl border-1 border-nc-border-purple-light">
-              <div v-for="idx in 7" :key="idx"
-                class="px-3 py-2 flex items-center gap-2 border-b-1 border-nc-border-purple-light !last-of-type:border-b-0">
+              <div
+                v-for="idx in 7"
+                :key="idx"
+                class="px-3 py-2 flex items-center gap-2 border-b-1 border-nc-border-purple-light !last-of-type:border-b-0"
+              >
                 <div class="flex-1 flex items-center gap-2">
-                  <a-skeleton-input :active="aiStep === AI_STEP.LOADING"
-                    class="!w-4 !h-4 !rounded overflow-hidden !bg-nc-bg-purple-light" />
-                  <a-skeleton-input :active="aiStep === AI_STEP.LOADING"
-                    class="!h-4 !rounded overflow-hidden !bg-nc-bg-purple-light" :class="{
+                  <a-skeleton-input
+                    :active="aiStep === AI_STEP.LOADING"
+                    class="!w-4 !h-4 !rounded overflow-hidden !bg-nc-bg-purple-light"
+                  />
+                  <a-skeleton-input
+                    :active="aiStep === AI_STEP.LOADING"
+                    class="!h-4 !rounded overflow-hidden !bg-nc-bg-purple-light"
+                    :class="{
                       '!w-[133px]': idx % 2 === 0,
                       '!w-[90px]': idx % 2 !== 0,
-                    }" />
+                    }"
+                  />
                 </div>
                 <div class="grid place-items-center h-6 w-6">
                   <GeneralIcon icon="arrowDown" class="text-nc-content-purple-light" />
@@ -544,19 +606,29 @@ onMounted(() => {
           </div>
 
           <template v-if="predictedSchema?.tables">
-            <AiWizardCard v-model:active-tab="activePreviewTab" :tabs="previewTabs"
-              class="!rounded-xl flex-1 flex flex-col min-w-[320px]" content-class-name="flex-1 flex flex-col">
+            <AiWizardCard
+              v-model:active-tab="activePreviewTab"
+              :tabs="previewTabs"
+              class="!rounded-xl flex-1 flex flex-col min-w-[320px]"
+              content-class-name="flex-1 flex flex-col"
+            >
               <template #tabContent>
-                <a-collapse v-if="activePreviewTab === SchemaPreviewTabs.TABLES_AND_VIEWS"
-                  v-model:active-key="previewExpansionPanel" class="nc-schema-preview-table flex flex-col">
+                <a-collapse
+                  v-if="activePreviewTab === SchemaPreviewTabs.TABLES_AND_VIEWS"
+                  v-model:active-key="previewExpansionPanel"
+                  class="nc-schema-preview-table flex flex-col"
+                >
                   <template #expandIcon> </template>
 
                   <a-collapse-panel v-for="table in predictedSchema.tables" :key="table.title" collapsible="disabled">
                     <template #header>
-                      <div class="w-full flex items-center px-4 py-2"
-                        @click="handleUpdatePreviewExpansionPanel(table.title, !viewsGrouped[table.title]?.length)">
+                      <div
+                        class="w-full flex items-center px-4 py-2"
+                        @click="handleUpdatePreviewExpansionPanel(table.title, !viewsGrouped[table.title]?.length)"
+                      >
                         <div
-                          class="flex-1 flex items-center gap-3 text-nc-content-purple-dark dark:text-nc-content-purple-medium">
+                          class="flex-1 flex items-center gap-3 text-nc-content-purple-dark dark:text-nc-content-purple-medium"
+                        >
                           <NcCheckbox :checked="!table.excluded" theme="ai" @click.stop="onExcludeTable(table)" />
 
                           <GeneralIcon icon="table" class="flex-none !h-4 opacity-85" />
@@ -568,13 +640,24 @@ onMounted(() => {
                             {{ table.title }}
                           </NcTooltip>
                         </div>
-                        <NcButton size="xs" type="text" theme="ai" icon-only class="!px-0 !h-6 !w-6 !min-w-6" :class="{
-                          hidden: !viewsGrouped[table.title]?.length,
-                        }">
+                        <NcButton
+                          size="xs"
+                          type="text"
+                          theme="ai"
+                          icon-only
+                          class="!px-0 !h-6 !w-6 !min-w-6"
+                          :class="{
+                            hidden: !viewsGrouped[table.title]?.length,
+                          }"
+                        >
                           <template #icon>
-                            <GeneralIcon icon="arrowDown" class="transform transition-all opacity-80" :class="{
-                              'rotate-180': previewExpansionPanel.includes(table.title),
-                            }" />
+                            <GeneralIcon
+                              icon="arrowDown"
+                              class="transform transition-all opacity-80"
+                              :class="{
+                                'rotate-180': previewExpansionPanel.includes(table.title),
+                              }"
+                            />
                           </template>
                         </NcButton>
                       </div>
diff --git a/packages/nc-gui/components/workspace/project/AppMarket.vue b/packages/nc-gui/components/workspace/project/AppMarket.vue
index 12bb44b2f6..af67d75795 100644
--- a/packages/nc-gui/components/workspace/project/AppMarket.vue
+++ b/packages/nc-gui/components/workspace/project/AppMarket.vue
@@ -19,7 +19,6 @@ const emit = defineEmits(['update:visible', 'installed'])
 
 const visible = useVModel(props, 'visible', emit)
 
-
 const { $api } = useNuxtApp()
 const { t } = useI18n()
 
@@ -125,7 +124,7 @@ watch(
       <GeneralIcon icon="ncBox" class="h-5 w-5" />
       <div class="flex-1 text-bodyLgBold">{{ t('labels.appMarket') }}</div>
 
-      <NcButton size="small" type="text" @click="visible = false" class="self-start">
+      <NcButton size="small" type="text" class="self-start" @click="visible = false">
         <GeneralIcon icon="close" class="text-nc-content-gray-subtle2" />
       </NcButton>
     </div>
@@ -133,15 +132,18 @@ watch(
     <div class="flex flex-col gap-4 h-[600px] p-6">
       <!-- Search and Filter Bar -->
       <div class="flex gap-3">
-        <a-input v-model:value="searchQuery" class="flex-1 nc-input-sm nc-input-shadow !rounded-md"
-          :placeholder="t('placeholder.searchByTitle')" allow-clear>
+        <a-input
+          v-model:value="searchQuery"
+          class="flex-1 nc-input-sm nc-input-shadow !rounded-md"
+          :placeholder="t('placeholder.searchByTitle')"
+          allow-clear
+        >
           <template #prefix>
             <GeneralIcon icon="search" class="h-4 w-4 text-nc-content-gray-muted" />
           </template>
         </a-input>
 
-        <NcSelect v-model:value="selectedCategory" class="w-48 nc-select-sm" :placeholder="t('labels.category')"
-          allow-clear>
+        <NcSelect v-model:value="selectedCategory" class="w-48 nc-select-sm" :placeholder="t('labels.category')" allow-clear>
           <a-select-option v-for="cat in categories" :key="cat" :value="cat">
             {{ cat }}
           </a-select-option>
@@ -162,9 +164,12 @@ watch(
       </div>
 
       <div v-else class="flex flex-col gap-3 overflow-y-auto pr-2">
-        <div v-for="sandbox in filteredSandboxes" :key="sandbox.id"
+        <div
+          v-for="sandbox in filteredSandboxes"
+          :key="sandbox.id"
           class="nc-sandbox-card border-1 border-nc-border-gray-medium rounded-lg p-4 hover:shadow-md transition-all cursor-pointer"
-          @click="installSandbox(sandbox)">
+          @click="installSandbox(sandbox)"
+        >
           <div class="flex gap-4">
             <div class="flex-1">
               <div class="flex items-start justify-between gap-3 mb-2">
@@ -172,8 +177,13 @@ watch(
                   <h3 class="text-base font-semibold text-nc-content-gray mb-1">{{ sandbox.title }}</h3>
                   <p class="text-sm text-nc-content-gray-subtle line-clamp-2">{{ sandbox.description }}</p>
                 </div>
-                <NcButton :loading="installing === sandbox.id" :disabled="!!installing" size="small" type="primary"
-                  @click.stop="installSandbox(sandbox)">
+                <NcButton
+                  :loading="installing === sandbox.id"
+                  :disabled="!!installing"
+                  size="small"
+                  type="primary"
+                  @click.stop="installSandbox(sandbox)"
+                >
                   <template #icon>
                     <GeneralIcon icon="download" />
                   </template>
diff --git a/packages/nc-gui/components/workspace/project/create/ManagedApp.vue b/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
index 255ad1cbec..a7b45cba7a 100644
--- a/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
+++ b/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
@@ -3,8 +3,8 @@ import { FormBuilderValidatorType } from 'nocodb-sdk'
 import { FORM_BUILDER_NON_CATEGORIZED, FormBuilderInputType } from '#imports'
 
 const props = defineProps<{
-    visible: boolean
-    baseId?: string
+  visible: boolean
+  baseId?: string
 }>()
 
 const emit = defineEmits(['update:visible'])
@@ -16,160 +16,158 @@ const { $api } = useNuxtApp()
 const { t } = useI18n()
 
 const initialSanboxFormState = ref<Record<string, any>>({
-    title: '',
-    description: '',
-    category: '',
-    visibility: 'private',
+  title: '',
+  description: '',
+  category: '',
+  visibility: 'private',
 })
 
 const workspaceStore = useWorkspace()
 
-
 const { activeWorkspaceId } = storeToRefs(workspaceStore)
-const { base } = storeToRefs(useBase())
 
 const basesStore = useBases()
 
 const convertToSandbox = async (formState: Record<string, any>) => {
-    try {
-        const response = await $api.internal.postOperation(
-            activeWorkspaceId.value as string,
-            props.baseId,
-            {
-                operation: 'sandboxCreate',
-            } as any,
-            {
-                title: formState.title,
-                description: formState.description,
-                category: formState.category,
-                visibility: formState.visibility,
-            },
-        )
+  try {
+    const response = await $api.internal.postOperation(
+      activeWorkspaceId.value as string,
+      props.baseId,
+      {
+        operation: 'sandboxCreate',
+      } as any,
+      {
+        title: formState.title,
+        description: formState.description,
+        category: formState.category,
+        visibility: formState.visibility,
+      },
+    )
 
-        message.success(t('msg.success.sandboxCreated'))
-        visible.value = false
+    message.success(t('msg.success.sandboxCreated'))
+    visible.value = false
 
-        // Update the base with the sandbox_id from response
-        if (response && response.sandbox_id) {
-            const currentBase = basesStore.bases.get(props.baseId)
-            if (currentBase) {
-                ; (currentBase as any).sandbox_id = response.sandbox_id
-            }
-        }
-
-        // Reload base to ensure all sandbox data is loaded
-        await basesStore.loadProject(props.baseId, true)
-    } catch (e: any) {
-        message.error(await extractSdkResponseErrorMsg(e))
+    // Update the base with the sandbox_id from response
+    if (response && response.sandbox_id) {
+      const currentBase = basesStore.bases.get(props.baseId)
+      if (currentBase) {
+        ;(currentBase as any).sandbox_id = response.sandbox_id
+      }
     }
+
+    // Reload base to ensure all sandbox data is loaded
+    await basesStore.loadProject(props.baseId, true)
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
 }
 
 const { formState, isLoading, submit } = useProvideFormBuilderHelper({
-    formSchema: [
+  formSchema: [
+    {
+      type: FormBuilderInputType.Input,
+      label: t('labels.sandboxTitle'),
+      span: 24,
+      model: 'title',
+      placeholder: 'Enter a descriptive title',
+      category: FORM_BUILDER_NON_CATEGORIZED,
+      validators: [
         {
-            type: FormBuilderInputType.Input,
-            label: t('labels.sandboxTitle'),
-            span: 24,
-            model: 'title',
-            placeholder: 'Enter a descriptive title',
-            category: FORM_BUILDER_NON_CATEGORIZED,
-            validators: [
-                {
-                    type: FormBuilderValidatorType.Required,
-                    message: t('labels.titleRequired'),
-                },
-            ],
-            required: true,
+          type: FormBuilderValidatorType.Required,
+          message: t('labels.titleRequired'),
         },
-        {
-            type: FormBuilderInputType.Textarea,
-            label: t('labels.sandboxDescription'),
-            span: 24,
-            model: 'description',
-            placeholder: "Describe your application's capabilities",
-            category: FORM_BUILDER_NON_CATEGORIZED,
-        },
-        {
-            type: FormBuilderInputType.Input,
-            label: t('labels.sandboxCategory'),
-            span: 12,
-            model: 'category',
-            placeholder: 'e.g., CRM, HR',
-            category: FORM_BUILDER_NON_CATEGORIZED,
-        },
-        {
-            type: FormBuilderInputType.Select,
-            label: t('labels.sandboxVisibility'),
-            span: 12,
-            model: 'visibility',
-            category: FORM_BUILDER_NON_CATEGORIZED,
-            options: [
-                { label: 'Public', value: 'public', icon: 'eye' },
-                { label: 'Private', value: 'private', icon: 'lock' },
-                { label: 'Unlisted', value: 'unlisted', icon: 'ncEyeOff' },
-            ],
-            defaultValue: 'private',
-        },
-    ],
-    onSubmit: async () => {
-        return await convertToSandbox(formState.value)
+      ],
+      required: true,
     },
-    initialState: initialSanboxFormState,
+    {
+      type: FormBuilderInputType.Textarea,
+      label: t('labels.sandboxDescription'),
+      span: 24,
+      model: 'description',
+      placeholder: "Describe your application's capabilities",
+      category: FORM_BUILDER_NON_CATEGORIZED,
+    },
+    {
+      type: FormBuilderInputType.Input,
+      label: t('labels.sandboxCategory'),
+      span: 12,
+      model: 'category',
+      placeholder: 'e.g., CRM, HR',
+      category: FORM_BUILDER_NON_CATEGORIZED,
+    },
+    {
+      type: FormBuilderInputType.Select,
+      label: t('labels.sandboxVisibility'),
+      span: 12,
+      model: 'visibility',
+      category: FORM_BUILDER_NON_CATEGORIZED,
+      options: [
+        { label: 'Public', value: 'public', icon: 'eye' },
+        { label: 'Private', value: 'private', icon: 'lock' },
+        { label: 'Unlisted', value: 'unlisted', icon: 'ncEyeOff' },
+      ],
+      defaultValue: 'private',
+    },
+  ],
+  onSubmit: async () => {
+    return await convertToSandbox(formState.value)
+  },
+  initialState: initialSanboxFormState,
 })
 </script>
 
 <template>
-    <div class="flex flex-col">
-        <div class="p-4 w-full flex items-center gap-3 border-b border-nc-border-gray-medium">
-            <div
-                class="w-10 h-10 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 flex items-center justify-center">
-                <GeneralIcon icon="ncBox" class="w-5 h-5 text-white" />
-            </div>
-            <div class="flex-1">
-                <div class="font-semibold text-lg text-nc-content-gray-emphasis">
-                    Create Managed App
-                </div>
-                <div class="text-xs text-nc-content-gray-subtle2">{{ $t('labels.publishToAppStore') }}</div>
-            </div>
+  <div class="flex flex-col">
+    <div class="p-4 w-full flex items-center gap-3 border-b border-nc-border-gray-medium">
+      <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 flex items-center justify-center">
+        <GeneralIcon icon="ncBox" class="w-5 h-5 text-white" />
+      </div>
+      <div class="flex-1">
+        <div class="font-semibold text-lg text-nc-content-gray-emphasis">Create Managed App</div>
+        <div class="text-xs text-nc-content-gray-subtle2">{{ $t('labels.publishToAppStore') }}</div>
+      </div>
 
-            <NcButton size="small" type="text" @click="visible = false" class="self-start">
-                <GeneralIcon icon="close" class="text-nc-content-gray-subtle2" />
-            </NcButton>
-        </div>
-
-        <div class="flex-1 p-6 nc-scrollbar-thin">
-            <NcFormBuilder>
-                <template #header>
-                    <NcAlert type="info" :align="'top'"
-                        description="Create managed application that can be published to the App Store. You'll be able to manage versions and push updates to all installations."
-                        class="!p-3 !items-start bg-nc-bg-blue-light border-1 !border-nc-blue-200 rounded-lg p-3 mb-4">
-                        <template #icon>
-                            <GeneralIcon icon="info" class="w-4 h-4 mt-0.5 text-nc-content-blue-dark flex-none" />
-                        </template>
-                    </NcAlert>
-                </template>
-            </NcFormBuilder>
-        </div>
-
-        <div class="flex justify-end gap-2 px-6 py-3 border-t border-nc-border-gray-medium">
-            <NcButton size="small" type="secondary" :disabled="isLoading" @click="visible = false">
-                {{ $t('general.cancel') }}
-            </NcButton>
-            <NcButton size="small" type="primary" :loading="isLoading" @click="submit">
-                <template #icon>
-                    <GeneralIcon icon="ncBox" />
-                </template>
-                Convert to sandbox
-            </NcButton>
-        </div>
+      <NcButton size="small" type="text" class="self-start" @click="visible = false">
+        <GeneralIcon icon="close" class="text-nc-content-gray-subtle2" />
+      </NcButton>
     </div>
+
+    <div class="flex-1 p-6 nc-scrollbar-thin">
+      <NcFormBuilder>
+        <template #header>
+          <NcAlert
+            type="info"
+            align="top"
+            description="Create managed application that can be published to the App Store. You'll be able to manage versions and push updates to all installations."
+            class="!p-3 !items-start bg-nc-bg-blue-light border-1 !border-nc-blue-200 rounded-lg p-3 mb-4"
+          >
+            <template #icon>
+              <GeneralIcon icon="info" class="w-4 h-4 mt-0.5 text-nc-content-blue-dark flex-none" />
+            </template>
+          </NcAlert>
+        </template>
+      </NcFormBuilder>
+    </div>
+
+    <div class="flex justify-end gap-2 px-6 py-3 border-t border-nc-border-gray-medium">
+      <NcButton size="small" type="secondary" :disabled="isLoading" @click="visible = false">
+        {{ $t('general.cancel') }}
+      </NcButton>
+      <NcButton size="small" type="primary" :loading="isLoading" @click="submit">
+        <template #icon>
+          <GeneralIcon icon="ncBox" />
+        </template>
+        Convert to sandbox
+      </NcButton>
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
 .nc-modal-convert-to-sandbox {
-    .nc-modal {
-        max-height: min(90vh, 540px) !important;
-        height: min(90vh, 540px) !important;
-    }
+  .nc-modal {
+    max-height: min(90vh, 540px) !important;
+    height: min(90vh, 540px) !important;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/nc-gui/components/workspace/project/create/Menu.vue b/packages/nc-gui/components/workspace/project/create/Menu.vue
index 339b267bb8..a200ab31a7 100644
--- a/packages/nc-gui/components/workspace/project/create/Menu.vue
+++ b/packages/nc-gui/components/workspace/project/create/Menu.vue
@@ -1,21 +1,20 @@
 <script lang="ts" setup>
 interface Props {
-    visible: boolean
-    variant: 'modal' | 'dropdown'
-    baseCreateMode: NcBaseCreateMode | null
+  visible: boolean
+  variant: 'modal' | 'dropdown'
+  baseCreateMode: NcBaseCreateMode | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    variant: 'dropdown',
+  variant: 'dropdown',
 })
 
 const emits = defineEmits<{
-    (e: 'update:visible', value: boolean): void
-    (e: 'update:baseCreateMode', value: NcBaseCreateMode | null): void
-    (e: 'onSelect', mode: NcBaseCreateMode): void
+  (e: 'update:visible', value: boolean): void
+  (e: 'update:baseCreateMode', value: NcBaseCreateMode | null): void
+  (e: 'onSelect', mode: NcBaseCreateMode): void
 }>()
 
-
 const vVisible = useVModel(props, 'visible', emits)
 
 const baseCreateMode = useVModel(props, 'baseCreateMode', emits)
@@ -29,42 +28,58 @@ const { isTemplatesFeatureEnabled } = storeToRefs(workspaceStore)
 const { isAiFeaturesEnabled } = useNocoAi()
 
 const onClickOption = (mode: NcBaseCreateMode) => {
-    if (isTemplatesFeatureEnabled.value && mode === NcBaseCreateMode.FROM_TEMPLATE) {
-        vVisible.value = false
-        navigateToTemplates()
+  if (isTemplatesFeatureEnabled.value && mode === NcBaseCreateMode.FROM_TEMPLATE) {
+    vVisible.value = false
+    navigateToTemplates()
 
-        return
-    }
-
-    baseCreateMode.value = mode
+    return
+  }
 
+  baseCreateMode.value = mode
 }
 
 onMounted(() => {
-    if (!isAiFeaturesEnabled.value && props.variant === 'modal') {
-        baseCreateMode.value = NcBaseCreateMode.FROM_SCRATCH
-    }
+  if (!isAiFeaturesEnabled.value && props.variant === 'modal') {
+    baseCreateMode.value = NcBaseCreateMode.FROM_SCRATCH
+  }
 })
 </script>
 
 <template>
-    <NcMenu v-if="variant === 'dropdown'" variant="large" data-testid="nc-home-create-new-menu"
-        @click="vVisible = false">
-        <DashboardTreeViewCreateProjectMenuItem v-e="['c:base:create:scratch']" icon="plus" label="From Scratch"
-            subtext="Start with an empty base" @click="onClickOption(NcBaseCreateMode.FROM_SCRATCH)" />
+  <NcMenu v-if="variant === 'dropdown'" variant="large" data-testid="nc-home-create-new-menu" @click="vVisible = false">
+    <DashboardTreeViewCreateProjectMenuItem
+      v-e="['c:base:create:scratch']"
+      icon="plus"
+      label="From Scratch"
+      subtext="Start with an empty base"
+      @click="onClickOption(NcBaseCreateMode.FROM_SCRATCH)"
+    />
 
-        <DashboardTreeViewCreateProjectMenuItem v-if="isAiFeaturesEnabled" v-e="['c:base:ai:create']"
-            icon="ncAutoAwesome" label="Build with AI" subtext="Pre-built structures for common use cases"
-            @click="onClickOption(NcBaseCreateMode.BUILD_WITH_AI)" />
+    <DashboardTreeViewCreateProjectMenuItem
+      v-if="isAiFeaturesEnabled"
+      v-e="['c:base:ai:create']"
+      icon="ncAutoAwesome"
+      label="Build with AI"
+      subtext="Pre-built structures for common use cases"
+      @click="onClickOption(NcBaseCreateMode.BUILD_WITH_AI)"
+    />
+  </NcMenu>
+  <div v-else class="flex flex-row gap-6 flex-wrap max-w-[min(80vw,738px)] children:(!w-[230px] !max-w-[230px])">
+    <ProjectActionItem
+      v-e="['c:base:create:scratch']"
+      icon="plus"
+      label="From Scratch"
+      subtext="Start with an empty base"
+      @click="onClickOption(NcBaseCreateMode.FROM_SCRATCH)"
+    />
 
-    </NcMenu>
-    <div v-else class="flex flex-row gap-6 flex-wrap max-w-[min(80vw,738px)] children:(!w-[230px] !max-w-[230px])">
-        <ProjectActionItem v-e="['c:base:create:scratch']" icon="plus" label="From Scratch"
-            subtext="Start with an empty base" @click="onClickOption(NcBaseCreateMode.FROM_SCRATCH)" />
-
-        <ProjectActionItem v-if="isAiFeaturesEnabled" v-e="['c:base:ai:create']" icon="ncAutoAwesome"
-            label="Build with AI" subtext="Pre-built structures for common use cases"
-            @click="onClickOption(NcBaseCreateMode.BUILD_WITH_AI)" />
-
-    </div>
-</template>
\ No newline at end of file
+    <ProjectActionItem
+      v-if="isAiFeaturesEnabled"
+      v-e="['c:base:ai:create']"
+      icon="ncAutoAwesome"
+      label="Build with AI"
+      subtext="Pre-built structures for common use cases"
+      @click="onClickOption(NcBaseCreateMode.BUILD_WITH_AI)"
+    />
+  </div>
+</template>
diff --git a/packages/nc-gui/components/workspace/project/create/MenuItem.vue b/packages/nc-gui/components/workspace/project/create/MenuItem.vue
index 0a3ab7afd9..5beaae4a5a 100644
--- a/packages/nc-gui/components/workspace/project/create/MenuItem.vue
+++ b/packages/nc-gui/components/workspace/project/create/MenuItem.vue
@@ -1,57 +1,56 @@
 <script lang="ts" setup>
-
-import { NcMenuItem } from "#components"
+import { NcMenuItem } from '#components'
 
 interface Props {
-    label: string
-    subtext?: string
-    icon?: IconMapKey
-    variant?: 'dropdown' | 'modal'
+  label: string
+  subtext?: string
+  icon?: IconMapKey
+  variant?: 'dropdown' | 'modal'
 }
 
-withDefaults(defineProps<Props>(), {
-})
-
+withDefaults(defineProps<Props>(), {})
 </script>
 
 <template>
-    <component :is="variant === 'modal' ? 'div' : NcMenuItem"
-        :inner-class="`w-full ${$slots.subtext || subtext ? '!items-start' : ''}`"
-        :class="`nc-create-project-menu-item-${variant}`">
-        <div class="nc-icon-wrapper">
-            <slot name="icon">
-                <GeneralIcon v-if="icon" :icon="icon" class="h-4 w-4 flex-none" />
-            </slot>
-        </div>
+  <component
+    :is="variant === 'modal' ? 'div' : NcMenuItem"
+    :inner-class="`w-full ${$slots.subtext || subtext ? '!items-start' : ''}`"
+    :class="`nc-create-project-menu-item-${variant}`"
+  >
+    <div class="nc-icon-wrapper">
+      <slot name="icon">
+        <GeneralIcon v-if="icon" :icon="icon" class="h-4 w-4 flex-none" />
+      </slot>
+    </div>
 
-        <div class="nc-content-wrapper">
-            <div class="nc-content-label">
-                <slot name="label">{{ label }}</slot>
-            </div>
-            <div v-if="$slots.subtext || subtext" class="nc-content-subtext">
-                <slot name="subtext">{{ subtext }}</slot>
-            </div>
-        </div>
-    </component>
+    <div class="nc-content-wrapper">
+      <div class="nc-content-label">
+        <slot name="label">{{ label }}</slot>
+      </div>
+      <div v-if="$slots.subtext || subtext" class="nc-content-subtext">
+        <slot name="subtext">{{ subtext }}</slot>
+      </div>
+    </div>
+  </component>
 </template>
 
 <style lang="scss" scoped>
 .nc-icon-wrapper {
-    @apply flex items-center justify-center h-5 children:flex-none;
+  @apply flex items-center justify-center h-5 children:flex-none;
 }
 
 .nc-create-project-menu-item-modal {
-    @apply font-normal text-sm flex items-start gap-3 mx-1 px-2 py-1 rounded-md hover:bg-nc-bg-gray-light transition-colors cursor-pointer;
-
-    .nc-content-wrapper {
-        .nc-content-label {}
+  @apply font-normal text-sm flex items-start gap-3 mx-1 px-2 py-1 rounded-md hover:bg-nc-bg-gray-light transition-colors cursor-pointer;
 
+  .nc-content-wrapper {
+    .nc-content-label {
     }
+  }
 }
 
 .nc-content-wrapper {
-    .nc-content-subtext {
-        @apply text-tiny !leading-4 text-nc-content-gray-muted;
-    }
+  .nc-content-subtext {
+    @apply text-tiny !leading-4 text-nc-content-gray-muted;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index fac19b2475..e3d1606b2e 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -221,7 +221,6 @@ export const EventBusEnum = {
   SmartsheetActions: Symbol('SmartSheetActions'),
 }
 
-
 export enum NcBaseCreateMode {
   FROM_SCRATCH = 'fromScratch',
   FROM_TEMPLATE = 'fromTemplate',
@@ -229,4 +228,4 @@ export enum NcBaseCreateMode {
   FROM_APP_STORE = 'fromAppStore',
   MANAGED_APP = 'managedApp',
   SANDBOX_APP = 'sandboxApp',
-}
\ No newline at end of file
+}
diff --git a/packages/nc-gui/store/bases.ts b/packages/nc-gui/store/bases.ts
index dd8e0966a3..1b2862dc8f 100644
--- a/packages/nc-gui/store/bases.ts
+++ b/packages/nc-gui/store/bases.ts
@@ -311,7 +311,7 @@ export const useBases = defineStore('basesStore', () => {
     }
     try {
       meta = (isString(base.meta) ? JSON.parse(base.meta) : base.meta) ?? meta
-    } catch { }
+    } catch {}
 
     return meta
   }
@@ -395,7 +395,7 @@ export const useBases = defineStore('basesStore', () => {
     else navigateTo('/')
   }
 
-  const toggleStarred = async (..._args: any) => { }
+  const toggleStarred = async (..._args: any) => {}
 
   watch(
     () => route.value.params.baseId,
@@ -448,13 +448,13 @@ export const useBases = defineStore('basesStore', () => {
 
   const basesTeams = ref<Map<string, Record<string, any>[]>>(new Map())
 
-  const getBaseTeams = async (..._args: any[]) => { }
+  const getBaseTeams = async (..._args: any[]) => {}
 
-  const baseTeamList = async (..._args: any[]) => { }
-  const baseTeamGet = async (..._args: any[]) => { }
-  const baseTeamAdd = async (..._args: any[]) => { }
-  const baseTeamUpdate = async (..._args: any[]) => { }
-  const baseTeamRemove = async (..._args: any[]) => { }
+  const baseTeamList = async (..._args: any[]) => {}
+  const baseTeamGet = async (..._args: any[]) => {}
+  const baseTeamAdd = async (..._args: any[]) => {}
+  const baseTeamUpdate = async (..._args: any[]) => {}
+  const baseTeamRemove = async (..._args: any[]) => {}
 
   /**
    * Teams section end here
diff --git a/packages/nc-gui/utils/browserUtils.ts b/packages/nc-gui/utils/browserUtils.ts
index bb899869d3..561e37861b 100644
--- a/packages/nc-gui/utils/browserUtils.ts
+++ b/packages/nc-gui/utils/browserUtils.ts
@@ -225,7 +225,6 @@ export const openContactSalesEmail = (email: string = 'support@nocodb.com') => {
   a.click()
 }
 
-
 export const getValidSlotName = (name: string, prefix?: string, suffix?: string): string => {
   let slotName = name.replace(/\./g, '__')