diff --git a/src/components/App/ContentWrapper/ContentWrapper.scss b/src/components/App/ContentWrapper/ContentWrapper.scss
index 2ba961af0d..ffd2baf09c 100644
--- a/src/components/App/ContentWrapper/ContentWrapper.scss
+++ b/src/components/App/ContentWrapper/ContentWrapper.scss
@@ -1,5 +1,5 @@
 :root {
-  --solidBg: var(--_ui5-v1-24-0_fcl_solid_bg);
+  --solidBg: var(--_ui5-v2-3-0_fcl_solid_bg);
 }
 
 #content-wrap {
diff --git a/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx b/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx
index 5fead74f8f..94a59325ee 100644
--- a/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx
+++ b/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx
@@ -18,9 +18,9 @@ import {
   Card,
   CardHeader,
   FlexBox,
-  Loader,
   ProgressIndicator,
 } from '@ui5/webcomponents-react';
+import { Loader } from '@ui5/webcomponents-react-compat/dist/components/Loader/index.js';
 import { ClusterValidationConfigurationDialog } from './ClusterValidationConfiguration';
 import { resourcesState } from 'state/resourcesAtom';
 
diff --git a/src/components/KymaModules/KymaModulesList.js b/src/components/KymaModules/KymaModulesList.js
index c808ad2a45..8a3a2b1aa9 100644
--- a/src/components/KymaModules/KymaModulesList.js
+++ b/src/components/KymaModules/KymaModulesList.js
@@ -8,7 +8,7 @@ import {
   Button,
   FlexBox,
   Text,
-  Badge,
+  Tag,
 } from '@ui5/webcomponents-react';
 
 import { HintButton } from 'shared/components/DescriptionHint/DescriptionHint';
@@ -191,9 +191,9 @@ export default function KymaModulesList({
               resource?.channel || kymaResource?.spec?.channel,
             ),
           ) ? (
-            <Badge style={spacing.sapUiTinyMarginBegin}>
+            <Tag style={spacing.sapUiTinyMarginBegin}>
               {t('kyma-modules.beta')}
-            </Badge>
+            </Tag>
           ) : null}
         </>,
         // Namespace
@@ -204,14 +204,14 @@ export default function KymaModulesList({
             ? moduleStatus?.channel
             : EMPTY_TEXT_PLACEHOLDER}
           {isChannelOverriden ? (
-            <Badge
+            <Tag
               hideStateIcon
               design="Set2"
               colorScheme="5"
               style={spacing.sapUiTinyMarginBegin}
             >
               {t('kyma-modules.channel-overridden')}
-            </Badge>
+            </Tag>
           ) : (
             ''
           )}
diff --git a/src/components/KymaModules/ModulesCard.js b/src/components/KymaModules/ModulesCard.js
index 08411eb1aa..d30b2b3f28 100644
--- a/src/components/KymaModules/ModulesCard.js
+++ b/src/components/KymaModules/ModulesCard.js
@@ -5,7 +5,7 @@ import {
   Option,
   Panel,
   Select,
-  StandardListItem,
+  ListItemStandard,
   Text,
   Title,
 } from '@ui5/webcomponents-react';
@@ -28,7 +28,7 @@ export default function ModulesCard({
 
   return (
     <Card key={module.name} className="addModuleCard">
-      <StandardListItem
+      <ListItemStandard
         className="moduleCardHeader"
         onClick={e => setCheckbox(module, !isChecked(module.name), index)}
       >
@@ -52,7 +52,7 @@ export default function ModulesCard({
           </Text>
         </div>
         <img className="avatar" alt="SAP" src="\assets\sap-logo.svg" />
-      </StandardListItem>
+      </ListItemStandard>
       <div className="content">
         {module.docsUrl && (
           <ExternalLink
diff --git a/src/header/Header.tsx b/src/header/Header.tsx
index c38c5f9d4d..aa5b308a32 100644
--- a/src/header/Header.tsx
+++ b/src/header/Header.tsx
@@ -8,8 +8,8 @@ import {
   MenuDomRef,
   ShellBar,
   ShellBarItem,
-  StandardListItem,
   ShellBarDomRef,
+  ListItemStandard,
 } from '@ui5/webcomponents-react';
 import { MenuItemClickEventDetail } from '@ui5/webcomponents/dist/Menu.js';
 
@@ -80,14 +80,14 @@ export function Header() {
   const clustersList = [
     ...inactiveClusterNames.map((name, index) => {
       return (
-        <StandardListItem accessibleName={name} data-key={index}>
+        <ListItemStandard accessibleName={name} data-key={index}>
           {name}
-        </StandardListItem>
+        </ListItemStandard>
       );
     }),
-    <StandardListItem accessibleName="all-clusters">
+    <ListItemStandard accessibleName="all-clusters">
       {t('clusters.overview.title-all-clusters')}
-    </StandardListItem>,
+    </ListItemStandard>,
   ];
 
   const openNewWindow = (link: string) => {
diff --git a/src/index.tsx b/src/index.tsx
index 86cfdde489..f8d2ba7e06 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,3 @@
-import ReactDOM from 'react-dom';
 import i18next from 'i18next';
 import yaml from 'js-yaml';
 import { Suspense } from 'react';
@@ -25,6 +24,7 @@ import './styles/sapIllus-Fills.css';
 import './styles/sapIllus-Layout.css';
 import './styles/index.scss';
 import './styles/fiori-helpers.scss';
+import { createRoot } from 'react-dom/client';
 
 i18next
   .use(initReactI18next)
@@ -54,7 +54,10 @@ i18next
 
 savePreviousPath();
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container!);
+
+root.render(
   <RecoilRoot>
     <ThemeProvider>
       <BrowserRouter>
@@ -68,5 +71,4 @@ ReactDOM.render(
       </BrowserRouter>
     </ThemeProvider>
   </RecoilRoot>,
-  document.getElementById('root'),
 );
diff --git a/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js b/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js
index d5baaaaecb..286155d4d8 100755
--- a/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js
+++ b/src/resources/Namespaces/YamlUpload/ResourceValidationResult.js
@@ -6,10 +6,9 @@ import {
   MessageStrip,
   ObjectStatus,
   Panel,
-  Toolbar,
-  ToolbarSpacer,
-  ValueState,
 } from '@ui5/webcomponents-react';
+import { Toolbar } from '@ui5/webcomponents-react-compat/dist/components/Toolbar/index.js';
+import { ToolbarSpacer } from '@ui5/webcomponents-react-compat/dist/components/ToolbarSpacer/index.js';
 import {
   getExtendedValidateResourceState,
   validateResourcesState,
@@ -82,9 +81,9 @@ const ValidationWarnings = ({ resource, validationSchema }) => {
           <FlexBox alignItems={'Begin'}>
             <ObjectStatus
               showDefaultIcon
-              state={ValueState.Warning}
+              state="Critical"
               style={{
-                marginLeft: '-0.3125rem', //set icon in one line with expand arrow. The value from class `--_ui5-v1-24-0_panel_content_padding` is divided by 2
+                marginLeft: '-0.3125rem', //set icon in one line with expand arrow. The value from class `--_ui5-v2-3-0_panel_content_padding` is divided by 2
                 ...spacing.sapUiSmallMarginEnd,
               }}
             />
@@ -115,9 +114,9 @@ export const ResourceValidationResult = ({ resource }) => {
   ];
   const statusIcon = validateResources.isEnabled ? (
     warnings.flat().length !== 0 ? (
-      <ObjectStatus showDefaultIcon state={ValueState.Warning} />
+      <ObjectStatus showDefaultIcon state="Critical" />
     ) : (
-      <ObjectStatus showDefaultIcon state={ValueState.Success} />
+      <ObjectStatus showDefaultIcon state="Positive" />
     )
   ) : (
     <div></div>
diff --git a/src/resources/Namespaces/YamlUpload/YamlResourcesList.js b/src/resources/Namespaces/YamlUpload/YamlResourcesList.js
index 215bdcd296..0c459c94f5 100755
--- a/src/resources/Namespaces/YamlUpload/YamlResourcesList.js
+++ b/src/resources/Namespaces/YamlUpload/YamlResourcesList.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CustomListItem,
+  ListItemCustom,
   FlexBox,
   Icon,
   List,
@@ -162,7 +162,7 @@ export function YamlResourcesList({ resourcesData }) {
               </Card>
               <List>
                 {resources.map(r => (
-                  <CustomListItem type={'Inactive'}>
+                  <ListItemCustom type={'Inactive'}>
                     <FlexBox alignItems={'Center'}>
                       <Icon
                         className={`status status-${getIcon(r?.status)}`}
@@ -175,7 +175,7 @@ export function YamlResourcesList({ resourcesData }) {
                         {getStatus(r?.status)}
                       </Text>
                     </FlexBox>
-                  </CustomListItem>
+                  </ListItemCustom>
                 ))}
               </List>
             </FlexBox>
diff --git a/src/resources/Namespaces/YamlUpload/YamlUpload.js b/src/resources/Namespaces/YamlUpload/YamlUpload.js
index d53a1d34b6..2184ca7448 100755
--- a/src/resources/Namespaces/YamlUpload/YamlUpload.js
+++ b/src/resources/Namespaces/YamlUpload/YamlUpload.js
@@ -26,7 +26,7 @@ function YamlUpload({
     ?.join('---\n');
 
   useEffect(() => {
-    if (!yamlContentString && editor) editor.getModel().setValue('');
+    if (!yamlContentString && editor) editor.getModel()?.setValue('');
   }, [editor, yamlContentString]);
 
   const updateYamlContent = useCallback(
diff --git a/src/shared/ResourceForm/components/CollapsibleSection.js b/src/shared/ResourceForm/components/CollapsibleSection.js
index 870841e2af..b3740d0bab 100644
--- a/src/shared/ResourceForm/components/CollapsibleSection.js
+++ b/src/shared/ResourceForm/components/CollapsibleSection.js
@@ -1,9 +1,11 @@
 import { useEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { ResourceFormWrapper } from './Wrapper';
-import { Panel, Toolbar, ToolbarSpacer } from '@ui5/webcomponents-react';
+import { Panel } from '@ui5/webcomponents-react';
 import { Title } from './Title';
 import './CollapsibleSection.scss';
+import { Toolbar } from '@ui5/webcomponents-react-compat/dist/components/Toolbar/index.js';
+import { ToolbarSpacer } from '@ui5/webcomponents-react-compat/dist/components/ToolbarSpacer/index.js';
 
 export function CollapsibleSection({
   disabled = false,
diff --git a/src/shared/components/ExpandableListItem/ExpandableListItem.tsx b/src/shared/components/ExpandableListItem/ExpandableListItem.tsx
index 545afc3a9b..1f82c25ca8 100644
--- a/src/shared/components/ExpandableListItem/ExpandableListItem.tsx
+++ b/src/shared/components/ExpandableListItem/ExpandableListItem.tsx
@@ -1,5 +1,5 @@
 import { ReactNode, useState } from 'react';
-import { Icon, StandardListItem } from '@ui5/webcomponents-react';
+import { Icon, ListItemStandard } from '@ui5/webcomponents-react';
 import { StatusBadge } from '../StatusBadge/StatusBadge';
 import { useTranslation } from 'react-i18next';
 import { spacing } from '@ui5/webcomponents-react-base';
@@ -29,7 +29,7 @@ export const ExpandableListItem = ({
 
   return (
     <>
-      <StandardListItem
+      <ListItemStandard
         onClick={() => setExpanded(!expanded)}
         className="expandable-item"
       >
@@ -57,7 +57,7 @@ export const ExpandableListItem = ({
             </StatusBadge>
           )}
         </div>
-      </StandardListItem>
+      </ListItemStandard>
       {expanded && (
         <>
           {content && (
diff --git a/src/shared/components/GenericList/GenericList.js b/src/shared/components/GenericList/GenericList.js
index ae773c72a1..73283d1615 100644
--- a/src/shared/components/GenericList/GenericList.js
+++ b/src/shared/components/GenericList/GenericList.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { Table } from '@ui5/webcomponents-react';
+import { Table } from '@ui5/webcomponents-react-compat/dist/components/Table/index.js';
 import { useNavigate } from 'react-router-dom';
 import {
   BodyFallback,
diff --git a/src/shared/components/GenericList/SortModalPanel.js b/src/shared/components/GenericList/SortModalPanel.js
index 39a064caba..db19b5e2bc 100644
--- a/src/shared/components/GenericList/SortModalPanel.js
+++ b/src/shared/components/GenericList/SortModalPanel.js
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import {
   Button,
-  CustomListItem,
-  GroupHeaderListItem,
+  ListItemCustom,
+  ListItemGroup,
   List,
   RadioButton,
   Text,
@@ -72,10 +72,8 @@ export const SortModalPanel = ({
         }}
         accessibleName="sortOrderList"
       >
-        <GroupHeaderListItem>
-          {t('common.sorting.sort-order')}
-        </GroupHeaderListItem>
-        <CustomListItem selected={order === 'ASC'}>
+        <ListItemGroup>{t('common.sorting.sort-order')}</ListItemGroup>
+        <ListItemCustom selected={order === 'ASC'}>
           <RadioButton
             name="sortOrder"
             value="ASC"
@@ -83,8 +81,8 @@ export const SortModalPanel = ({
             onChange={event => setOrder(event.target.value)}
           />
           <Text>{t('common.sorting.asc')}</Text>
-        </CustomListItem>
-        <CustomListItem selected={order === 'DESC'}>
+        </ListItemCustom>
+        <ListItemCustom selected={order === 'DESC'}>
           <RadioButton
             name="sortOrder"
             value="DESC"
@@ -92,7 +90,7 @@ export const SortModalPanel = ({
             onChange={event => setOrder(event.target.value)}
           />
           <Text>{t('common.sorting.desc')}</Text>
-        </CustomListItem>
+        </ListItemCustom>
       </List>
       <List
         separators="All"
@@ -101,12 +99,12 @@ export const SortModalPanel = ({
         }}
         accessibleName="sortByList"
       >
-        <GroupHeaderListItem>{t('common.sorting.sort-by')}</GroupHeaderListItem>
+        <ListItemGroup>{t('common.sorting.sort-by')}</ListItemGroup>
         {sortBy && (
           <>
             {Object.entries(sortBy).flatMap(([value]) => {
               return (
-                <CustomListItem key={value} selected={name === value}>
+                <ListItemCustom key={value} selected={name === value}>
                   <RadioButton
                     name="sortBy"
                     value={value}
@@ -118,7 +116,7 @@ export const SortModalPanel = ({
                       ? t(`common.sorting.${value}`)
                       : value}
                   </Text>
-                </CustomListItem>
+                </ListItemCustom>
               );
             })}
           </>
diff --git a/src/shared/components/GenericList/components.js b/src/shared/components/GenericList/components.js
index 1c7ad07d21..3f48b14865 100644
--- a/src/shared/components/GenericList/components.js
+++ b/src/shared/components/GenericList/components.js
@@ -1,13 +1,9 @@
 import { useState } from 'react';
-import {
-  Button,
-  FlexBox,
-  Icon,
-  Text,
-  TableCell,
-  TableColumn,
-  TableRow,
-} from '@ui5/webcomponents-react';
+import { Button, FlexBox, Icon, Text } from '@ui5/webcomponents-react';
+import { TableCell } from '@ui5/webcomponents-react-compat/dist/components/TableCell/index.js';
+import { TableColumn } from '@ui5/webcomponents-react-compat/dist/components/TableColumn/index.js';
+import { TableRow } from '@ui5/webcomponents-react-compat/dist/components/TableRow/index.js';
+
 import ListActions from 'shared/components/ListActions/ListActions';
 
 import { spacing } from '@ui5/webcomponents-react-base';
diff --git a/src/shared/components/Labels/Labels.js b/src/shared/components/Labels/Labels.js
index 8a3f81d7ea..5c234da31d 100644
--- a/src/shared/components/Labels/Labels.js
+++ b/src/shared/components/Labels/Labels.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
-import { Badge, Label } from '@ui5/webcomponents-react';
+import { Tag, Label } from '@ui5/webcomponents-react';
 
 import { spacing } from '@ui5/webcomponents-react-base';
 import './Labels.scss';
@@ -51,7 +51,7 @@ export const Labels = ({
       ) : null}
       <div className={classNames('labels', className)} style={style}>
         {separatedLabels.map((label, id) => (
-          <Badge
+          <Tag
             aria-label={label}
             key={id}
             colorScheme="10"
@@ -63,7 +63,7 @@ export const Labels = ({
             {shortenLongLabels && label.length > SHORTENING_TRESHOLD
               ? shortenLabel(label)
               : label}
-          </Badge>
+          </Tag>
         ))}
       </div>
     </>
diff --git a/src/shared/components/PodTemplate/components.js b/src/shared/components/PodTemplate/components.js
index f82acf01e9..33e6242cd2 100644
--- a/src/shared/components/PodTemplate/components.js
+++ b/src/shared/components/PodTemplate/components.js
@@ -4,14 +4,14 @@ import { useUrl } from 'hooks/useUrl';
 import {
   List,
   Label,
-  GroupHeaderListItem,
-  Table as UI5Table,
-  TableColumn,
-  TableRow,
-  TableCell,
   Text,
   Title,
+  ListItemGroup,
 } from '@ui5/webcomponents-react';
+import { Table as UI5Table } from '@ui5/webcomponents-react-compat/dist/components/Table/index.js';
+import { TableColumn } from '@ui5/webcomponents-react-compat/dist/components/TableColumn/index.js';
+import { TableRow } from '@ui5/webcomponents-react-compat/dist/components/TableRow/index.js';
+import { TableCell } from '@ui5/webcomponents-react-compat/dist/components/TableCell/index.js';
 import { Labels } from '../Labels/Labels';
 import { PodTemplateRow } from './PodTemplateRow';
 import { Link } from '../Link/Link';
@@ -51,7 +51,7 @@ function ContainerComponent({ container }) {
 
   return (
     <>
-      <GroupHeaderListItem>{container.name}</GroupHeaderListItem>
+      <ListItemGroup>{container.name}</ListItemGroup>
       <PodTemplateRow
         label={t('pods.labels.image')}
         component={
@@ -173,7 +173,7 @@ function VolumeComponent({ volume }) {
 
   return (
     <>
-      <GroupHeaderListItem>{name}</GroupHeaderListItem>
+      <ListItemGroup>{name}</ListItemGroup>
       <PodTemplateRow label="Type" component={<Text>{typeLabel}</Text>} />
       {k8sResource && (
         <PodTemplateRow
diff --git a/src/shared/components/ResourceGraph/ResourceGraph.tsx b/src/shared/components/ResourceGraph/ResourceGraph.tsx
index 9a7806de18..b34696b9a1 100644
--- a/src/shared/components/ResourceGraph/ResourceGraph.tsx
+++ b/src/shared/components/ResourceGraph/ResourceGraph.tsx
@@ -15,9 +15,10 @@ import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
 import { useFeature } from 'hooks/useFeature';
 import { K8sResource } from 'types';
 import { ResourceGraphConfig } from './types';
-import { Panel, Title, Toolbar, ToolbarSpacer } from '@ui5/webcomponents-react';
-
 import { spacing } from '@ui5/webcomponents-react-base';
+import { Panel, Title } from '@ui5/webcomponents-react';
+import { Toolbar } from '@ui5/webcomponents-react-compat/dist/components/Toolbar/index.js';
+import { ToolbarSpacer } from '@ui5/webcomponents-react-compat/dist/components/ToolbarSpacer/index.js';
 import './ResourceGraph.scss';
 
 function ResourceGraph({
diff --git a/src/shared/components/UI5Panel/UI5Panel.tsx b/src/shared/components/UI5Panel/UI5Panel.tsx
index 0d285e8f55..8850c9b6df 100644
--- a/src/shared/components/UI5Panel/UI5Panel.tsx
+++ b/src/shared/components/UI5Panel/UI5Panel.tsx
@@ -1,13 +1,8 @@
-import {
-  Panel,
-  Text,
-  Title,
-  Toolbar,
-  ToolbarSeparator,
-  ToolbarSpacer,
-} from '@ui5/webcomponents-react';
-
 import { spacing } from '@ui5/webcomponents-react-base';
+import { Panel, Text, Title } from '@ui5/webcomponents-react';
+import { Toolbar } from '@ui5/webcomponents-react-compat/dist/components/Toolbar/index.js';
+import { ToolbarSpacer } from '@ui5/webcomponents-react-compat/dist/components/ToolbarSpacer/index.js';
+import { ToolbarSeparator } from '@ui5/webcomponents-react-compat/dist/components/ToolbarSeparator/index.js';
 import './UI5Panel.scss';
 import { CSSProperties, ReactNode, useEffect } from 'react';
 
diff --git a/src/sidebar/NavItem.tsx b/src/sidebar/NavItem.tsx
index cf1e2f907a..0a33242a9c 100644
--- a/src/sidebar/NavItem.tsx
+++ b/src/sidebar/NavItem.tsx
@@ -59,7 +59,6 @@ export function NavItem({ node, subItem = false }: NavItemProps) {
     icon: node.externalUrl ? 'action' : node.icon,
     text: t(node.label, { defaultValue: node.label }),
     selected: isNodeSelected(node),
-    key: node.pathSegment,
     onClick: (e: Event) => {
       if (node.dataSources) {
         let link =
@@ -97,8 +96,8 @@ export function NavItem({ node, subItem = false }: NavItemProps) {
   };
 
   if (subItem) {
-    return <SideNavigationSubItem {...propsForNav} />;
+    return <SideNavigationSubItem key={node.pathSegment} {...propsForNav} />;
   }
 
-  return <SideNavigationItem {...propsForNav} />;
+  return <SideNavigationItem key={node.pathSegment} {...propsForNav} />;
 }
diff --git a/src/sidebar/Sidebar.scss b/src/sidebar/Sidebar.scss
index e06de8506e..847fdb7d52 100644
--- a/src/sidebar/Sidebar.scss
+++ b/src/sidebar/Sidebar.scss
@@ -1,10 +1,10 @@
 :root {
-  --sidebar-padding: var(--_ui5-v1-24-0_side_navigation_padding);
-  --sidebar-width: var(--_ui5-v1-24-0_side_navigation_width);
+  --sidebar-padding: var(--_ui5-v2-3-0_side_navigation_padding);
+  --sidebar-width: var(--_ui5-v2-3-0_side_navigation_width);
 }
 
 .ui5-content-density-compact {
-  --_ui5-v1-24-0_side_navigation_padding: 0.2rem 0.7rem 0.75rem 0.75rem !important;
+  --_ui5-v2-3-0_side_navigation_padding: 0.2rem 0.7rem 0.75rem 0.75rem !important;
 }
 
 .sidebar__content {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e76145aeae..82b38627eb 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -3,11 +3,11 @@
 @import './wizard-dialog.scss';
 
 :root {
-  --card-box-shadow: var(--_ui5-v1-24-0_card_box_shadow);
-  --card-border: var(--_ui5-v1-24-0_card_border);
-  --card-border-radius: var(--_ui5-v1-24-0_card_border-radius);
-  --card-border: var(--_ui5-v1-24-0_card_border);
-  --ui5-v1-24-0_table_bottom_border: none !important;
+  --card-box-shadow: var(--_ui5-v2-3-0_card_box_shadow);
+  --card-border: var(--_ui5-v2-3-0_card_border);
+  --card-border-radius: var(--_ui5-v2-3-0_card_border-radius);
+  --card-border: var(--_ui5-v2-3-0_card_border);
+  --ui5-v2-3-0_table_bottom_border: none !important;
 }
 
 html {