diff --git a/packages/nc-gui-v2/components/general/ColorPicker.vue b/packages/nc-gui-v2/components/general/ColorPicker.vue
index 504e5c02d6..e5bb3bdc1d 100644
--- a/packages/nc-gui-v2/components/general/ColorPicker.vue
+++ b/packages/nc-gui-v2/components/general/ColorPicker.vue
@@ -87,8 +87,8 @@ watch(picked, (n, _o) => {
 }
 .color-selector {
   position: relative;
-  height: 32px;
-  width: 32px;
+  height: 25px;
+  width: 25px;
   margin: 10px 5px;
   border-radius: 5px;
   -webkit-text-stroke-width: 1px;
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 9424ef3acc..988590a334 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -5,10 +5,10 @@ import tinycolor from 'tinycolor2'
 import {
   computed,
   definePageMeta,
-  enumColor,
   navigateTo,
   onKeyStroke,
   openLink,
+  projectThemeColors,
   provide,
   provideSidebar,
   ref,
@@ -279,8 +279,8 @@ const copyAuthToken = async () => {
 
                         <GeneralColorPicker
                           v-model="themePrimaryColor"
-                          :colors="enumColor.dark"
-                          :row-size="5"
+                          :colors="projectThemeColors"
+                          :row-size="9"
                           :advanced="false"
                         />
                         <a-sub-menu key="theme-2">
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
index c28edbe275..2529080b74 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
@@ -61,7 +61,7 @@ function onDrop(droppedFiles: File[] | null) {
 
     if (isAllowed) {
       const ext = droppedFiles[0].name.split('.').pop()
-      fileType = (ext === 'csv' || ext === 'json') ? ext : 'excel' as QuickImportTypes
+      fileType = ext === 'csv' || ext === 'json' ? ext : ('excel' as QuickImportTypes)
     }
 
     return isAllowed
diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue
index 44bf68b602..bdb964817d 100644
--- a/packages/nc-gui-v2/pages/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index/index.vue
@@ -8,6 +8,7 @@ import {
   definePageMeta,
   extractSdkResponseErrorMsg,
   navigateTo,
+  projectThemeColors,
   ref,
   useApi,
   useNuxtApp,
@@ -226,8 +227,8 @@ watch(themePrimaryColors, async (nextColors) => {
 
                       <GeneralColorPicker
                         v-model="themePrimaryColors[record.id]"
-                        :colors="enumColor.dark"
-                        :row-size="5"
+                        :colors="projectThemeColors"
+                        :row-size="9"
                         :advanced="false"
                       />
                       <a-sub-menu key="pick-primary">
diff --git a/packages/nc-gui-v2/utils/colorsUtils.ts b/packages/nc-gui-v2/utils/colorsUtils.ts
index 22f16b8d9b..fd51959a37 100644
--- a/packages/nc-gui-v2/utils/colorsUtils.ts
+++ b/packages/nc-gui-v2/utils/colorsUtils.ts
@@ -83,3 +83,24 @@ export const hexToRGB = (hex: string) => {
 
   return `${r}, ${g}, ${b}`
 }
+
+export const projectThemeColors = [
+  '#2D7FF9',
+  '#18BFFF',
+  '#60DAD5',
+  '#EC2CBD',
+  '#F82B60',
+  '#F57134',
+  '#1BAF2C',
+  '#8B46FF',
+  '#666666',
+  '#1B51A2',
+  '#146C8E',
+  '#24716E',
+  '#8A2170',
+  '#941737',
+  '#B94915',
+  '#0E4C15',
+  '#381475',
+  '#333333',
+]