diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index 98b47567be..64c301656e 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -79,7 +79,7 @@ const [setup, use] = useInjectionState(() => {
     }
   }
 
-  async function loadProject() {
+  async function loadProject(withTheme = true) {
     if (projectType === 'base') {
       try {
         const baseData = await api.public.sharedBaseGet(route.params.projectId as string)
@@ -102,7 +102,7 @@ const [setup, use] = useInjectionState(() => {
 
     await loadTables()
 
-    setTheme(projectMeta.value?.theme)
+    if (withTheme) setTheme(projectMeta.value?.theme)
 
     return projectLoadedHook.trigger(project.value)
   }
diff --git a/packages/nc-gui/pages/index/index/[projectId].vue b/packages/nc-gui/pages/index/index/[projectId].vue
index 4093aeba9a..ede3bece09 100644
--- a/packages/nc-gui/pages/index/index/[projectId].vue
+++ b/packages/nc-gui/pages/index/index/[projectId].vue
@@ -21,7 +21,7 @@ const route = useRoute()
 
 const { project, loadProject, updateProject, isLoading } = useProject()
 
-await loadProject()
+loadProject(false)
 
 const nameValidationRules = [
   {
@@ -66,12 +66,12 @@ onMounted(async () => {
 
 <template>
   <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)"
+    class="update-project relative flex-auto flex flex-col justify-center gap-2 p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)"
   >
     <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
 
     <div
-      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"
+      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
       @click="navigateTo('/')"
     >
       <MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" />
@@ -79,7 +79,9 @@ onMounted(async () => {
 
     <h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.editProject') }}</h1>
 
+    <a-skeleton v-if="isLoading" />
     <a-form
+      v-else
       ref="form"
       :model="formState"
       name="basic"
diff --git a/packages/nc-gui/pages/index/index/create-external.vue b/packages/nc-gui/pages/index/index/create-external.vue
index 0a6358726b..a85c220457 100644
--- a/packages/nc-gui/pages/index/index/create-external.vue
+++ b/packages/nc-gui/pages/index/index/create-external.vue
@@ -335,12 +335,12 @@ onMounted(async () => {
 
 <template>
   <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)"
+    class="create-external relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)"
   >
     <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
 
     <div
-      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"
+      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
       @click="navigateTo('/')"
     >
       <MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" />
@@ -367,8 +367,8 @@ onMounted(async () => {
           dropdown-class-name="nc-dropdown-ext-db-type"
           @change="onClientChange"
         >
-          <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
-            >{{ client.text }}
+          <a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value">
+            {{ client.text }}
           </a-select-option>
         </a-select>
       </a-form-item>
diff --git a/packages/nc-gui/pages/index/index/create.vue b/packages/nc-gui/pages/index/index/create.vue
index fadcbf656e..d8dc5161f7 100644
--- a/packages/nc-gui/pages/index/index/create.vue
+++ b/packages/nc-gui/pages/index/index/create.vue
@@ -64,12 +64,12 @@ onMounted(async () => {
 
 <template>
   <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)"
+    class="create relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)"
   >
     <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
 
     <div
-      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"
+      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
       @click="navigateTo('/')"
     >
       <MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" />
diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index 6c132554a1..094ef6076e 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -126,7 +126,7 @@ onBeforeMount(loadProjects)
 </script>
 
 <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)">
+  <div class="relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)">
     <h1 class="flex items-center justify-center gap-2 leading-8 mb-8 mt-4">
       <!-- My Projects -->
       <span class="text-4xl nc-project-page-title">{{ $t('title.myProject') }}</span>
@@ -198,7 +198,8 @@ onBeforeMount(loadProjects)
         <a-skeleton />
       </div>
 
-      <a-table v-else :custom-row="customRow" :data-source="filteredProjects" :pagination="{ position: ['bottomCenter'] }">
+      <a-table
+        v-else :custom-row="customRow" :data-source="filteredProjects" :pagination="{ position: ['bottomCenter'] }">
         <template #emptyText>
           <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
         </template>
diff --git a/packages/nc-gui/pages/index/index/user.vue b/packages/nc-gui/pages/index/index/user.vue
index 21b771f13b..bbf66f82ea 100644
--- a/packages/nc-gui/pages/index/index/user.vue
+++ b/packages/nc-gui/pages/index/index/user.vue
@@ -67,11 +67,11 @@ const resetError = () => {
 </script>
 
 <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)">
+  <div class="relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)">
     <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :animate="isLoading" />
 
     <div
-      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"
+      class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
       @click="() => router.back()"
     >
       <MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" />
@@ -127,7 +127,7 @@ const resetError = () => {
       </a-form-item>
 
       <div class="text-center">
-        <button class="scaling-btn" type="submit">
+        <button class="scaling-btn bg-opacity-100" type="submit">
           <span class="flex items-center gap-2">
             <MdiKeyChange />
             {{ $t('activity.changePwd') }}