diff --git a/graph/project-details/src/lib/project-details-wrapper.state.ts b/graph/project-details/src/lib/project-details-wrapper.state.ts
index 8c68e2aaf51124..2ca6c928310574 100644
--- a/graph/project-details/src/lib/project-details-wrapper.state.ts
+++ b/graph/project-details/src/lib/project-details-wrapper.state.ts
@@ -3,14 +3,11 @@ import {
   RootState,
   expandTargetActions,
   getExpandedTargets,
-  getSelectedTarget,
-  selectTargetActions,
 } from '@nx/graph/state';
 
 const mapStateToProps = (state: RootState) => {
   return {
     expandTargets: getExpandedTargets(state),
-    getSelectedTarget: getSelectedTarget(state),
   };
 };
 
@@ -19,15 +16,9 @@ const mapDispatchToProps = (dispatch: AppDispatch) => {
     setExpandTargets(targets: string[]) {
       dispatch(expandTargetActions.setExpandTargets(targets));
     },
-    selectTarget(targetGroup: string) {
-      dispatch(selectTargetActions.selectTarget(targetGroup));
-    },
     collapseAllTargets() {
       dispatch(expandTargetActions.collapseAllTargets());
     },
-    clearTargetGroup() {
-      dispatch(selectTargetActions.clearSelectedTarget());
-    },
   };
 };
 
diff --git a/graph/project-details/src/lib/project-details-wrapper.tsx b/graph/project-details/src/lib/project-details-wrapper.tsx
index 3bf227c7e06201..6516592f8e5393 100644
--- a/graph/project-details/src/lib/project-details-wrapper.tsx
+++ b/graph/project-details/src/lib/project-details-wrapper.tsx
@@ -8,11 +8,7 @@ import {
   useEnvironmentConfig,
   useRouteConstructor,
 } from '@nx/graph/shared';
-import {
-  ProjectDetails,
-  defaultSelectTargetGroup,
-  getTargetGroupForTarget,
-} from '@nx/graph/ui-project-details';
+import { ProjectDetails } from '@nx/graph/ui-project-details';
 import { useCallback, useEffect } from 'react';
 import {
   mapStateToProps,
@@ -32,9 +28,6 @@ export function ProjectDetailsWrapperComponent({
   sourceMap,
   setExpandTargets,
   expandTargets,
-  getSelectedTarget,
-  selectTarget,
-  clearTargetGroup,
   collapseAllTargets,
 }: ProjectDetailsProps) {
   const environment = useEnvironmentConfig()?.environment;
@@ -101,14 +94,8 @@ export function ProjectDetailsWrapperComponent({
 
   const updateSearchParams = (
     params: URLSearchParams,
-    targetGroup: string | null,
     targetNames: string[]
   ) => {
-    if (targetGroup) {
-      params.set('targetGroup', targetGroup);
-    } else {
-      params.delete('targetGroup');
-    }
     if (targetNames.length === 0) {
       params.delete('targetName');
     } else {
@@ -116,74 +103,45 @@ export function ProjectDetailsWrapperComponent({
     }
   };
 
-  /* useEffect(() => {
+  useEffect(() => {
     if (!project.data.targets) return;
 
-    const selectedTargetNameParam = searchParams.get('targetName');
-    if (
-      selectedTargetNameParam &&
-      selectedTarget !== selectedTargetNameParam
-    ) {
-      selectTarget(selectedTargetNameParam);
-    }
-
-    const expandedTargetsParams =
-      searchParams.get('targetName')?.split(',') || [];
-    if (expandedTargetsParams.length > 0) {
+    const expandedTargetsParams = searchParams.get('targetName')?.split(',');
+    if (expandedTargetsParams && expandedTargetsParams.length > 0) {
       setExpandTargets(expandedTargetsParams);
     }
 
-    const targetName = searchParams.get('targetName');
-    if (targetName) {
-      const targetGroup = getTargetGroupForTarget(targetName, project);
-      selectTarget(targetGroup);
-      setExpandTargets([targetName]);
-    }
-
     return () => {
-      clearTargetGroup();
       collapseAllTargets();
-      searchParams.delete('targetGroup');
       searchParams.delete('targetName');
       setSearchParams(searchParams, { replace: true });
     };
   }, []); // only run on mount
-  
 
   useEffect(() => {
     if (!project.data.targets) return;
 
-    const selectedTargetGroupParams = searchParams.get('targetGroup');
     const expandedTargetsParams =
       searchParams.get('targetName')?.split(',') || [];
 
-    if (
-      selectedTargetGroup === selectedTargetGroupParams &&
-      expandedTargetsParams.join(',') === expandTargets.join(',')
-    ) {
+    if (expandedTargetsParams.join(',') === expandTargets.join(',')) {
       return;
     }
 
     setSearchParams(
       (currentSearchParams) => {
-        updateSearchParams(
-          currentSearchParams,
-          selectedTargetGroup,
-          expandTargets
-        );
+        updateSearchParams(currentSearchParams, expandTargets);
         return currentSearchParams;
       },
       { replace: true, preventScrollReset: true }
     );
   }, [
     expandTargets,
-    selectedTargetGroup,
     project.data.targets,
     setExpandTargets,
     searchParams,
     setSearchParams,
   ]);
-  */
 
   return (
     <ProjectDetails
diff --git a/graph/state/src/index.ts b/graph/state/src/index.ts
index 05758ed7b97dba..4238d95f59ad1b 100644
--- a/graph/state/src/index.ts
+++ b/graph/state/src/index.ts
@@ -1,5 +1,4 @@
 export * from './lib/expand-targets/expand-targets.slice';
-export * from './lib/select-target/select-target.slice';
 export * from './lib/root/root-state.initial';
 export * from './lib/root/root-state.interface';
 export * from './lib/root/root.reducer';
diff --git a/graph/state/src/lib/root/root-state.initial.ts b/graph/state/src/lib/root/root-state.initial.ts
index ec07617244f252..b56a600101fd4f 100644
--- a/graph/state/src/lib/root/root-state.initial.ts
+++ b/graph/state/src/lib/root/root-state.initial.ts
@@ -2,13 +2,8 @@ import {
   EXPAND_TARGETS_KEY,
   initialExpandTargets,
 } from '../expand-targets/expand-targets.slice';
-import {
-  SELECT_TARGET_KEY,
-  initialSelectTarget,
-} from '../select-target/select-target.slice';
 import { RootState } from './root-state.interface';
 
 export const initialRootState: RootState = {
   [EXPAND_TARGETS_KEY]: initialExpandTargets,
-  [SELECT_TARGET_KEY]: initialSelectTarget,
 };
diff --git a/graph/state/src/lib/root/root-state.interface.ts b/graph/state/src/lib/root/root-state.interface.ts
index 1f7c746ee0fa46..ab5dc706d23150 100644
--- a/graph/state/src/lib/root/root-state.interface.ts
+++ b/graph/state/src/lib/root/root-state.interface.ts
@@ -1,7 +1,5 @@
 import { EXPAND_TARGETS_KEY } from '../expand-targets/expand-targets.slice';
-import { SELECT_TARGET_KEY } from '../select-target/select-target.slice';
 
 export interface RootState {
   [EXPAND_TARGETS_KEY]: string[];
-  [SELECT_TARGET_KEY]: string;
 }
diff --git a/graph/state/src/lib/root/root.reducer.ts b/graph/state/src/lib/root/root.reducer.ts
index 313e4a42ab3ac1..48f5700ae9201d 100644
--- a/graph/state/src/lib/root/root.reducer.ts
+++ b/graph/state/src/lib/root/root.reducer.ts
@@ -3,13 +3,8 @@ import {
   EXPAND_TARGETS_KEY,
   expandTargetReducer,
 } from '../expand-targets/expand-targets.slice';
-import {
-  SELECT_TARGET_KEY,
-  selectTargetReducer,
-} from '../select-target/select-target.slice';
 import { RootState } from './root-state.interface';
 
 export const rootReducer = combineReducers<RootState>({
   [EXPAND_TARGETS_KEY]: expandTargetReducer,
-  [SELECT_TARGET_KEY]: selectTargetReducer as any,
 });
diff --git a/graph/state/src/lib/select-target/select-target.slice.ts b/graph/state/src/lib/select-target/select-target.slice.ts
deleted file mode 100644
index 58daaeb5e1ef79..00000000000000
--- a/graph/state/src/lib/select-target/select-target.slice.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { PayloadAction, createSlice } from '@reduxjs/toolkit';
-
-export const SELECT_TARGET_KEY = 'selectTarget';
-
-export const initialSelectTarget: string = '';
-
-export const selectTargetSlice = createSlice({
-  name: SELECT_TARGET_KEY,
-  initialState: initialSelectTarget,
-  reducers: {
-    selectTarget: (_: string, action: PayloadAction<string>): string => {
-      return action.payload;
-    },
-    clearSelectedTarget: (): string => {
-      return '';
-    },
-  },
-});
-
-/*
- * Export reducer for store configuration.
- */
-export const selectTargetReducer = selectTargetSlice.reducer;
-
-export const selectTargetActions = selectTargetSlice.actions;
-
-export const getSelectedTarget = <ROOT extends { [SELECT_TARGET_KEY]: string }>(
-  rootState: ROOT
-): string => rootState[SELECT_TARGET_KEY];
diff --git a/graph/ui-icons/src/lib/framework-icons.stories.tsx b/graph/ui-icons/src/lib/framework-icons.stories.tsx
index b02eeb30528d55..e57eaf595c9b2f 100644
--- a/graph/ui-icons/src/lib/framework-icons.stories.tsx
+++ b/graph/ui-icons/src/lib/framework-icons.stories.tsx
@@ -19,10 +19,6 @@ const meta: Meta<typeof frameworkIcons> = {
 export default meta;
 type Story = StoryObj<typeof frameworkIcons>;
 
-export const Primary = {
-  args: {},
-};
-
-export const Heading: Story = {
+export const Primary: Story = {
   args: {},
 };
diff --git a/graph/ui-icons/src/lib/framework-icons.tsx b/graph/ui-icons/src/lib/framework-icons.tsx
index 112c0fdb8befbc..697c66f0dccda2 100644
--- a/graph/ui-icons/src/lib/framework-icons.tsx
+++ b/graph/ui-icons/src/lib/framework-icons.tsx
@@ -68,6 +68,7 @@ export const frameworkIcons: Record<
   reactMono: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         className="h-full w-full"
@@ -83,6 +84,7 @@ export const frameworkIcons: Record<
   tsMono: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         className="h-full w-full"
@@ -118,6 +120,7 @@ export const frameworkIcons: Record<
   jsMono: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         className="h-full w-full"
@@ -144,6 +147,7 @@ export const frameworkIcons: Record<
   nodeMono: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         className="h-full w-full"
@@ -159,6 +163,7 @@ export const frameworkIcons: Record<
   angularMono: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         className="h-full w-full"
@@ -197,6 +202,7 @@ export const frameworkIcons: Record<
   typescript: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         fill="#3178C6"
         className="h-full w-full"
@@ -210,6 +216,7 @@ export const frameworkIcons: Record<
   youtube: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         fill="red"
         className="h-full w-full"
@@ -239,6 +246,7 @@ export const frameworkIcons: Record<
   nxcloud: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         stroke="currentColor"
         fill="transparent"
@@ -252,6 +260,7 @@ export const frameworkIcons: Record<
   nx: {
     image: (
       <svg
+        role="img"
         fill="currentColor"
         className="h-full w-full"
         viewBox="0 0 24 24"
@@ -264,8 +273,8 @@ export const frameworkIcons: Record<
   node: {
     image: (
       <svg
-        fill="#339933"
         role="img"
+        fill="#339933"
         className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
@@ -278,9 +287,8 @@ export const frameworkIcons: Record<
   nextjs: {
     image: (
       <svg
-        fill="#000000"
-        className="adaptive-icon h-full w-full"
         role="img"
+        className="adaptive-icon h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -293,8 +301,8 @@ export const frameworkIcons: Record<
   nestjs: {
     image: (
       <svg
-        fill="#E0234E"
         role="img"
+        fill="#E0234E"
         className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
@@ -307,6 +315,7 @@ export const frameworkIcons: Record<
   rspack: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         className="h-full w-full"
         viewBox="20 0 350 339.32"
@@ -337,6 +346,7 @@ export const frameworkIcons: Record<
   jest: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         className="h-full w-full"
         viewBox="100 150 450 450"
@@ -390,7 +400,6 @@ export const frameworkIcons: Record<
   fastify: {
     image: (
       <svg
-        fill="#000000"
         role="img"
         className="adaptive-icon h-full w-full"
         viewBox="0 0 24 24"
@@ -405,9 +414,8 @@ export const frameworkIcons: Record<
   express: {
     image: (
       <svg
-        fill="#000000"
-        className="adaptive-icon h-full w-full"
         role="img"
+        className="adaptive-icon h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -420,8 +428,8 @@ export const frameworkIcons: Record<
   storybook: {
     image: (
       <svg
-        fill="#FF4785"
         role="img"
+        fill="#FF4785"
         className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
@@ -434,11 +442,12 @@ export const frameworkIcons: Record<
   solid: {
     image: (
       <svg
-        xmlns="http://www.w3.org/2000/svg"
         role="img"
+        xmlns="http://www.w3.org/2000/svg"
         className="h-full w-full"
         viewBox="0 0 166 155.3"
       >
+        <title>Solid</title>
         <defs>
           <linearGradient
             id="a"
@@ -531,8 +540,8 @@ export const frameworkIcons: Record<
   lit: {
     image: (
       <svg
-        fill="#324FFF"
         role="img"
+        fill="#324FFF"
         className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
@@ -545,8 +554,8 @@ export const frameworkIcons: Record<
   vite: {
     image: (
       <svg
-        viewBox="0 0 410 404"
         role="img"
+        viewBox="0 0 410 404"
         className="h-full w-full"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -591,8 +600,8 @@ export const frameworkIcons: Record<
   trpc: {
     image: (
       <svg
-        fill="#2596BE"
         role="img"
+        fill="#2596BE"
         className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
@@ -605,6 +614,7 @@ export const frameworkIcons: Record<
   remix: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         className="h-full w-full"
@@ -669,6 +679,7 @@ export const frameworkIcons: Record<
   dotnet: {
     image: (
       <svg
+        role="img"
         className="h-full w-full"
         viewBox="0 0 456 456"
         fill="none"
@@ -697,6 +708,7 @@ export const frameworkIcons: Record<
   qwik: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         className="h-full w-full"
@@ -720,6 +732,7 @@ export const frameworkIcons: Record<
   gradle: {
     image: (
       <svg
+        role="img"
         id="Layer_1"
         data-name="Layer 1"
         xmlns="http://www.w3.org/2000/svg"
@@ -750,6 +763,7 @@ export const frameworkIcons: Record<
   go: {
     image: (
       <svg
+        role="img"
         className="h-full w-full"
         viewBox="0 0 32 32"
         fill="none"
@@ -779,6 +793,7 @@ export const frameworkIcons: Record<
   vue: {
     image: (
       <svg
+        role="img"
         className="h-full w-full"
         viewBox="0 -17.5 256 256"
         xmlns="http://www.w3.org/2000/svg"
@@ -802,6 +817,7 @@ export const frameworkIcons: Record<
   rust: {
     image: (
       <svg
+        role="img"
         version="1.1"
         viewBox="0 0 108 108"
         className="adaptive-icon h-full w-full"
@@ -889,6 +905,7 @@ export const frameworkIcons: Record<
   nuxt: {
     image: (
       <svg
+        role="img"
         className="h-full w-full"
         viewBox="0 0 900 900"
         fill="none"
@@ -904,6 +921,7 @@ export const frameworkIcons: Record<
   svelte: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         className="h-full w-full"
         viewBox="0 0 98.1 118"
@@ -931,6 +949,7 @@ export const frameworkIcons: Record<
   gatsby: {
     image: (
       <svg
+        role="img"
         className="h-full w-full"
         viewBox="0 0 32 32"
         xmlns="http://www.w3.org/2000/svg"
@@ -950,8 +969,8 @@ export const frameworkIcons: Record<
   astro: {
     image: (
       <svg
-        fill="#FF5D01"
         role="img"
+        fill="#FF5D01"
         className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
@@ -964,8 +983,8 @@ export const frameworkIcons: Record<
   playwright: {
     image: (
       <svg
-        fill="#2EAD33"
         role="img"
+        fill="#2EAD33"
         className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
@@ -978,8 +997,8 @@ export const frameworkIcons: Record<
   pnpm: {
     image: (
       <svg
-        fill="#F69220"
         role="img"
+        fill="#F69220"
         className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
@@ -992,6 +1011,7 @@ export const frameworkIcons: Record<
   monorepo: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         fill="currentColor"
         className="h-full w-full"
@@ -1014,6 +1034,7 @@ export const frameworkIcons: Record<
   javascript: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         className="h-full w-full"
         viewBox="0 0 630 630"
@@ -1027,6 +1048,7 @@ export const frameworkIcons: Record<
   cra: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         fill="#09D3AC"
         className="h-full w-full"
@@ -1039,6 +1061,7 @@ export const frameworkIcons: Record<
   angular: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         className="h-full w-full text-black dark:text-white"
         viewBox="0 0 24 24"
@@ -1074,6 +1097,7 @@ export const frameworkIcons: Record<
   cypress: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         className="adaptive-icon h-full w-full"
         viewBox="0 0 24 24"
@@ -1087,6 +1111,7 @@ export const frameworkIcons: Record<
   expo: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         className="adaptive-icon h-full w-full"
         fill="#000020"
@@ -1101,8 +1126,8 @@ export const frameworkIcons: Record<
   react: {
     image: (
       <svg
-        fill="#61DAFB"
         role="img"
+        fill="#61DAFB"
         className="h-full w-full"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
@@ -1115,6 +1140,7 @@ export const frameworkIcons: Record<
   azure: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         className="h-full w-full"
         viewBox="0 0 728.55 727.44"
@@ -1161,6 +1187,7 @@ export const frameworkIcons: Record<
   bitbucket: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         className="h-full w-full"
         width="500"
@@ -1199,6 +1226,7 @@ export const frameworkIcons: Record<
   circleci: {
     image: (
       <svg
+        role="img"
         className="adaptive-icon h-full w-full"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 390 390"
@@ -1216,6 +1244,7 @@ export const frameworkIcons: Record<
   github: {
     image: (
       <svg
+        role="img"
         className="adaptive-icon h-full w-full"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="-1 0 100 100"
@@ -1233,6 +1262,7 @@ export const frameworkIcons: Record<
   gitlab: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         className="h-full w-full"
         width="463.16"
@@ -1268,6 +1298,7 @@ export const frameworkIcons: Record<
   jenkins: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         className="h-full w-full"
         viewBox="-2 0 448 620"
@@ -1524,7 +1555,6 @@ export const frameworkIcons: Record<
   apollo: {
     image: (
       <svg
-        fill="#000000"
         role="img"
         className="adaptive-icon h-full w-full"
         height="256"
@@ -1540,7 +1570,6 @@ export const frameworkIcons: Record<
   prisma: {
     image: (
       <svg
-        fill="currentColor"
         role="img"
         className="adaptive-icon h-full w-full"
         viewBox="0.34 -0.059977834648891726 33.11668247084116 39.96397783464889"
@@ -1559,6 +1588,7 @@ export const frameworkIcons: Record<
   redis: {
     image: (
       <svg
+        role="img"
         width="32"
         className="h-full w-full"
         height="32"
@@ -1607,6 +1637,7 @@ export const frameworkIcons: Record<
   postgres: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         width="32"
         height="32"
@@ -1637,6 +1668,7 @@ export const frameworkIcons: Record<
   planetscale: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         width="24"
         height="24"
@@ -1658,10 +1690,10 @@ export const frameworkIcons: Record<
   mongodb: {
     image: (
       <svg
+        role="img"
         width="15"
         height="15"
         viewBox="0 0 15 15"
-        fill="none"
         className="adaptive-icon h-full w-full"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -1675,6 +1707,7 @@ export const frameworkIcons: Record<
   mfe: {
     image: (
       <svg
+        role="img"
         xmlns="http://www.w3.org/2000/svg"
         width="24"
         height="24"
@@ -1692,6 +1725,7 @@ export const frameworkIcons: Record<
   eslint: {
     image: (
       <svg
+        role="img"
         width="256"
         height="263"
         viewBox="0 0 256 263"
diff --git a/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx b/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx
index 9fffd027df1058..fb98d5e58d2db3 100644
--- a/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx
+++ b/graph/ui-project-details/src/lib/project-details/project-details.stories.tsx
@@ -619,7 +619,7 @@ export const Gradle = {
   },
 };
 
-export const CartE2e = {
+export const Cart = {
   args: {
     project: {
       name: 'cart-e2e',
diff --git a/graph/ui-project-details/src/lib/project-details/project-details.tsx b/graph/ui-project-details/src/lib/project-details/project-details.tsx
index 62da3e4575e2f3..0e47fff8f9eac0 100644
--- a/graph/ui-project-details/src/lib/project-details/project-details.tsx
+++ b/graph/ui-project-details/src/lib/project-details/project-details.tsx
@@ -9,8 +9,8 @@ import { PropertyInfoTooltip, Tooltip } from '@nx/graph/ui-tooltips';
 import { TooltipTriggerText } from '../target-configuration-details/tooltip-trigger-text';
 import { twMerge } from 'tailwind-merge';
 import { Pill } from '../pill';
-import { TargetGroups } from '../target-groups/target-groups';
 import { TargetConfigurationDetailsList } from '../target-configuration-details-list/target-configuration-details-list';
+import { TargetTechnologies } from '../target-technologies/target-technologies';
 
 export interface ProjectDetailsProps {
   project: ProjectGraphProjectNode;
@@ -40,6 +40,17 @@ export const ProjectDetails = ({
     projectData.projectType?.charAt(0)?.toUpperCase() +
       projectData.projectType?.slice(1);
 
+  const technologies = [
+    ...new Set(
+      [
+        ...(projectData.metadata?.technologies ?? []),
+        ...Object.values(projectData.targets ?? {})
+          .map((target) => target?.metadata?.technologies)
+          .flat(),
+      ].filter(Boolean)
+    ),
+  ] as string[];
+
   return (
     <>
       <header
@@ -48,13 +59,26 @@ export const ProjectDetails = ({
           isCompact ? 'mb-2' : 'mb-4'
         )}
       >
-        <h1
+        <div
           className={twMerge(
-            `flex items-center justify-between dark:text-slate-100`,
-            isCompact ? `gap-1 text-2xl` : `mb-4 gap-2 text-4xl`
+            `flex items-center justify-between`,
+            isCompact ? `gap-1` : `mb-4 gap-2`
           )}
         >
-          <span>{project.name}</span>
+          <div className="flex items-center gap-2">
+            <h1
+              className={twMerge(
+                `dark:text-slate-100`,
+                isCompact ? `text-2xl` : `text-4xl`
+              )}
+            >
+              {project.name}
+            </h1>
+            <TargetTechnologies
+              technologies={technologies}
+              showTooltip={true}
+            />
+          </div>
           <span>
             {onViewInProjectGraph ? (
               <button
@@ -68,7 +92,7 @@ export const ProjectDetails = ({
               </button>
             ) : null}{' '}
           </span>
-        </h1>
+        </div>
         <div className="py-2 ">
           {projectData.tags && projectData.tags.length ? (
             <p>
diff --git a/graph/ui-project-details/src/lib/source-info/source-info.tsx b/graph/ui-project-details/src/lib/source-info/source-info.tsx
index 893ad2f7b07343..5b185dae3f8dab 100644
--- a/graph/ui-project-details/src/lib/source-info/source-info.tsx
+++ b/graph/ui-project-details/src/lib/source-info/source-info.tsx
@@ -11,7 +11,7 @@ export function SourceInfo(props: {
   // Every other property within in the target has the form `target.${targetName}.${propertyName}
   const isTarget = props.propertyKey.split('.').length === 2;
   return (
-    <span className="shrink-1 inline-flex min-w-0 items-center gap-2">
+    <span className="inline-flex min-w-0 items-center gap-2">
       <Tooltip
         openAction="hover"
         strategy="fixed"
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-container/target-configuration-details-group-container.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-container/target-configuration-details-group-container.tsx
index 72c6bc78c09612..0b34d209553fcc 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details-group-container/target-configuration-details-group-container.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details-group-container/target-configuration-details-group-container.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { Pill } from '../pill';
+import { TargetConfigurationGroupHeader } from '../target-configuration-details-group-header/target-configuration-details-group-header';
 
 export interface TargetConfigurationGroupContainerProps {
   targetGroupName: string;
@@ -14,22 +14,19 @@ export const TargetConfigurationGroupContainer = forwardRef(
       targetsNumber,
       children,
     }: TargetConfigurationGroupContainerProps,
-    ref: React.Ref<HTMLDivElement>
+    ref: React.Ref<any>
   ) => {
     return (
-      <div ref={ref} className="mb-4">
-        <header className="p-2 text-lg">
-          {targetGroupName}{' '}
-          <Pill
-            text={
-              targetsNumber.toString() +
-              (targetsNumber === 1 ? ' target' : ' targets')
-            }
+      <div>
+        <div ref={ref} className="mb-4 w-full">
+          <TargetConfigurationGroupHeader
+            targetGroupName={targetGroupName}
+            targetsNumber={targetsNumber}
           />
-        </header>
-        <section className="rounded-md border border-slate-200 p-2 dark:border-slate-700/60">
-          {children}
-        </section>
+          <div className="rounded-md border border-slate-200 p-2 dark:border-slate-700">
+            {children}
+          </div>
+        </div>
       </div>
     );
   }
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx
new file mode 100644
index 00000000000000..cfe521c41d5167
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details-group-header/target-configuration-details-group-header.tsx
@@ -0,0 +1,25 @@
+import { Pill } from '../pill';
+
+export interface TargetConfigurationGroupHeaderProps {
+  targetGroupName: string;
+  targetsNumber: number;
+  className?: string;
+}
+
+export const TargetConfigurationGroupHeader = ({
+  targetGroupName,
+  targetsNumber,
+  className = '',
+}: TargetConfigurationGroupHeaderProps) => {
+  return (
+    <header className={`p-2 text-lg ${className}`}>
+      {targetGroupName}{' '}
+      <Pill
+        text={
+          targetsNumber.toString() +
+          (targetsNumber === 1 ? ' target' : ' targets')
+        }
+      />
+    </header>
+  );
+};
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx
new file mode 100644
index 00000000000000..05c5a40af31d1d
--- /dev/null
+++ b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.stories.tsx
@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  TargetConfigurationGroupList,
+  TargetConfigurationGroupListProps,
+} from './target-configuration-details-group-list';
+import { StoreDecorator } from '@nx/graph/state';
+
+const meta: Meta<typeof TargetConfigurationGroupList> = {
+  component: TargetConfigurationGroupList,
+  title: 'TargetConfigurationGroupList',
+  decorators: [StoreDecorator],
+};
+export default meta;
+
+type Story = StoryObj<typeof TargetConfigurationGroupList>;
+
+export const OneTarget: Story = {
+  args: {
+    project: {
+      name: 'react',
+      type: 'lib',
+      data: {
+        root: 'libs/react',
+        targets: {
+          build: {
+            executor: 'nx',
+            options: {},
+            configurations: {
+              production: {
+                executor: 'nx',
+                options: {},
+              },
+            },
+          },
+          lint: {
+            executor: 'nx',
+            options: {},
+          },
+        },
+      },
+    },
+    sourceMap: {
+      react: ['react'],
+    },
+    variant: 'default',
+    onRunTarget: () => {},
+    onViewInTaskGraph: () => {},
+    selectedTargetGroup: 'build',
+    setExpandTargets: () => {},
+    collapseAllTargets: () => {},
+  } as TargetConfigurationGroupListProps,
+};
+
+export const TwoTargets: Story = {
+  args: {
+    project: {
+      name: 'react',
+      type: 'lib',
+      data: {
+        root: 'libs/react',
+        targets: {
+          build1: {
+            executor: 'nx',
+            options: {},
+            configurations: {
+              production: {
+                executor: 'nx',
+                options: {},
+              },
+            },
+          },
+          build2: {
+            executor: 'nx',
+            options: {},
+          },
+        },
+        metadata: {
+          targetGroups: {
+            build: ['build1', 'build2'],
+          },
+        },
+      },
+    },
+    sourceMap: {
+      react: ['react'],
+    },
+    variant: 'default',
+    onRunTarget: () => {},
+    onViewInTaskGraph: () => {},
+    selectedTargetGroup: 'build',
+    setExpandTargets: () => {},
+    collapseAllTargets: () => {},
+  } as TargetConfigurationGroupListProps,
+};
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx
index 5fc9ea5288f83e..bb65e59ea6b37e 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details-group-list/target-configuration-details-group-list.tsx
@@ -4,9 +4,8 @@ import type { ProjectGraphProjectNode } from '@nx/devkit';
 import { TargetConfigurationDetailsListItem } from '../target-configuration-details-list-item/target-configuration-details-list-item';
 import { TargetConfigurationGroupContainer } from '../target-configuration-details-group-container/target-configuration-details-group-container';
 import { RefObject, createRef, useEffect, useRef, useState } from 'react';
-import { TargetConfigurationDetailsHeader } from '../target-configuration-details-header/target-configuration-details-header';
 import { Transition } from '@headlessui/react';
-import { Pill } from '../pill';
+import { TargetConfigurationGroupHeader } from '../target-configuration-details-group-header/target-configuration-details-group-header';
 
 export interface TargetConfigurationGroupListProps {
   project: ProjectGraphProjectNode;
@@ -18,7 +17,6 @@ export interface TargetConfigurationGroupListProps {
     targetName: string;
   }) => void;
   className?: string;
-  isCompact?: boolean;
 }
 
 export function TargetConfigurationGroupList({
@@ -27,11 +25,9 @@ export function TargetConfigurationGroupList({
   sourceMap,
   onRunTarget,
   onViewInTaskGraph,
-  className,
-  isCompact,
+  className = '',
 }: TargetConfigurationGroupListProps) {
   const [stickyHeaderContent, setStickHeaderContent] = useState('');
-  const [stickyTargetName, setStickyTargetName] = useState('');
   const targetGroupRefs = useRef(
     Object.keys(project.data.metadata?.targetGroups ?? {}).reduce(
       (acc, targetGroupName) => {
@@ -56,7 +52,7 @@ export function TargetConfigurationGroupList({
   }, []);
 
   const isSticky = () => {
-    const scrollTop = window.scrollY + 20;
+    const scrollTop = window.scrollY + 30; // 30px for the header
     const foundTargetGroup: string | undefined = Object.keys(
       targetGroupRefs.current
     ).find((targetGroupName) => {
@@ -77,28 +73,6 @@ export function TargetConfigurationGroupList({
     } else {
       setStickHeaderContent('');
     }
-
-    if (!targetNameRefs.current) return;
-
-    const foundTargetName: string | undefined = Object.keys(
-      targetNameRefs.current
-    ).find((targetName) => {
-      const target = targetNameRefs.current[targetName];
-      if (
-        target &&
-        target.current &&
-        scrollTop >= target.current.offsetTop &&
-        scrollTop < target.current.offsetTop + target.current.offsetHeight
-      ) {
-        return true;
-      }
-      return false;
-    });
-    if (foundTargetName) {
-      setStickyTargetName(foundTargetName);
-    } else {
-      setStickyTargetName('');
-    }
   };
 
   return (
@@ -112,33 +86,28 @@ export function TargetConfigurationGroupList({
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
       >
-        <div className="duration-100000 fixed top-0 left-0 right-0 z-10 bg-slate-50 text-lg ease-in dark:bg-slate-800">
-          <div className="mx-auto max-w-6xl flex-grow px-8 pt-2">
-            <header className="border-b-2 pb-2">
-              {stickyHeaderContent}{' '}
-              <Pill
-                text={
-                  Object.values(
-                    project.data.metadata?.targetGroups?.[
-                      stickyHeaderContent
-                    ] ?? {}
-                  ).length.toString() + ' Targets'
-                }
-              />
-            </header>
+        <div className="fixed top-0 left-0 right-0 z-10 mb-8 border-b-2 border-slate-900/10 bg-slate-50 dark:border-slate-300/10 dark:bg-slate-800 dark:text-slate-300">
+          <div className="mx-auto max-w-6xl px-8 pt-2">
+            <TargetConfigurationGroupHeader
+              targetGroupName={stickyHeaderContent}
+              targetsNumber={
+                project.data.metadata?.targetGroups?.[stickyHeaderContent]
+                  ?.length ?? 0
+              }
+            />
           </div>
         </div>
       </Transition>
 
-      <ul className={className}>
-        {Object.entries(project.data.metadata?.targetGroups ?? {}).map(
-          ([targetGroupName, targets], index) => {
-            return (
-              <TargetConfigurationGroupContainer
-                ref={targetGroupRefs.current[targetGroupName]}
-                targetGroupName={targetGroupName}
-                targetsNumber={targets.length}
-              >
+      {Object.entries(project.data.metadata?.targetGroups ?? {}).map(
+        ([targetGroupName, targets], index) => {
+          return (
+            <TargetConfigurationGroupContainer
+              ref={targetGroupRefs.current[targetGroupName]}
+              targetGroupName={targetGroupName}
+              targetsNumber={targets.length}
+            >
+              <ul className={className}>
                 {targets.map((targetName) => (
                   <TargetConfigurationDetailsListItem
                     ref={targetNameRefs.current[targetName]}
@@ -151,10 +120,12 @@ export function TargetConfigurationGroupList({
                     collapsable={true}
                   />
                 ))}
-              </TargetConfigurationGroupContainer>
-            );
-          }
-        )}
+              </ul>
+            </TargetConfigurationGroupContainer>
+          );
+        }
+      )}
+      <ul className={`mt-8 ${className}`}>
         {Object.keys(project.data.targets ?? {}).map((targetName) => {
           if (
             !project.data.metadata?.targetGroups ||
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx b/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx
index 4379c253997d6b..d214fe0bcdaea1 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx
@@ -29,6 +29,7 @@ export interface TargetConfigurationDetailsHeaderProps {
     projectName: string;
     targetName: string;
   }) => void;
+  technologies?: string[];
 }
 
 export const TargetConfigurationDetailsHeader = ({
@@ -42,6 +43,7 @@ export const TargetConfigurationDetailsHeader = ({
   sourceMap,
   onRunTarget,
   onViewInTaskGraph,
+  technologies,
 }: TargetConfigurationDetailsHeaderProps) => {
   const handleCopyClick = async (copyText: string) => {
     await window.navigator.clipboard.writeText(copyText);
@@ -77,11 +79,11 @@ export const TargetConfigurationDetailsHeader = ({
             ) : (
               <ChevronUpIcon className="h-3 w-3" />
             ))}
+          <h3 className="font-medium dark:text-slate-300">{targetName}</h3>
           <TargetTechnologies
-            technologies={targetConfiguration.metadata?.technologies}
+            technologies={technologies}
             showTooltip={!isCollasped}
           />
-          <h3 className="font-medium dark:text-slate-300">{targetName}</h3>
           {isCollasped &&
             targetConfiguration?.executor !== '@nx/js:release-publish' && (
               <p className="text-sm text-slate-400">
@@ -148,16 +150,14 @@ export const TargetConfigurationDetailsHeader = ({
         </div>
       </div>
       {!isCollasped && (
-        <div className="mt-2 ml-5 flex items-center text-sm">
-          <span className="flex min-w-0 flex-1 items-center">
-            <SourceInfo
-              data={sourceMap[`targets.${targetName}`]}
-              propertyKey={`targets.${targetName}`}
-              color="text-gray-500 dark:text-slate-400"
-            />
-          </span>
+        <div className="mt-2 ml-5 text-sm">
+          <SourceInfo
+            data={sourceMap[`targets.${targetName}`]}
+            propertyKey={`targets.${targetName}`}
+            color="text-gray-500 dark:text-slate-400"
+          />
           {targetName !== 'nx-release-publish' && (
-            <div className="flex items-center gap-2">
+            <div className="text-right">
               <code className="ml-4 rounded bg-gray-100 px-2 py-1 font-mono text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                 nx run {projectName}:{targetName}
               </code>
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.stories.tsx b/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.stories.tsx
index 4bdf0ab800b1e1..4df1ce5bfec538 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.stories.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.stories.tsx
@@ -3,10 +3,12 @@ import {
   TargetConfigurationDetailsListItem,
   TargetConfigurationDetailsListItemProps,
 } from './target-configuration-details-list-item';
+import { StoreDecorator } from '@nx/graph/state';
 
 const meta: Meta<typeof TargetConfigurationDetailsListItem> = {
   component: TargetConfigurationDetailsListItem,
   title: 'TargetConfigurationDetailsListItem',
+  decorators: [StoreDecorator],
 };
 export default meta;
 
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.tsx b/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.tsx
index 1c657de7558643..48a233cc11f8fc 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details-list-item/target-configuration-details-list-item.tsx
@@ -45,6 +45,9 @@ export const TargetConfigurationDetailsListItem = forwardRef(
           onRunTarget={onRunTarget}
           onViewInTaskGraph={onViewInTaskGraph}
           collapsable={collapsable}
+          technologies={
+            target.metadata?.technologies ?? project.data.metadata?.technologies
+          }
         />
       </li>
     );
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.state.ts b/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.state.ts
index 7be9c071e4804a..2e4ed592be2c02 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.state.ts
+++ b/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.state.ts
@@ -1,16 +1,9 @@
 /* eslint-disable @nx/enforce-module-boundaries */
 // nx-ignore-next-line
-import {
-  AppDispatch,
-  RootState,
-  getSelectedTarget,
-  expandTargetActions,
-} from '@nx/graph/state';
+import { AppDispatch, RootState, expandTargetActions } from '@nx/graph/state';
 
 const mapStateToProps = (state: RootState) => {
-  return {
-    selectedTarget: getSelectedTarget(state),
-  };
+  return {};
 };
 
 const mapDispatchToProps = (dispatch: AppDispatch) => {
diff --git a/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.tsx b/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.tsx
index 8d0972db0fadcb..456bb3218a9e1b 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details-list/target-configuration-details-list.tsx
@@ -2,16 +2,12 @@ import { connect } from 'react-redux';
 /* eslint-disable @nx/enforce-module-boundaries */
 // nx-ignore-next-line
 import type { ProjectGraphProjectNode } from '@nx/devkit';
-import TargetConfigurationDetails from '../target-configuration-details/target-configuration-details';
 import {
   mapDispatchToProps,
   mapDispatchToPropsType,
   mapStateToProps,
   mapStateToPropsType,
 } from './target-configuration-details-list.state';
-import { useEffect } from 'react';
-import { groupTargets } from '../utils/group-targets';
-import { TargetConfigurationDetailsListItem } from '../target-configuration-details-list-item/target-configuration-details-list-item';
 import { TargetConfigurationGroupList } from '../target-configuration-details-group-list/target-configuration-details-group-list';
 
 export type TargetConfigurationDetailsListProps = mapStateToPropsType &
@@ -34,22 +30,7 @@ export function TargetConfigurationDetailsListComponent({
   onRunTarget,
   onViewInTaskGraph,
   className,
-  selectedTarget,
 }: TargetConfigurationDetailsListProps) {
-  if (selectedTarget) {
-    return (
-      <TargetConfigurationDetailsListItem
-        project={project}
-        sourceMap={sourceMap}
-        variant={variant}
-        onRunTarget={onRunTarget}
-        onViewInTaskGraph={onViewInTaskGraph}
-        targetName={selectedTarget}
-        collapsable={false}
-      />
-    );
-  }
-
   return (
     <TargetConfigurationGroupList
       project={project}
diff --git a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
index 3b79415dcfe9d0..7f611ff5b21a7c 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx
@@ -40,6 +40,7 @@ type TargetConfigurationDetailsProps = mapStateToPropsType &
       targetName: string;
     }) => void;
     collapsable: boolean;
+    technologies?: string[];
   };
 
 export const TargetConfigurationDetailsComponent = ({
@@ -53,6 +54,7 @@ export const TargetConfigurationDetailsComponent = ({
   expandedTargets,
   toggleExpandTarget,
   collapsable,
+  technologies,
 }: TargetConfigurationDetailsProps) => {
   const isCompact = variant === 'compact';
   const [collapsed, setCollapsed] = useState(true);
@@ -132,6 +134,7 @@ export const TargetConfigurationDetailsComponent = ({
         sourceMap={sourceMap}
         onRunTarget={onRunTarget}
         onViewInTaskGraph={onViewInTaskGraph}
+        technologies={technologies}
       />
       {/* body */}
       {!collapsed && (
@@ -216,7 +219,7 @@ export const TargetConfigurationDetailsComponent = ({
                     >
                       <TargetConfigurationProperty data={input}>
                         {sourceInfo && (
-                          <span className="shrink-1 inline flex min-w-0 pl-4 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
+                          <span className="inline flex min-w-0 pl-4 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
                             <SourceInfo
                               data={sourceInfo}
                               propertyKey={`targets.${targetName}.inputs`}
@@ -266,7 +269,7 @@ export const TargetConfigurationDetailsComponent = ({
                     >
                       <TargetConfigurationProperty data={output}>
                         {sourceInfo && (
-                          <span className="shrink-1 inline flex min-w-0 pl-4 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
+                          <span className="inline flex min-w-0 pl-4 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
                             <SourceInfo
                               data={sourceInfo}
                               propertyKey={`targets.${targetName}.outputs`}
@@ -316,7 +319,7 @@ export const TargetConfigurationDetailsComponent = ({
                       key={`dependsOn-${idx}`}
                     >
                       <TargetConfigurationProperty data={dep}>
-                        <span className="shrink-1 inline flex min-w-0 pl-4 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
+                        <span className="inline flex min-w-0 pl-4 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
                           {sourceInfo && (
                             <SourceInfo
                               data={sourceInfo}
@@ -354,7 +357,7 @@ export const TargetConfigurationDetailsComponent = ({
                         `targets.${targetName}.options.${propertyName}`
                       );
                       return sourceInfo ? (
-                        <span className="shrink-1 flex min-w-0 pl-4">
+                        <span className="flex min-w-0 pl-4">
                           <SourceInfo
                             data={sourceInfo}
                             propertyKey={`targets.${targetName}.options.${propertyName}`}
@@ -402,7 +405,7 @@ export const TargetConfigurationDetailsComponent = ({
                       `targets.${targetName}.configurations.${propertyName}`
                     );
                     return sourceInfo ? (
-                      <span className="shrink-1 flex min-w-0 pl-4">
+                      <span className="flex min-w-0 pl-4">
                         <SourceInfo
                           data={sourceInfo}
                           propertyKey={`targets.${targetName}.configurations.${propertyName}`}
diff --git a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-property.tsx b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-property.tsx
index 01afc5be9e81e1..ce3b3e5ae5c4a5 100644
--- a/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-property.tsx
+++ b/graph/ui-project-details/src/lib/target-configuration-details/target-configuration-property.tsx
@@ -11,7 +11,7 @@ export function TargetConfigurationProperty({
 }: RenderPropertyProps): JSX.Element | null {
   if (typeof data === 'string') {
     return (
-      <span className="font-mono flex shrink-1 text-sm">
+      <span className="flex font-mono text-sm">
         {data}
         {children}
       </span>
@@ -20,7 +20,7 @@ export function TargetConfigurationProperty({
     return (
       <ul>
         {data.map((item, index) => (
-          <li key={index} className="font-mono flex shrink-1 text-sm">
+          <li key={index} className="flex font-mono text-sm">
             {String(item)}
             {children}
           </li>
@@ -31,7 +31,7 @@ export function TargetConfigurationProperty({
     return (
       <ul>
         {Object.entries(data).map(([key, value], index) => (
-          <li key={index} className="font-mono flex shrink-1 text-sm">
+          <li key={index} className="flex font-mono text-sm">
             <strong>{key}</strong>: {String(value)}
             {children}
           </li>
diff --git a/graph/ui-project-details/src/lib/target-group/target-group.stories.tsx b/graph/ui-project-details/src/lib/target-group/target-group.stories.tsx
deleted file mode 100644
index 95e03ed56af0f6..00000000000000
--- a/graph/ui-project-details/src/lib/target-group/target-group.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { TargetGroup, TargetGroupProps } from './target-group';
-
-const meta: Meta<typeof TargetGroup> = {
-  component: TargetGroup,
-  title: 'TargetGroup',
-};
-export default meta;
-
-type Story = StoryObj<typeof TargetGroup>;
-
-export const Simple: Story = {
-  args: {
-    name: 'react',
-    selected: false,
-    isCompact: false,
-    onClick: () => {},
-  },
-};
-
-export const Compact: Story = {
-  args: {
-    name: 'react',
-    selected: false,
-    isCompact: true,
-    onClick: () => {},
-  } as TargetGroupProps,
-};
diff --git a/graph/ui-project-details/src/lib/target-group/target-group.tsx b/graph/ui-project-details/src/lib/target-group/target-group.tsx
deleted file mode 100644
index c61531778694cc..00000000000000
--- a/graph/ui-project-details/src/lib/target-group/target-group.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { ChevronRightIcon } from '@heroicons/react/24/outline';
-import { twMerge } from 'tailwind-merge';
-import { TargetTechnologies } from '../target-technologies/target-technologies';
-
-export interface TargetGroupProps {
-  name: string;
-  selected: boolean;
-  isCompact: boolean;
-  onClick: (name: string) => void;
-  technologies?: string[];
-}
-
-export function TargetGroup({
-  selected,
-  name,
-  onClick,
-  isCompact,
-  technologies,
-}: TargetGroupProps) {
-  return (
-    <li
-      role="menuitem"
-      className={twMerge(
-        `group relative cursor-pointer overflow-hidden hover:bg-slate-50 dark:hover:bg-slate-800/60`,
-        isCompact ? 'px-2 py-1' : 'p-2',
-        selected
-          ? 'bg-slate-50 dark:border-slate-700/60 dark:border-slate-300/10 dark:bg-slate-800'
-          : ''
-      )}
-      onClick={() => onClick(name)}
-    >
-      <div className="flex items-center justify-between gap-2">
-        <h3 className="flex items-center justify-between gap-2 font-medium dark:text-slate-300">
-          <TargetTechnologies technologies={technologies} showTooltip={false} />
-          {name}
-        </h3>
-        <ChevronRightIcon className="h-3 w-3" />
-      </div>
-    </li>
-  );
-}
diff --git a/graph/ui-project-details/src/lib/target-groups/target-groups.state.ts b/graph/ui-project-details/src/lib/target-groups/target-groups.state.ts
deleted file mode 100644
index 2fe31327f92cfc..00000000000000
--- a/graph/ui-project-details/src/lib/target-groups/target-groups.state.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import {
-  AppDispatch,
-  RootState,
-  selectTargetActions,
-  getSelectedTarget,
-} from '@nx/graph/state';
-
-const mapStateToProps = (state: RootState) => {
-  return {
-    selectedTargetGroup: getSelectedTarget(state),
-  };
-};
-
-const mapDispatchToProps = (dispatch: AppDispatch) => {
-  return {
-    selectTargetGroup(targetGroup: string) {
-      dispatch(selectTargetActions.selectTarget(targetGroup));
-    },
-  };
-};
-
-type mapStateToPropsType = ReturnType<typeof mapStateToProps>;
-type mapDispatchToPropsType = ReturnType<typeof mapDispatchToProps>;
-
-export {
-  mapStateToProps,
-  mapDispatchToProps,
-  mapStateToPropsType,
-  mapDispatchToPropsType,
-};
diff --git a/graph/ui-project-details/src/lib/target-groups/target-groups.stories.tsx b/graph/ui-project-details/src/lib/target-groups/target-groups.stories.tsx
deleted file mode 100644
index 7d3d45ee62e35b..00000000000000
--- a/graph/ui-project-details/src/lib/target-groups/target-groups.stories.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { TargetGroupsComponent, TargetGroupsProps } from './target-groups';
-
-const meta: Meta<typeof TargetGroupsComponent> = {
-  component: TargetGroupsComponent,
-  title: 'TargetGroupsComponent',
-};
-export default meta;
-
-type Story = StoryObj<typeof TargetGroupsComponent>;
-
-export const BuildBaseSelected: Story = {
-  args: {
-    project: {
-      name: 'jest',
-      type: 'lib',
-      data: {
-        root: 'packages/jest',
-        name: 'jest',
-        targets: {
-          'nx-release-publish': {
-            dependsOn: ['^nx-release-publish'],
-            executor: '@nx/js:release-publish',
-            options: { packageRoot: 'build/packages/jest' },
-            configurations: {},
-          },
-          test: {
-            dependsOn: ['test-native', 'build-native', '^build-native'],
-            inputs: [
-              'default',
-              '^production',
-              '{workspaceRoot}/jest.preset.js',
-            ],
-            executor: '@nx/jest:jest',
-            outputs: ['{workspaceRoot}/coverage/{projectRoot}'],
-            cache: true,
-            options: {
-              jestConfig: 'packages/jest/jest.config.ts',
-              passWithNoTests: true,
-            },
-            configurations: {},
-          },
-          'build-base': {
-            dependsOn: ['^build-base', 'build-native'],
-            inputs: ['production', '^production'],
-            executor: '@nx/js:tsc',
-            outputs: ['{options.outputPath}'],
-            cache: true,
-            options: {
-              outputPath: 'build/packages/jest',
-              tsConfig: 'packages/jest/tsconfig.lib.json',
-              main: 'packages/jest/index.ts',
-              assets: [
-                {
-                  input: 'packages/jest',
-                  glob: '**/@(files|files-angular)/**',
-                  output: '/',
-                },
-                {
-                  input: 'packages/jest',
-                  glob: '**/files/**/.gitkeep',
-                  output: '/',
-                },
-              ],
-            },
-            configurations: {},
-          },
-        },
-      },
-    },
-    selectedTargetGroup: 'build-base',
-    selectTargetGroup(targetGroup) {
-      console.log(targetGroup);
-    },
-  } as TargetGroupsProps,
-};
-
-export const TestSelected: Story = {
-  args: {
-    project: {
-      name: 'jest',
-      type: 'lib',
-      data: {
-        root: 'packages/jest',
-        name: 'jest',
-        targets: {
-          'nx-release-publish': {
-            dependsOn: ['^nx-release-publish'],
-            executor: '@nx/js:release-publish',
-            options: { packageRoot: 'build/packages/jest' },
-            configurations: {},
-          },
-          test: {
-            dependsOn: ['test-native', 'build-native', '^build-native'],
-            inputs: [
-              'default',
-              '^production',
-              '{workspaceRoot}/jest.preset.js',
-            ],
-            executor: '@nx/jest:jest',
-            outputs: ['{workspaceRoot}/coverage/{projectRoot}'],
-            cache: true,
-            options: {
-              jestConfig: 'packages/jest/jest.config.ts',
-              passWithNoTests: true,
-            },
-            configurations: {},
-          },
-          'build-base': {
-            dependsOn: ['^build-base', 'build-native'],
-            inputs: ['production', '^production'],
-            executor: '@nx/js:tsc',
-            outputs: ['{options.outputPath}'],
-            cache: true,
-            options: {
-              outputPath: 'build/packages/jest',
-              tsConfig: 'packages/jest/tsconfig.lib.json',
-              main: 'packages/jest/index.ts',
-              assets: [
-                {
-                  input: 'packages/jest',
-                  glob: '**/@(files|files-angular)/**',
-                  output: '/',
-                },
-                {
-                  input: 'packages/jest',
-                  glob: '**/files/**/.gitkeep',
-                  output: '/',
-                },
-              ],
-            },
-            configurations: {},
-          },
-        },
-      },
-    },
-    selectedTargetGroup: 'test',
-    selectTargetGroup(targetGroup) {
-      console.log(targetGroup);
-    },
-  } as TargetGroupsProps,
-};
diff --git a/graph/ui-project-details/src/lib/target-groups/target-groups.tsx b/graph/ui-project-details/src/lib/target-groups/target-groups.tsx
deleted file mode 100644
index 15377c4bc17073..00000000000000
--- a/graph/ui-project-details/src/lib/target-groups/target-groups.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-/* eslint-disable @nx/enforce-module-boundaries */
-// nx-ignore-next-line
-import type { ProjectGraphProjectNode } from '@nx/devkit';
-import { Fragment, useEffect, useState } from 'react';
-import { Listbox, Transition } from '@headlessui/react';
-import { TargetGroup } from '../target-group/target-group';
-import { groupTargets } from '../utils/group-targets';
-import {
-  mapDispatchToProps,
-  mapDispatchToPropsType,
-  mapStateToProps,
-  mapStateToPropsType,
-} from './target-groups.state';
-import { connect } from 'react-redux';
-import { ChevronUpDownIcon, CheckIcon } from '@heroicons/react/24/outline';
-
-export type TargetGroupsProps = mapStateToPropsType &
-  mapDispatchToPropsType & {
-    className?: string;
-    project: ProjectGraphProjectNode;
-    variant?: 'default' | 'compact';
-  };
-
-export function TargetGroupsComponent({
-  className,
-  project,
-  variant,
-  selectedTargetGroup,
-  selectTargetGroup,
-}: TargetGroupsProps) {
-  const [targetGroups, setTargetGroups] = useState<Record<string, string[]>>(
-    {}
-  );
-  const isCompact = variant === 'compact';
-
-  useEffect(() => {
-    const groups = groupTargets(project);
-    setTargetGroups(groups);
-  }, [project]);
-
-  if (!targetGroups || !Object.keys(targetGroups).length) {
-    return null;
-  }
-
-  return (
-    <>
-      <div className="z-10 block w-full md:hidden">
-        <TargetGroupsInSelectBox
-          targetGroupNames={Object.keys(targetGroups)}
-          selectTargetGroup={selectTargetGroup}
-          selectedTargetGroup={selectedTargetGroup}
-        />
-      </div>
-      <ul
-        className={`hidden divide-y divide-slate-200 rounded-md border border-slate-200 dark:divide-slate-700/60 dark:border-slate-700/60 md:block ${className}`}
-      >
-        {Object.keys(targetGroups).map((targetGroup) => {
-          return (
-            <TargetGroup
-              key={targetGroup}
-              name={targetGroup}
-              isCompact={isCompact}
-              selected={selectedTargetGroup === targetGroup}
-              onClick={() => selectTargetGroup(targetGroup)}
-              technologies={project.data.metadata?.technologies}
-            />
-          );
-        })}
-      </ul>
-    </>
-  );
-}
-
-// example from https://headlessui.com/react/listbox
-export function TargetGroupsInSelectBox({
-  targetGroupNames,
-  selectedTargetGroup,
-  selectTargetGroup,
-}: {
-  targetGroupNames: string[];
-  selectedTargetGroup: string;
-  selectTargetGroup: (name: string) => void;
-}) {
-  return (
-    <Listbox value={selectedTargetGroup} onChange={selectTargetGroup}>
-      <div className="relative rounded-md border border-slate-200 bg-slate-50 dark:border-slate-700/60 dark:bg-slate-800">
-        <Listbox.Button className="relative w-full cursor-default rounded-lg py-2 pl-3 pr-10 text-left font-medium text-slate-600 shadow-sm dark:text-slate-300">
-          <span className="block truncate">{selectedTargetGroup}</span>
-          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-            <ChevronUpDownIcon className="h-5 w-5" aria-hidden="true" />
-          </span>
-        </Listbox.Button>
-        <Transition
-          as={Fragment}
-          leave="transition ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base text-slate-500 shadow-lg dark:bg-slate-900 dark:text-slate-400">
-            {targetGroupNames.map((targetGroupName, index) => (
-              <Listbox.Option
-                key={index}
-                className={({ active }) =>
-                  `relative cursor-default select-none py-2 pl-10 pr-4 ${
-                    active
-                      ? 'bg-slate-50 dark:border-slate-700/60 dark:border-slate-300/10 dark:bg-slate-800'
-                      : 'text-slate-500 dark:text-slate-400 '
-                  }`
-                }
-                value={targetGroupName}
-              >
-                {({ selected }) => (
-                  <>
-                    <span
-                      className={`block truncate ${
-                        selected ? 'font-medium' : 'font-normal'
-                      }`}
-                    >
-                      {targetGroupName}
-                    </span>
-                    {selected ? (
-                      <span className="absolute inset-y-0 left-0 flex items-center pl-3">
-                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                      </span>
-                    ) : null}
-                  </>
-                )}
-              </Listbox.Option>
-            ))}
-          </Listbox.Options>
-        </Transition>
-      </div>
-    </Listbox>
-  );
-}
-
-export const TargetGroups = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(TargetGroupsComponent);
-export default TargetGroups;
diff --git a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
index 58b2aef0019015..db6f9d2fe83612 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
@@ -4,7 +4,7 @@ import {
   DocumentIcon,
   PlayCircleIcon,
 } from '@heroicons/react/24/outline';
-import { frameworkIcons } from '@nx/graph/ui-icons';
+import { Framework, frameworkIcons } from '@nx/graph/ui-icons';
 
 import { cx } from '@nx/nx-dev/ui-primitives';
 import { ReactNode } from 'react';
@@ -127,7 +127,7 @@ export function LinkCard({
             }
           )}
         >
-          {icon && frameworkIcons[icon]?.image}
+          {icon && frameworkIcons[icon as Framework]?.image}
         </div>
       )}
       <div className={cx('pt-4', { 'pt-2': appearance === 'small' })}>
diff --git a/packages/gradle/src/plugin/nodes.ts b/packages/gradle/src/plugin/nodes.ts
index 113ab6829a315b..b2d8bd24f07525 100644
--- a/packages/gradle/src/plugin/nodes.ts
+++ b/packages/gradle/src/plugin/nodes.ts
@@ -41,7 +41,7 @@ export const calculatedTargets: Record<
   {
     name: string;
     targets: Record<string, TargetConfiguration>;
-    targetGroups: Record<string, string[]>;
+    metadata: ProjectConfiguration['metadata'];
   }
 > = {};
 
@@ -50,7 +50,7 @@ function readTargetsCache(): Record<
   {
     name: string;
     targets: Record<string, TargetConfiguration>;
-    targetGroups: Record<string, string[]>;
+    metadata: ProjectConfiguration['metadata'];
   }
 > {
   return readJsonFile(cachePath);
@@ -62,7 +62,7 @@ export function writeTargetsToCache(
     {
       name: string;
       targets: Record<string, TargetConfiguration>;
-      targetGroups: Record<string, string[]>;
+      metadata: ProjectConfiguration['metadata'];
     }
   >
 ) {
@@ -87,12 +87,7 @@ export const createNodes: CreateNodes<GradlePluginOptions> = [
       calculatedTargets[hash] = targetsCache[hash];
       return {
         projects: {
-          [projectRoot]: {
-            ...targetsCache[hash],
-            metadata: {
-              technologies: ['gradle'],
-            },
-          },
+          [projectRoot]: targetsCache[hash],
         },
       };
     }
@@ -139,7 +134,10 @@ export const createNodes: CreateNodes<GradlePluginOptions> = [
       calculatedTargets[hash] = {
         name: projectName,
         targets,
-        targetGroups,
+        metadata: {
+          targetGroups,
+          technologies: ['gradle'],
+        },
       };
 
       const project: Omit<ProjectConfiguration, 'root'> = {