diff --git a/package-lock.json b/package-lock.json
index 91ca1ff7..47e20097 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -78,7 +78,7 @@
         "eslint-plugin-jsx-a11y": "6.10.2",
         "eslint-plugin-prettier": "5.5.4",
         "eslint-plugin-react": "7.37.5",
-        "eslint-plugin-react-hooks": "5.2.0",
+        "eslint-plugin-react-hooks": "7.0.1",
         "fastify-tsconfig": "3.0.0",
         "globals": "16.5.0",
         "jsdom": "27.1.0",
@@ -10129,13 +10129,20 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
-      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz",
+      "integrity": "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "peerDependencies": {
         "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
@@ -11764,6 +11771,23 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -18593,10 +18617,24 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
       "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
     },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    },
     "node_modules/zustand": {
       "version": "4.5.7",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
diff --git a/package.json b/package.json
index dc2f19df..a406d7d2 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-react-hooks": "7.0.1",
     "fastify-tsconfig": "3.0.0",
     "globals": "16.5.0",
     "jsdom": "27.1.0",
diff --git a/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCardMenu.tsx b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCardMenu.tsx
index 42b0371b..bc9a1224 100644
--- a/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCardMenu.tsx
+++ b/src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCardMenu.tsx
@@ -1,6 +1,6 @@
 import { Button, Menu, MenuItem } from '@ui5/webcomponents-react';
 
-import { Dispatch, FC, SetStateAction, useRef, useState } from 'react';
+import { Dispatch, FC, SetStateAction, useId, useState } from 'react';
 import '@ui5/webcomponents-icons/dist/copy';
 import '@ui5/webcomponents-icons/dist/accept';
 
@@ -17,7 +17,7 @@ export const ControlPlaneCardMenu: FC<ControlPlanesListMenuProps> = ({
   isDeleteMcpButtonDisabled,
   setIsEditManagedControlPlaneWizardOpen,
 }) => {
-  const buttonRef = useRef(null);
+  const openerId = useId();
   const [menuIsOpen, setMenuIsOpen] = useState(false);
   const { t } = useTranslation();
 
@@ -28,7 +28,7 @@ export const ControlPlaneCardMenu: FC<ControlPlanesListMenuProps> = ({
   return (
     <>
       <Button
-        ref={buttonRef}
+        id={openerId}
         icon="overflow"
         icon-end
         data-testid="ControlPlaneCardMenu-opener"
@@ -36,7 +36,7 @@ export const ControlPlaneCardMenu: FC<ControlPlanesListMenuProps> = ({
       />
       <Menu
         open={menuIsOpen}
-        opener={buttonRef.current}
+        opener={openerId}
         onItemClick={(event) => {
           const action = (event.detail.item as HTMLElement).dataset.action;
           if (action === 'editMcp') {
diff --git a/src/components/ControlPlanes/ControlPlanePageMenu.tsx b/src/components/ControlPlanes/ControlPlanePageMenu.tsx
index 04eebc9f..fa768149 100644
--- a/src/components/ControlPlanes/ControlPlanePageMenu.tsx
+++ b/src/components/ControlPlanes/ControlPlanePageMenu.tsx
@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction, useRef, useState } from 'react';
+import { Dispatch, FC, SetStateAction, useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Menu, MenuItem } from '@ui5/webcomponents-react';
 
@@ -7,7 +7,7 @@ type ControlPlanesListMenuProps = {
 };
 
 export const ControlPlanePageMenu: FC<ControlPlanesListMenuProps> = ({ setIsEditManagedControlPlaneWizardOpen }) => {
-  const buttonRef = useRef(null);
+  const openerId = useId();
   const [menuIsOpen, setMenuIsOpen] = useState(false);
   const { t } = useTranslation();
 
@@ -17,10 +17,10 @@ export const ControlPlanePageMenu: FC<ControlPlanesListMenuProps> = ({ setIsEdit
 
   return (
     <>
-      <Button ref={buttonRef} icon="overflow" icon-end onClick={handleOpenerClick} />
+      <Button id={openerId} icon="overflow" icon-end onClick={handleOpenerClick} />
       <Menu
         open={menuIsOpen}
-        opener={buttonRef.current}
+        opener={openerId}
         onItemClick={(event) => {
           const action = (event.detail.item as HTMLElement).dataset.action;
           if (action === 'editMcp') {
diff --git a/src/components/ControlPlanes/List/MembersAvatarView.tsx b/src/components/ControlPlanes/List/MembersAvatarView.tsx
index d04a7f8c..94e7b30b 100644
--- a/src/components/ControlPlanes/List/MembersAvatarView.tsx
+++ b/src/components/ControlPlanes/List/MembersAvatarView.tsx
@@ -1,7 +1,7 @@
 import { Avatar, AvatarGroup, Popover } from '@ui5/webcomponents-react';
 import AvatarGroupType from '@ui5/webcomponents/dist/types/AvatarGroupType.js';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
-import { useRef, useState } from 'react';
+import { useId, useState } from 'react';
 import { MemberTable } from '../../Members/MemberTable.tsx';
 import { Member } from '../../../lib/api/types/shared/members';
 import { generateInitialsForEmail } from '../../Helper/generateInitialsForEmail.ts';
@@ -13,7 +13,7 @@ interface Props {
 }
 
 export function MembersAvatarView({ members, project, workspace }: Props) {
-  const openerRef = useRef(null);
+  const openerId = useId();
   const [popoverIsOpen, setPopoverIsOpen] = useState(false);
   const avatars = [];
 
@@ -33,11 +33,11 @@ export function MembersAvatarView({ members, project, workspace }: Props) {
 
   return (
     <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-      <AvatarGroup ref={openerRef} style={{ maxWidth: '200px' }} type={AvatarGroupType.Group} onClick={handleOnClick}>
+      <AvatarGroup id={openerId} style={{ maxWidth: '200px' }} type={AvatarGroupType.Group} onClick={handleOnClick}>
         {avatars}
       </AvatarGroup>
       <Popover
-        opener={openerRef.current!}
+        opener={openerId}
         placement={PopoverPlacement.Bottom}
         open={popoverIsOpen}
         onClose={() => {
diff --git a/src/components/Core/BreadcrumbFeedbackHeader.tsx b/src/components/Core/BreadcrumbFeedbackHeader.tsx
index 4d4a4745..d2900f51 100644
--- a/src/components/Core/BreadcrumbFeedbackHeader.tsx
+++ b/src/components/Core/BreadcrumbFeedbackHeader.tsx
@@ -3,7 +3,7 @@ import { Button, FlexBox, FlexBoxAlignItems, Menu, MenuItem } from '@ui5/webcomp
 import { useTranslation } from 'react-i18next';
 import { FeedbackButton } from './FeedbackButton.tsx';
 import { BetaButton } from './BetaButton.tsx';
-import { useRef, useState } from 'react';
+import { useId, useState } from 'react';
 import { useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding.tsx';
 import { SearchParamToggleVisibility } from '../Helper/FeatureToggleExistance.tsx';
 import { PathAwareBreadcrumbs } from './PathAwareBreadcrumbs/PathAwareBreadcrumbs.tsx';
@@ -30,20 +30,20 @@ export function BreadcrumbFeedbackHeader() {
 function LogoutMenu() {
   const auth = useAuthOnboarding();
   const { t } = useTranslation();
+  const openerId = useId();
 
-  const buttonRef = useRef(null);
   const [menuIsOpen, setMenuIsOpen] = useState(false);
   return (
     <>
       <Button
-        ref={buttonRef}
+        id={openerId}
         icon="menu2"
         onClick={() => {
           setMenuIsOpen(true);
         }}
       />
       <Menu
-        opener={buttonRef.current}
+        opener={openerId}
         open={menuIsOpen}
         onClose={() => {
           setMenuIsOpen(false);
diff --git a/src/components/Dialogs/KubectlCommandInfo/KubectlCreateProjectDialog.tsx b/src/components/Dialogs/KubectlCommandInfo/KubectlCreateProjectDialog.tsx
index 993417a4..499759e4 100644
--- a/src/components/Dialogs/KubectlCommandInfo/KubectlCreateProjectDialog.tsx
+++ b/src/components/Dialogs/KubectlCommandInfo/KubectlCreateProjectDialog.tsx
@@ -1,5 +1,6 @@
 import { KubectlBaseDialog, FormField, CustomCommand } from './KubectlBaseDialog';
 import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
 
 interface KubectlCreateProjectDialogProps {
   onClose: () => void;
@@ -8,7 +9,7 @@ interface KubectlCreateProjectDialogProps {
 
 export const KubectlCreateProjectDialog = ({ onClose, isOpen }: KubectlCreateProjectDialogProps) => {
   const { t } = useTranslation();
-  const randomProjectName = Math.random().toString(36).substring(2, 8);
+  const [randomProjectName] = useState(() => Math.random().toString(36).substring(2, 8));
 
   const formFields: FormField[] = [
     {
diff --git a/src/components/Dialogs/KubectlCommandInfo/KubectlCreateWorkspaceDialog.tsx b/src/components/Dialogs/KubectlCommandInfo/KubectlCreateWorkspaceDialog.tsx
index aee66c0a..cf7ff7c9 100644
--- a/src/components/Dialogs/KubectlCommandInfo/KubectlCreateWorkspaceDialog.tsx
+++ b/src/components/Dialogs/KubectlCommandInfo/KubectlCreateWorkspaceDialog.tsx
@@ -1,5 +1,6 @@
 import { KubectlBaseDialog, FormField, CustomCommand } from './KubectlBaseDialog';
 import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
 
 interface KubectlCreateWorkspaceDialogProps {
   onClose: () => void;
@@ -9,7 +10,7 @@ interface KubectlCreateWorkspaceDialogProps {
 
 export const KubectlCreateWorkspaceDialog = ({ onClose, isOpen, project }: KubectlCreateWorkspaceDialogProps) => {
   const { t } = useTranslation();
-  const randomWorkspaceName = Math.random().toString(36).substring(2, 8);
+  const [randomWorkspaceName] = useState(() => Math.random().toString(36).substring(2, 8));
   const projectName = project || '<Project Namespace>';
   const projectNamespace = `project-${projectName}`;
 
diff --git a/src/components/Dialogs/ManagedResourceDeleteDialog.tsx b/src/components/Dialogs/ManagedResourceDeleteDialog.tsx
index 694acc0f..ab31c43a 100644
--- a/src/components/Dialogs/ManagedResourceDeleteDialog.tsx
+++ b/src/components/Dialogs/ManagedResourceDeleteDialog.tsx
@@ -1,4 +1,4 @@
-import { FC, useState, useEffect } from 'react';
+import { FC, useState } from 'react';
 import {
   Button,
   CheckBox,
@@ -20,22 +20,19 @@ type Props = {
   onClose: () => void;
   item: ManagedResourceItem | null;
   onDeletionConfirmed?: (item: ManagedResourceItem, force: boolean) => void;
-  onCanceled?: () => void;
 };
 
-export const ManagedResourceDeleteDialog: FC<Props> = ({ open, onClose, item, onDeletionConfirmed, onCanceled }) => {
+export const ManagedResourceDeleteDialog: FC<Props> = ({ open, onClose, item, onDeletionConfirmed }) => {
   const { t } = useTranslation();
   const [forceDeletion, setForceDeletion] = useState(false);
   const [advancedCollapsed, setAdvancedCollapsed] = useState(true);
   const [confirmationText, setConfirmationText] = useState('');
 
-  useEffect(() => {
-    if (!open) {
-      setForceDeletion(false);
-      setAdvancedCollapsed(true);
-      setConfirmationText('');
-    }
-  }, [open]);
+  const resetForm = () => {
+    setForceDeletion(false);
+    setAdvancedCollapsed(true);
+    setConfirmationText('');
+  };
 
   const resourceName = item?.metadata?.name ?? '';
 
@@ -54,14 +51,12 @@ export const ManagedResourceDeleteDialog: FC<Props> = ({ open, onClose, item, on
     if (item && onDeletionConfirmed) {
       onDeletionConfirmed(item, forceDeletion);
     }
-    onClose();
+    handleClose();
   };
 
-  const handleCancel = () => {
+  const handleClose = () => {
+    resetForm();
     onClose();
-    if (onCanceled) {
-      onCanceled();
-    }
   };
 
   return (
@@ -69,7 +64,8 @@ export const ManagedResourceDeleteDialog: FC<Props> = ({ open, onClose, item, on
       open={open}
       headerText={t('ManagedResources.deleteDialogTitle')}
       className={styles.dialog}
-      onClose={handleCancel}
+      onOpen={resetForm}
+      onClose={handleClose}
     >
       <FlexBox direction="Column" className={styles.content}>
         <DeleteConfirmationForm
@@ -99,7 +95,7 @@ export const ManagedResourceDeleteDialog: FC<Props> = ({ open, onClose, item, on
         </Panel>
 
         <FlexBox justifyContent="End" className={styles.actions}>
-          <Button design="Transparent" onClick={handleCancel}>
+          <Button design="Transparent" onClick={handleClose}>
             {t('buttons.cancel')}
           </Button>
           <Button design={ButtonDesign.Negative} disabled={!isConfirmed} onClick={handleDelete}>
diff --git a/src/components/Graphs/useGraph.ts b/src/components/Graphs/useGraph.ts
index 87fe15cf..aa29355e 100644
--- a/src/components/Graphs/useGraph.ts
+++ b/src/components/Graphs/useGraph.ts
@@ -113,6 +113,7 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt
 
   useEffect(() => {
     if (!treeData.length) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setNodes([]);
       setEdges([]);
       return;
diff --git a/src/components/Helper/AnimatedHoverTextButton.tsx b/src/components/Helper/AnimatedHoverTextButton.tsx
index ed768bae..f68f7b1e 100644
--- a/src/components/Helper/AnimatedHoverTextButton.tsx
+++ b/src/components/Helper/AnimatedHoverTextButton.tsx
@@ -1,21 +1,25 @@
 import { Button, ButtonDomRef, FlexBox, FlexBoxAlignItems, Text } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-icons/dist/copy';
-import { JSX, RefObject, useState } from 'react';
+import { JSX, useId, useState } from 'react';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import type { Ui5CustomEvent } from '@ui5/webcomponents-react-base';
 import type { ButtonClickEventDetail } from '@ui5/webcomponents/dist/Button.js';
 
 type HoverTextButtonProps = {
+  id?: string;
   text: string;
   icon: JSX.Element;
-  ref?: RefObject<ButtonDomRef | null>;
   onClick: (event: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail>) => void;
 };
-export const AnimatedHoverTextButton = ({ text, icon, onClick, ref }: HoverTextButtonProps) => {
+export const AnimatedHoverTextButton = ({ id, text, icon, onClick }: HoverTextButtonProps) => {
   const [hover, setHover] = useState(false);
+
+  const generatedId = useId();
+  id ??= generatedId;
+
   return (
     <Button
-      ref={ref}
+      id={id}
       design={ButtonDesign.Transparent}
       onClick={onClick}
       onMouseOver={() => setHover(true)}
diff --git a/src/components/Helper/Tooltip.tsx b/src/components/Helper/Tooltip.tsx
deleted file mode 100644
index ff50b8b0..00000000
--- a/src/components/Helper/Tooltip.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Popover } from '@ui5/webcomponents-react';
-import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
-import React, { useRef, useState } from 'react';
-
-interface TooltipProps {
-  tooltipContent: React.ReactNode;
-  children: React.ReactNode;
-}
-
-export function Tooltip(props: TooltipProps) {
-  const openerRef = useRef(null);
-  const [popoverIsOpen, setPopoverIsOpen] = useState(false);
-
-  const handleMouseEnter = () => {
-    setPopoverIsOpen(true);
-  };
-
-  const handleMouseLeave = () => {
-    setPopoverIsOpen(false);
-  };
-
-  return (
-    <>
-      <div ref={openerRef} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-        {props.children}
-        <Popover
-          opener={openerRef.current!}
-          placement={PopoverPlacement.Bottom}
-          open={popoverIsOpen}
-          onClose={() => {
-            setPopoverIsOpen(false);
-          }}
-        >
-          {props.tooltipContent}
-        </Popover>
-      </div>
-    </>
-  );
-}
diff --git a/src/components/Members/AddEditMemberDialog.tsx b/src/components/Members/AddEditMemberDialog.tsx
index 8dc426a4..2f03ff23 100644
--- a/src/components/Members/AddEditMemberDialog.tsx
+++ b/src/components/Members/AddEditMemberDialog.tsx
@@ -1,13 +1,12 @@
-import { FC, useEffect, useMemo } from 'react';
+import { Activity, FC, useEffect, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } 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';
 
@@ -68,7 +67,7 @@ export const AddEditMemberDialog: FC<AddEditMemberDialogProps> = ({
   const {
     register,
     handleSubmit,
-    watch,
+    control,
     setValue,
     reset,
     formState: { errors },
@@ -83,8 +82,8 @@ export const AddEditMemberDialog: FC<AddEditMemberDialogProps> = ({
     },
   });
 
-  const accountType = watch('accountType');
-  const role = watch('role');
+  const accountType = useWatch({ control, name: 'accountType' });
+  const role = useWatch({ control, name: 'role' });
 
   useEffect(() => {
     if (open) {
@@ -158,7 +157,7 @@ export const AddEditMemberDialog: FC<AddEditMemberDialogProps> = ({
           </div>
 
           <div className={styles.placeholder}>
-            <FadeVisibility show={accountType === 'ServiceAccount'}>
+            <Activity mode={accountType === 'ServiceAccount' ? 'visible' : 'hidden'}>
               <div>
                 <FlexBox direction="Column">
                   <Label for="namespace-input">{t('common.namespace')}</Label>
@@ -188,7 +187,7 @@ export const AddEditMemberDialog: FC<AddEditMemberDialogProps> = ({
                   />
                 </MessageStrip>
               </div>
-            </FadeVisibility>
+            </Activity>
           </div>
 
           <Button
diff --git a/src/components/Members/Members.module.css b/src/components/Members/Members.module.css
index f8511179..f73e58c4 100644
--- a/src/components/Members/Members.module.css
+++ b/src/components/Members/Members.module.css
@@ -30,3 +30,13 @@
 .narrowButton {
   min-width: fit-content;
 }
+
+.serviceAccountContainer {
+  transition: opacity 0.15s ease-in-out;
+}
+.serviceAccountContainerVisible {
+  opacity: 1;
+}
+.serviceAccountContainerHidden {
+  opacity: 0;
+}
diff --git a/src/components/Shared/ResourceStatusCell.tsx b/src/components/Shared/ResourceStatusCell.tsx
index fd78b91b..8f26d6ad 100644
--- a/src/components/Shared/ResourceStatusCell.tsx
+++ b/src/components/Shared/ResourceStatusCell.tsx
@@ -1,6 +1,6 @@
-import { Button, ButtonDomRef, FlexBox, Icon, ResponsivePopover, Text } from '@ui5/webcomponents-react';
+import { Button, FlexBox, Icon, ResponsivePopover, Text } from '@ui5/webcomponents-react';
 import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo';
-import { useRef, useState } from 'react';
+import { useId, useState } from 'react';
 import { AnimatedHoverTextButton } from '../Helper/AnimatedHoverTextButton.tsx';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
 import styles from './ResourceStatusCell.module.css';
@@ -20,7 +20,7 @@ export const ResourceStatusCell = ({
   negativeText,
   hideOnHoverEffect,
 }: ResourceStatusCellProps) => {
-  const btnRef = useRef<ButtonDomRef>(null);
+  const openerId = useId();
   const [popoverIsOpen, setPopoverIsOpen] = useState(false);
   const timeAgo = transitionTime ? formatDateAsTimeAgo(transitionTime) : '-';
 
@@ -33,7 +33,7 @@ export const ResourceStatusCell = ({
   return (
     <span>
       {hideOnHoverEffect ? (
-        <Button ref={btnRef} design="Transparent" title={timeAgo} aria-label={timeAgo} onClick={handleOpen}>
+        <Button id={openerId} design="Transparent" title={timeAgo} aria-label={timeAgo} onClick={handleOpen}>
           <Icon
             design={isOk ? 'Positive' : 'Negative'}
             name={isOk ? 'sys-enter-2' : 'sys-cancel-2'}
@@ -43,7 +43,7 @@ export const ResourceStatusCell = ({
         </Button>
       ) : (
         <AnimatedHoverTextButton
-          ref={btnRef}
+          id={openerId}
           icon={
             <Icon
               design={isOk ? 'Positive' : 'Negative'}
@@ -58,7 +58,7 @@ export const ResourceStatusCell = ({
       )}
 
       <ResponsivePopover
-        opener={btnRef.current ?? undefined}
+        opener={openerId}
         open={popoverIsOpen}
         placement={PopoverPlacement.Bottom}
         onClose={handleClose}
diff --git a/src/components/Ui/FadeVisibility/FadeVisibility.tsx b/src/components/Ui/FadeVisibility/FadeVisibility.tsx
deleted file mode 100644
index c0bbffd4..00000000
--- a/src/components/Ui/FadeVisibility/FadeVisibility.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-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/YamlEditor/YamlEditor.tsx b/src/components/YamlEditor/YamlEditor.tsx
index 1c8a2716..43d23813 100644
--- a/src/components/YamlEditor/YamlEditor.tsx
+++ b/src/components/YamlEditor/YamlEditor.tsx
@@ -1,8 +1,7 @@
 import { Editor } from '@monaco-editor/react';
-import type { ComponentProps } from 'react';
+import { ComponentProps, useEffect, useCallback, useMemo, useState } from 'react';
 import { Button, Panel, Toolbar, ToolbarSpacer, Title } from '@ui5/webcomponents-react';
 import { parseDocument } from 'yaml';
-import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTheme } from '../../hooks/useTheme';
 import { GITHUB_DARK_DEFAULT, GITHUB_LIGHT_DEFAULT } from '../../lib/monaco.ts';
 import { useTranslation } from 'react-i18next';
@@ -25,6 +24,7 @@ export const YamlEditor = (props: YamlEditorProps) => {
 
   useEffect(() => {
     if (typeof value !== 'undefined') {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setEditorContent(value.toString());
     }
   }, [value]);