Merge branch 'main' into feat/navbar-customization-v2

i18n - translations (#18100 )
Created by Github action --------- Co-authored-by: github-actions <github-actions@twenty.com>
2026-02-20 01:55:59 +05:30 · 2026-02-19 21:14:57 +01:00 · 2026-02-19 23:47:53 +05:30 · 2026-02-19 23:44:51 +05:30 · 2026-02-19 23:33:48 +05:30 · 2026-02-19 23:29:32 +05:30
143 changed files with 1127 additions and 428 deletions
@@ -1041,6 +1041,7 @@ export type CreateLogicFunctionFromSourceInput = {
 };

 export type CreateNavigationMenuItemInput = {
+  color?: InputMaybe<Scalars['String']>;
  folderId?: InputMaybe<Scalars['UUID']>;
  icon?: InputMaybe<Scalars['String']>;
  link?: InputMaybe<Scalars['String']>;
@@ -3246,6 +3247,7 @@ export type NativeModelCapabilities = {
 export type NavigationMenuItem = {
  __typename?: 'NavigationMenuItem';
  applicationId?: Maybe<Scalars['UUID']>;
+  color?: Maybe<Scalars['String']>;
  createdAt: Scalars['DateTime'];
  folderId?: Maybe<Scalars['UUID']>;
  icon?: Maybe<Scalars['String']>;
@@ -4584,6 +4586,7 @@ export type UpdateLogicFunctionFromSourceInputUpdates = {
 };

 export type UpdateNavigationMenuItemInput = {
+  color?: InputMaybe<Scalars['String']>;
  folderId?: InputMaybe<Scalars['UUID']>;
  icon?: InputMaybe<Scalars['String']>;
  link?: InputMaybe<Scalars['String']>;
@@ -5873,42 +5876,42 @@ export type FindManyMarketplaceAppsQueryVariables = Exact<{ [key: string]: never

 export type FindManyMarketplaceAppsQuery = { __typename?: 'Query', findManyMarketplaceApps: Array<{ __typename?: 'MarketplaceApp', id: string, name: string, description: string, icon: string, version: string, author: string, category: string, logo?: string | null, screenshots: Array<string>, aboutDescription: string, providers: Array<string>, websiteUrl?: string | null, termsUrl?: string | null, objects: Array<{ __typename?: 'MarketplaceAppObject', universalIdentifier: string, nameSingular: string, namePlural: string, labelSingular: string, labelPlural: string, description?: string | null, icon?: string | null, fields: Array<{ __typename?: 'MarketplaceAppField', universalIdentifier?: string | null, name: string, type: string, label: string, description?: string | null, icon?: string | null }> }>, fields: Array<{ __typename?: 'MarketplaceAppField', name: string, type: string, label: string, description?: string | null, icon?: string | null, objectUniversalIdentifier?: string | null }>, logicFunctions: Array<{ __typename?: 'MarketplaceAppLogicFunction', name: string, description?: string | null, timeoutSeconds?: number | null }>, frontComponents: Array<{ __typename?: 'MarketplaceAppFrontComponent', name: string, description?: string | null }>, defaultRole?: { __typename?: 'MarketplaceAppDefaultRole', id: string, label: string, description?: string | null, canReadAllObjectRecords: boolean, canUpdateAllObjectRecords: boolean, canSoftDeleteAllObjectRecords: boolean, canDestroyAllObjectRecords: boolean, canUpdateAllSettings: boolean, canAccessAllTools: boolean, permissionFlags: Array<string>, objectPermissions: Array<{ __typename?: 'MarketplaceAppRoleObjectPermission', objectUniversalIdentifier: string, canReadObjectRecords?: boolean | null, canUpdateObjectRecords?: boolean | null, canSoftDeleteObjectRecords?: boolean | null, canDestroyObjectRecords?: boolean | null }>, fieldPermissions: Array<{ __typename?: 'MarketplaceAppRoleFieldPermission', objectUniversalIdentifier: string, fieldUniversalIdentifier: string, canReadFieldValue?: boolean | null, canUpdateFieldValue?: boolean | null }> } | null }> };

-export type NavigationMenuItemFieldsFragment = { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string };
+export type NavigationMenuItemFieldsFragment = { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, color?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string };

-export type NavigationMenuItemQueryFieldsFragment = { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string, targetRecordIdentifier?: { __typename?: 'RecordIdentifier', id: string, labelIdentifier: string, imageIdentifier?: string | null } | null };
+export type NavigationMenuItemQueryFieldsFragment = { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, color?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string, targetRecordIdentifier?: { __typename?: 'RecordIdentifier', id: string, labelIdentifier: string, imageIdentifier?: string | null } | null };

 export type CreateNavigationMenuItemMutationVariables = Exact<{
  input: CreateNavigationMenuItemInput;
 }>;


-export type CreateNavigationMenuItemMutation = { __typename?: 'Mutation', createNavigationMenuItem: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string } };
+export type CreateNavigationMenuItemMutation = { __typename?: 'Mutation', createNavigationMenuItem: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, color?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string } };

 export type DeleteNavigationMenuItemMutationVariables = Exact<{
  id: Scalars['UUID'];
 }>;


-export type DeleteNavigationMenuItemMutation = { __typename?: 'Mutation', deleteNavigationMenuItem: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string } };
+export type DeleteNavigationMenuItemMutation = { __typename?: 'Mutation', deleteNavigationMenuItem: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, color?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string } };

 export type UpdateNavigationMenuItemMutationVariables = Exact<{
  input: UpdateOneNavigationMenuItemInput;
 }>;


-export type UpdateNavigationMenuItemMutation = { __typename?: 'Mutation', updateNavigationMenuItem: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string } };
+export type UpdateNavigationMenuItemMutation = { __typename?: 'Mutation', updateNavigationMenuItem: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, color?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string } };

 export type FindManyNavigationMenuItemsQueryVariables = Exact<{ [key: string]: never; }>;


-export type FindManyNavigationMenuItemsQuery = { __typename?: 'Query', navigationMenuItems: Array<{ __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string, targetRecordIdentifier?: { __typename?: 'RecordIdentifier', id: string, labelIdentifier: string, imageIdentifier?: string | null } | null }> };
+export type FindManyNavigationMenuItemsQuery = { __typename?: 'Query', navigationMenuItems: Array<{ __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, color?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string, targetRecordIdentifier?: { __typename?: 'RecordIdentifier', id: string, labelIdentifier: string, imageIdentifier?: string | null } | null }> };

 export type FindOneNavigationMenuItemQueryVariables = Exact<{
  id: Scalars['UUID'];
 }>;


-export type FindOneNavigationMenuItemQuery = { __typename?: 'Query', navigationMenuItem?: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string, targetRecordIdentifier?: { __typename?: 'RecordIdentifier', id: string, labelIdentifier: string, imageIdentifier?: string | null } | null } | null };
+export type FindOneNavigationMenuItemQuery = { __typename?: 'Query', navigationMenuItem?: { __typename?: 'NavigationMenuItem', id: string, userWorkspaceId?: string | null, targetRecordId?: string | null, targetObjectMetadataId?: string | null, viewId?: string | null, folderId?: string | null, name?: string | null, link?: string | null, icon?: string | null, color?: string | null, position: number, applicationId?: string | null, createdAt: string, updatedAt: string, targetRecordIdentifier?: { __typename?: 'RecordIdentifier', id: string, labelIdentifier: string, imageIdentifier?: string | null } | null } | null };

 export type ObjectMetadataFieldsFragment = { __typename?: 'Object', id: string, nameSingular: string, namePlural: string, labelSingular: string, labelPlural: string, description?: string | null, icon?: string | null, isCustom: boolean, isRemote: boolean, isActive: boolean, isSystem: boolean, isUIReadOnly: boolean, createdAt: string, updatedAt: string, labelIdentifierFieldMetadataId?: string | null, imageIdentifierFieldMetadataId?: string | null, applicationId: string, shortcut?: string | null, isLabelSyncedWithName: boolean, isSearchable: boolean, duplicateCriteria?: Array<Array<string>> | null, indexMetadataList: Array<{ __typename?: 'Index', id: string, createdAt: string, updatedAt: string, name: string, indexWhereClause?: string | null, indexType: IndexType, isUnique: boolean, isCustom?: boolean | null, indexFieldMetadataList: Array<{ __typename?: 'IndexField', id: string, fieldMetadataId: string, createdAt: string, updatedAt: string, order: number }> }>, fieldsList: Array<{ __typename?: 'Field', id: string, type: FieldMetadataType, name: string, label: string, description?: string | null, icon?: string | null, isCustom?: boolean | null, isActive?: boolean | null, isSystem?: boolean | null, isUIReadOnly?: boolean | null, isNullable?: boolean | null, isUnique?: boolean | null, createdAt: string, updatedAt: string, defaultValue?: any | null, options?: any | null, settings?: any | null, isLabelSyncedWithName?: boolean | null, morphId?: string | null, applicationId: string, relation?: { __typename?: 'Relation', type: RelationType, sourceObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, targetObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, sourceFieldMetadata: { __typename?: 'Field', id: string, name: string }, targetFieldMetadata: { __typename?: 'Field', id: string, name: string } } | null, morphRelations?: Array<{ __typename?: 'Relation', type: RelationType, sourceObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, targetObjectMetadata: { __typename?: 'Object', id: string, nameSingular: string, namePlural: string }, sourceFieldMetadata: { __typename?: 'Field', id: string, name: string }, targetFieldMetadata: { __typename?: 'Field', id: string, name: string } }> | null }> };

@@ -7404,6 +7407,7 @@ export const NavigationMenuItemFieldsFragmentDoc = gql`
  name
  link
  icon
+  color
  position
  applicationId
  createdAt
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} Objekte"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}ste} other {{num}de}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount, plural, zero {لا كائنات} one {كائن وا
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr ""

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} objectes"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}r} other {{num}è}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} objektů"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}.} few {{num}.} many {{num}.} other {{num}.}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} objekter"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}ste} other {{num}te}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} Objekte"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}.} other {{num}.}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} Αντικείμενα"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}η} other {{num}η}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -306,6 +306,11 @@ msgstr "{morphRelationCount} Objects"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr "{numberOfSelectedItems} workspace members"
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} objetos"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}º} other {{num}.º}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} objektia"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}.} other {{num}.}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} objets"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}er} other {{num}e}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} אובייקטים"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num} ראשון} two {{num} שני} many {{num} ־ות} other {{num} ־ות}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} objektum"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}-ik} other {{num}-ik}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} oggetti"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr ""

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} 個のオブジェクト"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, other {{num}番目}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "객체 {morphRelationCount}개"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, other {{num}번째}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} objecten"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}e} other {{num}e}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} objekter"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}.} other {{num}.}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount, plural, one {# obiekt} few {# obiekty} many {# obie
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}sz} two {{num}gi} few {{num}ci} other {{num}ty}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -306,6 +306,11 @@ msgstr ""
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr ""

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} objetos"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}º} other {{num}º}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} Objetos"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}º} other {{num}º}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} obiecte"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}st} few {{num}nd} few {{num}rd} other {{num}th}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} објеката"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}ст} few {{num}нд} other {{num}ти}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} objekt"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}:a} other {{num}e}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} Nesne"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}'inci} other {{num}'inci}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} об’єктів"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, one {{num}-й} few {{num}-й} many {{num}-й} other {{num}-й}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} Đối tượng"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, other {{num}}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} 个对象"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, other {{num}th}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -311,6 +311,11 @@ msgstr "{morphRelationCount} 個物件"
 msgid "{num, selectordinal, one {{num}st} two {{num}nd} few {{num}rd} other {{num}th}}"
 msgstr "{num, selectordinal, other {{num} 第}}"

+#. js-lingui-id: fTSz8d
+#: src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownActorSelect.tsx
+msgid "{numberOfSelectedItems} workspace members"
+msgstr ""
+
 #. js-lingui-id: 7kYa/u
 #: src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
 msgid "{objectLabelPlural} ({totalCount})"
@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
@@ -7,24 +6,22 @@ import { useIcons } from 'twenty-ui/display';
 import { CommandMenuPageInfoLayout } from '@/command-menu/components/CommandMenuPageInfoLayout';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { commandMenuShouldFocusTitleInputComponentState } from '@/command-menu/states/commandMenuShouldFocusTitleInputComponentState';
-import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
 import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/constants/FolderIconDefault';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { useUpdateFolderInDraft } from '@/navigation-menu-item/hooks/useUpdateFolderInDraft';
 import { useWorkspaceSectionItems } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
 import { selectedNavigationMenuItemInEditModeStateV2 } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeStateV2';
-import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { TitleInput } from '@/ui/input/components/TitleInput';
 import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';

 const StyledClickableIconWrapper = styled.div`
  cursor: pointer;
 `;

 export const CommandMenuFolderInfo = () => {
-  const theme = useTheme();
  const { t } = useLingui();
  const { getIcon } = useIcons();
  const commandMenuPageInfo = useRecoilValue(commandMenuPageInfoState);
@@ -82,15 +79,10 @@ export const CommandMenuFolderInfo = () => {
          }
          clickableComponent={
            <StyledClickableIconWrapper>
-              <StyledNavigationMenuItemIconContainer
-                $backgroundColor={getNavigationMenuItemIconColors(theme).folder}
-              >
-                <FolderIconComponent
-                  size={theme.spacing(3.5)}
-                  color={theme.grayScale.gray1}
-                  stroke={theme.icon.stroke.md}
-                />
-              </StyledNavigationMenuItemIconContainer>
+              <NavigationMenuItemStyleIcon
+                Icon={FolderIconComponent}
+                color={selectedItem.color}
+              />
            </StyledClickableIconWrapper>
          }
        />
@@ -111,6 +103,7 @@ export const CommandMenuFolderInfo = () => {
          onFocus={() => setShouldFocusTitleInput(false)}
        />
      }
+      label={t`Folder`}
    />
  );
 };
@@ -67,7 +67,7 @@ export const CommandMenuItem = ({
              })
          : undefined
      }
-      focused={isSelectedItemId}
+      focused={!disabled && isSelectedItemId}
      RightComponent={RightComponent}
      hasSubMenu={hasSubMenu}
      isSubMenuOpened={isSubMenuOpened}
@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
 import { IconLink } from 'twenty-ui/display';
@@ -6,18 +5,16 @@ import { IconLink } from 'twenty-ui/display';
 import { CommandMenuPageInfoLayout } from '@/command-menu/components/CommandMenuPageInfoLayout';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { commandMenuShouldFocusTitleInputComponentState } from '@/command-menu/states/commandMenuShouldFocusTitleInputComponentState';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
-import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer';
 import { useUpdateLinkInDraft } from '@/navigation-menu-item/hooks/useUpdateLinkInDraft';
 import { useWorkspaceSectionItems } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
 import { selectedNavigationMenuItemInEditModeStateV2 } from '@/navigation-menu-item/states/selectedNavigationMenuItemInEditModeStateV2';
-import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
 import { TitleInput } from '@/ui/input/components/TitleInput';
 import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';

 export const CommandMenuLinkInfo = () => {
-  const theme = useTheme();
  const { t } = useLingui();
  const commandMenuPageInfo = useRecoilValue(commandMenuPageInfoState);
  const [shouldFocusTitleInput, setShouldFocusTitleInput] =
@@ -63,15 +60,10 @@ export const CommandMenuLinkInfo = () => {
  return (
    <CommandMenuPageInfoLayout
      icon={
-        <StyledNavigationMenuItemIconContainer
-          $backgroundColor={getNavigationMenuItemIconColors(theme).link}
-        >
-          <IconLink
-            size={theme.spacing(3.5)}
-            color={theme.grayScale.gray1}
-            stroke={theme.icon.stroke.md}
-          />
-        </StyledNavigationMenuItemIconContainer>
+        <NavigationMenuItemStyleIcon
+          Icon={IconLink}
+          color={selectedItem.color}
+        />
      }
      title={
        <TitleInput
@@ -89,7 +81,7 @@ export const CommandMenuLinkInfo = () => {
          onFocus={() => setShouldFocusTitleInput(false)}
        />
      }
-      label={t`link`}
+      label={t`Link`}
    />
  );
 };
@@ -6,11 +6,15 @@ import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/Naviga
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { useSelectedNavigationMenuItemEditItem } from '@/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditItem';
 import { useSelectedNavigationMenuItemEditItemLabel } from '@/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditItemLabel';
+import { useSelectedNavigationMenuItemEditItemObjectMetadata } from '@/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditItemObjectMetadata';
+import { ViewKey } from '@/views/types/ViewKey';

 export const CommandMenuObjectViewRecordInfo = () => {
  const { t } = useLingui();
  const { selectedItem } = useSelectedNavigationMenuItemEditItem();
  const { selectedItemLabel } = useSelectedNavigationMenuItemEditItemLabel();
+  const { selectedItemObjectMetadata } =
+    useSelectedNavigationMenuItemEditItemObjectMetadata();

  const processedItem =
    selectedItem && selectedItem.itemType !== NavigationMenuItemType.FOLDER
@@ -30,11 +34,12 @@ export const CommandMenuObjectViewRecordInfo = () => {
    return null;
  }

-  const label = isViewOrRecord
-    ? processedItem.itemType === NavigationMenuItemType.RECORD
-      ? t`record`
-      : t`view`
-    : t`object`;
+  const label =
+    processedItem.itemType === NavigationMenuItemType.RECORD
+      ? selectedItemObjectMetadata?.labelSingular
+      : processedItem.viewKey === ViewKey.Index
+        ? t`Object`
+        : t`View`;

  return (
    <CommandMenuPageInfoLayout
@@ -12,9 +12,12 @@ const StyledSubViewContainer = styled.div`
 `;

 const StyledSearchContainer = styled.div`
+  align-items: center;
  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  display: flex;
+  height: ${({ theme }) => theme.spacing(10)};
  min-width: 0;
-  padding: ${({ theme }) => theme.spacing(2, 3)};
+  padding-inline: ${({ theme }) => theme.spacing(3)};
 `;

 const StyledSearchInput = styled.input`
@@ -22,8 +25,7 @@ const StyledSearchInput = styled.input`
  border: none;
  border-radius: ${({ theme }) => theme.border.radius.sm};
  box-sizing: border-box;
-  color: ${({ theme }) => theme.font.color.primary};
-  font-size: ${({ theme }) => theme.font.size.md};
+
  padding: 0;
  width: 100%;
  outline: none;
@@ -0,0 +1,118 @@
+import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
+import { useState } from 'react';
+import { capitalize } from 'twenty-shared/utils';
+import { IconColorSwatch } from 'twenty-ui/display';
+import { type ColorLabels, MenuItemSelectColor } from 'twenty-ui/navigation';
+import { MAIN_COLOR_NAMES, type ThemeColor } from 'twenty-ui/theme';
+
+import { CommandMenuItemDropdown } from '@/command-menu/components/CommandMenuItemDropdown';
+import { useUpdateNavigationMenuItemInDraft } from '@/navigation-menu-item/hooks/useUpdateNavigationMenuItemInDraft';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+
+const NAVIGATION_MENU_ITEM_COLOR_DROPDOWN_ID = 'navigation-menu-item-color';
+
+const StyledMenuStyleText = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: 13px;
+`;
+
+const COLOR_LABELS: ColorLabels = {
+  gray: 'Gray',
+  tomato: 'Tomato',
+  red: 'Red',
+  ruby: 'Ruby',
+  crimson: 'Crimson',
+  pink: 'Pink',
+  plum: 'Plum',
+  purple: 'Purple',
+  violet: 'Violet',
+  iris: 'Iris',
+  cyan: 'Cyan',
+  turquoise: 'Turquoise',
+  sky: 'Sky',
+  blue: 'Blue',
+  jade: 'Jade',
+  green: 'Green',
+  grass: 'Grass',
+  mint: 'Mint',
+  lime: 'Lime',
+  bronze: 'Bronze',
+  gold: 'Gold',
+  brown: 'Brown',
+  orange: 'Orange',
+  amber: 'Amber',
+  yellow: 'Yellow',
+};
+
+type CommandMenuEditColorOptionProps = {
+  navigationMenuItemId: string;
+  color: string | null | undefined;
+};
+
+export const CommandMenuEditColorOption = ({
+  navigationMenuItemId,
+  color,
+}: CommandMenuEditColorOptionProps) => {
+  const { t } = useLingui();
+  const { updateNavigationMenuItemInDraft } =
+    useUpdateNavigationMenuItemInDraft();
+  const { closeDropdown } = useCloseDropdown();
+
+  const [searchValue, setSearchValue] = useState('');
+  const themeColor = (color ?? 'gray') as ThemeColor;
+  const colorLabel = COLOR_LABELS[themeColor] ?? capitalize(themeColor);
+
+  const query = searchValue.trim().toLowerCase();
+
+  const filteredColorNames = !query
+    ? MAIN_COLOR_NAMES
+    : MAIN_COLOR_NAMES.filter(
+        (colorName) =>
+          colorName.toLowerCase().includes(query) ||
+          (COLOR_LABELS[colorName] ?? '').toLowerCase().includes(query),
+      );
+
+  const handleSelectColor = (selectedColor: ThemeColor) => {
+    updateNavigationMenuItemInDraft(navigationMenuItemId, {
+      color: selectedColor,
+    });
+    closeDropdown(NAVIGATION_MENU_ITEM_COLOR_DROPDOWN_ID);
+  };
+
+  return (
+    <CommandMenuItemDropdown
+      id="edit-navigation-menu-item-color"
+      label={t`Color`}
+      Icon={IconColorSwatch}
+      dropdownId={NAVIGATION_MENU_ITEM_COLOR_DROPDOWN_ID}
+      dropdownPlacement="bottom-start"
+      RightComponent={<StyledMenuStyleText>{colorLabel}</StyledMenuStyleText>}
+      dropdownComponents={
+        <DropdownContent>
+          <DropdownMenuSearchInput
+            placeholder={t`Search colors...`}
+            value={searchValue}
+            onChange={(event) => setSearchValue(event.target.value)}
+          />
+          <DropdownMenuSeparator />
+          <DropdownMenuItemsContainer hasMaxHeight>
+            {filteredColorNames.map((colorName) => (
+              <MenuItemSelectColor
+                key={colorName}
+                onClick={() => handleSelectColor(colorName)}
+                color={colorName}
+                selected={colorName === themeColor}
+                colorLabels={COLOR_LABELS}
+              />
+            ))}
+          </DropdownMenuItemsContainer>
+        </DropdownContent>
+      }
+    />
+  );
+};
@@ -1,12 +1,15 @@
-import { useState } from 'react';
 import { useLingui } from '@lingui/react/macro';
-import { IconFolderPlus } from 'twenty-ui/display';
+import { useState } from 'react';
+import { useIcons } from 'twenty-ui/display';

 import { CommandGroup } from '@/command-menu/components/CommandGroup';
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
 import { useFolderPickerSelectionData } from '@/command-menu/pages/navigation-menu-item/hooks/useFolderPickerSelectionData';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
+import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/constants/FolderIconDefault';
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { filterBySearchQuery } from '~/utils/filterBySearchQuery';

@@ -18,6 +21,7 @@ export const CommandMenuEditFolderPickerSubView = ({
  onBack,
 }: CommandMenuEditFolderPickerSubViewProps) => {
  const { t } = useLingui();
+  const { getIcon } = useIcons();
  const [searchValue, setSearchValue] = useState('');
  const { foldersToShow, includeNoFolderOption, handleSelectFolder } =
    useFolderPickerSelectionData({ onCloseSubView: onBack });
@@ -64,20 +68,30 @@ export const CommandMenuEditFolderPickerSubView = ({
              />
            </SelectableListItem>
          )}
-          {filteredFolders.map((folder) => (
-            <SelectableListItem
-              key={folder.id}
-              itemId={folder.id}
-              onEnter={() => handleSelectFolder(folder.id)}
-            >
-              <CommandMenuItem
-                Icon={IconFolderPlus}
-                label={folder.name}
-                id={folder.id}
-                onClick={() => handleSelectFolder(folder.id)}
-              />
-            </SelectableListItem>
-          ))}
+          {filteredFolders.map((folder) => {
+            const FolderIcon = getIcon(folder.icon ?? FOLDER_ICON_DEFAULT);
+            const folderColor =
+              folder.color ?? DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER;
+            return (
+              <SelectableListItem
+                key={folder.id}
+                itemId={folder.id}
+                onEnter={() => handleSelectFolder(folder.id)}
+              >
+                <CommandMenuItem
+                  LeftComponent={
+                    <NavigationMenuItemStyleIcon
+                      Icon={FolderIcon}
+                      color={folderColor}
+                    />
+                  }
+                  label={folder.name}
+                  id={folder.id}
+                  onClick={() => handleSelectFolder(folder.id)}
+                />
+              </SelectableListItem>
+            );
+          })}
        </CommandGroup>
      </CommandMenuList>
    </CommandMenuSubViewWithSearch>
@@ -5,12 +5,13 @@ import { getAbsoluteUrl } from 'twenty-shared/utils';

 import { CommandGroup } from '@/command-menu/components/CommandGroup';
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
+import { CommandMenuEditColorOption } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption';
 import {
  type OrganizeActionsProps,
  CommandMenuEditOrganizeActions,
 } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions';
-import { getOrganizeActionsSelectableItemIds } from '@/command-menu/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds';
 import { CommandMenuEditOwnerSection } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOwnerSection';
+import { getOrganizeActionsSelectableItemIds } from '@/command-menu/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds';
 import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/types/processed-navigation-menu-item';
 import { TextInput } from '@/ui/input/components/TextInput';

@@ -40,6 +41,10 @@ export const CommandMenuEditLinkItemView = ({
  return (
    <CommandMenuList commandGroups={[]} selectableItemIds={selectableItemIds}>
      <CommandGroup heading={t`Customize`}>
+        <CommandMenuEditColorOption
+          navigationMenuItemId={selectedItem.id}
+          color={selectedItem.color}
+        />
        <TextInput
          fullWidth
          placeholder="www.google.com"
@@ -1,9 +1,13 @@
+import { CommandGroup } from '@/command-menu/components/CommandGroup';
+import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
+import { CommandMenuEditColorOption } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption';
 import {
  type OrganizeActionsProps,
  CommandMenuEditOrganizeActions,
 } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditOrganizeActions';
 import { getOrganizeActionsSelectableItemIds } from '@/command-menu/pages/navigation-menu-item/utils/getOrganizeActionsSelectableItemIds';
-import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
+import { useSelectedNavigationMenuItemEditItem } from '@/navigation-menu-item/hooks/useSelectedNavigationMenuItemEditItem';
+import { useLingui } from '@lingui/react/macro';

 type CommandMenuEditObjectViewBaseProps = OrganizeActionsProps & {
  onOpenFolderPicker: () => void;
@@ -19,10 +23,20 @@ export const CommandMenuEditObjectViewBase = ({
  onAddBefore,
  onAddAfter,
 }: CommandMenuEditObjectViewBaseProps) => {
+  const { t } = useLingui();
+  const { selectedItem } = useSelectedNavigationMenuItemEditItem();
  const selectableItemIds = getOrganizeActionsSelectableItemIds(true);

  return (
    <CommandMenuList commandGroups={[]} selectableItemIds={selectableItemIds}>
+      {selectedItem && (
+        <CommandGroup heading={t`Customize`}>
+          <CommandMenuEditColorOption
+            navigationMenuItemId={selectedItem.id}
+            color={selectedItem.color}
+          />
+        </CommandGroup>
+      )}
      <CommandMenuEditOrganizeActions
        canMoveUp={canMoveUp}
        canMoveDown={canMoveDown}
@@ -1,4 +1,6 @@
+import { CommandGroup } from '@/command-menu/components/CommandGroup';
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
+import { CommandMenuEditColorOption } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditColorOption';
 import { CommandMenuEditFolderPickerSubView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditFolderPickerSubView';
 import { CommandMenuEditLinkItemView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditLinkItemView';
 import { CommandMenuEditObjectViewBase } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuEditObjectViewBase';
@@ -115,6 +117,14 @@ export const CommandMenuNavigationMenuItemEditPage = () => {
          commandGroups={[]}
          selectableItemIds={getOrganizeActionsSelectableItemIds(false)}
        >
+          {selectedItem && (
+            <CommandGroup heading={t`Customize`}>
+              <CommandMenuEditColorOption
+                navigationMenuItemId={selectedItem.id}
+                color={selectedItem.color}
+              />
+            </CommandGroup>
+          )}
          <CommandMenuEditOrganizeActions
            canMoveUp={canMoveUp}
            canMoveDown={canMoveDown}
@@ -133,6 +143,14 @@ export const CommandMenuNavigationMenuItemEditPage = () => {
          commandGroups={[]}
          selectableItemIds={getOrganizeActionsSelectableItemIds(true)}
        >
+          {selectedItem && (
+            <CommandGroup heading={t`Customize`}>
+              <CommandMenuEditColorOption
+                navigationMenuItemId={selectedItem.id}
+                color={selectedItem.color}
+              />
+            </CommandGroup>
+          )}
          <CommandMenuEditOrganizeActions
            canMoveUp={canMoveUp}
            canMoveDown={canMoveDown}
@@ -1,10 +1,11 @@
+import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import {
-  IconAddressBook,
-  IconCube,
+  Avatar,
+  IconBuildingSkyscraper,
  IconFolder,
  IconLink,
-  IconList,
+  IconTable,
 } from 'twenty-ui/display';

 import { CommandGroup } from '@/command-menu/components/CommandGroup';
@@ -15,8 +16,9 @@ import { CommandMenuItemWithAddToNavigationDrag } from '@/command-menu/component
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { useAddFolderToNavigationMenu } from '@/command-menu/pages/navigation-menu-item/hooks/useAddFolderToNavigationMenu';
 import { useAddLinkToNavigationMenu } from '@/command-menu/pages/navigation-menu-item/hooks/useAddLinkToNavigationMenu';
-import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
+import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';

 type CommandMenuNewSidebarItemMainMenuProps = {
  onSelectObject: () => void;
@@ -30,6 +32,7 @@ export const CommandMenuNewSidebarItemMainMenu = ({
  onSelectRecord,
 }: CommandMenuNewSidebarItemMainMenuProps) => {
  const { t } = useLingui();
+  const theme = useTheme();
  const { handleAddFolder } = useAddFolderToNavigationMenu();
  const { handleAddLink } = useAddLinkToNavigationMenu();

@@ -46,7 +49,12 @@ export const CommandMenuNewSidebarItemMainMenu = ({
              <CommandMenuAddToNavDraggablePlaceholder index={0}>
                <SelectableListItem itemId="object" onEnter={onSelectObject}>
                  <CommandMenuItem
-                    Icon={IconCube}
+                    Icon={() => (
+                      <NavigationMenuItemStyleIcon
+                        Icon={IconBuildingSkyscraper}
+                        color="blue"
+                      />
+                    )}
                    label={t`Object`}
                    id="object"
                    hasSubMenu={true}
@@ -57,7 +65,12 @@ export const CommandMenuNewSidebarItemMainMenu = ({
              <CommandMenuAddToNavDraggablePlaceholder index={1}>
                <SelectableListItem itemId="view" onEnter={onSelectView}>
                  <CommandMenuItem
-                    Icon={IconList}
+                    Icon={() => (
+                      <NavigationMenuItemStyleIcon
+                        Icon={IconTable}
+                        color="gray"
+                      />
+                    )}
                    label={t`View`}
                    id="view"
                    hasSubMenu={true}
@@ -68,7 +81,13 @@ export const CommandMenuNewSidebarItemMainMenu = ({
              <CommandMenuAddToNavDraggablePlaceholder index={2}>
                <SelectableListItem itemId="record" onEnter={onSelectRecord}>
                  <CommandMenuItem
-                    Icon={IconAddressBook}
+                    Icon={() => (
+                      <Avatar
+                        placeholder="L"
+                        type="rounded"
+                        backgroundColor={theme.color.green4}
+                      />
+                    )}
                    label={t`Record`}
                    id="record"
                    hasSubMenu={true}
@@ -6,6 +6,7 @@ import { CommandMenuObjectPickerSubView } from '@/command-menu/pages/navigation-
 import { CommandMenuSystemObjectPickerSubView } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuSystemObjectPickerSubView';
 import { getAvailableObjectMetadataForNewSidebarItem } from '@/command-menu/pages/navigation-menu-item/utils/getAvailableObjectMetadataForNewSidebarItem';
 import { useAddObjectToNavigationMenuDraft } from '@/navigation-menu-item/hooks/useAddObjectToNavigationMenuDraft';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { useDraftNavigationMenuItems } from '@/navigation-menu-item/hooks/useDraftNavigationMenuItems';
 import { useNavigationMenuObjectMetadataFromDraft } from '@/navigation-menu-item/hooks/useNavigationMenuObjectMetadataFromDraft';
 import { addMenuItemInsertionContextStateV2 } from '@/navigation-menu-item/states/addMenuItemInsertionContextStateV2';
@@ -67,6 +68,7 @@ export const CommandMenuNewSidebarItemObjectFlow = ({
      currentDraft,
      addMenuItemInsertionContext?.targetFolderId,
      addMenuItemInsertionContext?.targetIndex,
+      getStandardObjectIconColor(objectMetadataItem.nameSingular),
    );
    setAddMenuItemInsertionContext(null);
    closeCommandMenu();
@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { IconSettings, useIcons } from 'twenty-ui/display';

@@ -7,8 +6,8 @@ import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
 import { useFilteredPickerItems } from '@/command-menu/hooks/useFilteredPickerItems';
-import { IconWithBackground } from '@/navigation-menu-item/components/IconWithBackground';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';

@@ -32,9 +31,7 @@ export const CommandMenuNewSidebarItemViewObjectPickerSubView = ({
  showSystemObjectsOption = true,
 }: CommandMenuNewSidebarItemViewObjectPickerSubViewProps) => {
  const { t } = useLingui();
-  const theme = useTheme();
  const { getIcon } = useIcons();
-  const iconColors = getNavigationMenuItemIconColors(theme);
  const { filteredItems, selectableItemIds, isEmpty, hasSearchQuery } =
    useFilteredPickerItems({
      items: objects,
@@ -68,12 +65,12 @@ export const CommandMenuNewSidebarItemViewObjectPickerSubView = ({
              onEnter={() => onSelectObject(objectMetadataItem)}
            >
              <CommandMenuItem
-                Icon={({ size, stroke }) => (
-                  <IconWithBackground
+                Icon={() => (
+                  <NavigationMenuItemStyleIcon
                    Icon={getIcon(objectMetadataItem.icon)}
-                    backgroundColor={iconColors.object}
-                    size={size}
-                    stroke={stroke}
+                    color={getStandardObjectIconColor(
+                      objectMetadataItem.nameSingular,
+                    )}
                  />
                )}
                label={objectMetadataItem.labelPlural}
@@ -86,7 +83,7 @@ export const CommandMenuNewSidebarItemViewObjectPickerSubView = ({
          {showSystemObjectsOption && (
            <SelectableListItem itemId="system" onEnter={onOpenSystemPicker}>
              <CommandMenuItem
-                Icon={IconSettings}
+                Icon={() => <NavigationMenuItemStyleIcon Icon={IconSettings} />}
                label={t`System objects`}
                id="system"
                hasSubMenu={true}
@@ -9,16 +9,17 @@ import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useFilteredPickerItems } from '@/command-menu/hooks/useFilteredPickerItems';
-import { useDraftNavigationMenuItems } from '@/navigation-menu-item/hooks/useDraftNavigationMenuItems';
 import { ObjectIconWithViewOverlay } from '@/navigation-menu-item/components/ObjectIconWithViewOverlay';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { useAddViewToNavigationMenuDraft } from '@/navigation-menu-item/hooks/useAddViewToNavigationMenuDraft';
+import { useDraftNavigationMenuItems } from '@/navigation-menu-item/hooks/useDraftNavigationMenuItems';
 import { useNavigationMenuObjectMetadataFromDraft } from '@/navigation-menu-item/hooks/useNavigationMenuObjectMetadataFromDraft';
 import { addMenuItemInsertionContextStateV2 } from '@/navigation-menu-item/states/addMenuItemInsertionContextStateV2';
-import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
-import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { type View } from '@/views/types/View';
 import { ViewKey } from '@/views/types/ViewKey';

@@ -80,6 +81,9 @@ export const CommandMenuNewSidebarItemViewPickerSubView = ({
      currentDraft,
      addMenuItemInsertionContext?.targetFolderId ?? null,
      addMenuItemInsertionContext?.targetIndex,
+      selectedObjectMetadataItem
+        ? getStandardObjectIconColor(selectedObjectMetadataItem.nameSingular)
+        : undefined,
    );
    setAddMenuItemInsertionContext(null);
    closeCommandMenu();
@@ -118,6 +122,9 @@ export const CommandMenuNewSidebarItemViewPickerSubView = ({
                              selectedObjectMetadataItem.icon,
                            )}
                            ViewIcon={getIcon(view.icon)}
+                            objectColor={getStandardObjectIconColor(
+                              selectedObjectMetadataItem.nameSingular,
+                            )}
                          />
                        ) : undefined
                      }
@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { useIcons } from 'twenty-ui/display';

@@ -6,9 +5,9 @@ import { CommandGroup } from '@/command-menu/components/CommandGroup';
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
-import { IconWithBackground } from '@/navigation-menu-item/components/IconWithBackground';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
 import { useFilteredPickerItems } from '@/command-menu/hooks/useFilteredPickerItems';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';

@@ -28,9 +27,7 @@ export const CommandMenuNewSidebarItemViewSystemSubView = ({
  onSelectObject,
 }: CommandMenuNewSidebarItemViewSystemSubViewProps) => {
  const { t } = useLingui();
-  const theme = useTheme();
  const { getIcon } = useIcons();
-  const iconColors = getNavigationMenuItemIconColors(theme);
  const {
    filteredItems: filteredSystemObjectMetadataItems,
    selectableItemIds,
@@ -67,12 +64,12 @@ export const CommandMenuNewSidebarItemViewSystemSubView = ({
              onEnter={() => onSelectObject(objectMetadataItem)}
            >
              <CommandMenuItem
-                Icon={({ size, stroke }) => (
-                  <IconWithBackground
+                Icon={() => (
+                  <NavigationMenuItemStyleIcon
                    Icon={getIcon(objectMetadataItem.icon)}
-                    backgroundColor={iconColors.object}
-                    size={size}
-                    stroke={stroke}
+                    color={getStandardObjectIconColor(
+                      objectMetadataItem.nameSingular,
+                    )}
                  />
                )}
                label={objectMetadataItem.labelPlural}
@@ -1,13 +1,12 @@
-import { useTheme } from '@emotion/react';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';

 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuItemWithAddToNavigationDrag } from '@/command-menu/components/CommandMenuItemWithAddToNavigationDrag';
-import { IconWithBackground } from '@/navigation-menu-item/components/IconWithBackground';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { coreIndexViewIdFromObjectMetadataItemFamilySelector } from '@/views/states/selectors/coreIndexViewIdFromObjectMetadataItemFamilySelector';
@@ -28,15 +27,14 @@ export const CommandMenuObjectMenuItem = ({
  variant,
  dragIndex,
 }: CommandMenuObjectMenuItemProps) => {
-  const theme = useTheme();
  const { getIcon } = useIcons();
-  const iconColors = getNavigationMenuItemIconColors(theme);
  const defaultViewId = useRecoilValue(
    coreIndexViewIdFromObjectMetadataItemFamilySelector({
      objectMetadataItemId: objectMetadataItem.id,
    }),
  );
  const Icon = getIcon(objectMetadataItem.icon);
+  const iconColor = getStandardObjectIconColor(objectMetadataItem.nameSingular);
  const isDisabled = !isDefined(defaultViewId);

  const handleClick = () => {
@@ -46,11 +44,15 @@ export const CommandMenuObjectMenuItem = ({
    onSelect(objectMetadataItem, defaultViewId);
  };

+  const styledIcon = () => (
+    <NavigationMenuItemStyleIcon Icon={Icon} color={iconColor} />
+  );
+
  return (
    <SelectableListItem itemId={objectMetadataItem.id} onEnter={handleClick}>
      {variant === 'add' && !isDisabled ? (
        <CommandMenuItemWithAddToNavigationDrag
-          icon={Icon}
+          icon={styledIcon}
          label={objectMetadataItem.labelPlural}
          id={objectMetadataItem.id}
          onClick={handleClick}
@@ -60,18 +62,12 @@ export const CommandMenuObjectMenuItem = ({
            objectMetadataId: objectMetadataItem.id,
            defaultViewId: defaultViewId ?? '',
            label: objectMetadataItem.labelPlural,
+            iconColor,
          }}
        />
      ) : (
        <CommandMenuItem
-          Icon={({ size, stroke }) => (
-            <IconWithBackground
-              Icon={Icon}
-              backgroundColor={iconColors.object}
-              size={size}
-              stroke={stroke}
-            />
-          )}
+          Icon={styledIcon}
          label={objectMetadataItem.labelPlural}
          id={objectMetadataItem.id}
          onClick={handleClick}
@@ -1,11 +1,10 @@
-import { useTheme } from '@emotion/react';
 import { isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';

 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuObjectMenuItem } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuObjectMenuItem';
-import { IconWithBackground } from '@/navigation-menu-item/components/IconWithBackground';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
+import { getStandardObjectIconColor } from '@/navigation-menu-item/utils/getStandardObjectIconColor';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';

@@ -29,9 +28,7 @@ export const CommandMenuObjectPickerItem = ({
  objectMenuItemVariant = 'edit',
  dragIndex,
 }: CommandMenuObjectPickerItemProps) => {
-  const theme = useTheme();
  const { getIcon } = useIcons();
-  const iconColors = getNavigationMenuItemIconColors(theme);

  if (isViewItem && isDefined(onSelectObjectForViewEdit)) {
    return (
@@ -40,12 +37,12 @@ export const CommandMenuObjectPickerItem = ({
        onEnter={() => onSelectObjectForViewEdit(objectMetadataItem)}
      >
        <CommandMenuItem
-          Icon={({ size, stroke }) => (
-            <IconWithBackground
+          Icon={() => (
+            <NavigationMenuItemStyleIcon
              Icon={getIcon(objectMetadataItem.icon)}
-              backgroundColor={iconColors.object}
-              size={size}
-              stroke={stroke}
+              color={getStandardObjectIconColor(
+                objectMetadataItem.nameSingular,
+              )}
            />
          )}
          label={objectMetadataItem.labelPlural}
@@ -9,6 +9,7 @@ import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { CommandMenuSubViewWithSearch } from '@/command-menu/components/CommandMenuSubViewWithSearch';
 import { useFilteredPickerItems } from '@/command-menu/hooks/useFilteredPickerItems';
 import { CommandMenuObjectPickerItem } from '@/command-menu/pages/navigation-menu-item/components/CommandMenuObjectPickerItem';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';

@@ -72,10 +73,10 @@ export const CommandMenuObjectPickerSubView = ({
        <CommandMenuAddToNavDraggablePlaceholder index={filteredItems.length}>
          <SelectableListItem itemId="system" onEnter={onOpenSystemPicker}>
            <CommandMenuItem
-              Icon={IconSettings}
+              Icon={() => <NavigationMenuItemStyleIcon Icon={IconSettings} />}
              label={t`System objects`}
              id="system"
-              hasSubMenu={true}
+              hasSubMenu
              onClick={onOpenSystemPicker}
            />
          </SelectableListItem>
@@ -83,10 +84,10 @@ export const CommandMenuObjectPickerSubView = ({
      ) : (
        <SelectableListItem itemId="system" onEnter={onOpenSystemPicker}>
          <CommandMenuItem
-            Icon={IconSettings}
+            Icon={() => <NavigationMenuItemStyleIcon Icon={IconSettings} />}
            label={t`System objects`}
            id="system"
-            hasSubMenu={true}
+            hasSubMenu
            onClick={onOpenSystemPicker}
          />
        </SelectableListItem>
@@ -1,12 +1,15 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { isNonEmptyString } from '@sniptt/guards';
 import type { ReactNode } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { IconGripVertical, type IconComponent } from 'twenty-ui/display';

-import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer';
+import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon';
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder';
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorLink';
+import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import type { AddToNavigationDragPayload } from '@/navigation-menu-item/types/add-to-navigation-drag-payload';
-import { getIconBackgroundColorForPayload } from '@/navigation-menu-item/utils/getIconBackgroundColorForPayload';

 const StyledIconSlot = styled.div<{ $hasFixedSize: boolean }>`
  align-items: center;
@@ -18,8 +21,8 @@ const StyledIconSlot = styled.div<{ $hasFixedSize: boolean }>`
  ${({ theme, $hasFixedSize }) =>
    $hasFixedSize &&
    css`
-      height: ${theme.spacing(4.5)};
-      width: ${theme.spacing(4.5)};
+      height: ${theme.spacing(4)};
+      width: ${theme.spacing(4)};
    `}

  &:active {
@@ -30,11 +33,13 @@ const StyledIconSlot = styled.div<{ $hasFixedSize: boolean }>`
 type AddToNavigationDragHandleIconProps = {
  icon?: IconComponent;
  customIconContent?: ReactNode;
+  iconColor?: string;
 };

 const AddToNavigationDragHandleIcon = ({
  icon,
  customIconContent,
+  iconColor,
 }: AddToNavigationDragHandleIconProps) => {
  const theme = useTheme();
  const iconSize = theme.icon.size.md;
@@ -47,7 +52,11 @@ const AddToNavigationDragHandleIcon = ({
  if (isDefined(icon)) {
    const Icon = icon;
    return (
-      <Icon size={iconSize} stroke={iconStroke} color={theme.grayScale.gray1} />
+      <Icon
+        size={iconSize}
+        stroke={iconStroke}
+        color={iconColor ?? theme.grayScale.gray1}
+      />
    );
  }
 };
@@ -66,37 +75,34 @@ export const AddToNavigationDragHandle = ({
  isHovered,
 }: AddToNavigationDragHandleProps) => {
  const theme = useTheme();
-  const iconBackgroundColor = getIconBackgroundColorForPayload(payload, theme);
-  const hasBackgroundColor = !!iconBackgroundColor && !isHovered;
-  const payloadHasBackgroundColor = !!iconBackgroundColor;
-  const iconSize = theme.icon.size.md;
-  const iconStroke = theme.icon.stroke.sm;
-
+  const effectiveColor =
+    payload.type === 'object' && isNonEmptyString(payload.iconColor)
+      ? payload.iconColor
+      : payload.type === 'folder'
+        ? DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER
+        : payload.type === 'link'
+          ? DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK
+          : undefined;
+  const hasBackgroundColor =
+    payload.type !== NavigationMenuItemType.RECORD &&
+    isDefined(effectiveColor) &&
+    !isHovered;
  const showCustomContentWithoutWrapper = isDefined(customIconContent);

  return (
    <StyledIconSlot
-      $hasFixedSize={
-        payloadHasBackgroundColor || showCustomContentWithoutWrapper
-      }
+      $hasFixedSize={hasBackgroundColor || showCustomContentWithoutWrapper}
    >
      {isHovered ? (
        <IconGripVertical
-          size={iconSize}
-          stroke={iconStroke}
+          size={theme.icon.size.md}
+          stroke={theme.icon.stroke.sm}
          color={theme.font.color.tertiary}
        />
      ) : showCustomContentWithoutWrapper ? (
        customIconContent
-      ) : hasBackgroundColor ? (
-        <StyledNavigationMenuItemIconContainer
-          $backgroundColor={iconBackgroundColor}
-        >
-          <AddToNavigationDragHandleIcon
-            icon={icon}
-            customIconContent={customIconContent}
-          />
-        </StyledNavigationMenuItemIconContainer>
+      ) : hasBackgroundColor && icon ? (
+        <NavigationMenuItemStyleIcon Icon={icon} color={effectiveColor} />
      ) : (
        <AddToNavigationDragHandleIcon
          icon={icon}
@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import { Droppable } from '@hello-pangea/dnd';
 import { useLingui } from '@lingui/react/macro';
 import { useContext, useState } from 'react';
@@ -10,7 +9,6 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { IconFolder, IconFolderOpen, IconHeartOff } from 'twenty-ui/display';

-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
 import { LightIconButton } from 'twenty-ui/input';
 import { AnimatedExpandableContainer } from 'twenty-ui/layout';
 import { useIsMobile } from 'twenty-ui/utilities';
@@ -19,6 +17,7 @@ import { NavigationItemDropTarget } from '@/navigation-menu-item/components/Navi
 import { NavigationMenuItemDroppable } from '@/navigation-menu-item/components/NavigationMenuItemDroppable';
 import { NavigationMenuItemFolderNavigationDrawerItemDropdown } from '@/navigation-menu-item/components/NavigationMenuItemFolderNavigationDrawerItemDropdown';
 import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/NavigationMenuItemIcon';
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder';
 import { NAVIGATION_MENU_ITEM_FOLDER_DELETE_MODAL_ID } from '@/navigation-menu-item/constants/NavigationMenuItemFolderDeleteModalId';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { NavigationMenuItemDragContext } from '@/navigation-menu-item/contexts/NavigationMenuItemDragContext';
@@ -26,7 +25,7 @@ import { useDeleteNavigationMenuItem } from '@/navigation-menu-item/hooks/useDel
 import { useDeleteNavigationMenuItemFolder } from '@/navigation-menu-item/hooks/useDeleteNavigationMenuItemFolder';
 import { useRenameNavigationMenuItemFolder } from '@/navigation-menu-item/hooks/useRenameNavigationMenuItemFolder';
 import { openNavigationMenuItemFolderIdsStateV2 } from '@/navigation-menu-item/states/openNavigationMenuItemFolderIdsStateV2';
-import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
+import { getEffectiveNavigationMenuItemColor } from '@/navigation-menu-item/utils/getEffectiveNavigationMenuItemColor';
 import { getNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemSecondaryLabel';
 import { isLocationMatchingNavigationMenuItem } from '@/navigation-menu-item/utils/isLocationMatchingNavigationMenuItem';
 import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
@@ -42,9 +41,10 @@ import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/componen
 import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
 import { currentNavigationMenuItemFolderIdStateV2 } from '@/ui/navigation/navigation-drawer/states/currentNavigationMenuItemFolderIdStateV2';
-import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
+import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { isNonEmptyString } from '@sniptt/guards';
 import { isDefined } from 'twenty-shared/utils';

@@ -64,8 +64,6 @@ export const CurrentWorkspaceMemberNavigationMenuItems = ({
  isWorkspaceFolder = false,
 }: CurrentWorkspaceMemberNavigationMenuItemsProps) => {
  const { t } = useLingui();
-  const theme = useTheme();
-  const iconColors = getNavigationMenuItemIconColors(theme);
  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
  const location = useLocation();
  const navigate = useNavigate();
@@ -233,7 +231,7 @@ export const CurrentWorkspaceMemberNavigationMenuItems = ({
              <NavigationDrawerItem
                label={folder.folderName}
                Icon={isOpen ? IconFolderOpen : IconFolder}
-                iconBackgroundColor={iconColors.folder}
+                iconColor={DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER}
                onClick={handleToggle}
                rightOptions={rightOptions}
                className="navigation-drawer-item"
@@ -300,6 +298,9 @@ export const CurrentWorkspaceMemberNavigationMenuItems = ({
                        }
                        isDragging={isDragging}
                        triggerEvent="CLICK"
+                        iconColor={getEffectiveNavigationMenuItemColor(
+                          navigationMenuItem,
+                        )}
                      />
                    }
                  />
@@ -6,13 +6,14 @@ import { IconHeartOff } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';

 import { NavigationItemDropTarget } from '@/navigation-menu-item/components/NavigationItemDropTarget';
-import { NavigationSections } from '@/navigation-menu-item/constants/NavigationSections.constants';
 import { NavigationMenuItemDroppable } from '@/navigation-menu-item/components/NavigationMenuItemDroppable';
 import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/NavigationMenuItemIcon';
 import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
+import { NavigationSections } from '@/navigation-menu-item/constants/NavigationSections.constants';
 import { NavigationMenuItemDragContext } from '@/navigation-menu-item/contexts/NavigationMenuItemDragContext';
 import { useDeleteNavigationMenuItem } from '@/navigation-menu-item/hooks/useDeleteNavigationMenuItem';
 import { useSortedNavigationMenuItems } from '@/navigation-menu-item/hooks/useSortedNavigationMenuItems';
+import { getEffectiveNavigationMenuItemColor } from '@/navigation-menu-item/utils/getEffectiveNavigationMenuItemColor';
 import { getNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemSecondaryLabel';
 import { isLocationMatchingNavigationMenuItem } from '@/navigation-menu-item/utils/isLocationMatchingNavigationMenuItem';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
@@ -71,6 +72,9 @@ export const CurrentWorkspaceMemberOrphanNavigationMenuItems = () => {
                          navigationMenuItem={navigationMenuItem}
                        />
                      )}
+                      iconColor={getEffectiveNavigationMenuItemColor(
+                        navigationMenuItem,
+                      )}
                      active={isLocationMatchingNavigationMenuItem(
                        currentPath,
                        currentViewPath,
@@ -1,29 +0,0 @@
-import { useTheme } from '@emotion/react';
-import type { IconComponent } from 'twenty-ui/display';
-
-import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer';
-
-type IconWithBackgroundProps = {
-  Icon: IconComponent;
-  backgroundColor: string;
-  size?: number | string;
-  stroke?: number | string;
-};
-
-export const IconWithBackground = ({
-  Icon,
-  backgroundColor,
-  size,
-  stroke,
-}: IconWithBackgroundProps) => {
-  const theme = useTheme();
-  return (
-    <StyledNavigationMenuItemIconContainer $backgroundColor={backgroundColor}>
-      <Icon
-        size={size ?? theme.icon.size.md}
-        stroke={stroke ?? theme.icon.stroke.md}
-        color={theme.grayScale.gray1}
-      />
-    </StyledNavigationMenuItemIconContainer>
-  );
-};
@@ -1,4 +1,5 @@
 import { useTheme } from '@emotion/react';
+import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { Avatar, useIcons } from 'twenty-ui/display';
@@ -7,7 +8,8 @@ import { FeatureFlagKey } from '~/generated-metadata/graphql';
 import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer';
 import { ObjectIconWithViewOverlay } from '@/navigation-menu-item/components/ObjectIconWithViewOverlay';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
+import { getEffectiveNavigationMenuItemColor } from '@/navigation-menu-item/utils/getEffectiveNavigationMenuItemColor';
+import { getNavigationMenuItemIconStyleFromColor } from '@/navigation-menu-item/utils/get-navigation-menu-item-icon-style-from-color';
 import { type ProcessedNavigationMenuItem } from '@/navigation-menu-item/utils/sortNavigationMenuItems';
 import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
@@ -26,82 +28,81 @@ export const NavigationMenuItemIcon = ({
  );
  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
  const { Icon: StandardIcon, IconColor } = useGetStandardObjectIcon(
-    navigationMenuItem.objectNameSingular || '',
+    navigationMenuItem.objectNameSingular ?? '',
  );

  const isRecord =
    navigationMenuItem.itemType === NavigationMenuItemType.RECORD;
-  const isLink = navigationMenuItem.itemType === NavigationMenuItemType.LINK;
-  const isObjectIndexView =
-    navigationMenuItem.itemType === NavigationMenuItemType.VIEW &&
-    navigationMenuItem.viewKey === ViewKey.Index;
  const isViewWithOverlay =
    navigationMenuItem.itemType === NavigationMenuItemType.VIEW &&
-    !isObjectIndexView;
+    navigationMenuItem.viewKey !== ViewKey.Index;

  const objectMetadataItem = objectMetadataItems.find(
    (item) => item.nameSingular === navigationMenuItem.objectNameSingular,
  );
-  const ObjectIconForView =
+  const objectIconForView =
    objectMetadataItem?.icon != null
      ? getIcon(objectMetadataItem.icon)
      : StandardIcon;

-  if (
+  const canShowViewOverlay =
    isViewWithOverlay &&
-    isDefined(ObjectIconForView) &&
-    isDefined(navigationMenuItem.Icon)
-  ) {
-    const ViewIcon = getIcon(navigationMenuItem.Icon);
+    isDefined(objectIconForView) &&
+    isDefined(navigationMenuItem.Icon);
+
+  if (canShowViewOverlay) {
    return (
      <ObjectIconWithViewOverlay
-        ObjectIcon={ObjectIconForView}
-        ViewIcon={ViewIcon}
+        ObjectIcon={objectIconForView}
+        ViewIcon={getIcon(navigationMenuItem.Icon!)}
+        objectColor={
+          isNavigationMenuItemEditingEnabled
+            ? (navigationMenuItem.color ?? undefined)
+            : undefined
+        }
      />
    );
  }

-  const IconToUse =
-    StandardIcon ||
+  const iconToUse =
+    StandardIcon ??
    (navigationMenuItem.Icon ? getIcon(navigationMenuItem.Icon) : undefined);
+  const effectiveColor =
+    getEffectiveNavigationMenuItemColor(navigationMenuItem);
+  const useStyledIcon =
+    isNavigationMenuItemEditingEnabled &&
+    !isRecord &&
+    isNonEmptyString(effectiveColor);
+  const iconStyle = useStyledIcon
+    ? getNavigationMenuItemIconStyleFromColor(theme, effectiveColor)
+    : null;

-  const placeholderColorSeed = navigationMenuItem.targetRecordId ?? undefined;
-  const iconColors = getNavigationMenuItemIconColors(theme);
-  const iconBackgroundColor = isNavigationMenuItemEditingEnabled
-    ? isRecord
-      ? undefined
-      : isLink
-        ? iconColors.link
-        : isViewWithOverlay
-          ? iconColors.view
-          : iconColors.object
-    : undefined;
-
-  const iconColorToUse = iconBackgroundColor
-    ? theme.grayScale.gray1
+  const iconColorToUse = iconStyle
+    ? iconStyle.iconColor
    : StandardIcon
      ? IconColor
      : theme.font.color.secondary;

  const avatar = (
    <Avatar
-      size={iconBackgroundColor ? 'sm' : 'md'}
+      size={iconStyle ? 'sm' : 'md'}
      type={navigationMenuItem.avatarType}
-      Icon={IconToUse}
+      Icon={iconToUse}
      iconColor={iconColorToUse}
      avatarUrl={navigationMenuItem.avatarUrl}
      placeholder={navigationMenuItem.labelIdentifier}
-      placeholderColorSeed={placeholderColorSeed}
+      placeholderColorSeed={navigationMenuItem.targetRecordId ?? undefined}
    />
  );

-  if (!iconBackgroundColor) {
+  if (!iconStyle) {
    return avatar;
  }

  return (
    <StyledNavigationMenuItemIconContainer
-      $backgroundColor={iconBackgroundColor}
+      $backgroundColor={iconStyle.backgroundColor}
+      $borderColor={iconStyle.borderColor}
    >
      {avatar}
    </StyledNavigationMenuItemIconContainer>
@@ -2,15 +2,19 @@ import styled from '@emotion/styled';

 export const StyledNavigationMenuItemIconContainer = styled.div<{
  $backgroundColor?: string;
+  $borderColor?: string;
 }>`
  align-items: center;
-  border-radius: ${({ theme }) => theme.border.radius.xs};
+  border-radius: 4px;
+  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
-  height: ${({ theme }) => theme.spacing(4.5)};
+  height: ${({ theme }) => theme.spacing(4)};
  justify-content: center;
-  width: ${({ theme }) => theme.spacing(4.5)};
+  width: ${({ theme }) => theme.spacing(4)};

  ${({ $backgroundColor }) =>
    $backgroundColor ? `background-color: ${$backgroundColor};` : ''}
+  ${({ $borderColor }) =>
+    $borderColor ? `border: 1px solid ${$borderColor};` : ''}
 `;
@@ -0,0 +1,30 @@
+import { useTheme } from '@emotion/react';
+import type { IconComponent } from 'twenty-ui/display';
+
+import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer';
+import { getNavigationMenuItemIconStyleFromColor } from '@/navigation-menu-item/utils/get-navigation-menu-item-icon-style-from-color';
+
+export type NavigationMenuItemStyleIconProps = {
+  Icon: IconComponent;
+  color?: string | null;
+};
+
+export const NavigationMenuItemStyleIcon = ({
+  Icon,
+  color,
+}: NavigationMenuItemStyleIconProps) => {
+  const theme = useTheme();
+  const style = getNavigationMenuItemIconStyleFromColor(theme, color);
+  return (
+    <StyledNavigationMenuItemIconContainer
+      $backgroundColor={style.backgroundColor}
+      $borderColor={style.borderColor}
+    >
+      <Icon
+        size={theme.icon.size.md}
+        stroke={theme.icon.stroke.md}
+        color={style.iconColor}
+      />
+    </StyledNavigationMenuItemIconContainer>
+  );
+};
@@ -2,34 +2,40 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import type { IconComponent } from 'twenty-ui/display';

-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
+import { getNavigationMenuItemIconStyleFromColor } from '@/navigation-menu-item/utils/get-navigation-menu-item-icon-style-from-color';

 const StyledCompositeContainer = styled.div`
  align-items: center;
-  border-radius: ${({ theme }) => theme.border.radius.xs};
+  border-radius: 4px;
+  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
-  height: ${({ theme }) => theme.spacing(4.5)};
+  height: 16px;
  justify-content: center;
  position: relative;
-  width: ${({ theme }) => theme.spacing(4.5)};
+  width: 16px;
 `;

-const StyledObjectIconWrapper = styled.div<{ $backgroundColor: string }>`
+const StyledObjectIconWrapper = styled.div<{
+  $backgroundColor: string;
+  $borderColor?: string;
+}>`
  position: absolute;
  inset: 0;
-  border-radius: ${({ theme }) => theme.border.radius.xs};
+  border-radius: 4px;
+  box-sizing: border-box;
  background-color: ${({ $backgroundColor }) => $backgroundColor};
  display: flex;
  align-items: center;
  justify-content: center;
+  ${({ $borderColor }) =>
+    $borderColor ? `border: 1px solid ${$borderColor};` : ''}
 `;

 const StyledViewOverlay = styled.div<{ $backgroundColor: string }>`
  align-items: center;
  background-color: ${({ $backgroundColor }) => $backgroundColor};
-  border: 1px solid ${({ theme }) => theme.background.primary};
-  border-radius: ${({ theme }) => theme.border.radius.xs};
+  border-radius: 4px;
  bottom: -7px;
  display: flex;
  height: ${({ theme }) => theme.spacing(3.5)};
@@ -42,29 +48,37 @@ const StyledViewOverlay = styled.div<{ $backgroundColor: string }>`
 export type ObjectIconWithViewOverlayProps = {
  ObjectIcon: IconComponent;
  ViewIcon: IconComponent;
+  objectColor?: string | null;
 };

 export const ObjectIconWithViewOverlay = ({
  ObjectIcon,
  ViewIcon,
+  objectColor,
 }: ObjectIconWithViewOverlayProps) => {
  const theme = useTheme();
-  const iconColors = getNavigationMenuItemIconColors(theme);
+  const objectStyle = getNavigationMenuItemIconStyleFromColor(
+    theme,
+    objectColor,
+  );

  return (
    <StyledCompositeContainer>
-      <StyledObjectIconWrapper $backgroundColor={iconColors.object}>
+      <StyledObjectIconWrapper
+        $backgroundColor={objectStyle.backgroundColor}
+        $borderColor={objectStyle.borderColor}
+      >
        <ObjectIcon
          size={theme.spacing(3.5)}
          stroke={theme.icon.stroke.md}
-          color={theme.grayScale.gray1}
+          color={objectStyle.iconColor}
        />
      </StyledObjectIconWrapper>
-      <StyledViewOverlay $backgroundColor={iconColors.view}>
+      <StyledViewOverlay $backgroundColor={theme.grayScale.gray4}>
        <ViewIcon
-          size={theme.spacing(2)}
-          stroke={theme.icon.stroke.sm}
-          color={theme.grayScale.gray1}
+          size={theme.spacing(2.5)}
+          stroke={theme.icon.stroke.lg}
+          color={theme.grayScale.gray10}
        />
      </StyledViewOverlay>
    </StyledCompositeContainer>
@@ -1,14 +1,22 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Droppable } from '@hello-pangea/dnd';
+import { useLingui } from '@lingui/react/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useContext } from 'react';
-import { isDefined } from 'twenty-shared/utils';
-
-import { useIsDropDisabledForSection } from '@/navigation-menu-item/hooks/useIsDropDisabledForSection';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
-import { IconChevronDown, IconChevronRight, useIcons } from 'twenty-ui/display';
+import { isDefined } from 'twenty-shared/utils';
+import {
+  IconChevronDown,
+  IconChevronRight,
+  IconPlus,
+  useIcons,
+} from 'twenty-ui/display';
+
+import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
+import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { useIsDropDisabledForSection } from '@/navigation-menu-item/hooks/useIsDropDisabledForSection';
 import { AnimatedExpandableContainer } from 'twenty-ui/layout';
 import { useIsMobile } from 'twenty-ui/utilities';

@@ -16,12 +24,13 @@ import { NavigationMenuItemDroppable } from '@/navigation-menu-item/components/N
 import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/NavigationMenuItemIcon';
 import { WorkspaceNavigationMenuItemFolderDragClone } from '@/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderDragClone';
 import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/constants/FolderIconDefault';
+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder';
 import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { NavigationMenuItemDragContext } from '@/navigation-menu-item/contexts/NavigationMenuItemDragContext';
 import { type NavigationMenuItemClickParams } from '@/navigation-menu-item/hooks/useWorkspaceSectionItems';
+import { addMenuItemInsertionContextStateV2 } from '@/navigation-menu-item/states/addMenuItemInsertionContextStateV2';
 import { openNavigationMenuItemFolderIdsStateV2 } from '@/navigation-menu-item/states/openNavigationMenuItemFolderIdsStateV2';
-import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
 import { getNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemSecondaryLabel';
 import { getObjectMetadataForNavigationMenuItem } from '@/navigation-menu-item/utils/getObjectMetadataForNavigationMenuItem';
 import { isLocationMatchingNavigationMenuItem } from '@/navigation-menu-item/utils/isLocationMatchingNavigationMenuItem';
@@ -38,8 +47,6 @@ import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetReco
 import { coreViewsState } from '@/views/states/coreViewState';
 import { ViewKey } from '@/views/types/ViewKey';
 import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView';
-import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { FeatureFlagKey } from '~/generated-metadata/graphql';

 const StyledFolderContainer = styled.div<{ $isSelectedInEditMode: boolean }>`
  border: ${({ theme, $isSelectedInEditMode }) =>
@@ -54,7 +61,6 @@ const StyledFolderDroppableContent = styled.div<{
 }>`
  display: flex;
  flex-direction: column;
-  gap: ${({ theme }) => theme.betweenSiblingsGap};
  padding-bottom: ${({ theme, $compact }) => ($compact ? 0 : theme.spacing(2))};
 `;

@@ -68,6 +74,7 @@ type WorkspaceNavigationMenuItemsFolderProps = {
  folderId: string;
  folderName: string;
  folderIconKey?: string | null;
+  folderColor?: string | null;
  navigationMenuItems: ProcessedNavigationMenuItem[];
  isGroup: boolean;
  isEditMode?: boolean;
@@ -82,6 +89,7 @@ export const WorkspaceNavigationMenuItemsFolder = ({
  folderId,
  folderName,
  folderIconKey,
+  folderColor,
  navigationMenuItems,
  isGroup,
  isEditMode = false,
@@ -93,10 +101,6 @@ export const WorkspaceNavigationMenuItemsFolder = ({
 }: WorkspaceNavigationMenuItemsFolderProps) => {
  const theme = useTheme();
  const { getIcon } = useIcons();
-  const isNavigationMenuItemEditingEnabled = useIsFeatureEnabled(
-    FeatureFlagKey.IS_NAVIGATION_MENU_ITEM_EDITING_ENABLED,
-  );
-  const iconColors = getNavigationMenuItemIconColors(theme);
  const FolderIcon = getIcon(folderIconKey ?? FOLDER_ICON_DEFAULT);
  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
  const coreViews = useRecoilValue(coreViewsState);
@@ -107,15 +111,38 @@ export const WorkspaceNavigationMenuItemsFolder = ({
  const currentViewPath = location.pathname + location.search;
  const isMobile = useIsMobile();

+  const { t } = useLingui();
  const [openNavigationMenuItemFolderIds, setOpenNavigationMenuItemFolderIds] =
    useRecoilStateV2(openNavigationMenuItemFolderIdsStateV2);

  const setCurrentFolderId = useSetRecoilStateV2(
    currentNavigationMenuItemFolderIdStateV2,
  );
+  const setAddMenuItemInsertionContext = useSetRecoilStateV2(
+    addMenuItemInsertionContextStateV2,
+  );
+  const { navigateCommandMenu } = useNavigateCommandMenu();

  const isOpen = openNavigationMenuItemFolderIds.includes(folderId);

+  const folderContentLengthForTree =
+    isEditMode && isSelectedInEditMode
+      ? navigationMenuItems.length + 1
+      : navigationMenuItems.length;
+
+  const handleAddMenuItemToFolder = () => {
+    setAddMenuItemInsertionContext({
+      targetFolderId: folderId,
+      targetIndex: navigationMenuItems.length,
+    });
+    navigateCommandMenu({
+      page: CommandMenuPages.NavigationMenuAddItem,
+      pageTitle: t`New sidebar item`,
+      pageIcon: IconPlus,
+      resetNavigationStack: true,
+    });
+  };
+
  const handleToggle = () => {
    if (isMobile) {
      setCurrentFolderId((prev) => (prev === folderId ? null : folderId));
@@ -163,8 +190,10 @@ export const WorkspaceNavigationMenuItemsFolder = ({
          <NavigationDrawerItem
            label={folderName}
            Icon={FolderIcon}
-            iconBackgroundColor={
-              isNavigationMenuItemEditingEnabled ? iconColors.folder : undefined
+            iconColor={
+              isDefined(folderColor)
+                ? folderColor
+                : DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER
            }
            onClick={handleClick}
            className="navigation-drawer-item"
@@ -287,8 +316,7 @@ export const WorkspaceNavigationMenuItemsFolder = ({
                            }
                            subItemState={getNavigationSubItemLeftAdornment({
                              index,
-                              arrayLength:
-                                navigationMenuItemFolderContentLength,
+                              arrayLength: folderContentLengthForTree,
                              selectedIndex: selectedNavigationMenuItemIndex,
                            })}
                            isDragging={isContextDragging}
@@ -302,6 +330,19 @@ export const WorkspaceNavigationMenuItemsFolder = ({
                </StyledFolderDroppableContent>
              )}
            </Droppable>
+            {isEditMode && isSelectedInEditMode && (
+              <NavigationDrawerSubItem
+                label={t`Add menu item`}
+                Icon={IconPlus}
+                onClick={handleAddMenuItemToFolder}
+                triggerEvent="CLICK"
+                subItemState={getNavigationSubItemLeftAdornment({
+                  index: navigationMenuItems.length,
+                  arrayLength: folderContentLengthForTree,
+                  selectedIndex: selectedNavigationMenuItemIndex,
+                })}
+              />
+            )}
          </AnimatedExpandableContainer>
        </StyledFolderExpandableWrapper>
      </NavigationDrawerItemsCollapsableContainer>
@@ -0,0 +1 @@
+export const DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER = 'orange';
@@ -0,0 +1 @@
+export const DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK = 'red';
@@ -0,0 +1,3 @@
+import type { ThemeColor } from 'twenty-ui/theme';
+
+export const DEFAULT_NAV_ITEM_ICON_COLOR: ThemeColor = 'gray';
@@ -11,6 +11,7 @@ export const NAVIGATION_MENU_ITEM_FRAGMENT = gql`
    name
    link
    icon
+    color
    position
    applicationId
    createdAt
@@ -2,6 +2,7 @@ import { v4 } from 'uuid';
 import { isDefined } from 'twenty-shared/utils';
 import type { NavigationMenuItem } from '~/generated-metadata/graphql';

+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder';
 import { navigationMenuItemsDraftStateV2 } from '@/navigation-menu-item/states/navigationMenuItemsDraftStateV2';
 import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { computeInsertIndexAndPosition } from '@/navigation-menu-item/utils/computeInsertIndexAndPosition';
@@ -43,6 +44,7 @@ export const useAddFolderToNavigationMenuDraft = () => {
      position,
      userWorkspaceId: undefined,
      name: name.trim(),
+      color: DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER,
      applicationId: undefined,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
@@ -2,6 +2,7 @@ import { isDefined } from 'twenty-shared/utils';
 import { v4 } from 'uuid';
 import type { NavigationMenuItem } from '~/generated-metadata/graphql';

+import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorLink';
 import { navigationMenuItemsDraftStateV2 } from '@/navigation-menu-item/states/navigationMenuItemsDraftStateV2';
 import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { computeInsertIndexAndPosition } from '@/navigation-menu-item/utils/computeInsertIndexAndPosition';
@@ -47,6 +48,7 @@ export const useAddLinkToNavigationMenuDraft = () => {
      userWorkspaceId: undefined,
      name: label.trim() || 'Link',
      link: normalizedUrl,
+      color: DEFAULT_NAVIGATION_MENU_ITEM_COLOR_LINK,
      applicationId: undefined,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
@@ -1,10 +1,10 @@
-import { v4 } from 'uuid';
 import { isDefined } from 'twenty-shared/utils';
+import { v4 } from 'uuid';
 import type { NavigationMenuItem } from '~/generated-metadata/graphql';

 import { navigationMenuItemsDraftStateV2 } from '@/navigation-menu-item/states/navigationMenuItemsDraftStateV2';
-import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { computeInsertIndexAndPosition } from '@/navigation-menu-item/utils/computeInsertIndexAndPosition';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';

 export const useAddObjectToNavigationMenuDraft = () => {
  const setNavigationMenuItemsDraft = useSetRecoilStateV2(
@@ -17,6 +17,7 @@ export const useAddObjectToNavigationMenuDraft = () => {
    currentDraft: NavigationMenuItem[],
    targetFolderId?: string | null,
    targetIndex?: number,
+    color?: string | null,
  ): string => {
    const folderId = targetFolderId ?? null;

@@ -45,6 +46,7 @@ export const useAddObjectToNavigationMenuDraft = () => {
      folderId: folderId ?? undefined,
      name: undefined,
      applicationId: undefined,
+      color,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    };
@@ -1,10 +1,10 @@
-import { v4 } from 'uuid';
 import { isDefined } from 'twenty-shared/utils';
+import { v4 } from 'uuid';
 import type { NavigationMenuItem } from '~/generated-metadata/graphql';

 import { navigationMenuItemsDraftStateV2 } from '@/navigation-menu-item/states/navigationMenuItemsDraftStateV2';
-import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import { computeInsertIndexAndPosition } from '@/navigation-menu-item/utils/computeInsertIndexAndPosition';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';

 export const useAddViewToNavigationMenuDraft = () => {
  const setNavigationMenuItemsDraft = useSetRecoilStateV2(
@@ -16,6 +16,7 @@ export const useAddViewToNavigationMenuDraft = () => {
    currentDraft: NavigationMenuItem[],
    targetFolderId?: string | null,
    targetIndex?: number,
+    color?: string | null,
  ): string => {
    const folderId = targetFolderId ?? null;

@@ -44,6 +45,7 @@ export const useAddViewToNavigationMenuDraft = () => {
      folderId: folderId ?? undefined,
      name: undefined,
      applicationId: undefined,
+      color,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    };
@@ -8,7 +8,9 @@ export const useDraftNavigationMenuItemsAllFolders = () => {
    currentDraft?.filter(isNavigationMenuItemFolder).map((item) => ({
      id: item.id,
      name: item.name ?? 'Folder',
-      folderId: item.folderId ?? undefined,
+      folderId: item.folderId,
+      icon: item.icon,
+      color: item.color,
    })) ?? [];

  return { allFolders };
@@ -8,6 +8,8 @@ export const useDraftNavigationMenuItemsWorkspaceFolders = () => {
    (folder) => ({
      id: folder.id,
      name: folder.folderName,
+      icon: folder.icon,
+      color: folder.color,
    }),
  );

--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export const DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER = 'orange';`