diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 45120dfbd5..f8714b8781 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -17,7 +17,6 @@ import {
   useProject,
   useRoute,
   useTabs,
-  useTheme,
   useUIPermission,
 } from '#imports'
 import { TabType } from '~/composables'
diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue
index f1fab12607..3ee94d20bd 100644
--- a/packages/nc-gui-v2/pages/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index/index.vue
@@ -83,8 +83,25 @@ const handleProjectColor = async (projectId: string, color: string) => {
         },
       }),
     })
+    // Update local project
+    const localProject = projects.value?.find((p) => p.id === projectId)
+    if (localProject) {
+      localProject.color = color
+      localProject.meta = JSON.stringify({
+        ...meta,
+        theme: {
+          primaryColor: color,
+          accentColor: complement.toHex8String(),
+        },
+      })
+    }
   }
 }
+
+const getProjectPrimary = (project: ProjectType) => {
+  const meta = project?.meta && typeof project.meta === 'string' ? JSON.parse(project.meta) : project.meta || {}
+  return meta?.theme?.primaryColor || themeV2Colors['royal-blue'].DEFAULT
+}
 </script>
 
 <template>
@@ -192,7 +209,7 @@ const handleProjectColor = async (projectId: string, color: string) => {
                         <div
                           class="color-selector"
                           :style="{
-                            'background-color': record.color || themeV2Colors['royal-blue'].DEFAULT,
+                            'background-color': getProjectPrimary(record),
                             'width': '8px',
                             'height': '100%',
                           }"