diff --git a/packages/nc-gui/pages/index/index.vue b/packages/nc-gui/pages/index/index.vue
index 94745d09f3..e02ea6d55b 100644
--- a/packages/nc-gui/pages/index/index.vue
+++ b/packages/nc-gui/pages/index/index.vue
@@ -5,13 +5,13 @@ const route = useRoute()
 </script>
 
 <template>
-  <NuxtLayout>
+  <LazyNuxtLayout>
     <div
       class="min-h-[calc(100vh_-_var(--header-height))] h-auto bg-primary bg-opacity-5 flex flex-col lg:flex-row flex-wrap gap-6 py-6 px-12 pt-65px"
     >
       <div class="flex-1 justify-end hidden xl:(flex)">
         <div>
-          <GeneralSponsors />
+          <LazyGeneralSponsors />
         </div>
       </div>
 
@@ -23,15 +23,15 @@ const route = useRoute()
         <template v-if="route.name === 'index-index'">
           <TransitionGroup name="page" mode="out-in">
             <div key="social-card">
-              <GeneralSocialCard />
+              <LazyGeneralSocialCard />
             </div>
 
             <div key="sponsors" class="block mt-0 lg:(!mt-6) xl:hidden">
-              <GeneralSponsors />
+              <LazyGeneralSponsors />
             </div>
           </TransitionGroup>
         </template>
       </div>
     </div>
-  </NuxtLayout>
+  </LazyNuxtLayout>
 </template>
diff --git a/packages/nc-gui/pages/index/index/[projectId].vue b/packages/nc-gui/pages/index/index/[projectId].vue
index 055691fa37..3e4fdb813e 100644
--- a/packages/nc-gui/pages/index/index/[projectId].vue
+++ b/packages/nc-gui/pages/index/index/[projectId].vue
@@ -1,27 +1,25 @@
 <script lang="ts" setup>
 import type { Form } from 'ant-design-vue'
-import { message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import {
   extractSdkResponseErrorMsg,
+  message,
   navigateTo,
   nextTick,
   onMounted,
   projectTitleValidator,
   reactive,
   ref,
-  useApi,
+  useProject,
   useRoute,
   useSidebar,
 } from '#imports'
 
-const { isLoading } = useApi()
-
 useSidebar('nc-left-sidebar', { hasSidebar: false })
 
 const route = useRoute()
 
-const { project, loadProject, updateProject } = useProject(route.params.projectId as string)
+const { project, loadProject, updateProject, isLoading } = useProject(route.params.projectId as string)
 
 await loadProject()
 
@@ -69,7 +67,7 @@ onMounted(async () => {
   <div
     class="update-project bg-white relative flex-auto flex flex-col justify-center gap-2 p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
   >
-    <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
+    <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
 
     <div
       class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"
diff --git a/packages/nc-gui/pages/index/index/create-external.vue b/packages/nc-gui/pages/index/index/create-external.vue
index 0568bf2d87..9a6e0e2593 100644
--- a/packages/nc-gui/pages/index/index/create-external.vue
+++ b/packages/nc-gui/pages/index/index/create-external.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Form, Modal, message } from 'ant-design-vue'
+import { Form, Modal } from 'ant-design-vue'
 import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
 import {
   CertTypes,
@@ -11,6 +11,7 @@ import {
   generateUniqueName,
   getDefaultConnectionConfig,
   getTestDatabaseName,
+  message,
   navigateTo,
   nextTick,
   onMounted,
@@ -24,8 +25,7 @@ import {
   watch,
 } from '#imports'
 import { ClientType } from '~/lib'
-import { DefaultConnection, SQLiteConnection } from '~/utils'
-import type { ProjectCreateForm } from '~/utils'
+import type { DefaultConnection, ProjectCreateForm } from '~/utils'
 
 const useForm = Form.useForm
 
@@ -318,9 +318,10 @@ watch(
 )
 
 // select and focus title field on load
-onMounted(() => {
-  formState.title = generateUniqueName()
-  nextTick(() => {
+onMounted(async () => {
+  formState.title = await generateUniqueName()
+
+  await nextTick(() => {
     // todo: replace setTimeout and follow better approach
     setTimeout(() => {
       const input = form.value?.$el?.querySelector('input[type=text]')
@@ -335,7 +336,7 @@ onMounted(() => {
   <div
     class="create-external bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
   >
-    <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
+    <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
 
     <div
       class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"
@@ -377,34 +378,28 @@ onMounted(() => {
         :label="$t('labels.sqliteFile')"
         v-bind="validateInfos['dataSource.connection.connection.filename']"
       >
-        <a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" />
+        <a-input v-model:value="formState.dataSource.connection.connection.filename" />
       </a-form-item>
 
       <template v-else>
         <!-- Host Address -->
         <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
-          <a-input v-model:value="(formState.dataSource.connection as DefaultConnection).host" class="nc-extdb-host-address" />
+          <a-input v-model:value="formState.dataSource.connection.host" class="nc-extdb-host-address" />
         </a-form-item>
 
         <!-- Port Number -->
         <a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']">
-          <a-input-number
-            v-model:value="(formState.dataSource.connection as DefaultConnection).port"
-            class="!w-full nc-extdb-host-port"
-          />
+          <a-input-number v-model:value="formState.dataSource.connection.port" class="!w-full nc-extdb-host-port" />
         </a-form-item>
 
         <!-- Username -->
         <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
-          <a-input v-model:value="(formState.dataSource.connection as DefaultConnection).user" class="nc-extdb-host-user" />
+          <a-input v-model:value="formState.dataSource.connection.user" class="nc-extdb-host-user" />
         </a-form-item>
 
         <!-- Password -->
         <a-form-item :label="$t('labels.password')">
-          <a-input-password
-            v-model:value="(formState.dataSource.connection as DefaultConnection).password"
-            class="nc-extdb-host-password"
-          />
+          <a-input-password v-model:value="formState.dataSource.connection.password" class="nc-extdb-host-password" />
         </a-form-item>
 
         <!-- Database -->
@@ -557,7 +552,7 @@ onMounted(() => {
       wrap-class-name="nc-modal-edit-connection-json"
       @ok="handleOk"
     >
-      <MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" />
+      <LazyMonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" />
     </a-modal>
 
     <!--    Use Connection URL -->
diff --git a/packages/nc-gui/pages/index/index/create.vue b/packages/nc-gui/pages/index/index/create.vue
index 3599c2ae7b..1362cf4733 100644
--- a/packages/nc-gui/pages/index/index/create.vue
+++ b/packages/nc-gui/pages/index/index/create.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { Form } from 'ant-design-vue'
-import { message } from 'ant-design-vue'
 import {
   extractSdkResponseErrorMsg,
+  message,
   navigateTo,
   nextTick,
   onMounted,
@@ -66,7 +66,7 @@ onMounted(async () => {
   <div
     class="create bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
   >
-    <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
+    <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
 
     <div
       class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"
diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index 541053e3cb..5f2d09342e 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -1,16 +1,17 @@
 <script lang="ts" setup>
-import { Empty, Modal, message } from 'ant-design-vue'
+import { Empty, Modal } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import tinycolor from 'tinycolor2'
 import {
   computed,
   definePageMeta,
   extractSdkResponseErrorMsg,
+  message,
   navigateTo,
   projectThemeColors,
   ref,
   themeV2Colors,
-  useApi,
+  useLazyAsyncData,
   useNuxtApp,
   useSidebar,
   useUIPermission,
@@ -22,7 +23,15 @@ definePageMeta({
 
 const { $api, $e } = useNuxtApp()
 
-const { api, isLoading } = useApi()
+const {
+  data: projects,
+  pending: isLoading,
+  execute,
+} = useLazyAsyncData(async () => {
+  const response = await $api.project.list({})
+
+  return response.list
+})
 
 const { isUIAllowed } = useUIPermission()
 
@@ -30,13 +39,6 @@ useSidebar('nc-left-sidebar', { hasSidebar: false, isOpen: true })
 
 const filterQuery = ref('')
 
-const projects = ref<ProjectType[]>()
-
-const loadProjects = async () => {
-  const response = await api.project.list({})
-  projects.value = response.list
-}
-
 const filteredProjects = computed(
   () =>
     projects.value?.filter(
@@ -55,7 +57,7 @@ const deleteProject = (project: ProjectType) => {
     cancelText: 'No',
     async onOk() {
       try {
-        await api.project.delete(project.id as string)
+        await $api.project.delete(project.id as string)
 
         $e('a:project:delete')
 
@@ -67,7 +69,7 @@ const deleteProject = (project: ProjectType) => {
   })
 }
 
-await loadProjects()
+await execute()
 
 const handleProjectColor = async (projectId: string, color: string) => {
   const tcolor = tinycolor(color)
@@ -126,7 +128,7 @@ const customRow = (record: ProjectType) => ({
 
 <template>
   <div class="bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)">
-    <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
+    <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
 
     <h1 class="flex items-center justify-center gap-2 leading-8 mb-8 mt-4">
       <!-- My Projects -->
@@ -141,7 +143,7 @@ const customRow = (record: ProjectType) => ({
             v-e="['a:project:refresh']"
             class="text-xl text-gray-500 group-hover:text-accent cursor-pointer"
             :class="isLoading ? '!text-primary' : ''"
-            @click="loadProjects"
+            @click="execute"
           />
         </span>
       </a-tooltip>