From 70b5e674968f51405a4a9f7d802167df1fa45108 Mon Sep 17 00:00:00 2001
From: Martin Rohrmeier <martin.ra.rohrmeier@bmw.de>
Date: Thu, 16 Jan 2025 11:29:27 +0100
Subject: [PATCH] fix: remove illegal className props

---
 .../MainHeader/Components/MainHeaderTitle.tsx |  2 --
 .../basic/Headers/PageHeader/PageHeader.tsx   |  4 ---
 src/components/basic/Hyperlink/index.tsx      |  1 -
 src/components/basic/IconButton/index.tsx     |  9 +------
 src/components/basic/Image/index.tsx          |  1 -
 src/components/basic/ImageGallery/index.tsx   |  3 +--
 src/components/basic/Input/index.tsx          | 19 +++-----------
 src/components/basic/LanguageSwitch/index.tsx |  3 +--
 src/components/basic/LoadingButton/index.tsx  |  5 +---
 src/components/basic/MainNavigation/index.tsx | 10 +-------
 src/components/basic/Menu/MenuItem.tsx        | 13 ++--------
 src/components/basic/Menu/index.tsx           |  8 +++---
 .../Components/SelectAddMore.tsx              | 11 ++------
 .../Components/SelectInput.tsx                |  2 --
 .../Components/SelectOptions.tsx              |  3 ---
 .../Components/SelectedTag.tsx                |  3 +--
 .../basic/MultiSelectList/index.tsx           | 11 ++------
 .../basic/NewSubNavigation/index.tsx          |  4 ---
 .../PageNotification/NotificationContent.tsx  |  2 +-
 .../Notifications/PageNotification/index.tsx  |  4 +--
 .../Snackbar/PageSnackbarStack.tsx            |  1 -
 .../basic/Notifications/Snackbar/index.tsx    | 12 ++-------
 .../basic/OrderStatusButton/index.tsx         |  3 ---
 src/components/basic/ProcessList/ListItem.tsx |  8 ------
 src/components/basic/ProcessList/index.tsx    |  2 +-
 .../basic/Progress/CircleProgress/index.tsx   |  1 -
 .../LinearProgressWithValueLabel.tsx          | 21 +++-------------
 src/components/basic/QuickLinks/index.tsx     |  3 ---
 src/components/basic/Radio/index.tsx          |  7 ++----
 src/components/basic/Rating/index.tsx         |  2 --
 src/components/basic/SearchInput/index.tsx    |  3 +--
 src/components/basic/SelectList/index.tsx     |  2 --
 src/components/basic/SideMenu/index.tsx       | 18 +++----------
 src/components/basic/SortOption/index.tsx     |  3 ---
 .../basic/StaticTable/EditField.tsx           | 18 +++----------
 .../basic/StaticTable/HorizontalTable.tsx     |  2 --
 .../basic/StaticTable/VerticalTable.tsx       | 14 +++--------
 .../basic/StaticTable/VerticalTableNew.tsx    | 25 +++++--------------
 src/components/basic/Stepper/StepperItem.tsx  |  3 ---
 src/components/basic/Stepper/index.tsx        |  1 -
 .../SubNavigation/SubNavigationButton.tsx     |  2 --
 .../basic/SubNavigation/SubNavigationLink.tsx |  1 -
 src/components/basic/SubNavigation/index.tsx  |  1 -
 .../basic/Table/PageLoadingTable.tsx          |  3 ---
 src/components/basic/Table/index.tsx          |  2 --
 src/components/basic/Tabs/Tab.tsx             |  2 +-
 src/components/basic/Tabs/TabPanel.tsx        |  1 -
 src/components/basic/Tabs/Tabs.tsx            |  6 +----
 src/components/basic/Textarea/index.tsx       | 16 +++---------
 src/components/basic/ToolTips/index.tsx       |  1 -
 src/components/basic/UserAvatar/index.tsx     |  4 ---
 src/components/basic/VerticalTabs/index.tsx   |  4 ---
 src/components/basic/ViewSelector/index.tsx   |  3 +--
 src/components/content/Cards/AboutCard.tsx    | 15 +++--------
 src/components/content/Cards/Card.tsx         | 11 +-------
 .../content/Cards/CardAddService.tsx          |  4 +--
 src/components/content/Cards/CardButtons.tsx  |  1 -
 src/components/content/Cards/CardChip.tsx     |  1 -
 src/components/content/Cards/CardContent.tsx  |  5 +---
 src/components/content/Cards/CardDecision.tsx | 13 +---------
 .../content/Cards/CardHorizontal.tsx          | 13 +---------
 src/components/content/Cards/CardImage.tsx    |  2 +-
 src/components/content/Cards/CardRating.tsx   |  8 ++----
 src/components/content/Cards/ContentCard.tsx  | 11 ++------
 src/components/content/Cards/index.tsx        |  1 -
 src/components/content/Navigation/NavItem.tsx |  2 --
 src/components/content/Navigation/index.tsx   |  6 +----
 src/components/content/UserMenu/index.tsx     | 11 ++------
 src/components/content/UserNav/index.tsx      |  2 +-
 69 files changed, 72 insertions(+), 347 deletions(-)

diff --git a/src/components/basic/Headers/MainHeader/Components/MainHeaderTitle.tsx b/src/components/basic/Headers/MainHeader/Components/MainHeaderTitle.tsx
index a0bdd0ec..b208d0fd 100644
--- a/src/components/basic/Headers/MainHeader/Components/MainHeaderTitle.tsx
+++ b/src/components/basic/Headers/MainHeader/Components/MainHeaderTitle.tsx
@@ -32,7 +32,6 @@ export const MainHeaderTitle = ({
     <>
       {title && (
         <Typography
-          className="cx-main-header__title"
           sx={{
             fontFamily: 'LibreFranklin-Light',
             fontWeight: 600,
@@ -46,7 +45,6 @@ export const MainHeaderTitle = ({
 
       {subTitle && (
         <Typography
-          className="cx-main-header__subtitle"
           sx={{
             fontFamily: 'LibreFranklin-Light',
             width: `${subTitleWidth}px`,
diff --git a/src/components/basic/Headers/PageHeader/PageHeader.tsx b/src/components/basic/Headers/PageHeader/PageHeader.tsx
index 47fa0c9f..e92815a1 100644
--- a/src/components/basic/Headers/PageHeader/PageHeader.tsx
+++ b/src/components/basic/Headers/PageHeader/PageHeader.tsx
@@ -87,7 +87,6 @@ export const PageHeader = ({
 
   return (
     <Box
-      className="cx-page-header"
       sx={{
         width: '100%',
         height: `${height}px`,
@@ -100,7 +99,6 @@ export const PageHeader = ({
     >
       {children && (
         <Box
-          className="cx-page-header__children-wrapper"
           sx={{
             display: 'flex',
             alignItems: 'center',
@@ -111,7 +109,6 @@ export const PageHeader = ({
           }}
         >
           <Box
-            className="cx-page-header__children"
             sx={{
               maxWidth: '1200px',
               width: '100%',
@@ -124,7 +121,6 @@ export const PageHeader = ({
         </Box>
       )}
       <Box
-        className="cx-page-header__title"
         sx={{
           maxWidth: '1200px',
           padding: '0px 20px',
diff --git a/src/components/basic/Hyperlink/index.tsx b/src/components/basic/Hyperlink/index.tsx
index c1a6954f..5f914b70 100644
--- a/src/components/basic/Hyperlink/index.tsx
+++ b/src/components/basic/Hyperlink/index.tsx
@@ -117,7 +117,6 @@ export const Hyperlink = ({
             color: theme.palette.primary.dark,
           },
         }}
-        className="cx-hyperlink__text"
       >
         {text}
       </Typography>
diff --git a/src/components/basic/IconButton/index.tsx b/src/components/basic/IconButton/index.tsx
index b7f25cab..0a81dd36 100644
--- a/src/components/basic/IconButton/index.tsx
+++ b/src/components/basic/IconButton/index.tsx
@@ -35,12 +35,5 @@ export const IconButton = ({
 }: IconButtonProps) => {
   const outlinedStyle = variant === 'outlined' ? { border: '2px solid' } : {}
 
-  return (
-    <MuiIconButton
-      className="cx-icon-button"
-      size={size}
-      sx={outlinedStyle}
-      {...props}
-    />
-  )
+  return <MuiIconButton size={size} sx={outlinedStyle} {...props} />
 }
diff --git a/src/components/basic/Image/index.tsx b/src/components/basic/Image/index.tsx
index 4ac7f346..3c8cf8b6 100644
--- a/src/components/basic/Image/index.tsx
+++ b/src/components/basic/Image/index.tsx
@@ -74,7 +74,6 @@ export const Image = ({ src, alt, style, loader }: ImageProps): JSX.Element => {
 
   return (
     <img
-      className="cx-image"
       src={(loader ?? error) ? data : src}
       alt={alt ?? 'Catena-X'}
       onError={() => {
diff --git a/src/components/basic/ImageGallery/index.tsx b/src/components/basic/ImageGallery/index.tsx
index 8cd9a440..abddd083 100644
--- a/src/components/basic/ImageGallery/index.tsx
+++ b/src/components/basic/ImageGallery/index.tsx
@@ -59,7 +59,7 @@ export const ImageGallery = ({
   }
 
   return (
-    <div className="cx-image-gallery">
+    <div>
       {hovered && hoveredImage?.url && (
         <ImageItemOverlay
           onClose={() => {
@@ -82,7 +82,6 @@ export const ImageGallery = ({
       >
         {gallery.map((image) => (
           <div
-            className="cx-image-gallery__btn"
             key={image.url}
             onClick={() => {
               hoverImageFn(image)
diff --git a/src/components/basic/Input/index.tsx b/src/components/basic/Input/index.tsx
index 7524109d..7a39e8f6 100644
--- a/src/components/basic/Input/index.tsx
+++ b/src/components/basic/Input/index.tsx
@@ -56,9 +56,8 @@ export const Input = ({
     setShowPassword((prev) => !prev)
   }
   return (
-    <Box className="cx-input">
+    <Box>
       <FormControl
-        className="cx-form-control"
         sx={{
           width: '100%',
         }}
@@ -72,7 +71,6 @@ export const Input = ({
           }}
         >
           <InputLabel
-            className="cx-form-control__label"
             sx={{
               marginRight: '10px',
             }}
@@ -88,14 +86,13 @@ export const Input = ({
               tooltipPlacement="top-start"
               tooltipText={tooltipMessage}
             >
-              <span className="cx-form-control__tooltip">
+              <span>
                 <HelpOutlineIcon sx={{ color: '#B6B6B6' }} fontSize={'small'} />
               </span>
             </Tooltips>
           )}
         </Box>
         <TextField
-          className="cx-form-control__textfield"
           variant={variant}
           placeholder={placeholder}
           error={error}
@@ -112,22 +109,14 @@ export const Input = ({
                     {showPassword ? <VisibilityOff /> : <Visibility />}
                   </IconButton>
                 )}
-                {error && (
-                  <ErrorOutline
-                    color="error"
-                    className="cx-form-control__input-adornment--error"
-                  />
-                )}
+                {error && <ErrorOutline color="error" />}
               </InputAdornment>
             ),
           }}
           {...props}
         />
         {error && helperText && (
-          <FormHelperText
-            sx={{ marginLeft: 0, marginBottom: '-23px' }}
-            className="cx-form-control__helper-text"
-          >
+          <FormHelperText sx={{ marginLeft: 0, marginBottom: '-23px' }}>
             {helperText}
           </FormHelperText>
         )}
diff --git a/src/components/basic/LanguageSwitch/index.tsx b/src/components/basic/LanguageSwitch/index.tsx
index 181be0b9..3e26b4e1 100644
--- a/src/components/basic/LanguageSwitch/index.tsx
+++ b/src/components/basic/LanguageSwitch/index.tsx
@@ -44,10 +44,9 @@ export const LanguageSwitch = ({
   }
 
   return (
-    <Box sx={{ padding: spacing(2, 3) }} className="cx-language-switcher">
+    <Box sx={{ padding: spacing(2, 3) }}>
       {languages?.map(({ key, name }) => (
         <Link
-          className="cx-language-switcher--link"
           href={`?language=${key}`}
           onClick={(e) => {
             onClick(e, key)
diff --git a/src/components/basic/LoadingButton/index.tsx b/src/components/basic/LoadingButton/index.tsx
index e907cd16..37df12db 100644
--- a/src/components/basic/LoadingButton/index.tsx
+++ b/src/components/basic/LoadingButton/index.tsx
@@ -68,11 +68,10 @@ export const LoadingButton = ({
   }, [size])
 
   return (
-    <Box className="cx-loading-button__wrapper">
+    <Box>
       {!loading ? (
         <Box sx={{ display: 'flex', flexDirection: 'column' }}>
           <Button
-            className="cx-loading-button"
             size={size}
             color={color}
             onClick={handleClick}
@@ -83,7 +82,6 @@ export const LoadingButton = ({
           </Button>
           {helperText && (
             <Typography
-              className="cx-loading-button__text"
               variant="label2"
               sx={{
                 padding: tagStyle.padding,
@@ -100,7 +98,6 @@ export const LoadingButton = ({
         </Box>
       ) : (
         <Button
-          className="cx-loading-button"
           size={size}
           color={color}
           startIcon={
diff --git a/src/components/basic/MainNavigation/index.tsx b/src/components/basic/MainNavigation/index.tsx
index 20b62a2e..154848af 100644
--- a/src/components/basic/MainNavigation/index.tsx
+++ b/src/components/basic/MainNavigation/index.tsx
@@ -38,7 +38,6 @@ export const MainNavigation = ({
 
   return (
     <Box
-      className="cx-main-navigation__wrapper"
       sx={{
         height: `${mainNavigationHeight}px`,
         display: 'flex',
@@ -51,7 +50,6 @@ export const MainNavigation = ({
     >
       {arrayChildren.length > 0 && (
         <Box
-          className="cx-main-navigation__children-top"
           sx={{
             width: '170px',
             paddingTop: '22px',
@@ -63,7 +61,6 @@ export const MainNavigation = ({
       )}
 
       <Box
-        className="cx-main-navigation"
         sx={{
           marginRight: 'auto',
           marginLeft: 'auto',
@@ -71,16 +68,11 @@ export const MainNavigation = ({
           paddingBottom: '22px',
         }}
       >
-        <Navigation
-          className="cx-main-navigation__instance"
-          items={items}
-          component={component}
-        />
+        <Navigation items={items} component={component} />
       </Box>
 
       {arrayChildren.length > 0 && (
         <Box
-          className="cx-main-navigation__children-bottom"
           sx={{
             width: '122px',
             paddingTop: '22px',
diff --git a/src/components/basic/Menu/MenuItem.tsx b/src/components/basic/Menu/MenuItem.tsx
index 95091857..b76f9694 100644
--- a/src/components/basic/Menu/MenuItem.tsx
+++ b/src/components/basic/Menu/MenuItem.tsx
@@ -77,7 +77,6 @@ export const MenuItem = ({
 
   return (
     <ListItem
-      className="cx-list-item"
       sx={{
         display: 'block',
         position: 'relative',
@@ -91,7 +90,6 @@ export const MenuItem = ({
       }}
     >
       <Link
-        className="cx-list-item__link"
         component={component}
         sx={{
           color: `${disable ? 'text.disabled' : 'text.primary'}`,
@@ -117,7 +115,6 @@ export const MenuItem = ({
         {title}
         {hint && (
           <Box
-            className="cx-list-item__hint"
             sx={{
               backgroundColor: '#9AA9E2',
               borderRadius: '5px',
@@ -129,7 +126,6 @@ export const MenuItem = ({
             }}
           >
             <Typography
-              className="cx-list-item__help-text"
               variant="helper"
               display="block"
               sx={{
@@ -144,17 +140,12 @@ export const MenuItem = ({
           </Box>
         )}
         {children != null && (
-          <ArrowForward
-            className="cx-list-item__arrow-fwd"
-            fontSize="small"
-            sx={{ color: 'icon.icon02' }}
-          />
+          <ArrowForward fontSize="small" sx={{ color: 'icon.icon02' }} />
         )}
         {showNotificationCount &&
           notificationInfo != null &&
           notificationInfo.notificationCount > 0 && (
             <Typography
-              className="cx-list-item__notification-text"
               sx={{
                 fontWeight: '500',
                 fontSize: '0.75rem',
@@ -171,7 +162,7 @@ export const MenuItem = ({
           )}
       </Link>
       {Menu != null && children != null && open && (
-        <Menu className="cx-list-item__menu" items={children} {...menuProps} />
+        <Menu items={children} {...menuProps} />
       )}
       {divider && <Divider />}
     </ListItem>
diff --git a/src/components/basic/Menu/index.tsx b/src/components/basic/Menu/index.tsx
index fd037ec5..4f09e597 100644
--- a/src/components/basic/Menu/index.tsx
+++ b/src/components/basic/Menu/index.tsx
@@ -45,8 +45,8 @@ export const Menu = ({
   const { spacing } = useTheme()
 
   return (
-    <Box {...props} className="cx-menu">
-      <List sx={{ padding: 0 }} className="cx-menu__list">
+    <Box {...props}>
+      <List sx={{ padding: 0 }}>
         {items?.map((item) => (
           <MenuItem
             {...item}
@@ -60,9 +60,7 @@ export const Menu = ({
           />
         ))}
       </List>
-      {divider && (
-        <Divider className="cx-menu__divider" sx={{ margin: spacing(0, 1) }} />
-      )}
+      {divider && <Divider sx={{ margin: spacing(0, 1) }} />}
     </Box>
   )
 }
diff --git a/src/components/basic/MultiSelectList/Components/SelectAddMore.tsx b/src/components/basic/MultiSelectList/Components/SelectAddMore.tsx
index d55a1fcf..9900bd1d 100644
--- a/src/components/basic/MultiSelectList/Components/SelectAddMore.tsx
+++ b/src/components/basic/MultiSelectList/Components/SelectAddMore.tsx
@@ -48,7 +48,7 @@ export const SelectAddMore = ({
 }: SelectAddMoreProps) => {
   const marginTop = margin === 'normal' ? '16px' : '8px'
   return (
-    <Box className="cx-multi-select__add-more">
+    <Box>
       <Typography
         variant="label3"
         fontSize="14px"
@@ -56,7 +56,6 @@ export const SelectAddMore = ({
         sx={{
           marginBottom: '10px',
         }}
-        className="cx-multi-select__label"
       >
         {label}
       </Typography>
@@ -68,7 +67,6 @@ export const SelectAddMore = ({
         }}
       >
         <Box
-          className="cx-multi-select__tags"
           sx={{
             display: 'flex',
             flexDirection: 'row',
@@ -86,7 +84,6 @@ export const SelectAddMore = ({
             ))
           ) : (
             <Typography
-              className="cx-multi-select__no-item"
               variant="body1"
               fontSize="18px"
               sx={{
@@ -99,12 +96,8 @@ export const SelectAddMore = ({
             </Typography>
           )}
         </Box>
-        <Box
-          sx={{ height: '40px', width: '20%' }}
-          className="cx-multi-select__buttons"
-        >
+        <Box sx={{ height: '40px', width: '20%' }}>
           <Button
-            className="cx-multi-select__button"
             sx={{ width: 'fit-content', float: 'right' }}
             size={tagSize}
             color="secondary"
diff --git a/src/components/basic/MultiSelectList/Components/SelectInput.tsx b/src/components/basic/MultiSelectList/Components/SelectInput.tsx
index d81c9f42..6700fc2b 100644
--- a/src/components/basic/MultiSelectList/Components/SelectInput.tsx
+++ b/src/components/basic/MultiSelectList/Components/SelectInput.tsx
@@ -48,7 +48,6 @@ export const SelectInput = ({
   autoFocus,
 }: SelectInputProps) => (
   <Box
-    className="cx-multi-select__select-input"
     sx={{
       '.MuiFilledInput-root': {
         paddingTop: '0px !important',
@@ -57,7 +56,6 @@ export const SelectInput = ({
     }}
   >
     <Input
-      className="cx-multi-select__input"
       fullWidth={params.fullWidth}
       InputProps={params.InputProps}
       inputProps={params.inputProps}
diff --git a/src/components/basic/MultiSelectList/Components/SelectOptions.tsx b/src/components/basic/MultiSelectList/Components/SelectOptions.tsx
index 6a477160..ad06262c 100644
--- a/src/components/basic/MultiSelectList/Components/SelectOptions.tsx
+++ b/src/components/basic/MultiSelectList/Components/SelectOptions.tsx
@@ -29,7 +29,6 @@ interface SelectOptionsProps {
 
 export const SelectOptions = ({ props, parts }: SelectOptionsProps) => (
   <li
-    className="cx-multi-select__select-option"
     {...props}
     style={{
       paddingBottom: '0px',
@@ -39,7 +38,6 @@ export const SelectOptions = ({ props, parts }: SelectOptionsProps) => (
     }}
   >
     <Box
-      className="cx-multi-select__select-option--parts"
       sx={{
         borderBottom: '1px solid #f2f2f2 !important',
         width: '100%',
@@ -48,7 +46,6 @@ export const SelectOptions = ({ props, parts }: SelectOptionsProps) => (
     >
       {parts.map((part: PartsType) => (
         <span
-          className="cx-multi-select__select-option--part"
           key={part.text}
           style={{
             fontWeight: part.highlight ? 700 : 400,
diff --git a/src/components/basic/MultiSelectList/Components/SelectedTag.tsx b/src/components/basic/MultiSelectList/Components/SelectedTag.tsx
index b0e454a9..4c3124f2 100644
--- a/src/components/basic/MultiSelectList/Components/SelectedTag.tsx
+++ b/src/components/basic/MultiSelectList/Components/SelectedTag.tsx
@@ -49,9 +49,8 @@ export const SelectedTag = ({ title, size }: SelectedTagProps) => {
   }, [size])
 
   return (
-    <Box className="cx-multi-select__selected-tags">
+    <Box>
       <Typography
-        className="cx-multi-select__selected-tags--title"
         sx={{
           width: 'fit-content',
           padding: tagStyle.padding,
diff --git a/src/components/basic/MultiSelectList/index.tsx b/src/components/basic/MultiSelectList/index.tsx
index ea7aff4c..32334443 100644
--- a/src/components/basic/MultiSelectList/index.tsx
+++ b/src/components/basic/MultiSelectList/index.tsx
@@ -124,20 +124,15 @@ export const MultiSelectList = ({
   }, [error])
 
   return (
-    <Box className="cx-multi-select__list">
+    <Box>
       {!showItems ? (
         <Autocomplete
-          className="cx-multi-select__autocomplete"
           id="selectList"
           sx={{ width: '100%' }}
           clearText={clearText}
           noOptionsText={noOptionsText}
           PopperComponent={({ style, ...props }) => (
-            <Popper
-              className="cx-multi-select__popper"
-              {...props}
-              style={{ ...style, height: 0 }}
-            />
+            <Popper {...props} style={{ ...style, height: 0 }} />
           )}
           ListboxProps={{ style: { maxHeight: selectHeight } }}
           multiple
@@ -150,7 +145,6 @@ export const MultiSelectList = ({
             selectedItems.map((option, index: number) => (
               <Chip
                 {...getTagProps({ index })}
-                className="cx-multi-select__chip"
                 key={option[keyTitle]}
                 variant="filled"
                 label={option[keyTitle]}
@@ -180,7 +174,6 @@ export const MultiSelectList = ({
           }
           renderInput={(param: AutocompleteRenderInputParams) => (
             <SelectInput
-              className="cx-multi-select__select-input"
               params={param}
               label={label}
               placeholder={placeholder}
diff --git a/src/components/basic/NewSubNavigation/index.tsx b/src/components/basic/NewSubNavigation/index.tsx
index 531e246b..818cffe1 100644
--- a/src/components/basic/NewSubNavigation/index.tsx
+++ b/src/components/basic/NewSubNavigation/index.tsx
@@ -54,7 +54,6 @@ export const NewSubNavigation = ({
   const [highlight, setHighlight] = useState('')
   return (
     <Box
-      className="cx-new-subnavigation"
       onMouseOver={() => {
         setShow(true)
       }}
@@ -70,7 +69,6 @@ export const NewSubNavigation = ({
             <Box className="cx-new-subnavigation__instance--container navigationOverlayContainer">
               <MoreVertIcon />
               <Typography
-                className="cx-new-subnavigation__instance--header"
                 variant="h4"
                 sx={{
                   marginLeft: '10px',
@@ -119,7 +117,6 @@ export const NewSubNavigation = ({
                           }}
                         />
                         <Typography
-                          className="cx-new-subnavigation__overlay--link-title"
                           variant="h4"
                           sx={{
                             color:
@@ -170,7 +167,6 @@ export const NewSubNavigation = ({
             </Box>
             {buttonArray?.length === 1 && (
               <Button
-                className="cx-new-subnavigation__instance--btn"
                 onClick={(e) => {
                   buttonArray[0].onButtonClick(e)
                   setShow(!show)
diff --git a/src/components/basic/Notifications/PageNotification/NotificationContent.tsx b/src/components/basic/Notifications/PageNotification/NotificationContent.tsx
index d123d0f7..1a0e4400 100644
--- a/src/components/basic/Notifications/PageNotification/NotificationContent.tsx
+++ b/src/components/basic/Notifications/PageNotification/NotificationContent.tsx
@@ -35,7 +35,7 @@ export const NotificationContent = ({
   titleColor,
 }: NotificationContentProps) => {
   return (
-    <Box className="cx-page-notification__content">
+    <Box>
       {title && (
         <span
           style={{
diff --git a/src/components/basic/Notifications/PageNotification/index.tsx b/src/components/basic/Notifications/PageNotification/index.tsx
index b2e5ffee..fb17dc04 100644
--- a/src/components/basic/Notifications/PageNotification/index.tsx
+++ b/src/components/basic/Notifications/PageNotification/index.tsx
@@ -87,9 +87,8 @@ export const PageNotifications = ({
   showIcon,
 }: PageNotificationsProps) => {
   return (
-    <Collapse in={open} className="cx-page-notification">
+    <Collapse in={open}>
       <Alert
-        className="cx-page-notification__alert"
         severity={severity}
         variant="outlined"
         icon={showIcon === false ? false : titleIcon(severity)}
@@ -100,7 +99,6 @@ export const PageNotifications = ({
         }}
         action={
           <IconButton
-            className="cx-page-notification__icon-btn"
             aria-label="close"
             size="small"
             onClick={onCloseNotification}
diff --git a/src/components/basic/Notifications/Snackbar/PageSnackbarStack.tsx b/src/components/basic/Notifications/Snackbar/PageSnackbarStack.tsx
index b419ac37..011529bb 100644
--- a/src/components/basic/Notifications/Snackbar/PageSnackbarStack.tsx
+++ b/src/components/basic/Notifications/Snackbar/PageSnackbarStack.tsx
@@ -24,7 +24,6 @@ import { type PropsWithChildren } from 'react'
 export const PageSnackbarStack = ({ children }: PropsWithChildren<unknown>) => {
   return (
     <Box
-      className="cx-snackbar__children"
       sx={{
         position: 'fixed',
         top: 0,
diff --git a/src/components/basic/Notifications/Snackbar/index.tsx b/src/components/basic/Notifications/Snackbar/index.tsx
index 9ff7c630..3b072b83 100644
--- a/src/components/basic/Notifications/Snackbar/index.tsx
+++ b/src/components/basic/Notifications/Snackbar/index.tsx
@@ -92,7 +92,6 @@ export const PageSnackbar = ({
 
   return (
     <Snackbar
-      className="cx-snackbar__wrapper"
       anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
       open={isOpen}
       key={'bottom right'}
@@ -101,10 +100,7 @@ export const PageSnackbar = ({
       onMouseEnter={cancelAutoClose}
       onMouseLeave={handleAutoClose}
       message={
-        <Box
-          sx={{ display: 'flex', width: '100%', alignItems: 'flex-start' }}
-          className="cx-snackbar"
-        >
+        <Box sx={{ display: 'flex', width: '100%', alignItems: 'flex-start' }}>
           {showIcon && (
             <Box
               sx={{
@@ -117,10 +113,7 @@ export const PageSnackbar = ({
               {renderIcon()}
             </Box>
           )}
-          <Box
-            sx={{ flex: '1 1 auto', alignSelf: 'center' }}
-            className="cx-snackbar__title"
-          >
+          <Box sx={{ flex: '1 1 auto', alignSelf: 'center' }}>
             {title && (
               <Box
                 component="span"
@@ -132,7 +125,6 @@ export const PageSnackbar = ({
             {description}
           </Box>
           <Box
-            className="cx-snackbar__icon"
             sx={{
               flex: '0 0 auto',
               marginLeft: 1.5,
diff --git a/src/components/basic/OrderStatusButton/index.tsx b/src/components/basic/OrderStatusButton/index.tsx
index 2dcfd297..c3943d12 100644
--- a/src/components/basic/OrderStatusButton/index.tsx
+++ b/src/components/basic/OrderStatusButton/index.tsx
@@ -61,7 +61,6 @@ export const OrderStatusButton = ({
   ) => {
     return (
       <Button
-        className="cx-order-status__button"
         key={numberLabel}
         sx={{
           width: '32%',
@@ -90,7 +89,6 @@ export const OrderStatusButton = ({
           />
         ) : (
           <Typography
-            className="cx-order-status__button-number"
             variant="label5"
             sx={{
               background: '#a2a2a2',
@@ -109,7 +107,6 @@ export const OrderStatusButton = ({
           </Typography>
         )}
         <Typography
-          className="cx-order-status__button-label"
           variant="body2"
           sx={{
             fontSize: '11px',
diff --git a/src/components/basic/ProcessList/ListItem.tsx b/src/components/basic/ProcessList/ListItem.tsx
index 0cb7fc9e..9e52dd7d 100644
--- a/src/components/basic/ProcessList/ListItem.tsx
+++ b/src/components/basic/ProcessList/ListItem.tsx
@@ -42,13 +42,11 @@ export const ListItem = ({
   const borderToNextStep = !lastItem ? `2px solid ${stepsColor}` : 'none'
   return (
     <Box
-      className="cx-process-list-item"
       sx={{
         display: 'flex',
       }}
     >
       <Box
-        className="cx-process-list-item__step"
         sx={{
           width: '32px',
           height: '32px',
@@ -56,7 +54,6 @@ export const ListItem = ({
         }}
       >
         <Box
-          className="cx-process-list-item__step-outer"
           sx={{
             backgroundColor: stepsColor,
             borderRadius: '50%',
@@ -68,7 +65,6 @@ export const ListItem = ({
           }}
         >
           <Typography
-            className="cx-process-list-item__step-text"
             variant="h5"
             fontSize="16px"
             color={stepsFontColor}
@@ -84,13 +80,11 @@ export const ListItem = ({
       </Box>
 
       <Box
-        className="cx-process-list-item__content"
         sx={{
           width: '100%',
         }}
       >
         <Typography
-          className="cx-process-list-item__content-heading"
           variant="h5"
           fontSize="16px"
           sx={{
@@ -102,7 +96,6 @@ export const ListItem = ({
         </Typography>
 
         <Typography
-          className="cx-process-list-item__content-description"
           variant="body2"
           fontSize="16px"
           color={theme.palette.text.tertiary}
@@ -116,7 +109,6 @@ export const ListItem = ({
           {description}
         </Typography>
         <Box
-          className="cx-process-list-item__content-border"
           sx={{
             height: '28px',
             borderLeft: borderToNextStep,
diff --git a/src/components/basic/ProcessList/index.tsx b/src/components/basic/ProcessList/index.tsx
index c9c64d8c..91ec5241 100644
--- a/src/components/basic/ProcessList/index.tsx
+++ b/src/components/basic/ProcessList/index.tsx
@@ -36,7 +36,7 @@ export const ProcessList = ({
   elementNumbers,
 }: ProcessListProps) => {
   return (
-    <Box className="cx-process-list">
+    <Box>
       {list
         .filter(
           (item: StepList) =>
diff --git a/src/components/basic/Progress/CircleProgress/index.tsx b/src/components/basic/Progress/CircleProgress/index.tsx
index 4fc7eaec..5e348ea7 100644
--- a/src/components/basic/Progress/CircleProgress/index.tsx
+++ b/src/components/basic/Progress/CircleProgress/index.tsx
@@ -64,7 +64,6 @@ export const CircleProgress = ({
 
   return (
     <CircularProgress
-      className="cx-circular-progress"
       variant={variant}
       value={progress}
       color={colorVariant}
diff --git a/src/components/basic/Progress/LinearProgress/LinearProgressWithValueLabel.tsx b/src/components/basic/Progress/LinearProgress/LinearProgressWithValueLabel.tsx
index e98d0c4c..d59c696a 100644
--- a/src/components/basic/Progress/LinearProgress/LinearProgressWithValueLabel.tsx
+++ b/src/components/basic/Progress/LinearProgress/LinearProgressWithValueLabel.tsx
@@ -29,12 +29,8 @@ function LinearProgressWithLabel(
   props: LinearProgressProps & { value: number; progressText: string }
 ) {
   return (
-    <Box
-      sx={{ display: 'flex', alignItems: 'center' }}
-      className="cx-linear-progress"
-    >
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
       <CircularProgress
-        className="cx-linear-progress__circular"
         size={50}
         sx={{
           position: 'absolute',
@@ -44,28 +40,19 @@ function LinearProgressWithLabel(
         }}
       />
       <Box
-        className="cx-linear-progress__content"
         sx={{ minWidth: 35, position: 'absolute', zIndex: '9', left: '35%' }}
       >
-        <Typography
-          variant="body2"
-          color="#ffffff"
-          className="cx-linear-progress__content--text"
-        >
+        <Typography variant="body2" color="#ffffff">
           {props.progressText}
         </Typography>
       </Box>
-      <Box sx={{ width: '100%', mr: 1 }} className="cx-linear-progress__status">
+      <Box sx={{ width: '100%', mr: 1 }}>
         <LinearProgress variant="determinate" {...props} />
       </Box>
-      <Box
-        sx={{ minWidth: 35, position: 'absolute', right: '25%' }}
-        className="cx-linear-progress__status--number"
-      >
+      <Box sx={{ minWidth: 35, position: 'absolute', right: '25%' }}>
         <Typography
           variant="body2"
           color="#ffffff"
-          className="cx-linear-progress__status--text"
         >{`${Math.round(props.value)}%`}</Typography>
       </Box>
     </Box>
diff --git a/src/components/basic/QuickLinks/index.tsx b/src/components/basic/QuickLinks/index.tsx
index b9961b50..8b0fc7a5 100644
--- a/src/components/basic/QuickLinks/index.tsx
+++ b/src/components/basic/QuickLinks/index.tsx
@@ -47,14 +47,12 @@ export const QuickLinks = ({
 }: QuickLinksProps) => {
   return (
     <Box
-      className="cx-quick-links"
       sx={{
         width: '100%',
       }}
     >
       {headerTitle && <Typography variant="h4">{headerTitle}</Typography>}
       <Box
-        className="cx-quick-links__buttons"
         sx={{
           textAlign: alignButtons,
           padding: '10px',
@@ -64,7 +62,6 @@ export const QuickLinks = ({
         {items.map((data: QuickLinksItems) => {
           return (
             <MuiButton
-              className="cx-quick-links__button"
               {...props}
               key={data.title}
               onClick={() => window.open(data.navigate, '_blank')}
diff --git a/src/components/basic/Radio/index.tsx b/src/components/basic/Radio/index.tsx
index de0108c9..cd11ce79 100644
--- a/src/components/basic/Radio/index.tsx
+++ b/src/components/basic/Radio/index.tsx
@@ -31,13 +31,10 @@ interface RadioProps extends Omit<MuiRadioProps, 'size'> {
 export const Radio = ({ size = 'medium', label, ...props }: RadioProps) => {
   return label ? (
     <FormControlLabel
-      className="cx-form-label__radio"
-      control={
-        <MuiRadio className="cx-radio" size={size} {...props} {...ariaLabel} />
-      }
+      control={<MuiRadio size={size} {...props} {...ariaLabel} />}
       label={label}
     />
   ) : (
-    <MuiRadio className="cx-radio" size={size} {...props} {...ariaLabel} />
+    <MuiRadio size={size} {...props} {...ariaLabel} />
   )
 }
diff --git a/src/components/basic/Rating/index.tsx b/src/components/basic/Rating/index.tsx
index 73e5ff64..153a08c3 100644
--- a/src/components/basic/Rating/index.tsx
+++ b/src/components/basic/Rating/index.tsx
@@ -30,13 +30,11 @@ export const Rating = ({ defaultRating }: RatingContentProps) => {
   const [value, setValue] = React.useState<number | null>(defaultRating)
   return (
     <Box
-      className="cx-rating"
       sx={{
         '& > legend': { mt: defaultRating },
       }}
     >
       <RatingUI
-        className="cx-rating__instance"
         name="half-rating"
         precision={0.5}
         value={value}
diff --git a/src/components/basic/SearchInput/index.tsx b/src/components/basic/SearchInput/index.tsx
index 8a6ad248..2c1faf7b 100644
--- a/src/components/basic/SearchInput/index.tsx
+++ b/src/components/basic/SearchInput/index.tsx
@@ -78,9 +78,8 @@ export const SearchInput = ({
   }
 
   return (
-    <Box className="cx-search-input">
+    <Box>
       <TextField
-        className="cx-search-input__text-field"
         sx={{
           borderColor: theme.palette.primary.main,
           width: '100%',
diff --git a/src/components/basic/SelectList/index.tsx b/src/components/basic/SelectList/index.tsx
index d82002ff..a66a8256 100644
--- a/src/components/basic/SelectList/index.tsx
+++ b/src/components/basic/SelectList/index.tsx
@@ -77,7 +77,6 @@ export const SelectList = ({
 
   return (
     <Autocomplete
-      className="cx-select-list"
       id="singleSelectList"
       sx={{ width: '100%' }}
       clearText={clearText}
@@ -106,7 +105,6 @@ export const SelectList = ({
       renderInput={(params) => {
         return (
           <SelectInput
-            className="cx-select-list__input"
             params={params}
             label={label}
             placeholder={placeholder}
diff --git a/src/components/basic/SideMenu/index.tsx b/src/components/basic/SideMenu/index.tsx
index 31acd528..739ab334 100644
--- a/src/components/basic/SideMenu/index.tsx
+++ b/src/components/basic/SideMenu/index.tsx
@@ -57,7 +57,6 @@ export const SideMenu = ({
 
   return (
     <Box
-      className="cx-side-menu"
       {...props}
       sx={{
         width: '300px',
@@ -71,16 +70,12 @@ export const SideMenu = ({
       }}
     >
       {header && (
-        <Box
-          className="cx-side-menu__header"
-          sx={{ typography: 'label3', fontWeight: 600, marginBottom: 1.5 }}
-        >
+        <Box sx={{ typography: 'label3', fontWeight: 600, marginBottom: 1.5 }}>
           {header}
         </Box>
       )}
       {subHeader && (
         <Box
-          className="cx-side-menu--subheader"
           sx={{
             typography: 'label3',
             color: 'text.tertiary',
@@ -91,16 +86,11 @@ export const SideMenu = ({
           {subHeader}
         </Box>
       )}
-      <Box className="cx-side-menu__instance">
+      <Box>
         <Fade in={expanded}>
-          <Box className="cx-side-menu__instance--expand">
-            <Collapse
-              in={expanded}
-              collapsedSize={0}
-              className="cx-side-menu__instance--collapse"
-            >
+          <Box>
+            <Collapse in={expanded} collapsedSize={0}>
               <Box
-                className="cx-side-menu__instance--children"
                 sx={{
                   paddingTop: 2,
                   paddingBottom: 4,
diff --git a/src/components/basic/SortOption/index.tsx b/src/components/basic/SortOption/index.tsx
index 738f2b51..a9e5b2b3 100644
--- a/src/components/basic/SortOption/index.tsx
+++ b/src/components/basic/SortOption/index.tsx
@@ -52,14 +52,12 @@ export const SortOption = ({
     <>
       {show && (
         <Box
-          className="cx-sort-option"
           sx={{
             padding: '8px',
           }}
         >
           {sortOptions.map((entry: SortOptionsType) => (
             <Box
-              className="cx-sort-option__item"
               key={entry.value}
               onClick={(e) => {
                 handleSortSelection(e, entry.value)
@@ -88,7 +86,6 @@ export const SortOption = ({
               }}
             >
               <Typography
-                className="cx-sort-option__item-label"
                 variant="h1"
                 sx={{
                   fontSize: '14px',
diff --git a/src/components/basic/StaticTable/EditField.tsx b/src/components/basic/StaticTable/EditField.tsx
index e318e473..07c8c3bb 100644
--- a/src/components/basic/StaticTable/EditField.tsx
+++ b/src/components/basic/StaticTable/EditField.tsx
@@ -56,13 +56,9 @@ export const EditField = ({
 
   const renderInputField = () => {
     return (
-      <div
-        style={{ width: '100%', display: 'flex', alignItems: 'center' }}
-        className="cx-static-table__edit-field"
-      >
+      <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
         <div style={{ width: '100%' }}>
           <Input
-            className="cx-static-table__edit-field--input"
             onChange={(e) => {
               addInputValue(e.target.value)
             }}
@@ -86,13 +82,12 @@ export const EditField = ({
             tooltipPlacement="bottom-start"
             tooltipText={inputErrorMessage}
           >
-            <span className="cx-static-table__edit-field--tooltop">
+            <span>
               <ErrorOutlineIcon sx={{ marginTop: '35px' }} color="error" />
             </span>
           </Tooltips>
         )}
         <CloseIcon
-          className="cx-static-table__edit-field--icon"
           onClick={() => {
             setInputField(false)
           }}
@@ -108,18 +103,11 @@ export const EditField = ({
         renderInputField()
       ) : (
         <span
-          className="cx-static-table__input-field"
           style={{ cursor: 'pointer', display: 'flex', flexDirection: 'row' }}
         >
-          <Typography
-            className="cx-static-table__input-field--text"
-            variant="body3"
-          >
-            {value}
-          </Typography>
+          <Typography variant="body3">{value}</Typography>
           <span style={{ marginLeft: 'auto' }}>
             <EditIcon
-              className="cx-static-table__input-field--icon"
               onClick={() => {
                 handleEditFn(value as string)
               }}
diff --git a/src/components/basic/StaticTable/HorizontalTable.tsx b/src/components/basic/StaticTable/HorizontalTable.tsx
index 58ba3432..0dfaf4a8 100644
--- a/src/components/basic/StaticTable/HorizontalTable.tsx
+++ b/src/components/basic/StaticTable/HorizontalTable.tsx
@@ -41,7 +41,6 @@ export const HorizontalTable = ({ data }: { data: TableType }) => {
   const renderCopy = (copyData: { icon: boolean; copyValue?: string }) => {
     return (
       <Box
-        className="cx-static-table__horizontal"
         sx={{
           cursor: 'pointer',
           display: 'inline-flex',
@@ -57,7 +56,6 @@ export const HorizontalTable = ({ data }: { data: TableType }) => {
         }}
       >
         <ContentCopyIcon
-          className="cx-static-table__horizontal--icon"
           sx={{
             fontSize: '18px',
             marginLeft: '10px',
diff --git a/src/components/basic/StaticTable/VerticalTable.tsx b/src/components/basic/StaticTable/VerticalTable.tsx
index fc06740a..cdb70ec8 100644
--- a/src/components/basic/StaticTable/VerticalTable.tsx
+++ b/src/components/basic/StaticTable/VerticalTable.tsx
@@ -66,14 +66,8 @@ export const VerticalTable = ({
 
   const renderInputField = (row: number, column: number) => {
     return (
-      <div
-        style={{ width: '100%', display: 'flex', alignItems: 'center' }}
-        className="cx-static-table__vertical--input"
-      >
-        <div
-          style={{ width: '100%' }}
-          className="cx-static-table__vertical--input-field"
-        >
+      <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
+        <div style={{ width: '100%' }}>
           <Input
             onChange={(e) => {
               addInputValue(e.target.value, row, column)
@@ -96,13 +90,12 @@ export const VerticalTable = ({
             tooltipPlacement="bottom-start"
             tooltipText={inputErrorMessage}
           >
-            <span className="cx-static-table__vertical--input-tooltip">
+            <span>
               <ErrorOutlineIcon sx={{ marginTop: '35px' }} color="error" />
             </span>
           </Tooltips>
         )}
         <CloseIcon
-          className="cx-static-table__vertical--input-icon"
           onClick={() => {
             setInputField(null)
           }}
@@ -116,7 +109,6 @@ export const VerticalTable = ({
 
   return (
     <table
-      className="cx-static-table__vertical"
       style={{ width: '100%', borderCollapse: 'collapse' }}
       onClick={() => {
         setInputField(null)
diff --git a/src/components/basic/StaticTable/VerticalTableNew.tsx b/src/components/basic/StaticTable/VerticalTableNew.tsx
index c0c01881..a4609432 100644
--- a/src/components/basic/StaticTable/VerticalTableNew.tsx
+++ b/src/components/basic/StaticTable/VerticalTableNew.tsx
@@ -43,15 +43,11 @@ export interface VerticalTableType {
 
 export const VerticalTableNew = ({ data }: { data: VerticalTableType }) => {
   return (
-    <table
-      style={{ borderCollapse: 'collapse', width: '100%' }}
-      className="cx-static-table__vertical-new"
-    >
-      <thead className="cx-static-table__vertical-new--thead">
-        <tr className="cx-static-table__vertical-new--tr">
+    <table style={{ borderCollapse: 'collapse', width: '100%' }}>
+      <thead>
+        <tr>
           {data.head.map((col, c) => (
             <th
-              className="cx-static-table__vertical-new--th"
               style={{
                 backgroundColor: '#ecf0f4',
                 padding: '10px 15px',
@@ -59,25 +55,16 @@ export const VerticalTableNew = ({ data }: { data: VerticalTableType }) => {
               }}
               key={JSON.stringify(c)}
             >
-              <Typography
-                variant="label3"
-                className="cx-static-table__vertical-new--col"
-              >
-                {col}
-              </Typography>
+              <Typography variant="label3">{col}</Typography>
             </th>
           ))}
         </tr>
       </thead>
-      <tbody className="cx-static-table__vertical-new--tbody">
+      <tbody>
         {data.body.map((row, rIndex) => (
-          <tr
-            key={JSON.stringify(rIndex)}
-            className="cx-static-table__vertical-new--tr"
-          >
+          <tr key={JSON.stringify(rIndex)}>
             {row.map((col, cindex) => (
               <td
-                className="cx-static-table__vertical-new--td"
                 key={JSON.stringify(cindex)}
                 style={{
                   width: '50%',
diff --git a/src/components/basic/Stepper/StepperItem.tsx b/src/components/basic/Stepper/StepperItem.tsx
index 2adc1f46..486b7909 100644
--- a/src/components/basic/Stepper/StepperItem.tsx
+++ b/src/components/basic/Stepper/StepperItem.tsx
@@ -78,7 +78,6 @@ export const StepperItem = ({
             }}
           >
             <Typography
-              className="cx-stepper__item--hint-text"
               variant="body1"
               fontSize="14px"
               color="#fff"
@@ -119,7 +118,6 @@ export const StepperItem = ({
           <Box className="hintStepMobile cx-stepper__item-mobile">
             {index === activeStep && (
               <Link
-                className="cx-stepper__item-mobile--hint"
                 href={tooltipLink}
                 target="_blank"
                 sx={{
@@ -130,7 +128,6 @@ export const StepperItem = ({
                 }}
               >
                 <Typography
-                  className="cx-stepper__item-mobile--hint-helptext"
                   variant="label3"
                   fontSize="12px"
                   sx={{
diff --git a/src/components/basic/Stepper/index.tsx b/src/components/basic/Stepper/index.tsx
index e3488374..b122b9c6 100644
--- a/src/components/basic/Stepper/index.tsx
+++ b/src/components/basic/Stepper/index.tsx
@@ -49,7 +49,6 @@ export const Stepper = ({
 }: StepperProps) => {
   return (
     <Box
-      className="cx-stepper__wrapper"
       sx={{
         margin: '0px auto',
       }}
diff --git a/src/components/basic/SubNavigation/SubNavigationButton.tsx b/src/components/basic/SubNavigation/SubNavigationButton.tsx
index 68a7d2b6..d11f15ea 100644
--- a/src/components/basic/SubNavigation/SubNavigationButton.tsx
+++ b/src/components/basic/SubNavigation/SubNavigationButton.tsx
@@ -28,7 +28,6 @@ export const SubNavigationButton = ({
 }: SubNavigationProps) => {
   return (
     <Box
-      className="cx-subnavigation__button--wrap"
       sx={{
         height: 'fit-content',
         margin: '32px 0px',
@@ -37,7 +36,6 @@ export const SubNavigationButton = ({
     >
       {buttonLabel && onButtonClick != null && (
         <Button
-          className="cx-subnavigation__button"
           onClick={onButtonClick}
           color="secondary"
           variant="outlined"
diff --git a/src/components/basic/SubNavigation/SubNavigationLink.tsx b/src/components/basic/SubNavigation/SubNavigationLink.tsx
index a423320b..4a54cd66 100644
--- a/src/components/basic/SubNavigation/SubNavigationLink.tsx
+++ b/src/components/basic/SubNavigation/SubNavigationLink.tsx
@@ -31,7 +31,6 @@ export const SubNavigationLink = ({
 }: SubNavigationProps) => {
   return (
     <Box
-      className="cx-subnavigation__link"
       sx={{
         display: 'flex',
         height: 'fit-content',
diff --git a/src/components/basic/SubNavigation/index.tsx b/src/components/basic/SubNavigation/index.tsx
index a190dea1..695d879a 100644
--- a/src/components/basic/SubNavigation/index.tsx
+++ b/src/components/basic/SubNavigation/index.tsx
@@ -41,7 +41,6 @@ export const SubNavigation = ({
 }: SubNavigationProps) => {
   return (
     <Box
-      className="cx-subnavigation"
       sx={{
         height: '116px',
         backgroundColor: theme.palette.accent.accent02,
diff --git a/src/components/basic/Table/PageLoadingTable.tsx b/src/components/basic/Table/PageLoadingTable.tsx
index 6aa4614f..8dac8310 100644
--- a/src/components/basic/Table/PageLoadingTable.tsx
+++ b/src/components/basic/Table/PageLoadingTable.tsx
@@ -152,7 +152,6 @@ export const PageLoadingTable = function <Row, Args>({
   return (
     <>
       <Table
-        className="cx-table__page-loading"
         rowsCount={items.length}
         rowsCountMax={maxRows}
         hideFooter={items.length < (props.rowCount ?? 100)}
@@ -165,7 +164,6 @@ export const PageLoadingTable = function <Row, Args>({
       {/* Display loading spinner while fetching data */}
       {items.length > 0 && loading && (
         <Box
-          className="cx-table__page-loading--loader"
           sx={{
             width: '100%',
             height: '100px',
@@ -181,7 +179,6 @@ export const PageLoadingTable = function <Row, Args>({
       {!hasMore && !loading && items.length > 0 && (
         <Typography
           variant="caption3"
-          className="cx-table__page-loading--end"
           sx={{
             display: 'flex',
             justifyContent: 'center',
diff --git a/src/components/basic/Table/index.tsx b/src/components/basic/Table/index.tsx
index e30db4fe..a5d34c05 100644
--- a/src/components/basic/Table/index.tsx
+++ b/src/components/basic/Table/index.tsx
@@ -226,7 +226,6 @@ export const Table = ({
   return (
     <>
       <Box
-        className="cx-table"
         sx={{
           '.MuiDataGrid-columnHeaders': {
             backgroundColor: columnHeadersBackgroundColor,
@@ -268,7 +267,6 @@ export const Table = ({
       </Box>
       {rows.length > 0 && hasMore ? (
         <Box
-          className="cx-table__page-loading--loader"
           sx={{
             width: '100%',
             height: '100px',
diff --git a/src/components/basic/Tabs/Tab.tsx b/src/components/basic/Tabs/Tab.tsx
index f4cb7c60..c0b4b3e1 100644
--- a/src/components/basic/Tabs/Tab.tsx
+++ b/src/components/basic/Tabs/Tab.tsx
@@ -21,5 +21,5 @@
 import MuiTab, { type TabProps as MuiTabProps } from '@mui/material/Tab'
 
 export const Tab = ({ ...props }: MuiTabProps) => {
-  return <MuiTab className="cx-tab" {...props} />
+  return <MuiTab {...props} />
 }
diff --git a/src/components/basic/Tabs/TabPanel.tsx b/src/components/basic/Tabs/TabPanel.tsx
index f11257fe..33e935ca 100644
--- a/src/components/basic/Tabs/TabPanel.tsx
+++ b/src/components/basic/Tabs/TabPanel.tsx
@@ -32,7 +32,6 @@ export const TabPanel = (props: TabPanelProps) => {
 
   return (
     <div
-      className="cx-tab-panel"
       role="tabpanel"
       hidden={value !== index}
       id={`basic-tabpanel-${index}`}
diff --git a/src/components/basic/Tabs/Tabs.tsx b/src/components/basic/Tabs/Tabs.tsx
index 7b0bd5c6..c2916666 100644
--- a/src/components/basic/Tabs/Tabs.tsx
+++ b/src/components/basic/Tabs/Tabs.tsx
@@ -26,9 +26,5 @@ interface TabsProps extends MuiTabsProps {
 }
 
 export const Tabs = ({ children, ...props }: TabsProps) => {
-  return (
-    <MuiTabs className="cx-tabs" {...props}>
-      {children}
-    </MuiTabs>
-  )
+  return <MuiTabs {...props}>{children}</MuiTabs>
 }
diff --git a/src/components/basic/Textarea/index.tsx b/src/components/basic/Textarea/index.tsx
index 67dee82c..8e5ef68a 100644
--- a/src/components/basic/Textarea/index.tsx
+++ b/src/components/basic/Textarea/index.tsx
@@ -41,26 +41,18 @@ export const Textarea = ({
   ...props
 }: TextareaProps) => {
   return (
-    <Box className="cx-textarea">
+    <Box>
       <FormControl
-        className="cx-form-control"
         sx={{
           width: '100%',
         }}
         error={error}
         variant="filled"
       >
-        <InputLabel className="cx-textarea__input">{label}</InputLabel>
-        <TextareaAutosize
-          className="cx-textarea__autosize"
-          placeholder={placeholder}
-          {...props}
-        />
+        <InputLabel>{label}</InputLabel>
+        <TextareaAutosize placeholder={placeholder} {...props} />
         {error && helperText && (
-          <FormHelperText
-            className="cx-textarea__helper-text"
-            sx={{ marginLeft: 0, marginBottom: '-23px' }}
-          >
+          <FormHelperText sx={{ marginLeft: 0, marginBottom: '-23px' }}>
             {helperText}
           </FormHelperText>
         )}
diff --git a/src/components/basic/ToolTips/index.tsx b/src/components/basic/ToolTips/index.tsx
index 08f28212..a6db03c0 100644
--- a/src/components/basic/ToolTips/index.tsx
+++ b/src/components/basic/ToolTips/index.tsx
@@ -57,7 +57,6 @@ export const Tooltips = ({
 
   return (
     <Tooltip
-      className="cx-tooltip"
       title={tooltipText}
       placement={tooltipPlacement}
       arrow={tooltipArrow}
diff --git a/src/components/basic/UserAvatar/index.tsx b/src/components/basic/UserAvatar/index.tsx
index ec5be519..121357f2 100644
--- a/src/components/basic/UserAvatar/index.tsx
+++ b/src/components/basic/UserAvatar/index.tsx
@@ -45,7 +45,6 @@ export const UserAvatar = ({
     : theme.palette.brand.brand02
   const userAvatarImage = userImage ? (
     <Avatar
-      className="cx-avatar"
       alt={altText}
       src={userImage}
       sx={{
@@ -56,7 +55,6 @@ export const UserAvatar = ({
     />
   ) : (
     <Avatar
-      className="cx-avatar"
       sx={{
         backgroundColor: theme.palette.primary.main,
         height: userAvatarSize,
@@ -65,7 +63,6 @@ export const UserAvatar = ({
       {...props}
     >
       <PersonOutlineIcon
-        className="cx-avatar__icon"
         sx={{
           height: `${Number(userAvatarSize.replace(/px/g, '')) / 2}px`,
           width: `${Number(userAvatarSize.replace(/px/g, '')) / 2}px`,
@@ -76,7 +73,6 @@ export const UserAvatar = ({
 
   return (
     <Badge
-      className="cx-avatar__badge"
       overlap="circular"
       anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
       badgeContent={notificationCount}
diff --git a/src/components/basic/VerticalTabs/index.tsx b/src/components/basic/VerticalTabs/index.tsx
index 8fc48a97..d82e882c 100644
--- a/src/components/basic/VerticalTabs/index.tsx
+++ b/src/components/basic/VerticalTabs/index.tsx
@@ -53,7 +53,6 @@ function TabPanel(props: Readonly<TabPanelProps>) {
 
   return (
     <div
-      className="cx-tabs__vertical--panel"
       role="tabpanel"
       hidden={value !== index}
       id={`vertical-tabpanel-${index}`}
@@ -74,14 +73,12 @@ export const VerticalTabs = ({ items }: VerticalTabsProps) => {
 
   return (
     <Box
-      className="cx-tabs__vertical"
       sx={{
         flexGrow: 1,
         display: 'flex',
       }}
     >
       <Tabs
-        className="cx-tabs__vertical__tabs"
         orientation="vertical"
         value={value}
         onChange={handleChange}
@@ -98,7 +95,6 @@ export const VerticalTabs = ({ items }: VerticalTabsProps) => {
       >
         {items.map((item: TabPanelType) => (
           <Tab
-            className="cx-tabs__vertical__tab"
             {...a11yProps(item.id)}
             label={item.label}
             key={uniqueId('vertical-tabs-tab-item')}
diff --git a/src/components/basic/ViewSelector/index.tsx b/src/components/basic/ViewSelector/index.tsx
index 3313e9ca..f7579f8f 100644
--- a/src/components/basic/ViewSelector/index.tsx
+++ b/src/components/basic/ViewSelector/index.tsx
@@ -40,10 +40,9 @@ export const ViewSelector = ({
   align = 'right',
 }: ViewSelectorProps) => {
   return (
-    <Box sx={{ textAlign: align }} className="cx-view-selector">
+    <Box sx={{ textAlign: align }}>
       {views?.map(({ buttonText, buttonValue, onButtonClick }) => (
         <Button
-          className="cx-view-selector__button"
           color={'secondary'}
           variant={
             activeView &&
diff --git a/src/components/content/Cards/AboutCard.tsx b/src/components/content/Cards/AboutCard.tsx
index e85e8211..b88a0fb3 100644
--- a/src/components/content/Cards/AboutCard.tsx
+++ b/src/components/content/Cards/AboutCard.tsx
@@ -24,7 +24,6 @@ import { Typography } from '../../basic/Typography'
 function LinkText(props: Readonly<LinkType>) {
   return (
     <Box
-      className="cx-card__about--heading"
       sx={{
         display: 'flex',
         justifyContent: 'space-between',
@@ -35,9 +34,7 @@ function LinkText(props: Readonly<LinkType>) {
       }}
       onClick={() => window.open(props.url, '_blank')}
     >
-      <Typography className="cx-card__about--heading-text">
-        {props.text}
-      </Typography>
+      <Typography>{props.text}</Typography>
       <OpenInNewIcon />
     </Box>
   )
@@ -46,7 +43,6 @@ function LinkText(props: Readonly<LinkType>) {
 function TitleText(props: Readonly<LinkType>) {
   return (
     <Box
-      className="cx-card__about--title"
       sx={{
         display: 'flex',
         justifyContent: 'flex-start',
@@ -58,13 +54,12 @@ function TitleText(props: Readonly<LinkType>) {
       onClick={() => window.open(props.url, '_blank')}
     >
       <Typography
-        className="cx-card__about--title-text"
         variant="h3"
         sx={{ paddingRight: '10px', textTransform: 'uppercase' }}
       >
         {props.text}
       </Typography>
-      <OpenInNewIcon className="cx-card__about--title-icon" />
+      <OpenInNewIcon />
     </Box>
   )
 }
@@ -85,7 +80,6 @@ export const AboutCard = (props: {
 }) => {
   return (
     <Box
-      className="cx-card__about--item"
       sx={{
         display: 'flex',
         justifyContent: 'center',
@@ -94,7 +88,6 @@ export const AboutCard = (props: {
       }}
     >
       <Box
-        className="cx-card__about--item-wrap"
         sx={{
           background: '#FFFFFF',
           boxShadow: '0px 5px 10px rgba(80, 80, 80, 0.3)',
@@ -102,7 +95,7 @@ export const AboutCard = (props: {
           width: '100%',
         }}
       >
-        <Box className="cx-card__about--item-title">
+        <Box>
           <TitleText text={props.name} url={props.repositoryPath} />
           {props.license && props.licensePath && (
             <LinkText
@@ -117,7 +110,7 @@ export const AboutCard = (props: {
             <LinkText text="Source" url={props.sourcePath} />
           )}
           {props.commitId && (
-            <Box className="cx-card__about--item-commit">
+            <Box>
               <Typography
                 sx={{
                   padding: '20px 20px',
diff --git a/src/components/content/Cards/Card.tsx b/src/components/content/Cards/Card.tsx
index 31f05340..454430fe 100644
--- a/src/components/content/Cards/Card.tsx
+++ b/src/components/content/Cards/Card.tsx
@@ -204,7 +204,6 @@ export const Card = ({
   }
   return (
     <div
-      className="cx-card__instance"
       ref={boxRef}
       style={styles}
       onMouseEnter={onMouseEnter}
@@ -261,10 +260,9 @@ export const Card = ({
             />
           </Box>
         )}
-        <Box className="cx-card__top">
+        <Box>
           {statusText && imageSize !== 'small' && (
             <Box
-              className="cx-card__top--chip"
               sx={{
                 position: 'absolute',
                 right: '0',
@@ -285,7 +283,6 @@ export const Card = ({
           />
           {subscriptionStatus && (
             <Typography
-              className="cx-card__top--status"
               variant="label4"
               sx={{
                 top: '-22px',
@@ -313,11 +310,9 @@ export const Card = ({
           sx={{
             marginBottom: '20px',
           }}
-          className="cx-card__content--wrapper"
         >
           {statusText && imageSize === 'small' && showStatus && (
             <Box
-              className="cx-card__content--chip"
               sx={{
                 padding: '15px',
               }}
@@ -334,7 +329,6 @@ export const Card = ({
               additionalStyles={{ marginLeft: '210px' }}
             >
               <Box
-                className="cx-card__content-icon"
                 sx={{
                   display: 'flex',
                   alignItems: 'center',
@@ -366,7 +360,6 @@ export const Card = ({
             </Tooltips>
           )}
           <div
-            className="cx-card__content--sort-option"
             style={{
               background: '#f9f9f9',
               borderRadius: '16px',
@@ -411,7 +404,6 @@ export const Card = ({
           )}
           {showButton && showFavIcon && (
             <Box
-              className="cx-card__content--buttons"
               sx={{
                 width: '100%',
                 paddingLeft: '20px',
@@ -434,7 +426,6 @@ export const Card = ({
           )}
           {variant === 'text-only' && readMoreLink && readMoreText && (
             <Link
-              className="cx-card__content-icon"
               sx={{
                 display: 'block',
                 marginTop: '10px',
diff --git a/src/components/content/Cards/CardAddService.tsx b/src/components/content/Cards/CardAddService.tsx
index 8f0ba59b..81cb6c9c 100644
--- a/src/components/content/Cards/CardAddService.tsx
+++ b/src/components/content/Cards/CardAddService.tsx
@@ -46,7 +46,6 @@ export const CardAddService = ({
 
   return (
     <div
-      className="cx-card__instance"
       ref={boxRef}
       style={{
         padding: '0 10px',
@@ -81,7 +80,6 @@ export const CardAddService = ({
         className="card cx-card__add-service"
       >
         <Box
-          className="cx-card__add-service--icon"
           sx={{
             height: '120px',
             width: '120px',
@@ -106,7 +104,7 @@ export const CardAddService = ({
             />
           </svg>
         </Box>
-        <Box className="cx-card__add-service--title">
+        <Box>
           <Typography
             variant="h5"
             sx={{
diff --git a/src/components/content/Cards/CardButtons.tsx b/src/components/content/Cards/CardButtons.tsx
index 33244952..491de7d6 100644
--- a/src/components/content/Cards/CardButtons.tsx
+++ b/src/components/content/Cards/CardButtons.tsx
@@ -41,7 +41,6 @@ export const CardButtons = ({
 }: CardButtonsProps) => {
   return (
     <Box
-      className="cx-card__content--buttons"
       sx={{
         display: 'flex',
         justifyContent: 'space-between',
diff --git a/src/components/content/Cards/CardChip.tsx b/src/components/content/Cards/CardChip.tsx
index e05a787d..c140aa77 100644
--- a/src/components/content/Cards/CardChip.tsx
+++ b/src/components/content/Cards/CardChip.tsx
@@ -78,7 +78,6 @@ export const CardChip = ({ status, statusText }: CardChipProps) => {
 
   return (
     <MuiChip
-      className="cx-card__chip"
       label={statusText}
       variant="outlined"
       sx={{
diff --git a/src/components/content/Cards/CardContent.tsx b/src/components/content/Cards/CardContent.tsx
index ef25807a..9faeec68 100644
--- a/src/components/content/Cards/CardContent.tsx
+++ b/src/components/content/Cards/CardContent.tsx
@@ -39,10 +39,7 @@ export const CardContent = ({
   description,
 }: CardContentProps) => {
   return (
-    <Box
-      sx={{ padding: '20px', overflowWrap: 'break-word' }}
-      className="cx-card__content"
-    >
+    <Box sx={{ padding: '20px', overflowWrap: 'break-word' }}>
       <Box sx={{ height: '35px', mb: '10px' }}>
         {subtitle && (
           <Typography
diff --git a/src/components/content/Cards/CardDecision.tsx b/src/components/content/Cards/CardDecision.tsx
index 32212b6b..c11744d0 100644
--- a/src/components/content/Cards/CardDecision.tsx
+++ b/src/components/content/Cards/CardDecision.tsx
@@ -59,7 +59,6 @@ export const CardDecision = ({
 
   return (
     <Box
-      className="cx-card__decision"
       sx={{
         display: 'flex',
         msFlexWrap: 'wrap',
@@ -74,7 +73,6 @@ export const CardDecision = ({
         const name = item.title ?? item.name ?? ''
         return (
           <Box
-            className="cx-card__decision--item"
             key={id}
             sx={{
               paddingRight: '10px',
@@ -85,7 +83,6 @@ export const CardDecision = ({
             }}
           >
             <Box
-              className="cx-card__decision--button"
               sx={{
                 boxSizing: 'border-box',
                 display: 'flex',
@@ -110,7 +107,6 @@ export const CardDecision = ({
               }}
             >
               <Typography
-                className="cx-card__decision--title"
                 variant="h5"
                 sx={{
                   height: '48px',
@@ -123,7 +119,6 @@ export const CardDecision = ({
                 {name}
               </Typography>
               <Typography
-                className="cx-card__decision--provider"
                 variant="label2"
                 sx={{
                   color: '#999999',
@@ -132,10 +127,7 @@ export const CardDecision = ({
               >
                 {item.provider}
               </Typography>
-              <Box
-                sx={{ marginBottom: '10px' }}
-                className="cx-card__decision--chip"
-              >
+              <Box sx={{ marginBottom: '10px' }}>
                 <CardChip
                   status={item.status}
                   statusText={item.statusText ?? item.status}
@@ -144,7 +136,6 @@ export const CardDecision = ({
               {(item.status?.toLowerCase() as StatusVariants) !==
                 StatusVariants.active && (
                 <Box
-                  className="cx-card__decision--status"
                   sx={{
                     display: 'flex',
                     alignItems: 'center',
@@ -152,7 +143,6 @@ export const CardDecision = ({
                   }}
                 >
                   <IconButton
-                    className="cx-card__decision--icon"
                     sx={{
                       padding: '5px',
                       border: '1px solid #00AA55',
@@ -169,7 +159,6 @@ export const CardDecision = ({
                     <ApprovalIcon sx={{ color: '#00AA55' }} />
                   </IconButton>
                   <IconButton
-                    className="cx-card__decision--icon-button"
                     sx={{
                       padding: '5px',
                       border: '1px solid #D91E18',
diff --git a/src/components/content/Cards/CardHorizontal.tsx b/src/components/content/Cards/CardHorizontal.tsx
index cb43f1c2..3c8897e4 100644
--- a/src/components/content/Cards/CardHorizontal.tsx
+++ b/src/components/content/Cards/CardHorizontal.tsx
@@ -68,7 +68,6 @@ export const CardHorizontal = ({
 
   return (
     <Box
-      className="cx-card__horizontal"
       ref={boxRef}
       sx={{
         display: 'flex',
@@ -90,7 +89,6 @@ export const CardHorizontal = ({
         />
       )}
       <Box
-        className="cx-card__horizontal--right"
         sx={{
           flex: 1,
           padding: '25px',
@@ -99,7 +97,6 @@ export const CardHorizontal = ({
         }}
       >
         <Typography
-          className="cx-card__horizontal--label"
           variant="caption3"
           sx={{
             fontWeight: '600',
@@ -112,7 +109,6 @@ export const CardHorizontal = ({
         </Typography>
 
         <Typography
-          className="cx-card__horizontal--heading"
           variant="h4"
           sx={{
             margin: '5px 0 0 0',
@@ -129,7 +125,6 @@ export const CardHorizontal = ({
           {title}
         </Typography>
         <Typography
-          className="cx-card__horizontal--subheading"
           variant="caption3"
           sx={{
             fontWeight: '600',
@@ -142,7 +137,6 @@ export const CardHorizontal = ({
         </Typography>
         {description && (
           <Typography
-            className="cx-card__horizontal--description"
             variant="label4"
             sx={{
               color: '#888888',
@@ -161,7 +155,6 @@ export const CardHorizontal = ({
 
         {buttonText && (
           <div
-            className="cx-card__horizontal--button"
             style={{
               marginTop: 'auto',
               display: 'flex',
@@ -169,7 +162,6 @@ export const CardHorizontal = ({
             }}
           >
             <Typography
-              className="cx-card__horizontal--button--text"
               variant="label4"
               onClick={onBtnClick}
               sx={{
@@ -190,10 +182,7 @@ export const CardHorizontal = ({
                 },
               }}
             >
-              <KeyboardArrowDownIcon
-                className="cx-card__horizontal--button--icon"
-                sx={{ marginRight: '5px' }}
-              />
+              <KeyboardArrowDownIcon sx={{ marginRight: '5px' }} />
               {buttonText}
             </Typography>
           </div>
diff --git a/src/components/content/Cards/CardImage.tsx b/src/components/content/Cards/CardImage.tsx
index e87fd19f..b887028e 100644
--- a/src/components/content/Cards/CardImage.tsx
+++ b/src/components/content/Cards/CardImage.tsx
@@ -76,7 +76,7 @@ export const CardImage = ({
   }
 
   return (
-    <Box sx={sx.container[imageSize]} className="cx-card__image">
+    <Box sx={sx.container[imageSize]}>
       {imageElement ? (
         <div style={style}>{imageElement}</div>
       ) : (
diff --git a/src/components/content/Cards/CardRating.tsx b/src/components/content/Cards/CardRating.tsx
index 61ed2e37..e6589460 100644
--- a/src/components/content/Cards/CardRating.tsx
+++ b/src/components/content/Cards/CardRating.tsx
@@ -30,16 +30,12 @@ export const CardRating = ({ rating }: CardRatingProps) => {
   const { palette } = useTheme()
 
   return (
-    <Typography variant="caption3" className="cx-card__rating">
+    <Typography variant="caption3">
       <Box
-        className="cx-card__rating--text"
         component="span"
         sx={{ display: 'inline-block', verticalAlign: 'sub', marginRight: 0.5 }}
       >
-        <StarRateIcon
-          className="cx-card__rating--icon"
-          sx={{ fill: palette.accent.accent09 }}
-        />
+        <StarRateIcon sx={{ fill: palette.accent.accent09 }} />
       </Box>
       {rating}
     </Typography>
diff --git a/src/components/content/Cards/ContentCard.tsx b/src/components/content/Cards/ContentCard.tsx
index ceee4438..99ec118f 100644
--- a/src/components/content/Cards/ContentCard.tsx
+++ b/src/components/content/Cards/ContentCard.tsx
@@ -37,7 +37,6 @@ export const ContentCard = ({
 
   return (
     <Box
-      className="cx-card__content--wrapper"
       key={title}
       sx={{
         width: '270px',
@@ -48,7 +47,6 @@ export const ContentCard = ({
       }}
     >
       <Box
-        className="cx-card__content"
         sx={{
           height: '200px',
           width: 'auto',
@@ -69,11 +67,10 @@ export const ContentCard = ({
           },
         }}
       >
-        <Box sx={{ marginBottom: '20px' }} className="cx-card__content--chip">
+        <Box sx={{ marginBottom: '20px' }}>
           <CardChip status={StatusVariants.enabled} statusText={chipText} />
         </Box>
         <Typography
-          className="cx-card__content--heading"
           variant="h4"
           sx={{
             height: '60px',
@@ -90,10 +87,7 @@ export const ContentCard = ({
           {title}
         </Typography>
         {detail && (
-          <Box
-            sx={{ lineHeight: 'normal' }}
-            className="cx-card__content--heading-detail"
-          >
+          <Box sx={{ lineHeight: 'normal' }}>
             <Typography
               variant="body3"
               sx={{
@@ -104,7 +98,6 @@ export const ContentCard = ({
               {heading}
             </Typography>
             <Typography
-              className="cx-card__content--heading"
               variant="body3"
               sx={{
                 fontSize: '12px',
diff --git a/src/components/content/Cards/index.tsx b/src/components/content/Cards/index.tsx
index 10c8bca0..42d61597 100644
--- a/src/components/content/Cards/index.tsx
+++ b/src/components/content/Cards/index.tsx
@@ -118,7 +118,6 @@ export const Cards = ({
 
   return (
     <Box
-      className="cx-card__main"
       sx={{
         display: 'flex',
         msFlexWrap: 'wrap',
diff --git a/src/components/content/Navigation/NavItem.tsx b/src/components/content/Navigation/NavItem.tsx
index abb82225..f1315ccc 100644
--- a/src/components/content/Navigation/NavItem.tsx
+++ b/src/components/content/Navigation/NavItem.tsx
@@ -50,7 +50,6 @@ export const NavItem = ({
 
   return (
     <Box
-      className="cx-navigation-item"
       sx={{ position: 'relative' }}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
@@ -83,7 +82,6 @@ export const NavItem = ({
       </Link>
       {children != null && open && (
         <Menu
-          className="cx-navigation-item__menu"
           items={children}
           component={component}
           sx={{
diff --git a/src/components/content/Navigation/index.tsx b/src/components/content/Navigation/index.tsx
index fb87f2b6..9cdcfb19 100644
--- a/src/components/content/Navigation/index.tsx
+++ b/src/components/content/Navigation/index.tsx
@@ -37,11 +37,7 @@ export const Navigation = ({
   selectedItem,
 }: NavigationProps): JSX.Element => {
   return (
-    <Box
-      className="cx-navigation"
-      component="nav"
-      sx={{ display: 'flex', flexWrap: 'wrap' }}
-    >
+    <Box component="nav" sx={{ display: 'flex', flexWrap: 'wrap' }}>
       {items?.map((link) => {
         const isActive = link.href === active || link.to === active
 
diff --git a/src/components/content/UserMenu/index.tsx b/src/components/content/UserMenu/index.tsx
index 8a26968f..d0388685 100644
--- a/src/components/content/UserMenu/index.tsx
+++ b/src/components/content/UserMenu/index.tsx
@@ -52,9 +52,8 @@ export const UserMenu = ({
   const { spacing, shadows } = useTheme()
 
   return (
-    <ClickAwayListener onClickAway={onClickAway} className="cx-click-listener">
+    <ClickAwayListener onClickAway={onClickAway}>
       <Box
-        className="cx-user-menu"
         display={open ? 'block' : 'none'}
         sx={{
           borderRadius: 4,
@@ -67,7 +66,6 @@ export const UserMenu = ({
         {...props}
       >
         <Box
-          className="cx-user-menu__top"
           sx={{
             backgroundColor: shadow ? 'background.background02' : '#fff',
             borderBottom: '1px solid',
@@ -76,17 +74,12 @@ export const UserMenu = ({
           }}
         >
           <Typography
-            className="cx-user-menu__top--username"
             variant="label3"
             sx={{ color: 'text.secondary', display: 'block' }}
           >
             {userName}
           </Typography>
-          <Typography
-            variant="label4"
-            sx={{ color: 'text.tertiary' }}
-            className="cx-user-menu__top--role"
-          >
+          <Typography variant="label4" sx={{ color: 'text.tertiary' }}>
             {userRole}
           </Typography>
         </Box>
diff --git a/src/components/content/UserNav/index.tsx b/src/components/content/UserNav/index.tsx
index 4f5ab5ae..f6c8c102 100644
--- a/src/components/content/UserNav/index.tsx
+++ b/src/components/content/UserNav/index.tsx
@@ -23,5 +23,5 @@ import { Menu, type MenuProps } from '../../basic/Menu'
 export type UserNavProps = MenuProps
 
 export const UserNav = (props: UserNavProps) => {
-  return <Menu className="cx-user-nav" {...props} />
+  return <Menu {...props} />
 }