diff --git a/public/locales/en.json b/public/locales/en.json
index da3857bc..e8523012 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -143,7 +143,9 @@
   },
   "MemberTable": {
     "columnEmailHeader": "Email",
-    "columnRoleHeader": "Role"
+    "columnRoleHeader": "Role",
+    "columnTypeHeader": "Type",
+    "columnNamespaceHeader": "Namespace"
   },
   "IllustratedError": {
     "titleText": "Something went wrong",
@@ -163,7 +165,12 @@
     "membersHeader": "Members"
   },
   "EditMembers": {
-    "addButton": "Add"
+    "addButton": "Add new member or service account",
+    "editHeader": "Edit member or service account",
+    "addHeader": "Add new member or service account",
+    "saveButton": "Save changes",
+    "defaultNamespaceInfo": "Leave empty to use <span>default</span> namespace",
+    "serviceAccoutsGuide": "You can also use our <link1>Service Account Guide</link1> for more information."
   },
   "ProjectsPage": {
     "header": "Your instances of <span>ManagedControlPlane</span>",
@@ -303,7 +310,7 @@
     "properFormatting": "Use A-Z, a-z, 0-9, hyphen (-), and period (.), but note that whitespace (spaces, tabs, etc.) is not allowed for proper compatibility.",
     "properFormattingLowercase": "Use lowercase a-z, 0-9, hyphen (-), and period (.), but note that whitespace (spaces, tabs, etc.) is not allowed for proper compatibility.",
     "maxChars": "Max length is {{maxLength}} characters.",
-    "userExists": "User with this email already exists!",
+    "userExists": "User with this name already exists!",
     "atLeastOneUser": "You need to have at least one member assigned.",
     "notValidChargingTargetFormat": "Use lowercase letters a-f, numbers 0-9, and hyphens (-) in the format: aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa"
   },
@@ -343,7 +350,8 @@
     "next": "Next",
     "create": "Create",
     "close": "Close",
-    "back": "Back"
+    "back": "Back",
+    "cancel": "Cancel"
   },
   "yaml": {
     "copiedToClipboard": "YAML copied to clipboard!",
diff --git a/src/components/Dialogs/CreateProjectDialog.cy.tsx b/src/components/Dialogs/CreateProjectDialog.cy.tsx
deleted file mode 100644
index 4bd70c99..00000000
--- a/src/components/Dialogs/CreateProjectDialog.cy.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import React, { useState, useRef, useMemo } from 'react';
-import { CreateProjectWorkspaceDialog, OnCreatePayload } from './CreateProjectWorkspaceDialog';
-import { MemberRoles } from '../../lib/api/types/shared/members';
-import { ErrorDialogHandle } from '../Shared/ErrorMessageBox';
-
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { createProjectWorkspaceSchema } from '../../lib/api/validations/schemas.ts';
-import { CreateDialogProps } from './CreateWorkspaceDialogContainer.tsx';
-import { useTranslation } from 'react-i18next';
-
-export const CreateProjectWorkspaceDialogWrapper: React.FC<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  spyFormBody?: (data: any) => object;
-}> = ({ spyFormBody }) => {
-  const [isOpen, setIsOpen] = useState(true);
-  const { t } = useTranslation();
-
-  const errorDialogRef = useRef<ErrorDialogHandle>(null);
-
-  const validationSchemaProjectWorkspace = useMemo(() => createProjectWorkspaceSchema(t), [t]);
-
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    formState: { errors },
-    watch,
-  } = useForm<CreateDialogProps>({
-    resolver: zodResolver(validationSchemaProjectWorkspace),
-    defaultValues: {
-      name: '',
-      displayName: '',
-      chargingTarget: '',
-      members: [{ name: 'user1@example.com', roles: [MemberRoles.admin], kind: 'User' }],
-      chargingTargetType: 'btp',
-    },
-  });
-
-  const handleCreate = async ({ name, displayName, chargingTarget, members }: OnCreatePayload) => {
-    const payload: OnCreatePayload = {
-      name: name,
-      displayName: displayName,
-      chargingTarget: chargingTarget,
-      members: members,
-    };
-
-    spyFormBody?.(payload);
-    setIsOpen(false);
-  };
-  return (
-    <CreateProjectWorkspaceDialog
-      watch={watch}
-      type={'workspace'}
-      isOpen={isOpen}
-      setIsOpen={setIsOpen}
-      titleText="Create Workspace"
-      errorDialogRef={errorDialogRef}
-      members={watch('members')}
-      register={register}
-      errors={errors}
-      setValue={setValue}
-      onCreate={handleSubmit(handleCreate)}
-    />
-  );
-};
-
-describe('CreateProjectWorkspaceDialog', () => {
-  it('checks if there is existing member and delete it', () => {
-    cy.mount(<CreateProjectWorkspaceDialogWrapper />, {});
-    cy.get('div[data-component-name="AnalyticalTableContainerWithScrollbar"]')
-      .contains('user1@example.com')
-      .should('be.visible');
-    cy.get('ui5-button[icon="delete"]').find('button').click({ force: true });
-    cy.get('span[id="members-error"]').contains('You need to have at least one member assigned.').should('be.visible');
-  });
-
-  it('should add a new member and display it in the table', () => {
-    cy.mount(<CreateProjectWorkspaceDialogWrapper />, {});
-    cy.get('ui5-input[id*="member-email-input"]').find('input[id*="inner"]').type('user2@example.com', { force: true });
-    cy.get('ui5-button:contains("Add")').click({ force: true });
-    cy.get('div[data-component-name="AnalyticalTableContainerWithScrollbar"]')
-      .contains('user2@example.com')
-      .should('be.visible');
-  });
-
-  it('fills the form, adds user and checks if the request body is correct', () => {
-    const stubFn = cy.stub().as('stubFn');
-    cy.mount(<CreateProjectWorkspaceDialogWrapper spyFormBody={stubFn} />, {});
-
-    cy.get('ui5-input[id*="name"]').find('input[id*="inner"]').type('brand--01', { force: true });
-    cy.get('ui5-input[id*="displayName"]')
-      .find('input[id*="inner"]')
-      .type('Brand new workspace number one', { force: true });
-    cy.get('ui5-input[id*="chargingTarget"]')
-      .find('input[id*="inner"]')
-      .type('aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa', { force: true });
-    cy.get('ui5-input[id*="email"]').find('input[id*="inner"]').type('user2@example.com', { force: true });
-    cy.get('ui5-button:contains("Add")').click({ force: true });
-    cy.get('ui5-button:contains("Create")').click({ force: true });
-
-    cy.get('@stubFn').should('have.been.calledWith', {
-      name: 'brand--01',
-      displayName: 'Brand new workspace number one',
-      chargingTarget: 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa',
-      members: [
-        {
-          name: 'user1@example.com',
-          roles: [MemberRoles.admin],
-          kind: 'User',
-        },
-        {
-          name: 'user2@example.com',
-          roles: [MemberRoles.viewer],
-          kind: 'User',
-        },
-      ],
-    });
-  });
-
-  it('should handle multiple member additions', () => {
-    cy.mount(<CreateProjectWorkspaceDialogWrapper />, {});
-
-    const newMembers = ['user3@example.com', 'user4@example.com'];
-    newMembers.forEach((email) => {
-      cy.get('ui5-input[id*="member-email-input"]')
-        .find('input[id*="inner"]')
-        .clear({ force: true })
-        .type(email, { force: true });
-      cy.get('ui5-button:contains("Add")').click({ force: true });
-    });
-
-    newMembers.forEach((email) => {
-      cy.get('div[data-component-name="AnalyticalTableContainerWithScrollbar"]').contains(email).should('be.visible');
-    });
-  });
-
-  it('should close dialog when cancel is clicked', () => {
-    cy.mount(<CreateProjectWorkspaceDialogWrapper />, {});
-
-    cy.get('ui5-dialog').should('be.visible');
-    cy.get('ui5-button:contains("Cancel")').click({ force: true });
-    cy.get('ui5-dialog').should('not.be.visible');
-  });
-});
diff --git a/src/components/Dialogs/CreateProjectDialogContainer.tsx b/src/components/Dialogs/CreateProjectDialogContainer.tsx
index 11eb95f4..8e4abed5 100644
--- a/src/components/Dialogs/CreateProjectDialogContainer.tsx
+++ b/src/components/Dialogs/CreateProjectDialogContainer.tsx
@@ -53,7 +53,7 @@ export function CreateProjectDialogContainer({
 
   useEffect(() => {
     if (username) {
-      setValue('members', [{ name: username, roles: [MemberRoles.admin], kind: 'User' }]);
+      setValue('members', [{ name: username, role: MemberRoles.admin, kind: 'User' }]);
     }
     if (!isOpen) {
       clearForm();
diff --git a/src/components/Dialogs/CreateWorkspaceDialogContainer.tsx b/src/components/Dialogs/CreateWorkspaceDialogContainer.tsx
index bca3b319..adfa1264 100644
--- a/src/components/Dialogs/CreateWorkspaceDialogContainer.tsx
+++ b/src/components/Dialogs/CreateWorkspaceDialogContainer.tsx
@@ -68,7 +68,7 @@ export function CreateWorkspaceDialogContainer({
 
   useEffect(() => {
     if (username) {
-      setValue('members', [{ name: username, roles: [MemberRoles.admin], kind: 'User' }]);
+      setValue('members', [{ name: username, role: MemberRoles.admin, kind: 'User' }]);
     }
     if (!isOpen) {
       clearForm();
diff --git a/src/components/Members/AddEditMemberDialog.tsx b/src/components/Members/AddEditMemberDialog.tsx
new file mode 100644
index 00000000..2d577f40
--- /dev/null
+++ b/src/components/Members/AddEditMemberDialog.tsx
@@ -0,0 +1,212 @@
+import { FC, useEffect, useMemo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Member, MemberRoles, memberRolesOptions } from '../../lib/api/types/shared/members.ts';
+import { Button, Dialog, FlexBox, Input, Label, Link, MessageStrip } from '@ui5/webcomponents-react';
+import styles from './Members.module.css';
+import { RadioButtonsSelect } from '../Ui/RadioButtonsSelect/RadioButtonsSelect.tsx';
+import FadeVisibility from '../Ui/FadeVisibility/FadeVisibility.tsx';
+import { ACCOUNT_TYPES, AccountType } from './EditMembers.tsx';
+import { useLink } from '../../lib/shared/useLink.ts';
+
+interface AddEditMemberDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (member: Member, isEdit: boolean) => void;
+  existingMembers: Member[];
+  memberToEdit?: Member;
+}
+
+type MemberFormData = {
+  accountType: AccountType;
+  name: string;
+  role: string;
+  namespace?: string;
+};
+
+export const AddEditMemberDialog: FC<AddEditMemberDialogProps> = ({
+  open,
+  onClose,
+  onSave,
+  existingMembers,
+  memberToEdit,
+}) => {
+  const { t } = useTranslation();
+  const isEdit = !!memberToEdit;
+  const { serviceAccoutsGuide } = useLink();
+  const memberFormSchema = useMemo(
+    () =>
+      z
+        .object({
+          accountType: z.enum(['User', 'ServiceAccount']),
+          name: z.string(),
+          role: z.string(),
+          namespace: z.string().optional(),
+        })
+        .superRefine((data, ctx) => {
+          const trimmed = data.name.trim();
+          if (!trimmed) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              path: ['name'],
+              message: t('validationErrors.required'),
+            });
+          }
+          if (existingMembers.some((m) => m.name === trimmed && (!memberToEdit || trimmed !== memberToEdit.name))) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              path: ['name'],
+              message: t('validationErrors.userExists'),
+            });
+          }
+        }),
+    [t, existingMembers, memberToEdit],
+  );
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    reset,
+    formState: { errors },
+  } = useForm<MemberFormData>({
+    resolver: zodResolver(memberFormSchema),
+    mode: 'onChange',
+    defaultValues: {
+      accountType: 'User',
+      name: '',
+      role: MemberRoles.view,
+      namespace: '',
+    },
+  });
+
+  const accountType = watch('accountType');
+  const role = watch('role');
+
+  useEffect(() => {
+    if (open) {
+      if (memberToEdit) {
+        reset({
+          name: memberToEdit.name,
+          role: memberToEdit.role || MemberRoles.view,
+          accountType: memberToEdit.kind === 'User' ? 'User' : 'ServiceAccount',
+          namespace: memberToEdit?.namespace || '',
+        });
+      } else {
+        reset({
+          accountType: 'User',
+          name: '',
+          role: MemberRoles.view,
+          namespace: '',
+        });
+      }
+    }
+  }, [open, memberToEdit, reset]);
+
+  const onFormSubmit = (data: MemberFormData) => {
+    const trimmedName = data.name.trim();
+
+    const newMember: Member = {
+      name: trimmedName,
+      role: data.role,
+      kind: data.accountType,
+      ...(data.accountType === 'ServiceAccount' && data.namespace && { namespace: data.namespace }),
+    };
+
+    onSave(newMember, isEdit);
+    onClose();
+  };
+
+  const dialogHeader = memberToEdit ? t('EditMembers.editHeader') : t('EditMembers.addHeader') || 'Add member';
+
+  return (
+    <Dialog open={open} headerText={dialogHeader}>
+      <div className={styles.container}>
+        <FlexBox alignItems={'Baseline'} direction={'Column'} className={styles.wrapper}>
+          <FlexBox alignItems={'Baseline'} justifyContent={'SpaceBetween'}>
+            <RadioButtonsSelect
+              label={'Account type:'}
+              selectedValue={accountType}
+              options={ACCOUNT_TYPES}
+              handleOnClick={(value) => setValue('accountType', value as AccountType, { shouldValidate: true })}
+            />
+          </FlexBox>
+        </FlexBox>
+        <FlexBox direction="Column" alignItems="Stretch" className={styles.wrapper}>
+          <Label for="member-email-input">{t('common.name')}</Label>
+          <Input
+            className={styles.input}
+            id="member-email-input"
+            type={accountType === 'User' ? 'Email' : 'Text'}
+            {...register('name')}
+            valueState={errors.name ? 'Negative' : 'None'}
+            valueStateMessage={<span>{errors.name?.message}</span>}
+            data-testid="member-email-input"
+          />
+        </FlexBox>
+        <FlexBox alignItems="Stretch" direction={'Column'}>
+          <div className={styles.wrapper}>
+            <RadioButtonsSelect
+              selectedValue={role}
+              options={memberRolesOptions}
+              handleOnClick={(value) => setValue('role', value, { shouldValidate: true })}
+              label={t('MemberTable.columnRoleHeader')}
+            />
+          </div>
+
+          <div className={styles.placeholder}>
+            <FadeVisibility show={accountType === 'ServiceAccount'}>
+              <div>
+                <FlexBox direction="Column">
+                  <Label for="namespace-input">{t('common.namespace')}</Label>
+                  <Input
+                    type="Text"
+                    {...register('namespace')}
+                    className={styles.input}
+                    data-testid="namespace-input"
+                    id="namespace-input"
+                  />
+                </FlexBox>
+              </div>
+
+              <Label>
+                <Trans
+                  i18nKey="EditMembers.defaultNamespaceInfo"
+                  components={{ span: <span className="mono-font" /> }}
+                />
+              </Label>
+              <div>
+                <MessageStrip className={styles.info} design="Information" hideCloseButton={true}>
+                  <Trans
+                    i18nKey="EditMembers.serviceAccoutsGuide"
+                    components={{
+                      link1: <Link href={serviceAccoutsGuide} target="_blank" />,
+                    }}
+                  />
+                </MessageStrip>
+              </div>
+            </FadeVisibility>
+          </div>
+
+          <Button
+            className={styles.addButton}
+            data-testid="add-member-button"
+            design={'Emphasized'}
+            icon={'sap-icon://add-employee'}
+            onClick={() => {
+              handleSubmit(onFormSubmit)();
+            }}
+          >
+            {memberToEdit ? t('EditMembers.saveButton') : t('EditMembers.addButton')}
+          </Button>
+          <Button className={styles.wrapper} onClick={onClose}>
+            {t('buttons.cancel')}
+          </Button>
+        </FlexBox>
+      </div>
+    </Dialog>
+  );
+};
diff --git a/src/components/Members/EditMembers.cy.tsx b/src/components/Members/EditMembers.cy.tsx
deleted file mode 100644
index cb8e5648..00000000
--- a/src/components/Members/EditMembers.cy.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Member, MemberRoles } from '../../lib/api/types/shared/members';
-import { EditMembers } from './EditMembers.tsx';
-
-const email1 = 'test1@test.com';
-const email2 = 'test2@test.com';
-
-function mountContainer(members: Member[] = []) {
-  cy.mount(<EditMembers members={members} onMemberChanged={cy.spy().as('onChangeSpy')} />);
-}
-
-describe('<EditMembers />', () => {
-  it('Should create member with Viewer role', () => {
-    mountContainer();
-
-    cy.get('#member-email-input').typeIntoUi5Input(email1);
-    cy.get('[data-testid="add-member-button"]').click();
-    cy.get('@onChangeSpy').should('have.been.calledOnce');
-    cy.get('@onChangeSpy').should('have.been.calledWith', [
-      { name: email1, roles: [MemberRoles.viewer], kind: 'User' },
-    ]);
-  });
-
-  it('Should create member with Adminisitrator role', () => {
-    mountContainer();
-
-    cy.get('#member-email-input').typeIntoUi5Input(email2);
-    cy.get('#member-role-select').openDropDownByClick();
-    cy.get('#member-role-select  [value="admin"]').clickDropdownMenuItem({
-      force: true,
-    });
-    cy.get('[data-testid="add-member-button"]').click();
-    cy.get('@onChangeSpy').should('have.been.calledOnce');
-    cy.get('@onChangeSpy').should('have.been.calledWith', [{ name: email2, roles: [MemberRoles.admin], kind: 'User' }]);
-  });
-
-  it('Should remove selected member', () => {
-    mountContainer([
-      { name: email1, roles: [MemberRoles.admin], kind: 'User' },
-      { name: email2, roles: [MemberRoles.viewer], kind: 'User' },
-    ]);
-    cy.get('[aria-rowindex="1"] > [data-column-id-cell="."] > ui5-button').click();
-    cy.get('@onChangeSpy').should('have.been.calledOnce');
-    cy.get('@onChangeSpy').should('have.been.calledWith', [
-      { name: email2, roles: [MemberRoles.viewer], kind: 'User' },
-    ]);
-  });
-});
diff --git a/src/components/Members/EditMembers.tsx b/src/components/Members/EditMembers.tsx
index 4fa6f07c..4d1eeb3d 100644
--- a/src/components/Members/EditMembers.tsx
+++ b/src/components/Members/EditMembers.tsx
@@ -1,11 +1,12 @@
-import { FC, useRef, useState, useCallback } from 'react';
-import { Button, FlexBox, Input, InputDomRef, Label } from '@ui5/webcomponents-react';
+import { FC, useCallback, useState } from 'react';
+import { Button, FlexBox } from '@ui5/webcomponents-react';
 import { MemberTable } from './MemberTable.tsx';
-import { MemberRoleSelect } from './MemberRoleSelect.tsx';
-import { ValueState } from '../Shared/Ui5ValieState.tsx';
-import { Member, MemberRoles } from '../../lib/api/types/shared/members';
+import { Member } from '../../lib/api/types/shared/members';
 import { useTranslation } from 'react-i18next';
 import styles from './Members.module.css';
+import { RadioButtonsSelectOption } from '../Ui/RadioButtonsSelect/RadioButtonsSelect.tsx';
+import { AddEditMemberDialog } from './AddEditMemberDialog.tsx';
+
 export interface EditMembersProps {
   members: Member[];
   onMemberChanged: (members: Member[]) => void;
@@ -13,36 +14,23 @@ export interface EditMembersProps {
   requireAtLeastOneMember?: boolean;
 }
 
+export const ACCOUNT_TYPES: RadioButtonsSelectOption[] = [
+  { value: 'User', label: 'User Account', icon: 'employee' },
+  { value: 'ServiceAccount', label: 'Service Account', icon: 'machine' },
+];
+
+export type AccountType = 'User' | 'ServiceAccount';
+
 export const EditMembers: FC<EditMembersProps> = ({
   members,
   onMemberChanged,
   isValidationError = false,
   requireAtLeastOneMember = true,
 }) => {
-  const emailInputRef = useRef<InputDomRef>(null);
-  const [emailState, setEmailState] = useState<ValueState>('None');
-  const [emailMessage, setEmailMessage] = useState('');
-  const [selectedRole, setSelectedRole] = useState(MemberRoles.viewer);
   const { t } = useTranslation();
 
-  const handleAddMember = useCallback(() => {
-    setEmailState('None');
-    setEmailMessage('');
-    const input = emailInputRef.current;
-    const email = input?.value.trim() || '';
-    if (!email) {
-      setEmailState('Negative');
-      setEmailMessage(t('validationErrors.required'));
-      return;
-    }
-    if (members.some((m) => m.name === email)) {
-      setEmailState('Negative');
-      setEmailMessage(t('validationErrors.userExists'));
-      return;
-    }
-    onMemberChanged([...members, { name: email, roles: [selectedRole], kind: 'User' }]);
-    if (input) input.value = '';
-  }, [members, onMemberChanged, selectedRole, t]);
+  const [isMemberDialogOpen, setIsMemberDialogOpen] = useState(false);
+  const [memberToEdit, setMemberToEdit] = useState<Member | undefined>(undefined);
 
   const handleRemoveMember = useCallback(
     (email: string) => {
@@ -51,45 +39,66 @@ export const EditMembers: FC<EditMembersProps> = ({
     [members, onMemberChanged],
   );
 
-  const handleRoleChange = useCallback((role: MemberRoles) => {
-    setSelectedRole(role);
+  const handleOpenMemberFormDialog = useCallback(() => {
+    setMemberToEdit(undefined);
+    setIsMemberDialogOpen(true);
+  }, []);
+
+  const handleEditMember = useCallback((member: Member) => {
+    setMemberToEdit(member);
+    setIsMemberDialogOpen(true);
   }, []);
 
-  const handleEmailInputChange = useCallback(() => {
-    setEmailState('None');
-    setEmailMessage('');
+  const handleCloseMemberFormDialog = useCallback(() => {
+    setIsMemberDialogOpen(false);
   }, []);
 
+  const handleSaveMember = useCallback(
+    (member: Member, isEdit: boolean) => {
+      let updatedMembers: Member[];
+      if (isEdit) {
+        updatedMembers = members.map((m) =>
+          m.name === memberToEdit?.name
+            ? { ...member, namespace: member.kind === 'ServiceAccount' ? member.namespace?.trim() : undefined }
+            : m,
+        );
+      } else {
+        updatedMembers = [
+          ...members,
+          { ...member, namespace: member.kind === 'ServiceAccount' ? member.namespace?.trim() : undefined },
+        ];
+      }
+      onMemberChanged(updatedMembers);
+      setIsMemberDialogOpen(false);
+    },
+    [members, onMemberChanged, memberToEdit],
+  );
+
   return (
     <FlexBox direction="Column" gap={8}>
-      <FlexBox alignItems="End" gap={8}>
-        <FlexBox direction="Column">
-          <Label for="member-email-input">{t('common.members')}</Label>
-          <Input
-            ref={emailInputRef}
-            id="member-email-input"
-            type="Email"
-            valueState={emailState}
-            valueStateMessage={<span>{emailMessage}</span>}
-            data-testid="member-email-input"
-            onInput={handleEmailInputChange}
-          />
-        </FlexBox>
-        <MemberRoleSelect value={selectedRole} onChange={handleRoleChange} />
-        <Button
-          className={styles.addButton}
-          data-testid="add-member-button"
-          design="Emphasized"
-          onClick={handleAddMember}
-        >
-          {t('EditMembers.addButton')}
-        </Button>
-      </FlexBox>
+      <Button
+        className={styles.addButton}
+        data-testid="add-member-button"
+        design="Emphasized"
+        icon={'sap-icon://add-employee'}
+        onClick={handleOpenMemberFormDialog}
+      >
+        {t('EditMembers.addButton')}
+      </Button>
+      <AddEditMemberDialog
+        open={isMemberDialogOpen}
+        existingMembers={members}
+        memberToEdit={memberToEdit}
+        onClose={handleCloseMemberFormDialog}
+        onSave={handleSaveMember}
+      />
+
       <MemberTable
         requireAtLeastOneMember={requireAtLeastOneMember}
         members={members}
         isValidationError={isValidationError}
         onDeleteMember={handleRemoveMember}
+        onEditMember={handleEditMember}
       />
     </FlexBox>
   );
diff --git a/src/components/Members/MemberRoleSelect.cy.tsx b/src/components/Members/MemberRoleSelect.cy.tsx
deleted file mode 100644
index 1f4653be..00000000
--- a/src/components/Members/MemberRoleSelect.cy.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { MemberRoleSelect } from './MemberRoleSelect.tsx';
-import { MemberRoles } from '../../lib/api/types/shared/members';
-import '@ui5/webcomponents-cypress-commands';
-
-function mountContainer(fn = function (_: MemberRoles): void {}) {
-  cy.mount(<MemberRoleSelect value={MemberRoles.viewer} onChange={fn} />);
-}
-
-describe('<MemberRoleSelect />', () => {
-  beforeEach(() => {
-    mountContainer();
-  });
-
-  it('Should select Administrator value', () => {
-    cy.get('#member-role-select').openDropDownByClick();
-    cy.get('#member-role-select [value="admin"]').clickDropdownMenuItem({
-      force: true,
-    });
-
-    cy.get('#member-role-select').should('have.value', MemberRoles.admin);
-  });
-
-  it('Should select Viewer value', () => {
-    cy.get('#member-role-select').openDropDownByClick();
-    cy.get('#member-role-select [value="view"]').clickDropdownMenuItem({
-      force: true,
-    });
-
-    cy.get('#member-role-select').should('have.value', MemberRoles.viewer);
-  });
-});
diff --git a/src/components/Members/MemberRoleSelect.tsx b/src/components/Members/MemberRoleSelect.tsx
deleted file mode 100644
index 8536153e..00000000
--- a/src/components/Members/MemberRoleSelect.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { MemberRoles, MemberRolesDetailed } from '../../lib/api/types/shared/members';
-import { FlexBox, Label, Option, Select, SelectDomRef, Ui5CustomEvent } 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;
-  onChange: (value: MemberRoles) => void;
-}
-export function MemberRoleSelect({ value, onChange: fireOnChangeEventToParent }: MemberRoleSelectProps) {
-  const ref = useRef<SelectDomRef>(null);
-
-  const handleChange = (event: Ui5CustomEvent<SelectDomRef, SelectChangeEventDetail>) => {
-    const newValue = event.detail.selectedOption.dataset.value as MemberRoles;
-    fireOnChangeEventToParent(newValue);
-  };
-
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.value = value;
-      return;
-    }
-  }, [value]);
-  const { t } = useTranslation();
-  return (
-    <FlexBox direction={'Column'}>
-      <Label for={'member-role-select'}>{t('MemberTable.columnRoleHeader')}</Label>
-      <Select ref={ref} id="member-role-select" value={value} onChange={handleChange}>
-        {Object.values(MemberRoles)
-          .map((r) => MemberRolesDetailed[r])
-          .map((role) => (
-            <Option key={role.value} data-value={role.value} value={role.value}>
-              {role.displayValue}
-            </Option>
-          ))}
-      </Select>
-    </FlexBox>
-  );
-}
diff --git a/src/components/Members/MemberTable.tsx b/src/components/Members/MemberTable.tsx
index be248489..5513408d 100644
--- a/src/components/Members/MemberTable.tsx
+++ b/src/components/Members/MemberTable.tsx
@@ -1,18 +1,23 @@
-import { AnalyticalTable, Button } from '@ui5/webcomponents-react';
-import { Member, MemberRolesDetailed } from '../../lib/api/types/shared/members';
+import { AnalyticalTable, Button, FlexBox, Icon } from '@ui5/webcomponents-react';
+import { Member, MemberRoles, MemberRolesDetailed } from '../../lib/api/types/shared/members';
 import { AnalyticalTableColumnDefinition } from '@ui5/webcomponents-react/wrappers';
 import { useTranslation } from 'react-i18next';
 import { FC } from 'react';
 import { Infobox } from '../Ui/Infobox/Infobox.tsx';
+import { ACCOUNT_TYPES } from './EditMembers.tsx';
 
 type MemberTableRow = {
   email: string;
   role: string;
+  kind: string;
+  namespace: string;
+  _member: Member;
 };
 
 type MemberTableProps = {
   members: Member[];
   onDeleteMember?: (email: string) => void;
+  onEditMember?: (member: Member) => void;
   isValidationError?: boolean;
   requireAtLeastOneMember: boolean;
 };
@@ -28,6 +33,7 @@ type CellInstance = {
 export const MemberTable: FC<MemberTableProps> = ({
   members,
   onDeleteMember,
+  onEditMember,
   isValidationError = false,
   requireAtLeastOneMember,
 }) => {
@@ -38,16 +44,53 @@ export const MemberTable: FC<MemberTableProps> = ({
       Header: t('MemberTable.columnEmailHeader'),
       accessor: 'email',
     },
+
+    {
+      Header: t('MemberTable.columnTypeHeader'),
+      accessor: 'kind',
+      width: 145,
+      Cell: (instance: CellInstance) => {
+        const kind = ACCOUNT_TYPES.find(({ value }) => value === instance.cell.row.original.kind);
+        return (
+          <FlexBox gap={'0.5rem'} wrap={'NoWrap'}>
+            <Icon name={kind?.icon} accessibleName={kind?.label} showTooltip />
+            {kind?.label}
+          </FlexBox>
+        );
+      },
+    },
     {
       Header: t('MemberTable.columnRoleHeader'),
       accessor: 'role',
+      width: 105,
+    },
+    {
+      Header: t('MemberTable.columnNamespaceHeader'),
+      accessor: 'namespace',
     },
   ];
 
+  if (onEditMember) {
+    columns.push({
+      Header: '',
+      id: 'edit',
+      width: 50,
+      Cell: (instance: CellInstance) => (
+        <Button
+          icon="edit"
+          onClick={() => {
+            const selectedMember = instance.cell.row.original._member;
+            onEditMember(selectedMember);
+          }}
+        />
+      ),
+    });
+  }
+
   if (onDeleteMember) {
     columns.push({
       Header: '',
-      accessor: '.',
+      id: 'delete',
       width: 50,
       Cell: (instance: CellInstance) => (
         <Button
@@ -69,10 +112,15 @@ export const MemberTable: FC<MemberTableProps> = ({
     );
   }
 
-  const data: MemberTableRow[] = members.map((m) => ({
-    email: m.name,
-    role: m.roles.map((r) => MemberRolesDetailed[r].displayValue).join(', '),
-  }));
+  const data: MemberTableRow[] = members.map((m) => {
+    return {
+      email: m.name,
+      role: MemberRolesDetailed[m.role as MemberRoles]?.displayValue,
+      kind: m.kind,
+      namespace: m.namespace ?? '',
+      _member: m,
+    };
+  });
 
   return <AnalyticalTable scaleWidthMode="Smart" columns={columns} data={data} />;
 };
diff --git a/src/components/Members/Members.module.css b/src/components/Members/Members.module.css
index 54ad260c..9f98d921 100644
--- a/src/components/Members/Members.module.css
+++ b/src/components/Members/Members.module.css
@@ -1,3 +1,27 @@
 .addButton {
   margin-bottom: 3px;
-}
\ No newline at end of file
+}
+
+.wrapper {
+  margin-bottom: 1rem;
+}
+
+.placeholder {
+  min-height: 7.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.container {
+  min-width: 465px;
+  max-width: 100%;
+}
+
+.input {
+  width: 100%;
+}
+
+.info {
+  margin-top: 0.5rem;
+  max-width: 100%;
+  text-wrap: wrap;
+}
diff --git a/src/components/Ui/FadeVisibility/FadeVisibility.tsx b/src/components/Ui/FadeVisibility/FadeVisibility.tsx
new file mode 100644
index 00000000..c0bbffd4
--- /dev/null
+++ b/src/components/Ui/FadeVisibility/FadeVisibility.tsx
@@ -0,0 +1,43 @@
+import React, { useState, useEffect, ReactNode } from 'react';
+
+interface FadeVisibilityProps {
+  show: boolean;
+  children: ReactNode;
+}
+
+const FadeVisibility: React.FC<FadeVisibilityProps> = ({ show, children }) => {
+  const [mounted, setMounted] = useState(show);
+  const [visible, setVisible] = useState(show);
+
+  useEffect(() => {
+    if (show) {
+      // Mount immediately and fade in
+      setMounted(true);
+      // Use a small delay to allow the transition to trigger
+      setTimeout(() => setVisible(true), 10);
+    } else {
+      // Fade out first
+      setVisible(false);
+      // Unmount after transition duration
+      const timer = setTimeout(() => setMounted(false), 300); // Assuming 0.3s transition
+      return () => clearTimeout(timer);
+    }
+  }, [show]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        opacity: visible ? 1 : 0,
+        transition: 'opacity 0.15s  ease-in-out',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default FadeVisibility;
diff --git a/src/components/Ui/RadioButtonsSelect/RadioButtonsSelect.module.css b/src/components/Ui/RadioButtonsSelect/RadioButtonsSelect.module.css
new file mode 100644
index 00000000..10a3f06a
--- /dev/null
+++ b/src/components/Ui/RadioButtonsSelect/RadioButtonsSelect.module.css
@@ -0,0 +1,24 @@
+.button {
+  border: 1px solid #dddddd;
+}
+
+.buttonFirst {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.buttonLast {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.buttonMiddle {
+  border-radius: 0;
+}
+
+.left {
+  margin-left: -1px;
+}
+
+.label {
+  margin-bottom: 0.25rem;
+}
diff --git a/src/components/Ui/RadioButtonsSelect/RadioButtonsSelect.tsx b/src/components/Ui/RadioButtonsSelect/RadioButtonsSelect.tsx
new file mode 100644
index 00000000..7786079c
--- /dev/null
+++ b/src/components/Ui/RadioButtonsSelect/RadioButtonsSelect.tsx
@@ -0,0 +1,52 @@
+import { FlexBox, Label, ToggleButton } from '@ui5/webcomponents-react';
+import styles from './RadioButtonsSelect.module.css';
+import { clsx } from 'clsx';
+export type RadioButtonsSelectOption = {
+  label: string;
+  value: string;
+  icon?: string;
+};
+
+type RadioButtonsSelectProps = {
+  selectedValue: string;
+  options: RadioButtonsSelectOption[];
+  handleOnClick: (value: string) => void;
+  label: string;
+};
+
+export const RadioButtonsSelect = ({ selectedValue, options, handleOnClick, label }: RadioButtonsSelectProps) => {
+  return (
+    <FlexBox aria-labelledby={label} role="radiogroup" direction={'Column'}>
+      <Label className={styles.label}>{label} </Label>
+      <FlexBox>
+        {options.map(({ value, label, icon }, index) => (
+          <ToggleButton
+            key={value}
+            className={clsx(
+              styles.button,
+              { [styles.buttonFirst]: index === 0 && index !== options.length },
+              {
+                [styles.buttonMiddle]:
+                  index !== 0 && index !== options.length && options.length > 2 && index + 1 !== options.length,
+              },
+              { [styles.buttonLast]: index + 1 === options.length && options.length > 1 },
+              { [styles.left]: index > 0 },
+            )}
+            design={'Transparent'}
+            style={{
+              color:
+                value === selectedValue ? 'var(--sapContent_Selected_ForegroundColor)' : 'var(--sapContent_LabelColor)',
+            }}
+            icon={icon}
+            pressed={value === selectedValue}
+            onClick={() => {
+              handleOnClick(value);
+            }}
+          >
+            {label}
+          </ToggleButton>
+        ))}
+      </FlexBox>
+    </FlexBox>
+  );
+};
diff --git a/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
index 17707c24..8f952082 100644
--- a/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
+++ b/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
@@ -111,7 +111,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
 
   useEffect(() => {
     if (user?.email && isOpen) {
-      setValue('members', [{ name: user.email, roles: [MemberRoles.admin], kind: 'User' }]);
+      setValue('members', [{ name: user.email, role: MemberRoles.admin, kind: 'User' }]);
     }
     if (!isOpen) {
       clearFormFields();
diff --git a/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx b/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx
index 3490b138..62a0686d 100644
--- a/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx
+++ b/src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx
@@ -37,7 +37,7 @@ export const SummarizeStep: React.FC<SummarizeStepProps> = ({ watch, projectName
           <br />
           <List headerText={t('common.members')}>
             {watch('members').map((member) => (
-              <ListItemStandard key={member.name} text={member.name} additionalText={member.roles[0]} />
+              <ListItemStandard key={member.name} text={member.name} additionalText={member.role} />
             ))}
           </List>
           <br />
diff --git a/src/lib/api/types/crate/createManagedControlPlane.ts b/src/lib/api/types/crate/createManagedControlPlane.ts
index 908af26c..13b1b6b6 100644
--- a/src/lib/api/types/crate/createManagedControlPlane.ts
+++ b/src/lib/api/types/crate/createManagedControlPlane.ts
@@ -1,6 +1,7 @@
 import { Resource } from '../resource';
 import { CHARGING_TARGET_LABEL, CHARGING_TARGET_TYPE_LABEL, DISPLAY_NAME_ANNOTATION } from '../shared/keyNames';
 import { Member } from '../shared/members';
+import { AccountType } from '../../../../components/Members/EditMembers.tsx';
 
 export type Annotations = Record<string, string>;
 export type Labels = Record<string, string>;
@@ -18,7 +19,7 @@ interface RoleBinding {
   subjects: Subject[];
 }
 interface Subject {
-  kind: 'User' | 'Group' | 'ServiceAccount';
+  kind: AccountType;
   name: string;
 }
 
@@ -134,11 +135,12 @@ export const CreateManagedControlPlane = (
       authorization: {
         roleBindings:
           optional?.members?.map((member) => ({
-            role: member.roles[0],
+            role: member.role,
             subjects: [
               {
-                kind: 'User',
-                name: idpPrefix ? `${idpPrefix}:${member.name}` : member.name,
+                kind: member.kind as AccountType,
+                name: idpPrefix && member.kind === 'User' ? `${idpPrefix}:${member.name}` : member.name,
+                namespace: member.kind === 'ServiceAccount' ? (member.namespace ?? 'default') : undefined,
               },
             ],
           })) ?? [],
diff --git a/src/lib/api/types/crate/createProject.ts b/src/lib/api/types/crate/createProject.ts
index 10af09ad..95bd00e5 100644
--- a/src/lib/api/types/crate/createProject.ts
+++ b/src/lib/api/types/crate/createProject.ts
@@ -1,6 +1,6 @@
 import { Resource } from '../resource';
 import { CHARGING_TARGET_LABEL, CHARGING_TARGET_TYPE_LABEL, DISPLAY_NAME_ANNOTATION } from '../shared/keyNames';
-import { Member } from '../shared/members';
+import { Member, MemberPayload } from '../shared/members';
 
 export interface CreateProjectType {
   apiVersion: string;
@@ -17,7 +17,7 @@ export interface CreateProjectType {
     };
   };
   spec: {
-    members: Member[];
+    members: MemberPayload[];
   };
 }
 
@@ -44,7 +44,13 @@ export const CreateProject = (
       },
     },
     spec: {
-      members: optional?.members ?? [],
+      members:
+        optional?.members?.map(({ kind, namespace, role, name }) => ({
+          kind,
+          name,
+          roles: [role],
+          namespace: kind === 'ServiceAccount' ? (namespace ?? 'default') : undefined,
+        })) ?? [],
     },
   };
 };
diff --git a/src/lib/api/types/crate/createWorkspace.ts b/src/lib/api/types/crate/createWorkspace.ts
index fafad0ce..6f682b97 100644
--- a/src/lib/api/types/crate/createWorkspace.ts
+++ b/src/lib/api/types/crate/createWorkspace.ts
@@ -1,6 +1,6 @@
 import { Resource } from '../resource';
 import { CHARGING_TARGET_LABEL, CHARGING_TARGET_TYPE_LABEL, DISPLAY_NAME_ANNOTATION } from '../shared/keyNames';
-import { Member } from '../shared/members';
+import { Member, MemberPayload } from '../shared/members';
 
 export interface CreateWorkspaceType {
   apiVersion: string;
@@ -18,7 +18,7 @@ export interface CreateWorkspaceType {
     };
   };
   spec: {
-    members: Member[];
+    members: MemberPayload[];
   };
 }
 
@@ -47,7 +47,13 @@ export const CreateWorkspace = (
       },
     },
     spec: {
-      members: optional?.members ?? [],
+      members:
+        optional?.members?.map(({ kind, namespace, role, name }) => ({
+          kind,
+          name,
+          roles: [role],
+          namespace: kind === 'ServiceAccount' ? (namespace ?? 'default') : undefined,
+        })) ?? [],
     },
   };
 };
diff --git a/src/lib/api/types/shared/members.ts b/src/lib/api/types/shared/members.ts
index 9fb24f3d..f24b5c9d 100644
--- a/src/lib/api/types/shared/members.ts
+++ b/src/lib/api/types/shared/members.ts
@@ -1,10 +1,17 @@
+import { RadioButtonsSelectOption } from '../../../../components/Ui/RadioButtonsSelect/RadioButtonsSelect.tsx';
+
 export enum MemberRoles {
-  viewer = 'view',
+  view = 'view',
   admin = 'admin',
 }
 
+export const memberRolesOptions: RadioButtonsSelectOption[] = [
+  { label: 'Viewer', value: MemberRoles.view, icon: 'employee' },
+  { label: 'Admin', value: MemberRoles.admin, icon: 'key-user-settings' },
+];
+
 export const MemberRolesDetailed = {
-  [MemberRoles.viewer]: { value: MemberRoles.viewer, displayValue: 'Viewer' },
+  [MemberRoles.view]: { value: MemberRoles.view, displayValue: 'Viewer' },
   [MemberRoles.admin]: {
     value: MemberRoles.admin,
     displayValue: 'Administrator',
@@ -18,5 +25,13 @@ export enum MemberKind {
 export interface Member {
   kind: string;
   name: string;
-  roles: MemberRoles[];
+  role: string;
+  namespace?: string;
+}
+
+export interface MemberPayload {
+  kind: string;
+  name: string;
+  roles: string[];
+  namespace?: string;
 }
diff --git a/src/lib/shared/useLink.ts b/src/lib/shared/useLink.ts
index f2586687..442bcb97 100644
--- a/src/lib/shared/useLink.ts
+++ b/src/lib/shared/useLink.ts
@@ -13,6 +13,9 @@ export function useLink() {
     mcpCreationGuide: createLink(
       '/docs/managed-control-planes/get-started/get-started-mcp#5-create-managedcontrolplane',
     ),
+    serviceAccoutsGuide: createLink(
+      '/docs/managed-control-planes/access/service-accounts#create-and-list-serviceaccounts',
+    ),
     githubIssuesSupportTicket: createGithubLink('/support/issues/new'),
   };
 }