diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
index c20339f68..349afacdd 100644
--- a/packages/ui/client/components/FileDetails.vue
+++ b/packages/ui/client/components/FileDetails.vue
@@ -6,15 +6,15 @@ import DetailsHeaderButtons from '~/components/DetailsHeaderButtons.vue'
 import {
   browserState,
   client,
+  config,
   current,
   currentLogs,
   isReport,
 } from '~/composables/client'
 import { tagsDefinitions } from '~/composables/client/state'
-import { explorerTree } from '~/composables/explorer'
 import { hasFailedSnapshot } from '~/composables/explorer/collector'
 import { selectedTest, viewMode } from '~/composables/params'
-import { getBadgeNameColor, getBadgeTextColor } from '~/utils/task'
+import { getBadgeNameColor, getProjectBadgeStyle } from '~/utils/task'
 import FileDetailsModuleGraph from './FileDetailsModuleGraph.vue'
 import IconButton from './IconButton.vue'
 import StatusIcon from './StatusIcon.vue'
@@ -60,12 +60,7 @@ function onDraft(value: boolean) {
 }
 
 const projectName = computed(() => current.value?.file.projectName || '')
-const projectNameColor = computed(() => {
-  const projectNameValue = projectName.value
-  return explorerTree.colors.get(projectNameValue) || getBadgeNameColor(projectNameValue)
-})
-
-const projectNameTextColor = computed(() => getBadgeTextColor(projectNameColor.value))
+const projectBadgeStyle = computed(() => getProjectBadgeStyle(config.value, projectName.value))
 
 const testTitle = computed(() => {
   const testId = selectedTest.value
@@ -115,7 +110,7 @@ const tags = computed(() => {
         <span
           v-if="current?.file.projectName"
           class="rounded-full py-0.5 px-2 text-xs font-light"
-          :style="{ backgroundColor: projectNameColor, color: projectNameTextColor }"
+          :style="projectBadgeStyle"
           cursor-default
         >
           {{ current.file.projectName }}
diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 62f1d007b..b631298c9 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -332,7 +332,6 @@ const {
                 :typecheck="item.typecheck === true"
                 :label="item.label"
                 :project-name="item.projectName ?? ''"
-                :project-name-color="item.projectNameColor ?? ''"
                 :state="item.state"
                 :duration="item.duration"
                 :slow="item.slow === true"
diff --git a/packages/ui/client/components/explorer/ExplorerItem.vue b/packages/ui/client/components/explorer/ExplorerItem.vue
index 6edb5667c..1a6b9ed3d 100644
--- a/packages/ui/client/components/explorer/ExplorerItem.vue
+++ b/packages/ui/client/components/explorer/ExplorerItem.vue
@@ -9,7 +9,7 @@ import { explorerTree } from '~/composables/explorer'
 import { hasFailedSnapshot } from '~/composables/explorer/collector'
 import { escapeHtml, highlightRegex } from '~/composables/explorer/state'
 import { coverageEnabled, disableCoverage } from '~/composables/navigation'
-import { getBadgeTextColor } from '~/utils/task'
+import { getProjectBadgeStyle } from '~/utils/task'
 import IconAction from '../IconAction.vue'
 import IconButton from '../IconButton.vue'
 import StatusIcon from '../StatusIcon.vue'
@@ -29,7 +29,7 @@ const {
   type,
   disableTaskLocation,
   onItemClick,
-  projectNameColor,
+  projectName,
   state,
 } = defineProps<{
   taskId: string
@@ -46,7 +46,6 @@ const {
   expandable: boolean
   search?: string
   projectName?: string
-  projectNameColor: string
   disableTaskLocation?: boolean
   onItemClick?: (task: Task) => void
 }>()
@@ -164,7 +163,7 @@ function showDetails() {
   }
 }
 
-const projectNameTextColor = computed(() => getBadgeTextColor(projectNameColor))
+const projectBadgeStyle = computed(() => getProjectBadgeStyle(config.value, projectName))
 
 /**
 experiments trying to show tags compactly
@@ -220,7 +219,7 @@ const tagsBgGradient = computed(() => {
       <div v-if="type === 'file' && typecheck" v-tooltip.bottom="'This is a typecheck test. It won\'t report results of the runtime tests'" class="i-logos:typescript-icon" flex-shrink-0 />
       <span v-if="type === 'file' && label" class="rounded-sm px-1 text-xs font-light bg-cyan-500/20 text-cyan-700 dark:text-cyan-300" flex-shrink-0>{{ label }}</span>
       <span text-sm truncate font-light>
-        <span v-if="type === 'file' && projectName" class="rounded-full py-0.5 px-2 mr-1 text-xs" :style="{ backgroundColor: projectNameColor, color: projectNameTextColor }">
+        <span v-if="type === 'file' && projectName" class="rounded-full py-0.5 px-2 mr-1 text-xs" :style="projectBadgeStyle">
           {{ projectName }}
         </span>
         <span :class="state === 'fail' ? 'text-red-700 dark:text-red-500' : undefined" v-html="highlighted" />
diff --git a/packages/ui/client/composables/client/index.ts b/packages/ui/client/composables/client/index.ts
index 7c22f1437..110a2ebb7 100644
--- a/packages/ui/client/composables/client/index.ts
+++ b/packages/ui/client/composables/client/index.ts
@@ -70,7 +70,7 @@ export const client: VitestClient = (function createVitestClient() {
 
 export const config = shallowRef<Partial<SerializedRootConfig>>({} as any)
 const status = ref<WebSocketStatus>('CONNECTING')
-export const availableProjects = shallowRef<string[]>([])
+export const availableProjects = computed(() => config.value.projects?.map(project => project.name || '') || [])
 
 export const current = computed(() => {
   const currentFileId = activeFileId.value
@@ -170,10 +170,7 @@ watch(
         client.rpc.getConfig(),
         client.rpc.getUnhandledErrors(),
       ])
-      const projects = _config.projects.map(project => ({
-        name: project.name || '',
-        color: project.color,
-      }))
+      config.value = _config
       if (_config.standalone) {
         const filenames = await client.rpc.getTestFiles()
         files = filenames.map(([{ name, root }, filepath]) => {
@@ -182,12 +179,10 @@ watch(
           return file
         })
       }
-      availableProjects.value = projects.map(p => p.name)
-      explorerTree.loadFiles(files, projects)
+      explorerTree.loadFiles(files)
       client.state.collectFiles(files)
       explorerTree.startRun()
       unhandledErrors.value = (errors || []).map(parseError)
-      config.value = _config
     })
 
     ws.addEventListener('close', () => {
diff --git a/packages/ui/client/composables/explorer/tree.ts b/packages/ui/client/composables/explorer/tree.ts
index 684afb0c7..a53c87918 100644
--- a/packages/ui/client/composables/explorer/tree.ts
+++ b/packages/ui/client/composables/explorer/tree.ts
@@ -22,8 +22,6 @@ export class ExplorerTree {
   public startTime: number = 0
   public executionTime: number = 0
   constructor(
-    public projects: string[] = [],
-    public colors = new Map<string, string | undefined>(),
     private onTaskUpdateCalled: boolean = false,
     private resumeEndTimeout = 500,
     public root = <RootTreeNode>{
@@ -61,10 +59,7 @@ export class ExplorerTree {
     this.rafCollector = useRafFn(this.runCollect.bind(this), { fpsLimit: 10, immediate: false })
   }
 
-  loadFiles(remoteFiles: File[], projects: { name: string; color?: string }[]) {
-    this.projects.splice(0, this.projects.length, ...projects.map(p => p.name))
-    this.colors = new Map(projects.map(p => [p.name, p.color]))
-
+  loadFiles(remoteFiles: File[]) {
     runLoadFiles(
       remoteFiles,
       true,
diff --git a/packages/ui/client/composables/explorer/types.ts b/packages/ui/client/composables/explorer/types.ts
index 2b4a586b0..72e3c5ab1 100644
--- a/packages/ui/client/composables/explorer/types.ts
+++ b/packages/ui/client/composables/explorer/types.ts
@@ -45,7 +45,6 @@ export interface UITaskTreeNode extends TaskTreeNode {
   typecheck?: boolean
   label?: string
   projectName?: string
-  projectNameColor?: string
 }
 
 export interface TestTreeNode extends UITaskTreeNode {
@@ -69,7 +68,6 @@ export interface FileTreeNode extends ParentTreeNode {
   typecheck: boolean | undefined
   label?: string
   projectName?: string
-  projectNameColor: string
   collectDuration?: number
   setupDuration?: number
   environmentLoad?: number
diff --git a/packages/ui/client/composables/explorer/utils.ts b/packages/ui/client/composables/explorer/utils.ts
index bf58e11c8..a414d5f7a 100644
--- a/packages/ui/client/composables/explorer/utils.ts
+++ b/packages/ui/client/composables/explorer/utils.ts
@@ -10,7 +10,7 @@ import type {
 import { client, config } from '~/composables/client'
 import { explorerTree } from '~/composables/explorer/index'
 import { openedTreeItemsSet } from '~/composables/explorer/state'
-import { getBadgeNameColor, isSuite as isTaskSuite } from '~/utils/task'
+import { isSuite as isTaskSuite } from '~/utils/task'
 
 export function isTestNode(node: UITaskTreeNode): node is TestTreeNode {
   return node.type === 'test'
@@ -108,7 +108,6 @@ export function createOrUpdateFileNode(
       slow: false,
       filepath: file.filepath,
       projectName: file.projectName || '',
-      projectNameColor: explorerTree.colors.get(file.projectName || '') || getBadgeNameColor(file.projectName),
       collectDuration: file.collectDuration,
       setupDuration: file.setupDuration,
       environmentLoad: file.environmentLoad,
diff --git a/packages/ui/client/composables/trace-view.ts b/packages/ui/client/composables/trace-view.ts
index de024b0e6..c6dfaec9b 100644
--- a/packages/ui/client/composables/trace-view.ts
+++ b/packages/ui/client/composables/trace-view.ts
@@ -1,6 +1,7 @@
 import type { RunnerTestCase, RunnerTestFile, TestArtifact } from 'vitest'
 import type { BrowserTraceData, BrowserTraceEntry } from '../../../browser/src/client/tester/trace'
 import { ref, watch, watchEffect } from 'vue'
+import { getProjectConfigByName } from '~/utils/task'
 import { browserState, client, config } from './client'
 import { detailsPosition } from './navigation'
 import { selectedTest } from './params'
@@ -222,7 +223,7 @@ watchEffect(() => {
 })
 
 export function isTraceViewEnabled(test: RunnerTestFile): boolean {
-  const project = getProjectConfigByTest(test)
+  const project = getProjectConfigByName(config.value, test.file.projectName)
   const traceView
     = browserState?.config.browser?.traceView
       ?? project?.browser.traceView
@@ -230,11 +231,6 @@ export function isTraceViewEnabled(test: RunnerTestFile): boolean {
   return traceView?.enabled ?? false
 }
 
-function getProjectConfigByTest(test: RunnerTestFile) {
-  const projectName = test.file.projectName || ''
-  return config.value.projects?.find(project => project.name === projectName)
-}
-
 export function getTraceAttemptLabel(trace: BrowserTraceData) {
   const parts: string[] = []
   if (trace.retry) {
diff --git a/packages/ui/client/utils/task.ts b/packages/ui/client/utils/task.ts
index ac23e6e10..c91b46d3f 100644
--- a/packages/ui/client/utils/task.ts
+++ b/packages/ui/client/utils/task.ts
@@ -1,4 +1,4 @@
-import type { RunnerTask, RunnerTestSuite } from 'vitest'
+import type { RunnerTask, RunnerTestSuite, SerializedRootConfig } from 'vitest'
 import { isDark } from '~/composables'
 
 export function isSuite(task: RunnerTask): task is RunnerTestSuite {
@@ -145,7 +145,7 @@ export function getBadgeNameColor(name: string | undefined, transparent = false)
   return (transparent ? transparentColors : colors)[index % colors.length]
 }
 
-export function getBadgeTextColor(color: string) {
+function getBadgeTextColor(color: string) {
   switch (color) {
     case 'blue':
     case 'green':
@@ -161,3 +161,24 @@ export function getBadgeTextColor(color: string) {
       return 'black'
   }
 }
+
+export function getProjectConfigByName(
+  // TODO: config shouldn't be partial in valid app lifetime. rework later.
+  config: Partial<SerializedRootConfig>,
+  projectName: string | undefined,
+) {
+  return config.projects?.find(project => project.name === projectName)
+}
+
+export function getProjectBadgeStyle(
+  config: Partial<SerializedRootConfig>,
+  projectName: string | undefined,
+) {
+  const backgroundColor = getProjectConfigByName(config, projectName)?.color
+    ?? getBadgeNameColor(projectName)
+
+  return {
+    backgroundColor,
+    color: getBadgeTextColor(backgroundColor),
+  }
+}