diff --git a/public/locales/en.json b/public/locales/en.json
index 532dc667..1000af79 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -272,6 +272,7 @@
     "atLeastOneUser": "You need to have at least one member assigned."
   },
   "common": {
+    "documentation": "Documentation",
     "close": "Close",
     "cannotLoadData": "Cannot load data",
     "metadata": "Metadata",
@@ -281,7 +282,10 @@
     "region": "Region",
     "success": "Success",
     "displayName": "Display Name",
-    "name": "Name"
+    "name": "Name",
+    "componentSelection": "Component Selection",
+    "search": "Search",
+    "components": "Components"
   },
   "buttons": {
     "viewResource": "View resource",
@@ -300,5 +304,10 @@
     "dialogTitle": "Create Managed Control Plane",
     "titleText": "Managed Control Plane Created Successfully!",
     "subtitleText": "Your Managed Control Plane is being set up. It will be ready to use in just a few minutes. You can safely close this window."
+  },
+  "componentsSelection": {
+    "selectComponents": "Select Components",
+    "selectedComponents": "Selected Components",
+    "pleaseSelectComponents": "Choose the components you want to add to your Managed Control Plane."
   }
 }
diff --git a/src/components/ComponentsSelection/ComponentsSelection.module.css b/src/components/ComponentsSelection/ComponentsSelection.module.css
new file mode 100644
index 00000000..f8b7ecbf
--- /dev/null
+++ b/src/components/ComponentsSelection/ComponentsSelection.module.css
@@ -0,0 +1,5 @@
+.row {
+  padding: 1rem;
+  background: var(--sapBackgroundColor);
+  border-bottom: 1px solid var(--sapList_BorderColor);
+}
diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx
new file mode 100644
index 00000000..1abf0d67
--- /dev/null
+++ b/src/components/ComponentsSelection/ComponentsSelection.tsx
@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import {
+  CheckBox,
+  Select,
+  Option,
+  FlexBox,
+  Title,
+  Text,
+  Input,
+  Button,
+  Grid,
+  List,
+  ListItemStandard,
+  Icon,
+  Ui5CustomEvent,
+  CheckBoxDomRef,
+  SelectDomRef,
+  InputDomRef,
+} from '@ui5/webcomponents-react';
+import styles from './ComponentsSelection.module.css';
+import { Infobox } from '../Ui/Infobox/Infobox.tsx';
+import { useTranslation } from 'react-i18next';
+import { ComponentSelectionItem } from '../../lib/api/types/crate/createManagedControlPlane.ts';
+
+export interface ComponentsSelectionProps {
+  components: ComponentSelectionItem[];
+  setSelectedComponents: React.Dispatch<
+    React.SetStateAction<ComponentSelectionItem[]>
+  >;
+}
+
+export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
+  components,
+  setSelectedComponents,
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const { t } = useTranslation();
+  const handleSelectionChange = (
+    e: Ui5CustomEvent<CheckBoxDomRef, { checked: boolean }>,
+  ) => {
+    const id = e.target?.id;
+    setSelectedComponents((prev) =>
+      prev.map((component) =>
+        component.name === id
+          ? { ...component, isSelected: !component.isSelected }
+          : component,
+      ),
+    );
+  };
+
+  const handleSearch = (e: Ui5CustomEvent<InputDomRef, never>) => {
+    setSearchTerm(e.target.value.trim());
+  };
+
+  const handleVersionChange = (
+    e: Ui5CustomEvent<SelectDomRef, { selectedOption: HTMLElement }>,
+  ) => {
+    const selectedOption = e.detail.selectedOption as HTMLElement;
+    const name = selectedOption.dataset.name;
+    const version = selectedOption.dataset.version;
+    setSelectedComponents((prev) =>
+      prev.map((component) =>
+        component.name === name
+          ? { ...component, selectedVersion: version || '' }
+          : component,
+      ),
+    );
+  };
+
+  const filteredComponents = components.filter(({ name }) =>
+    name.includes(searchTerm),
+  );
+  const selectedComponents = components.filter(
+    (component) => component.isSelected,
+  );
+
+  return (
+    <div>
+      <Title>{t('componentsSelection.selectComponents')}</Title>
+
+      <Input
+        placeholder={t('common.search')}
+        id="search"
+        showClearIcon
+        icon={<Icon name="search" />}
+        onInput={handleSearch}
+      />
+
+      <Grid>
+        <div data-layout-span="XL8 L8 M8 S8">
+          {filteredComponents.map((component) => (
+            <FlexBox
+              key={component.name}
+              className={styles.row}
+              gap={10}
+              justifyContent="SpaceBetween"
+            >
+              <CheckBox
+                valueState="None"
+                text={component.name}
+                id={component.name}
+                checked={component.isSelected}
+                onChange={handleSelectionChange}
+              />
+              <FlexBox
+                gap={10}
+                justifyContent="SpaceBetween"
+                alignItems="Baseline"
+              >
+                {/*This button will be implemented later*/}
+                {component.documentationUrl && (
+                  <Button design="Transparent">
+                    {t('common.documentation')}
+                  </Button>
+                )}
+                <Select
+                  value={component.selectedVersion}
+                  onChange={handleVersionChange}
+                >
+                  {component.versions.map((version) => (
+                    <Option
+                      key={version}
+                      data-version={version}
+                      data-name={component.name}
+                      selected={component.selectedVersion === version}
+                    >
+                      {version}
+                    </Option>
+                  ))}
+                </Select>
+              </FlexBox>
+            </FlexBox>
+          ))}
+        </div>
+        <div data-layout-span="XL4 L4 M4 S4">
+          {selectedComponents.length > 0 ? (
+            <List headerText={t('componentsSelection.selectedComponents')}>
+              {selectedComponents.map((component) => (
+                <ListItemStandard
+                  key={component.name}
+                  text={component.name}
+                  additionalText={component.selectedVersion}
+                />
+              ))}
+            </List>
+          ) : (
+            <Infobox fullWidth variant={'success'}>
+              <Text>{t('componentsSelection.pleaseSelectComponents')}</Text>
+            </Infobox>
+          )}
+        </div>
+      </Grid>
+    </div>
+  );
+};
diff --git a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
new file mode 100644
index 00000000..d489578e
--- /dev/null
+++ b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { ComponentsSelection } from './ComponentsSelection.tsx';
+
+import IllustratedError from '../Shared/IllustratedError.tsx';
+import { sortVersions } from '../../utils/componentsVersions.ts';
+
+import { ListManagedComponents } from '../../lib/api/types/crate/listManagedComponents.ts';
+import useApiResource from '../../lib/api/useApiResource.ts';
+import Loading from '../Shared/Loading.tsx';
+import { ComponentSelectionItem } from '../../lib/api/types/crate/createManagedControlPlane.ts';
+
+export interface ComponentItem {
+  name: string;
+  versions: string[];
+}
+
+export interface ComponentsSelectionProps {
+  selectedComponents: ComponentSelectionItem[];
+  setSelectedComponents: React.Dispatch<
+    React.SetStateAction<ComponentSelectionItem[]>
+  >;
+}
+export const ComponentsSelectionContainer: React.FC<
+  ComponentsSelectionProps
+> = ({ setSelectedComponents, selectedComponents }) => {
+  const {
+    data: allManagedComponents,
+    error,
+    isLoading,
+  } = useApiResource(ListManagedComponents());
+  const [isReady, setIsReady] = useState(false);
+  useEffect(() => {
+    if (
+      allManagedComponents?.items.length === 0 ||
+      !allManagedComponents?.items ||
+      isReady
+    )
+      return;
+
+    setSelectedComponents(
+      allManagedComponents?.items?.map((item) => {
+        const versions = sortVersions(item.status.versions);
+        return {
+          name: item.metadata.name,
+          versions: versions,
+          selectedVersion: versions[0],
+          isSelected: false,
+          documentationUrl: '',
+        };
+      }) ?? [],
+    );
+    setIsReady(true);
+  }, [allManagedComponents, isReady, setSelectedComponents]);
+  if (isLoading) {
+    return <Loading />;
+  }
+  if (error) return <IllustratedError />;
+  return (
+    <>
+      {selectedComponents.length > 0 ? (
+        <ComponentsSelection
+          components={selectedComponents}
+          setSelectedComponents={setSelectedComponents}
+        />
+      ) : (
+        <IllustratedError title={'Cannot load components list'} />
+      )}
+    </>
+  );
+};
diff --git a/src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx b/src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx
index a0ee6c31..92a2b0ca 100644
--- a/src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx
+++ b/src/components/ControlPlanes/List/ControlPlaneListAllWorkspaces.tsx
@@ -48,7 +48,7 @@ export default function ControlPlaneListAllWorkspaces({ projectName }: Props) {
               window.open(workspaceCreationGuide, '_blank');
             }}
           >
-            Help
+            {t('IllustratedBanner.helpButton')}
           </Button>
         </FlexBox>
       ) : (
diff --git a/src/components/Members/MemberRoleSelect.tsx b/src/components/Members/MemberRoleSelect.tsx
index a170d227..a64c3151 100644
--- a/src/components/Members/MemberRoleSelect.tsx
+++ b/src/components/Members/MemberRoleSelect.tsx
@@ -12,6 +12,7 @@ import {
 } from '@ui5/webcomponents-react';
 import { SelectChangeEventDetail } from '@ui5/webcomponents/dist/Select.js';
 import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 interface MemberRoleSelectProps {
   value: MemberRoles;
@@ -36,10 +37,12 @@ export function MemberRoleSelect({
       return;
     }
   }, [value]);
-
+  const { t } = useTranslation();
   return (
     <FlexBox direction={'Column'}>
-      <Label for={'member-role-select'}>Role</Label>
+      <Label for={'member-role-select'}>
+        {t('MemberTable.columnRoleHeader')}
+      </Label>
       <Select
         ref={ref}
         id="member-role-select"
diff --git a/src/components/Ui/Infobox/Infobox.module.css b/src/components/Ui/Infobox/Infobox.module.css
index ee3c043c..d07ee287 100644
--- a/src/components/Ui/Infobox/Infobox.module.css
+++ b/src/components/Ui/Infobox/Infobox.module.css
@@ -4,6 +4,11 @@
   margin: 1rem 0;
 }
 
+.full-width {
+  display: block;
+  margin: 0;
+}
+
 .size-sm {
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
diff --git a/src/components/Ui/Infobox/Infobox.tsx b/src/components/Ui/Infobox/Infobox.tsx
index 842754c5..132e6e36 100644
--- a/src/components/Ui/Infobox/Infobox.tsx
+++ b/src/components/Ui/Infobox/Infobox.tsx
@@ -8,6 +8,7 @@ interface LabelProps {
   size?: 'sm' | 'md' | 'lg';
   variant?: 'normal' | 'success' | 'warning' | 'danger';
   children: ReactNode;
+  fullWidth?: boolean;
   className?: string;
 }
 
@@ -16,6 +17,7 @@ export const Infobox: React.FC<LabelProps> = ({
   size = 'md', // Default to medium size
   variant = 'normal', // Default to normal variant
   children,
+  fullWidth = false,
   className,
 }) => {
   const infoboxClasses = cx(
@@ -28,6 +30,7 @@ export const Infobox: React.FC<LabelProps> = ({
       [styles['variant-success']]: variant === 'success',
       [styles['variant-warning']]: variant === 'warning',
       [styles['variant-danger']]: variant === 'danger',
+      [styles['full-width']]: fullWidth,
     },
     className,
   );
diff --git a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx
index 5090fae2..f1c17d89 100644
--- a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx
+++ b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx
@@ -17,6 +17,7 @@ import {
   Grid,
   List,
   ListItemStandard,
+  Title,
   Ui5CustomEvent,
   Wizard,
   WizardDomRef,
@@ -26,6 +27,7 @@ import YamlViewer from '../Yaml/YamlViewer.tsx';
 import { stringify } from 'yaml';
 import { APIError } from '../../lib/api/error.ts';
 import {
+  ComponentSelectionItem,
   CreateManagedControlPlane,
   CreateManagedControlPlaneResource,
   CreateManagedControlPlaneType,
@@ -36,6 +38,8 @@ import { EditMembers } from '../Members/EditMembers.tsx';
 import { useTranslation } from 'react-i18next';
 import { MetadataForm } from '../Dialogs/MetadataForm.tsx';
 import { IllustratedBanner } from '../Ui/IllustratedBanner/IllustratedBanner.tsx';
+import { ComponentsSelectionContainer } from '../ComponentsSelection/ComponentsSelectionContainer.tsx';
+import { idpPrefix } from '../../utils/idpPrefix.ts';
 
 export type CreateDialogProps = {
   name: string;
@@ -51,11 +55,17 @@ type CreateManagedControlPlaneWizardContainerProps = {
   workspaceName?: string;
 };
 
-type WizardStepType = 'metadata' | 'members' | 'summarize' | 'success';
+type WizardStepType =
+  | 'metadata'
+  | 'members'
+  | 'componentSelection'
+  | 'summarize'
+  | 'success';
 
 const wizardStepOrder: WizardStepType[] = [
   'metadata',
   'members',
+  'componentSelection',
   'summarize',
   'success',
 ];
@@ -68,7 +78,9 @@ export const CreateManagedControlPlaneWizardContainer: FC<
   const errorDialogRef = useRef<ErrorDialogHandle>(null);
 
   const [selectedStep, setSelectedStep] = useState<WizardStepType>('metadata');
-
+  const [selectedComponents, setSelectedComponents] = useState<
+    ComponentSelectionItem[]
+  >([]);
   const {
     register,
     handleSubmit,
@@ -93,6 +105,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<
     () => ({
       metadata: t('buttons.next'),
       members: t('buttons.next'),
+      componentSelection: t('buttons.next'),
       summarize: t('buttons.create'),
       success: t('buttons.close'),
     }),
@@ -142,7 +155,9 @@ export const CreateManagedControlPlaneWizardContainer: FC<
               displayName,
               chargingTarget,
               members,
+              selectedComponents,
             },
+            idpPrefix,
           ),
         );
         setSelectedStep('success');
@@ -158,7 +173,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<
         return false;
       }
     },
-    [trigger, projectName, workspaceName],
+    [trigger, projectName, workspaceName, selectedComponents],
   );
 
   const handleStepChange = useCallback(
@@ -175,6 +190,9 @@ export const CreateManagedControlPlaneWizardContainer: FC<
         handleSubmit(() => setSelectedStep('members'))();
         break;
       case 'members':
+        setSelectedStep('componentSelection');
+        break;
+      case 'componentSelection':
         setSelectedStep('summarize');
         break;
       case 'summarize':
@@ -209,12 +227,19 @@ export const CreateManagedControlPlaneWizardContainer: FC<
           return false;
         case 'members':
           return selectedStep === 'metadata' || !isValid;
+        case 'componentSelection':
+          return (
+            selectedStep === 'metadata' ||
+            selectedStep === 'members' ||
+            !isValid
+          );
         case 'summarize':
           return (
             selectedStep === 'metadata' ||
             selectedStep === 'members' ||
             !isValid
           );
+
         case 'success':
           return selectedStep !== 'success';
         default:
@@ -231,7 +256,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<
     }
   }, [selectedStep]);
 
-  return (
+  return isOpen ? (
     <Dialog
       stretch
       headerText={t('createMCP.dialogTitle') || 'Create Managed Control Plane'}
@@ -272,6 +297,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<
           <MetadataForm register={register} errors={errors} />
         </WizardStep>
         <WizardStep
+          icon={'user-edit'}
           titleText={t('common.members')}
           selected={selectedStep === 'members'}
           data-step="members"
@@ -290,6 +316,18 @@ export const CreateManagedControlPlaneWizardContainer: FC<
             </FormGroup>
           </Form>
         </WizardStep>
+        <WizardStep
+          icon={'add-product'}
+          titleText={t('common.componentSelection')}
+          selected={selectedStep === 'componentSelection'}
+          data-step="componentSelection"
+          disabled={isStepDisabled('componentSelection')}
+        >
+          <ComponentsSelectionContainer
+            selectedComponents={selectedComponents}
+            setSelectedComponents={setSelectedComponents}
+          />
+        </WizardStep>
         <WizardStep
           icon="activities"
           titleText={t('common.summarize')}
@@ -297,7 +335,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<
           selected={selectedStep === 'summarize'}
           data-step="summarize"
         >
-          <h1>{t('common.summarize')}</h1>
+          <Title>{t('common.summarize')}</Title>
           <Grid defaultSpan="XL6 L6 M6 S6">
             <div>
               <List headerText={t('common.metadata')}>
@@ -324,10 +362,22 @@ export const CreateManagedControlPlaneWizardContainer: FC<
                   <ListItemStandard
                     key={member.name}
                     text={member.name}
-                    additionalText={member.kind}
+                    additionalText={member.roles[0]}
                   />
                 ))}
               </List>
+              <br />
+              <List headerText={t('common.components')}>
+                {selectedComponents
+                  .filter(({ isSelected }) => isSelected)
+                  .map((component) => (
+                    <ListItemStandard
+                      key={component.name}
+                      text={component.name}
+                      additionalText={component.selectedVersion}
+                    />
+                  ))}
+              </List>
             </div>
             <div>
               <YamlViewer
@@ -339,7 +389,9 @@ export const CreateManagedControlPlaneWizardContainer: FC<
                       displayName: getValues('displayName'),
                       chargingTarget: getValues('chargingTarget'),
                       members: getValues('members'),
+                      selectedComponents: selectedComponents,
                     },
+                    idpPrefix,
                   ),
                 )}
                 filename={`mcp_${projectName}--ws-${workspaceName}`}
@@ -362,5 +414,5 @@ export const CreateManagedControlPlaneWizardContainer: FC<
         </WizardStep>
       </Wizard>
     </Dialog>
-  );
+  ) : null;
 };
diff --git a/src/lib/api/types/crate/createControlPlane.ts b/src/lib/api/types/crate/createControlPlane.ts
deleted file mode 100644
index 366727a0..00000000
--- a/src/lib/api/types/crate/createControlPlane.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { fetchApiServer } from '../../fetch';
-import { ApiConfig } from '../apiConfig';
-
-export async function createControlPlane(
-  projectName: string,
-  workspaceName: string,
-  controlPlaneName: string,
-  apiConfig: ApiConfig,
-) {
-  return await fetchApiServer(
-    `/apis/core.openmcp.cloud/v1alpha1/namespaces/project-${projectName}--ws-${workspaceName}/managedcontrolplanes`,
-    apiConfig,
-    undefined,
-    'POST',
-    JSON.stringify({
-      apiVersion: 'core.openmcp.cloud/v1alpha1',
-      kind: 'ControlPlane',
-      metadata: {
-        name: controlPlaneName,
-      },
-      spec: {
-        dataplane: {
-          type: 'Gardener',
-          gardener: {
-            region: 'eu-west-1',
-          },
-        },
-        crossplane: {
-          enabled: false,
-          version: '1.14.0',
-        },
-      },
-    }),
-  );
-}
diff --git a/src/lib/api/types/crate/createManagedControlPlane.ts b/src/lib/api/types/crate/createManagedControlPlane.ts
index dd0cb8dd..88c245bb 100644
--- a/src/lib/api/types/crate/createManagedControlPlane.ts
+++ b/src/lib/api/types/crate/createManagedControlPlane.ts
@@ -8,6 +8,39 @@ import { Member } from '../shared/members';
 export type Annotations = Record<string, string>;
 export type Labels = Record<string, string>;
 
+export interface ComponentSelectionItem {
+  name: string;
+  versions: string[];
+  isSelected: boolean;
+  selectedVersion: string;
+  documentationUrl: string;
+}
+
+interface RoleBinding {
+  role: string;
+  subjects: Subject[];
+}
+interface Subject {
+  kind: 'User' | 'Group' | 'ServiceAccount';
+  name: string;
+}
+interface Spec {
+  authentication: {
+    enableSystemIdentityProvider: boolean;
+  };
+  authorization: {
+    roleBindings: RoleBinding[];
+  };
+  components: Components;
+}
+interface Components {
+  [key: string]:
+    | {
+        version: string;
+      }
+    | { type: 'GardenerDedicated' };
+}
+
 export interface CreateManagedControlPlaneType {
   apiVersion: string;
   kind: string;
@@ -17,9 +50,7 @@ export interface CreateManagedControlPlaneType {
     annotations: Annotations;
     labels: Labels;
   };
-  spec: {
-    members: Member[];
-  };
+  spec: Spec;
 }
 
 export const CreateManagedControlPlane = (
@@ -29,8 +60,18 @@ export const CreateManagedControlPlane = (
     displayName?: string;
     chargingTarget?: string;
     members?: Member[];
+    selectedComponents?: ComponentSelectionItem[];
   },
+  idpPrefix?: string,
 ): CreateManagedControlPlaneType => {
+  const componentsObject: Components =
+    optional?.selectedComponents
+      ?.filter((component) => component.isSelected)
+      .reduce((acc, item) => {
+        acc[item.name] = { version: item.selectedVersion };
+        return acc;
+      }, {} as Components) ?? {};
+
   return {
     apiVersion: 'core.openmcp.cloud/v1alpha1',
     kind: 'ManagedControlPlane',
@@ -45,11 +86,26 @@ export const CreateManagedControlPlane = (
       },
     },
     spec: {
-      members: optional?.members ?? [],
+      authentication: { enableSystemIdentityProvider: true },
+      components: {
+        ...componentsObject,
+        apiServer: { type: 'GardenerDedicated' },
+      },
+      authorization: {
+        roleBindings:
+          optional?.members?.map((member) => ({
+            role: member.roles[0],
+            subjects: [
+              {
+                kind: 'User',
+                name: idpPrefix ? `${idpPrefix}:${member.name}` : member.name,
+              },
+            ],
+          })) ?? [],
+      },
     },
   };
 };
-
 export const CreateManagedControlPlaneResource = (
   projectName: string,
   workspaceName: string,
diff --git a/src/lib/api/types/crate/listManagedComponents.ts b/src/lib/api/types/crate/listManagedComponents.ts
new file mode 100644
index 00000000..1f715ab0
--- /dev/null
+++ b/src/lib/api/types/crate/listManagedComponents.ts
@@ -0,0 +1,55 @@
+import { Resource } from '../resource';
+
+interface ManagedComponentList {
+  apiVersion: string;
+  kind: string;
+  items: ManagedComponent[];
+  metadata: ListMetadata;
+}
+
+interface ListMetadata {
+  continue: string;
+  resourceVersion: string;
+}
+
+interface ManagedComponent {
+  apiVersion: string;
+  kind: string;
+  metadata: ManagedComponentMetadata;
+  spec: Record<string, unknown>;
+  status: ManagedComponentStatus;
+}
+
+interface ManagedComponentMetadata {
+  creationTimestamp: string;
+  generation: number;
+  managedFields: ManagedField[];
+  name: string;
+  resourceVersion: string;
+  uid: string;
+}
+
+interface ManagedField {
+  apiVersion: string;
+  fieldsType: string;
+  fieldsV1: FieldsV1;
+  manager: string;
+  operation: string;
+  time: string;
+  subresource?: string;
+}
+
+interface FieldsV1 {
+  [key: string]: never;
+}
+
+interface ManagedComponentStatus {
+  versions: string[];
+}
+
+export const ListManagedComponents = (): Resource<ManagedComponentList> => {
+  return {
+    path: `/apis/core.openmcp.cloud/v1alpha1/managedcomponents`,
+    jq: undefined,
+  };
+};
diff --git a/src/utils/componentsVersions.spec.ts b/src/utils/componentsVersions.spec.ts
new file mode 100644
index 00000000..fed9047c
--- /dev/null
+++ b/src/utils/componentsVersions.spec.ts
@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+import { sortVersions } from './componentsVersions.ts';
+
+describe('sortVersions', () => {
+  it('sorts versions in descending order (latest first)', () => {
+    const input = ['1.2.3', '2.0.0', '1.10.0', '1.2.10', '1.2.2'];
+    const expected = ['2.0.0', '1.10.0', '1.2.10', '1.2.3', '1.2.2'];
+    expect(sortVersions(input)).toEqual(expected);
+  });
+
+  it('handles versions with single digit and double digit numbers', () => {
+    const input = ['1.2.3', '1.2.10', '1.2.2'];
+    const expected = ['1.2.10', '1.2.3', '1.2.2'];
+    expect(sortVersions(input)).toEqual(expected);
+  });
+
+  it('handles versions with different major, minor, and patch numbers', () => {
+    const input = ['0.9.9', '1.0.0', '0.10.0', '0.9.10'];
+    const expected = ['1.0.0', '0.10.0', '0.9.10', '0.9.9'];
+    expect(sortVersions(input)).toEqual(expected);
+  });
+
+  it('does not mutate the original array', () => {
+    const input = ['1.2.3', '2.0.0', '1.2.2'];
+    const copy = [...input];
+    sortVersions(input);
+    expect(input).toEqual(copy);
+  });
+
+  it('falls back to string comparison for invalid version formats', () => {
+    const input = ['1.2.3', 'foo', '2.0.0', '1.2', 'bar', '1.2.10'];
+    const expected = ['foo', 'bar', '2.0.0', '1.2.10', '1.2.3', '1.2'];
+    expect(sortVersions(input)).toEqual(expected);
+  });
+
+  it('handles all invalid version strings', () => {
+    const input = ['foo', 'bar', 'baz'];
+    const expected = ['foo', 'baz', 'bar'];
+    expect(sortVersions(input)).toEqual(expected);
+  });
+
+  it('handles empty array', () => {
+    expect(sortVersions([])).toEqual([]);
+  });
+
+  it('handles array with one version', () => {
+    expect(sortVersions(['1.2.3'])).toEqual(['1.2.3']);
+  });
+
+  it('handles versions with non-numeric parts', () => {
+    const input = ['1.2.3', '1.2.x', '1.2.10'];
+    const expected = ['1.2.x', '1.2.10', '1.2.3'];
+    expect(sortVersions(input)).toEqual(expected);
+  });
+});
diff --git a/src/utils/componentsVersions.ts b/src/utils/componentsVersions.ts
new file mode 100644
index 00000000..7d1b147a
--- /dev/null
+++ b/src/utils/componentsVersions.ts
@@ -0,0 +1,26 @@
+// Function to sort version strings by major, minor, patch (latest version first)
+export const sortVersions = (versions: string[]): string[] => {
+  return versions.slice().sort((a, b) => {
+    const parse = (v: string) => {
+      const parts = v.split('.');
+      // Fallback: if not 3 parts or not all numbers, treat as string
+      if (parts.length !== 3 || parts.some((p) => isNaN(Number(p)))) {
+        return null;
+      }
+      return parts.map(Number);
+    };
+    const aParts = parse(a);
+    const bParts = parse(b);
+
+    // If either version is not in the expected format, fallback to string comparison (reverse order)
+    if (!aParts || !bParts) {
+      return b.localeCompare(a);
+    }
+
+    const [aMajor, aMinor, aPatch] = aParts;
+    const [bMajor, bMinor, bPatch] = bParts;
+    if (aMajor !== bMajor) return bMajor - aMajor;
+    if (aMinor !== bMinor) return bMinor - aMinor;
+    return bPatch - aPatch;
+  });
+};
diff --git a/src/utils/idpPrefix.ts b/src/utils/idpPrefix.ts
new file mode 100644
index 00000000..23e5c13f
--- /dev/null
+++ b/src/utils/idpPrefix.ts
@@ -0,0 +1 @@
+export const idpPrefix = 'openmcp';