diff --git a/src/features/components/atoms/accordion/accordion-item/index.tsx b/src/features/components/atoms/accordion/accordion-item/index.tsx
index 1e4525a013c..2877090934a 100644
--- a/src/features/components/atoms/accordion/accordion-item/index.tsx
+++ b/src/features/components/atoms/accordion/accordion-item/index.tsx
@@ -29,21 +29,21 @@ const icons: AccordionIcons = {
 
 const AccordionItem = React.forwardRef<HTMLDivElement, TAccordionItem>(
     ({ children, className, item_title, icon_type = 'chevron', ...props }, ref) => (
-        <Accordion.Item className={'accordion_item'} ref={ref} {...props}>
+        <Accordion.Item className={'at-accordion_item'} ref={ref} {...props}>
             <Accordion.Header>
-                <Accordion.Trigger className={dclsx('accordion_trigger', 'bg-color-primary')}>
+                <Accordion.Trigger className={dclsx('at-accordion_trigger', 'at-bg-color-primary')}>
                     <Typography.Heading size={'xs'}>
                         <Localize translate_text={item_title} />
                     </Typography.Heading>
                     <Icon
                         src={icons[icon_type]}
-                        className={'accordion_icon'}
+                        className={'at-accordion_icon'}
                         alt={'chevron'}
                         size={'large'}
                     />
                 </Accordion.Trigger>
             </Accordion.Header>
-            <Accordion.Content className={dclsx('accordion_content', className)}>
+            <Accordion.Content className={dclsx('at-accordion_content', className)}>
                 <div className="AccordionContentText">{children}</div>
             </Accordion.Content>
         </Accordion.Item>
diff --git a/src/features/components/atoms/accordion/accordion-root/index.tsx b/src/features/components/atoms/accordion/accordion-root/index.tsx
index 5aeff879560..1369b491e98 100644
--- a/src/features/components/atoms/accordion/accordion-root/index.tsx
+++ b/src/features/components/atoms/accordion/accordion-root/index.tsx
@@ -9,7 +9,7 @@ const AccordionRoot = React.forwardRef<
 >(({ className, ...rest }, ref) => {
     return (
         <Accordion.Root
-            className={dclsx(className, 'accordion_root', 'bg-color-primary')}
+            className={dclsx(className, 'at-accordion_root', 'at-bg-color-primary')}
             {...rest}
             ref={ref}
         />
diff --git a/src/features/components/atoms/accordion/accordion-shadow-item/index.tsx b/src/features/components/atoms/accordion/accordion-shadow-item/index.tsx
index 3bac18326b6..52f1b8fc5e1 100644
--- a/src/features/components/atoms/accordion/accordion-shadow-item/index.tsx
+++ b/src/features/components/atoms/accordion/accordion-shadow-item/index.tsx
@@ -16,14 +16,18 @@ interface TAccordionItem extends AccordionItemProps {
 
 const AccordionShadowItem = React.forwardRef<HTMLDivElement, TAccordionItem>(
     ({ children, className, renderHeader, item_title, icon_type = 'chevron', ...props }, ref) => (
-        <Accordion.Item className={'accordion_item accordion_shadow_item'} ref={ref} {...props}>
+        <Accordion.Item
+            className={'at-accordion_item at-accordion_shadow_item'}
+            ref={ref}
+            {...props}
+        >
             <Accordion.Header>
                 <Accordion.Trigger
                     className={dclsx(
-                        'accordion_trigger accordion_shadow_item_trigger',
-                        'bg-color-primary',
-                        'padding-block-8x',
-                        'border-radius-4x',
+                        'at-accordion_trigger at-accordion_shadow_item_trigger',
+                        'at-bg-color-primary',
+                        'at-padding-block-8x',
+                        'at-border-radius-4x',
                     )}
                 >
                     {renderHeader ? (
@@ -36,17 +40,20 @@ const AccordionShadowItem = React.forwardRef<HTMLDivElement, TAccordionItem>(
                     {icon_type === 'chevron' ? (
                         <Icon
                             src={Chevron}
-                            className={'accordion_icon'}
+                            className={'at-accordion_icon'}
                             alt={'chevron'}
                             size={'large'}
                         />
                     ) : (
-                        <span className="accordion_icon plus_icon" />
+                        <span className="at-accordion_icon at-plus_icon" />
                     )}
                 </Accordion.Trigger>
             </Accordion.Header>
             <Accordion.Content
-                className={dclsx('accordion_content accordion_shadow_item_content', className)}
+                className={dclsx(
+                    'at-accordion_content at-accordion_shadow_item_content',
+                    className,
+                )}
             >
                 <div className="AccordionContentText">{children}</div>
             </Accordion.Content>
diff --git a/src/features/components/atoms/alert/index.tsx b/src/features/components/atoms/alert/index.tsx
index cce7d30f84e..9df9cfd1841 100644
--- a/src/features/components/atoms/alert/index.tsx
+++ b/src/features/components/atoms/alert/index.tsx
@@ -27,8 +27,8 @@ const Alert = ({
     return (
         <AlertDialog.Root defaultOpen>
             <AlertDialog.Portal>
-                <AlertDialog.Overlay className="alert-overlay" />
-                <AlertDialog.Content className="alert-content">
+                <AlertDialog.Overlay className="at-alert-overlay" />
+                <AlertDialog.Content className="at-alert-content">
                     <AlertDialog.Title asChild className="AlertDialogTitle">
                         <div>
                             <Typography.Heading as="h3" size="xxs" pb="12x">
diff --git a/src/features/components/atoms/card/card-primary/index.tsx b/src/features/components/atoms/card/card-primary/index.tsx
index 0595eac0826..ed7246c196d 100644
--- a/src/features/components/atoms/card/card-primary/index.tsx
+++ b/src/features/components/atoms/card/card-primary/index.tsx
@@ -52,7 +52,7 @@ const CardPrimary = ({
                 )}
                 <Typography.Heading
                     as="h3"
-                    className={dclsx(is_mobile_or_tablet ? 'text-large' : 'text-medium')}
+                    className={dclsx(is_mobile_or_tablet ? 'at-text-large' : 'at-text-medium')}
                     pb="4x"
                     weight="bold"
                 >
diff --git a/src/features/components/atoms/container/fixed/index.tsx b/src/features/components/atoms/container/fixed/index.tsx
index 02af5dbe067..f2ced6fa500 100644
--- a/src/features/components/atoms/container/fixed/index.tsx
+++ b/src/features/components/atoms/container/fixed/index.tsx
@@ -4,7 +4,7 @@ import { ContentSectionTagOptions } from 'features/types'
 import dclsx from 'features/utils/dclsx'
 
 const FixedContainer = ({ className, ...rest }: BoxProps<ContentSectionTagOptions>) => {
-    const classnames = dclsx(className, 'container-fixed')
+    const classnames = dclsx(className, 'at-container-fixed')
 
     return <Box className={classnames} {...rest} />
 }
diff --git a/src/features/components/atoms/container/fluid/index.tsx b/src/features/components/atoms/container/fluid/index.tsx
index ae36a8c01e5..40e7a9a4806 100644
--- a/src/features/components/atoms/container/fluid/index.tsx
+++ b/src/features/components/atoms/container/fluid/index.tsx
@@ -4,7 +4,7 @@ import { ContentSectionTagOptions } from 'features/types'
 import dclsx from 'features/utils/dclsx'
 
 const FluidContainer = ({ className, ...rest }: BoxProps<ContentSectionTagOptions>) => {
-    const classnames = dclsx(className, 'container-fluid')
+    const classnames = dclsx(className, 'at-container-fluid')
 
     return <Box className={classnames} {...rest} />
 }
diff --git a/src/features/components/atoms/flex-box/box/index.tsx b/src/features/components/atoms/flex-box/box/index.tsx
index a067a747d1d..f552113c978 100644
--- a/src/features/components/atoms/flex-box/box/index.tsx
+++ b/src/features/components/atoms/flex-box/box/index.tsx
@@ -34,11 +34,11 @@ const generateFlexClasses = (options: FlexBoxClasses, prefix?: string) => {
     const classPrefix = prefix ? `${prefix}-` : ''
 
     return dclsx({
-        [`${classPrefix}gap-${gap}`]: gap,
-        [`${classPrefix}align-items-${align}`]: align,
-        [`${classPrefix}justify-${justify}`]: justify,
-        [`${classPrefix}flex-wrap-${wrap}`]: wrap,
-        [`${classPrefix}flex-dir-${direction}`]: direction,
+        [`${classPrefix}at-gap-${gap}`]: gap,
+        [`${classPrefix}at-align-items-${align}`]: align,
+        [`${classPrefix}at-justify-${justify}`]: justify,
+        [`${classPrefix}at-flex-wrap-${wrap}`]: wrap,
+        [`${classPrefix}at-flex-dir-${direction}`]: direction,
     })
 }
 
@@ -59,10 +59,10 @@ const FlexBoxContainer = <T extends ContentSectionTagOptions>({
     ...rest
 }: FlexBoxProps<T>) => {
     const classnames = dclsx(
-        'flex',
+        'at-flex',
         className,
         {
-            [`container-${container}`]: container,
+            [`at-container-${container}`]: container,
         },
         generateFlexItemClasses({ align_self, grow, shrink, basis }),
         generateFlexItemClasses(md ?? {}, 'md'),
diff --git a/src/features/components/atoms/flex-box/item/index.tsx b/src/features/components/atoms/flex-box/item/index.tsx
index e4b9827abb6..bdc6436aae4 100644
--- a/src/features/components/atoms/flex-box/item/index.tsx
+++ b/src/features/components/atoms/flex-box/item/index.tsx
@@ -29,10 +29,10 @@ export const generateFlexItemClasses = (options: FlexItemClasses, prefix = '') =
     const classPrefix = prefix ? `${prefix}-` : ''
     const { align_self, grow, shrink, basis } = options
     return dclsx({
-        [`${classPrefix}align-self-${align_self}`]: align_self,
-        [`${classPrefix}flex-grow-${grow}`]: grow,
-        [`${classPrefix}flex-shrink-${shrink}`]: shrink,
-        [`${classPrefix}flex-basis-${basis}`]: basis,
+        [`${classPrefix}at-align-self-${align_self}`]: align_self,
+        [`${classPrefix}at-flex-grow-${grow}`]: grow,
+        [`${classPrefix}at-flex-shrink-${shrink}`]: shrink,
+        [`${classPrefix}at-flex-basis-${basis}`]: basis,
     })
 }
 
diff --git a/src/features/components/atoms/icon/index.tsx b/src/features/components/atoms/icon/index.tsx
index 36319a9dcfe..afb5a3b4416 100644
--- a/src/features/components/atoms/icon/index.tsx
+++ b/src/features/components/atoms/icon/index.tsx
@@ -9,8 +9,8 @@ interface IconProps extends ImgHTMLAttributes<'img'>, ClassProps {
 }
 
 const Icon = ({ size = 'small', has_rtl, className, ...rest }: IconProps) => {
-    const classnames = dclsx(className, `icon-${size}`, 'icon', {
-        'icon-rtl': has_rtl,
+    const classnames = dclsx(className, `at-icon-${size}`, 'at-icon', {
+        'at-icon-rtl': has_rtl,
     })
 
     return <Box as={'img'} className={classnames} {...rest} />
diff --git a/src/features/components/atoms/input/checkbox/index.tsx b/src/features/components/atoms/input/checkbox/index.tsx
index 42e65b46c06..7f032e11977 100644
--- a/src/features/components/atoms/input/checkbox/index.tsx
+++ b/src/features/components/atoms/input/checkbox/index.tsx
@@ -7,7 +7,7 @@ const CheckboxInput = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInput
         return (
             <Typography.Paragraph
                 as="label"
-                className={dclsx(className, 'checkbox_input_container')}
+                className={dclsx(className, 'at-checkbox_input_container')}
             >
                 <input type={'checkbox'} {...rest} ref={ref} />
                 {children}
diff --git a/src/features/components/atoms/input/text/index.tsx b/src/features/components/atoms/input/text/index.tsx
index f631fe63a2e..3ddcdad177c 100644
--- a/src/features/components/atoms/input/text/index.tsx
+++ b/src/features/components/atoms/input/text/index.tsx
@@ -18,13 +18,13 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
     ({ formId, error, className, label, clearErrors, setValue, ...rest }, ref) => {
         const notValid = error && error.length ? 'error' : 'valid'
         return (
-            <div className={dclsx(className, 'text_input_container', notValid)}>
+            <div className={dclsx(className, 'at-text_input_container', notValid)}>
                 <input placeholder={localize(label)} {...rest} ref={ref} />
                 {error && (
                     <Image
                         src={CrossIcon}
                         alt="error icon"
-                        className="cross_icon"
+                        className="at-cross_icon"
                         onClick={() => {
                             setValue(formId, '')
                             clearErrors()
@@ -36,7 +36,7 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
                     <Typography.Paragraph
                         as="label"
                         size="small"
-                        className="text_input_label"
+                        className="at-text_input_label"
                         padding_inline="2x"
                         bgcolor="primary"
                     >
@@ -47,7 +47,7 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
                     <Typography.Paragraph
                         as="span"
                         size="small"
-                        className="text_input_error"
+                        className="at-text_input_error"
                         padding_inline="2x"
                         textcolor="brand"
                     >
diff --git a/src/features/components/atoms/link/internal.tsx b/src/features/components/atoms/link/internal.tsx
index 2d8f10a9898..8517810437d 100644
--- a/src/features/components/atoms/link/internal.tsx
+++ b/src/features/components/atoms/link/internal.tsx
@@ -93,8 +93,8 @@ const Internal = ({
             rel={link_rel}
             className={dclsx(
                 className,
-                'typography-link',
-                'typography',
+                'at-typography-link',
+                'at-typography',
                 generateSpacingClasses({
                     margin,
                     padding,
@@ -125,8 +125,8 @@ const Internal = ({
                     textcolor,
                 }),
                 {
-                    'typography-hover': !no_hover,
-                    'typography-color-brand': is_active,
+                    'at-typography-hover': !no_hover,
+                    'at-typography-color-brand': is_active,
                 },
             )}
         >
diff --git a/src/features/components/atoms/tab/base/index.tsx b/src/features/components/atoms/tab/base/index.tsx
index 3c36c2f9238..d82cb44d468 100644
--- a/src/features/components/atoms/tab/base/index.tsx
+++ b/src/features/components/atoms/tab/base/index.tsx
@@ -32,7 +32,7 @@ const TabBase = ({
     return (
         <Box
             className={dclsx(
-                'tab',
+                'at-tab',
                 className,
                 generateTextSize(textsize),
                 generateTextColor(textcolor),
diff --git a/src/features/components/atoms/tab/tab-menu-item/index.tsx b/src/features/components/atoms/tab/tab-menu-item/index.tsx
index 742efb3605e..e33481ab09c 100644
--- a/src/features/components/atoms/tab/tab-menu-item/index.tsx
+++ b/src/features/components/atoms/tab/tab-menu-item/index.tsx
@@ -16,9 +16,9 @@ const TabMenuItem = ({
         <BaseTab
             className={dclsx(
                 className,
-                'menu-item',
-                { selected },
-                is_no_border_bottom && 'navigation-tabs',
+                'at-menu-item',
+                is_no_border_bottom && 'at-navigation-tabs',
+                { 'at-selected': selected },
             )}
             {...rest}
         />
diff --git a/src/features/components/atoms/table/base/index.tsx b/src/features/components/atoms/table/base/index.tsx
index 7a5a4fd6b32..f02767dc463 100644
--- a/src/features/components/atoms/table/base/index.tsx
+++ b/src/features/components/atoms/table/base/index.tsx
@@ -23,10 +23,10 @@ function BaseTable<T, K extends keyof T>({
 }: TableProps<T, K>) {
     return (
         <Box
-            className={dclsx('table-responsive', { ['table-striped']: striped }, className)}
+            className={dclsx('at-table-responsive', { ['at-table-striped']: striped }, className)}
             {...rest}
         >
-            <table className={dclsx('table', { [`table-layout-${layout}`]: layout })}>
+            <table className={dclsx('at-table', { [`at-table-layout-${layout}`]: layout })}>
                 <TableHeader columns={columns} />
                 <TableRow data={data} columns={columns} />
             </table>
diff --git a/src/features/components/atoms/table/base/table-header.tsx b/src/features/components/atoms/table/base/table-header.tsx
index 2ea8adbe608..0d77ad77cc9 100644
--- a/src/features/components/atoms/table/base/table-header.tsx
+++ b/src/features/components/atoms/table/base/table-header.tsx
@@ -14,14 +14,14 @@ const TableHeader = <T, K extends keyof T>({ columns }: TableHeaderProps<T, K>)
                     <th
                         key={col.accessor}
                         className={dclsx(
-                            'typography-color-black',
-                            'typography-align-center',
-                            'typography-font-UBUNTU',
-                            'typography-weight-bold',
-                            'text-small',
-                            'padding-block-5x',
-                            'padding-inline-10x',
-                            'md-padding-block-6x',
+                            'at-typography-color-black',
+                            'at-typography-align-center',
+                            'at-typography-font-UBUNTU',
+                            'at-typography-weight-bold',
+                            'at-text-small',
+                            'at-padding-block-5x',
+                            'at-padding-inline-10x',
+                            'md-at-padding-block-6x',
                         )}
                     >
                         {col.header}
diff --git a/src/features/components/atoms/table/base/table-row.tsx b/src/features/components/atoms/table/base/table-row.tsx
index edc22bd5d39..efc7ac4f955 100644
--- a/src/features/components/atoms/table/base/table-row.tsx
+++ b/src/features/components/atoms/table/base/table-row.tsx
@@ -16,13 +16,13 @@ const TableRow = <T, K extends keyof T>({ data, columns }: TableRowProps<T, K>)
                         <td
                             key={col.accessor}
                             className={dclsx(
-                                'typography-color-black',
-                                'typography-align-center',
-                                'typography-font-UBUNTU',
-                                'text-small',
-                                'padding-block-4x',
-                                'padding-inline-10x',
-                                'md-padding-block-6x',
+                                'at-typography-color-black',
+                                'at-typography-align-center',
+                                'at-typography-font-UBUNTU',
+                                'at-text-small',
+                                'at-padding-block-4x',
+                                'at-padding-inline-10x',
+                                'md-at-padding-block-6x',
                             )}
                         >
                             {row[col.accessor]}
diff --git a/src/features/components/atoms/table/shadow-table/index.tsx b/src/features/components/atoms/table/shadow-table/index.tsx
index a9a8f51dae8..082e76a1094 100644
--- a/src/features/components/atoms/table/shadow-table/index.tsx
+++ b/src/features/components/atoms/table/shadow-table/index.tsx
@@ -3,7 +3,7 @@ import BaseTable, { TableProps } from '../base'
 import dclsx from 'features/utils/dclsx'
 
 function ShadowTable<T, K extends keyof T>({ className, ...rest }: TableProps<T, K>) {
-    return <BaseTable className={dclsx('table-shadow', 'padding-12x', className)} {...rest} />
+    return <BaseTable className={dclsx('at-table-shadow', 'at-padding-12x', className)} {...rest} />
 }
 
 export default ShadowTable
diff --git a/src/features/components/atoms/typography/base/index.tsx b/src/features/components/atoms/typography/base/index.tsx
index 50db3f8d576..5bcbb023327 100644
--- a/src/features/components/atoms/typography/base/index.tsx
+++ b/src/features/components/atoms/typography/base/index.tsx
@@ -48,7 +48,7 @@ const BaseTypography = <T extends TypographyTagOptions>({
 }: BaseTypographyProps<T>) => {
     const classnames = dclsx(
         className,
-        'typography',
+        'at-typography',
         generateTypographyAlignClasses(align),
         generateTypographyAlignClasses(md?.align, 'md'),
         generateTypographyAlignClasses(lg?.align, 'lg'),
diff --git a/src/features/components/atoms/typography/heading/index.tsx b/src/features/components/atoms/typography/heading/index.tsx
index 20e0b49c9f0..0a278308581 100644
--- a/src/features/components/atoms/typography/heading/index.tsx
+++ b/src/features/components/atoms/typography/heading/index.tsx
@@ -9,7 +9,7 @@ interface HeadingProps extends BaseTypographyProps<HeadingTagOptions> {
 }
 
 const Heading = ({ size = 'medium', weight, className, as = 'h1', ...rest }: HeadingProps) => {
-    const classnames = dclsx(className, 'heading', generateHeadingSize(size))
+    const classnames = dclsx(className, 'at-heading', generateHeadingSize(size))
 
     return <BaseTypography as={as} className={classnames} weight={weight ?? 'bold'} {...rest} />
 }
diff --git a/src/features/components/atoms/typography/hero/index.tsx b/src/features/components/atoms/typography/hero/index.tsx
index c5c71021bc2..d5f8741836f 100644
--- a/src/features/components/atoms/typography/hero/index.tsx
+++ b/src/features/components/atoms/typography/hero/index.tsx
@@ -6,7 +6,7 @@ import dclsx from 'features/utils/dclsx'
 type HeroTextProps = BaseTypographyProps<HeadingTagOptions>
 
 const HeroText = ({ className, ...rest }: HeroTextProps) => {
-    const classnames = dclsx(className, 'heading-xxxl')
+    const classnames = dclsx(className, 'at-heading-xxxl')
 
     return <BaseTypography className={classnames} {...rest} />
 }
diff --git a/src/features/components/atoms/typography/link/index.tsx b/src/features/components/atoms/typography/link/index.tsx
index 1b6bd17e9e0..e1714ceab00 100644
--- a/src/features/components/atoms/typography/link/index.tsx
+++ b/src/features/components/atoms/typography/link/index.tsx
@@ -17,8 +17,8 @@ const TypographyLink = ({ className, size, no_hover, ...rest }: TypographyLinkPr
     return (
         <BaseTypography
             as="a"
-            className={dclsx(classnames, 'typography-link', {
-                'typography-hover': !no_hover,
+            className={dclsx(classnames, 'at-typography-link', {
+                'at-typography-hover': !no_hover,
             })}
             {...rest}
         />
diff --git a/src/features/components/molecules/timeline-item/index.tsx b/src/features/components/molecules/timeline-item/index.tsx
index 1d6ff85fcbf..1586099bd5e 100644
--- a/src/features/components/molecules/timeline-item/index.tsx
+++ b/src/features/components/molecules/timeline-item/index.tsx
@@ -30,7 +30,7 @@ const TimelineItem = ({ data, isLastItem, ...rest }: TimelineItemProps) => {
             <Image
                 src={checkIcon}
                 alt="check icon"
-                className={dclsx('lg-margin-top-3x w-[24px] h-[24px]')}
+                className={dclsx('lg-at-margin-top-3x w-[24px] h-[24px]')}
             />
             <div>
                 <Typography.Heading as="h4" size="xs" mb="4x">
diff --git a/src/features/components/molecules/trade-item/index.tsx b/src/features/components/molecules/trade-item/index.tsx
index 3fbb2caa290..7d954b14f96 100644
--- a/src/features/components/molecules/trade-item/index.tsx
+++ b/src/features/components/molecules/trade-item/index.tsx
@@ -37,7 +37,7 @@ const TradeItem = ({ data, ...rest }: TradeItemProps) => {
                 textcolor="inverted"
                 mt="8x"
                 mb="4x"
-                className={dclsx('text-medium')}
+                className={dclsx('at-text-medium')}
             >
                 <Localize translate_text={data.heading} />
             </Typography.Heading>
diff --git a/src/features/components/organisms/available-options/tab-items.tsx b/src/features/components/organisms/available-options/tab-items.tsx
index 585350e3608..f018c8d6e2c 100644
--- a/src/features/components/organisms/available-options/tab-items.tsx
+++ b/src/features/components/organisms/available-options/tab-items.tsx
@@ -73,10 +73,10 @@ const OptionsTab = ({ options_tabs }: OptionsTabType) => {
     return (
         <Flex.Box direction="col" padding_block="10x" md={{ padding_block: '20x' }}>
             <Flex.Box className={tab_container} justify="center">
-                <div className={dclsx(scroll_container, 'flex')} ref={content_wrapper}>
+                <div className={dclsx(scroll_container, 'at-flex')} ref={content_wrapper}>
                     {options_tabs.map((option_item, index) => (
                         <div
-                            className={dclsx('flex', 'flex-dir-col')}
+                            className={dclsx('at-flex', 'at-flex-dir-col')}
                             key={option_item.option_name}
                             ref={
                                 index === 0
@@ -88,10 +88,10 @@ const OptionsTab = ({ options_tabs }: OptionsTabType) => {
                         >
                             <div
                                 className={dclsx(
-                                    'flex',
-                                    'row',
-                                    'justify-start',
-                                    'md-justify-start',
+                                    'at-flex',
+                                    'at-row',
+                                    'at-justify-start',
+                                    'md-at-justify-start',
                                 )}
                                 ref={
                                     selected_tab_name === option_item.option_name
@@ -130,7 +130,7 @@ const OptionsTab = ({ options_tabs }: OptionsTabType) => {
                 <div
                     className={dclsx(
                         scroll_button_left,
-                        'visible-larger-than-phone',
+                        'at-visible-larger-than-phone',
                         (is_initial_load || firstInView) && is_show_left,
                     )}
                     onClick={() => side_scroll(content_wrapper.current!, 25, 100, -10)}
@@ -141,7 +141,7 @@ const OptionsTab = ({ options_tabs }: OptionsTabType) => {
                 <div
                     className={dclsx(
                         scroll_button_right,
-                        'visible-larger-than-phone',
+                        'at-visible-larger-than-phone',
                         lastInView && is_show_right,
                     )}
                     onClick={() => side_scroll(content_wrapper.current!, 25, 100, 10)}
diff --git a/src/features/components/templates/banners/deriv-products-hero/products-heading.tsx b/src/features/components/templates/banners/deriv-products-hero/products-heading.tsx
index fd39e81a23a..b972f949d0a 100644
--- a/src/features/components/templates/banners/deriv-products-hero/products-heading.tsx
+++ b/src/features/components/templates/banners/deriv-products-hero/products-heading.tsx
@@ -17,7 +17,7 @@ const ProductsHeading = ({ title }: ProductsHeadingProps) => {
                 align={'left'}
                 pt={'4x'}
                 md={{ pt: '8x' }}
-                className="visible-larger-than-tablet"
+                className="at-visible-larger-than-tablet"
             >
                 {title.map((text, index) => (
                     <React.Fragment key={index}>
@@ -32,7 +32,7 @@ const ProductsHeading = ({ title }: ProductsHeadingProps) => {
                 align={'left'}
                 pt={'4x'}
                 md={{ pt: '8x' }}
-                className="visible-phone-and-tablet"
+                className="at-visible-phone-and-tablet"
             >
                 {title.map((text, index) => (
                     <React.Fragment key={index}>
diff --git a/src/features/components/templates/navigation/template/desktop-menu/index.tsx b/src/features/components/templates/navigation/template/desktop-menu/index.tsx
index 2df5aef28d1..7587b71e8b2 100644
--- a/src/features/components/templates/navigation/template/desktop-menu/index.tsx
+++ b/src/features/components/templates/navigation/template/desktop-menu/index.tsx
@@ -22,8 +22,8 @@ const DesktopMenu = ({ has_centered_items }: IDesktopNavbarProps) => {
             onValueChange={setActive}
             className={dclsx(
                 'navigation_root',
-                has_centered_items ? 'justify-center' : 'justify-end',
-                has_centered_items ? undefined : 'margin-right-40x',
+                has_centered_items ? 'at-justify-center' : 'at-justify-end',
+                has_centered_items ? undefined : 'at-margin-right-40x',
             )}
         >
             <NavigationMenu.List className="navigation_list">
diff --git a/src/features/components/templates/options-content/section-content-option.item.tsx b/src/features/components/templates/options-content/section-content-option.item.tsx
index 92c3b83c970..35b496dbad8 100644
--- a/src/features/components/templates/options-content/section-content-option.item.tsx
+++ b/src/features/components/templates/options-content/section-content-option.item.tsx
@@ -12,14 +12,14 @@ const SectionOptionContentItem = ({ item }: { item: OptionContentSectionItemData
             <Flex.Box gap="4x" align="center">
                 {item.icon.src && <img src={item.icon.src} alt={localize(item.icon.alt)} />}
                 {item.title && (
-                    <h4 className={dclsx('text-small')}>
+                    <h4 className={dclsx('at-text-small')}>
                         <Localize translate_text={item.title} />
                     </h4>
                 )}
             </Flex.Box>
             {item.sections.map((sectionItem) => (
                 <Flex.Box key={sectionItem.title} direction="col">
-                    <h5 className={dclsx('text-small', 'padding-block-12x')}>
+                    <h5 className={dclsx('at-text-small', 'at-padding-block-12x')}>
                         <Localize translate_text={sectionItem.title} />
                     </h5>
                     <Flex.Box direction="col" gap="6x" pb="16x">
diff --git a/src/features/components/templates/options-content/single-content-option.item.tsx b/src/features/components/templates/options-content/single-content-option.item.tsx
index 9f7ded0c691..38a06a2637c 100644
--- a/src/features/components/templates/options-content/single-content-option.item.tsx
+++ b/src/features/components/templates/options-content/single-content-option.item.tsx
@@ -12,7 +12,7 @@ const SingleOptionContentItem = ({ item }: { item: OptionContentSingleItemData }
             <Flex.Box gap="4x" pb="8x" align="center">
                 {item.icon && <img src={item.icon.src} alt={localize(item.icon.alt)} />}
                 {item.title && (
-                    <h4 className={dclsx('text-small')}>
+                    <h4 className={dclsx('at-text-small')}>
                         <Localize translate_text={item.title} />
                     </h4>
                 )}
diff --git a/src/features/components/templates/trade-platform/other-platforms/index.tsx b/src/features/components/templates/trade-platform/other-platforms/index.tsx
index 5a3f0ba2e96..d64511e1421 100644
--- a/src/features/components/templates/trade-platform/other-platforms/index.tsx
+++ b/src/features/components/templates/trade-platform/other-platforms/index.tsx
@@ -32,7 +32,7 @@ const PlatformsCarousel = ({ heading, data, ...rest }: PropsType) => {
                 <Typography.Heading as="h2" align="center" size="large" mb="8x" md={{ mb: '40x' }}>
                     <Localize translate_text={heading} />
                 </Typography.Heading>
-                <div className={dclsx('md-padding-inline-15x', slider_wrapper)}>
+                <div className={dclsx('md-at-padding-inline-15x', slider_wrapper)}>
                     <Swiper
                         speed={500}
                         slidesPerView={1}
@@ -58,7 +58,7 @@ const PlatformsCarousel = ({ heading, data, ...rest }: PropsType) => {
                             },
                         }}
                         className={dclsx(
-                            'padding-inline-5x padding-bottom-20x md-padding-bottom-10x',
+                            'at-padding-inline-5x at-padding-bottom-20x md-at-padding-bottom-10x',
                         )}
                     >
                         {data.map((slide) => (
@@ -69,7 +69,7 @@ const PlatformsCarousel = ({ heading, data, ...rest }: PropsType) => {
                     </Swiper>
                     <button
                         className={dclsx(
-                            'padding-0x slider-button-prev visible-larger-than-tablet',
+                            'at-padding-0x slider-button-prev at-visible-larger-than-tablet',
                             slider_button,
                             slider_button_prev,
                         )}
@@ -78,7 +78,7 @@ const PlatformsCarousel = ({ heading, data, ...rest }: PropsType) => {
                     </button>
                     <button
                         className={dclsx(
-                            'padding-0x slider-button-next visible-larger-than-tablet',
+                            'at-padding-0x slider-button-next at-visible-larger-than-tablet',
                             slider_button,
                             slider_button_next,
                         )}
diff --git a/src/features/components/templates/trade-platform/other-platforms/platform-card/index.tsx b/src/features/components/templates/trade-platform/other-platforms/platform-card/index.tsx
index 5ce7006b58d..6b413938fd3 100644
--- a/src/features/components/templates/trade-platform/other-platforms/platform-card/index.tsx
+++ b/src/features/components/templates/trade-platform/other-platforms/platform-card/index.tsx
@@ -33,7 +33,12 @@ const PlatformCard = ({ data: { icon, heading, paragraph, link } }: PlatformProp
             </Typography.Paragraph>
             <Link
                 url={link}
-                className={dclsx(platform_link, 'flex', 'align-items-center', 'justify-center')}
+                className={dclsx(
+                    platform_link,
+                    'at-flex',
+                    'at-align-items-center',
+                    'at-justify-center',
+                )}
                 textcolor="brand"
                 padding_block="4x"
                 padding_inline="8x"
@@ -44,7 +49,7 @@ const PlatformCard = ({ data: { icon, heading, paragraph, link } }: PlatformProp
                 <Image
                     src={Arrow}
                     alt={localize('_t_Arrow_t_')}
-                    className={dclsx('margin-left-1x')}
+                    className={dclsx('at-margin-left-1x')}
                     width={10}
                     height={10}
                 />
diff --git a/src/features/components/templates/why-trade-options/index.tsx b/src/features/components/templates/why-trade-options/index.tsx
index 3e2212dc537..64e034485d9 100644
--- a/src/features/components/templates/why-trade-options/index.tsx
+++ b/src/features/components/templates/why-trade-options/index.tsx
@@ -50,7 +50,7 @@ const WhyTradeOptions = ({ data }: { data: WhyTradeOptionsType }) => {
                         textcolor="inverted"
                         size="xxs"
                         mb="8x"
-                        className={dclsx('text-medium')}
+                        className={dclsx('at-text-medium')}
                     >
                         <Localize translate_text={data.heading2} />
                     </Typography.Heading>
diff --git a/src/features/pages/ctrader-manage/ctrader-manage.tsx b/src/features/pages/ctrader-manage/ctrader-manage.tsx
index dae1288b68f..34ff6da4764 100644
--- a/src/features/pages/ctrader-manage/ctrader-manage.tsx
+++ b/src/features/pages/ctrader-manage/ctrader-manage.tsx
@@ -31,8 +31,8 @@ const CtraderManage = ({
                     </Typography.Heading>
                     {steps && (
                         <Flex.Box direction="row" gap={'15x'} padding="10x" align="center">
-                            <div className="visible-phone-only">{image_url_mobile}</div>
-                            <div className="visible-larger-than-phone">{image_url}</div>
+                            <div className="at-visible-phone-only">{image_url_mobile}</div>
+                            <div className="at-visible-larger-than-phone">{image_url}</div>
                             <Flex.Box gap={'5x'} direction="col" justify="center">
                                 {steps.map((step) => (
                                     <Typography.Paragraph key={step.id}>
diff --git a/src/features/pages/deriv-ctrader/how-to-start/index.tsx b/src/features/pages/deriv-ctrader/how-to-start/index.tsx
index 7fea8c796c5..dd9210b9be9 100644
--- a/src/features/pages/deriv-ctrader/how-to-start/index.tsx
+++ b/src/features/pages/deriv-ctrader/how-to-start/index.tsx
@@ -19,7 +19,7 @@ const HowToStartCTrader = () => {
                 />
             </Typography.Heading>
 
-            <div className="visible-phone-and-tablet">
+            <div className="at-visible-phone-and-tablet">
                 <TabStepper
                     is_ctrader
                     tab={tab}
@@ -27,7 +27,7 @@ const HowToStartCTrader = () => {
                     items={trading_platform_start[`${tab}_mobile`]}
                 />
             </div>
-            <div className="visible-larger-than-tablet">
+            <div className="at-visible-larger-than-tablet">
                 <TabStepper
                     is_ctrader
                     tab={tab}
diff --git a/src/features/pages/options/turbo/index.tsx b/src/features/pages/options/turbo/index.tsx
index bb46d880548..a45b78f3757 100644
--- a/src/features/pages/options/turbo/index.tsx
+++ b/src/features/pages/options/turbo/index.tsx
@@ -37,7 +37,7 @@ const TurboOptions = () => {
                 }}
                 className={why_turbo_section}
             >
-                <h3 className={dclsx('text-small')}>
+                <h3 className={dclsx('at-text-small')}>
                     <Localize translate_text="_t_Why traders choose turbo options_t_" />
                 </h3>
                 <Typography.Paragraph size="small">
diff --git a/src/features/pages/options/vanilla/index.tsx b/src/features/pages/options/vanilla/index.tsx
index 3733e0dedef..fe58f1f2fcf 100644
--- a/src/features/pages/options/vanilla/index.tsx
+++ b/src/features/pages/options/vanilla/index.tsx
@@ -36,7 +36,7 @@ const VanillaOptions = () => {
                 }}
                 className={why_vanilla_section}
             >
-                <h4 className={dclsx('text-small')}>
+                <h4 className={dclsx('at-text-small')}>
                     <Localize translate_text="_t_Why traders choose vanilla options_t_" />
                 </h4>
                 <Typography.Paragraph size="small">
diff --git a/src/features/pages/p2p/availability/platform.tsx b/src/features/pages/p2p/availability/platform.tsx
index e15a33c82bc..681ddc3e689 100644
--- a/src/features/pages/p2p/availability/platform.tsx
+++ b/src/features/pages/p2p/availability/platform.tsx
@@ -31,14 +31,14 @@ const DP2Platform = ({ item }: { item: PlatformType }) => {
                 alt="icon"
                 width={48}
                 height={48}
-                className="visible-phone-and-tablet"
+                className="at-visible-phone-and-tablet"
             />
             <Image
                 src={item.mobile_icon_src}
                 alt="icon"
                 width={64}
                 height={64}
-                className="visible-larger-than-tablet"
+                className="at-visible-larger-than-tablet"
             />
 
             <Typography.Heading as="h3" size="xs" mt="8x" mb="16x">
@@ -51,12 +51,12 @@ const DP2Platform = ({ item }: { item: PlatformType }) => {
                         mb="12x"
                         textcolor="black"
                         md={{ mb: '16x' }}
-                        className={dclsx('text-xlarge')}
+                        className={dclsx('at-text-xlarge')}
                         key={list_item.text}
                     >
                         {list_item?.link_in_mobile ? (
                             <>
-                                <Typography.Base as="span" className="visible-larger-than-phone">
+                                <Typography.Base as="span" className="at-visible-larger-than-phone">
                                     <Localize
                                         translate_text={list_item.text}
                                         components={list_item.components}
@@ -66,7 +66,7 @@ const DP2Platform = ({ item }: { item: PlatformType }) => {
                                     as="span"
                                     onClick={handleExternalLink}
                                     textcolor="brand"
-                                    className="visible-phone-only"
+                                    className="at-visible-phone-only"
                                 >
                                     <Localize translate_text={list_item.text} />
                                 </Typography.Base>
@@ -87,11 +87,11 @@ const DP2Platform = ({ item }: { item: PlatformType }) => {
                     <LinkButton.Primary
                         url={item.button.url}
                         size="medium"
-                        className="visible-larger-than-phone"
+                        className="at-visible-larger-than-phone"
                     >
                         <Localize translate_text={item.button.text} />
                     </LinkButton.Primary>
-                    <Button.Primary onClick={handleExternalLink} className="visible-phone-only">
+                    <Button.Primary onClick={handleExternalLink} className="at-visible-phone-only">
                         <Localize translate_text={item.button.text} />
                     </Button.Primary>
                 </>
diff --git a/src/features/pages/p2p/hero/content.tsx b/src/features/pages/p2p/hero/content.tsx
index b7291adb024..846077031a3 100644
--- a/src/features/pages/p2p/hero/content.tsx
+++ b/src/features/pages/p2p/hero/content.tsx
@@ -16,8 +16,8 @@ const DP2HeroContent = () => {
             basis="6-12"
             dir={get_lang_direction()}
         >
-            <div className="visible-phone-and-tablet">{banner_content.logo_mobile}</div>
-            <div className="visible-larger-than-tablet">{banner_content.logo_desktop}</div>
+            <div className="at-visible-phone-and-tablet">{banner_content.logo_mobile}</div>
+            <div className="at-visible-larger-than-tablet">{banner_content.logo_desktop}</div>
             <Typography.Heading as="h1" size={is_mobile ? 'large' : 'xxxl'}>
                 <Localize translate_text={banner_content.heading} />
             </Typography.Heading>
diff --git a/src/features/pages/p2p/steps/item.tsx b/src/features/pages/p2p/steps/item.tsx
index 8b2c3e94165..d9e4102f7f9 100644
--- a/src/features/pages/p2p/steps/item.tsx
+++ b/src/features/pages/p2p/steps/item.tsx
@@ -25,14 +25,14 @@ const DP2StepItem = ({ item }: IStepItemProps) => {
             className={step_item}
         >
             <Flex.Box
-                className={dclsx(mobile_icon, 'visible-phone-and-tablet')}
+                className={dclsx(mobile_icon, 'at-visible-phone-and-tablet')}
                 justify="center"
                 align="center"
             >
                 <Image src={item.mobile_icon_src} alt="Icon" />
             </Flex.Box>
             <Flex.Box
-                className={dclsx(desktop_icon, 'visible-larger-than-tablet')}
+                className={dclsx(desktop_icon, 'at-visible-larger-than-tablet')}
                 justify="center"
                 align="center"
             >
diff --git a/src/features/pages/partners/deriv-prime/commercial-plan/data.tsx b/src/features/pages/partners/deriv-prime/commercial-plan/data.tsx
index a652c221451..7861135551f 100644
--- a/src/features/pages/partners/deriv-prime/commercial-plan/data.tsx
+++ b/src/features/pages/partners/deriv-prime/commercial-plan/data.tsx
@@ -29,7 +29,7 @@ export const data: Data[] = [
         monthly_requirement: (
             <Localize
                 translate_text="_t_0 - 15 million <0>(Crypto)</0>_t_"
-                components={[<span key={0} className={dclsx('typography-color-light')} />]}
+                components={[<span key={0} className={dclsx('at-typography-color-light')} />]}
             />
         ),
         fee_per_million: <Localize translate_text="_t_5.5 bps / 0.055%_t_" />,
@@ -38,7 +38,7 @@ export const data: Data[] = [
         monthly_requirement: (
             <Localize
                 translate_text="_t_> 15 million <0>(Crypto)</0>_t_"
-                components={[<span key={0} className={dclsx('typography-color-light')} />]}
+                components={[<span key={0} className={dclsx('at-typography-color-light')} />]}
             />
         ),
         fee_per_million: <Localize translate_text="_t_5 bps / 0.05%_t_" />,
diff --git a/src/features/pages/partners/deriv-prime/connectivity-reliability/connectivity-reliability-item.tsx b/src/features/pages/partners/deriv-prime/connectivity-reliability/connectivity-reliability-item.tsx
index 6d6b63b73ab..d2caa590683 100644
--- a/src/features/pages/partners/deriv-prime/connectivity-reliability/connectivity-reliability-item.tsx
+++ b/src/features/pages/partners/deriv-prime/connectivity-reliability/connectivity-reliability-item.tsx
@@ -15,7 +15,7 @@ const ConnectivityReliabilityItem = ({ item }: ConnectivityReliabilityItemProps)
     return (
         <Flex.Box direction="col" align="center" gap="4x">
             <Image src={item.icon_src} width={48} height={48} alt={localize(item.alt)} />
-            <Typography.Heading className={dclsx('text-medium')} as="h3" textcolor="inverted">
+            <Typography.Heading className={dclsx('at-text-medium')} as="h3" textcolor="inverted">
                 <Localize translate_text={item.title} />
             </Typography.Heading>
             <Flex.Item className={item_box}>
diff --git a/src/features/pages/partners/deriv-prime/get-in-touch/contact-form.tsx b/src/features/pages/partners/deriv-prime/get-in-touch/contact-form.tsx
index ac4ce5c3ad2..54b0b8ca57c 100644
--- a/src/features/pages/partners/deriv-prime/get-in-touch/contact-form.tsx
+++ b/src/features/pages/partners/deriv-prime/get-in-touch/contact-form.tsx
@@ -140,7 +140,7 @@ const ContactFormGetInTouch = () => {
                 </Flex.Box>
                 <Flex.Item>
                     <Typography.Paragraph
-                        className={'visible-phone-only'}
+                        className={'at-visible-phone-only'}
                         size={'xs'}
                         textcolor={get_form_bottom_message?.color}
                     >
@@ -148,7 +148,7 @@ const ContactFormGetInTouch = () => {
                     </Typography.Paragraph>
 
                     <Typography.Paragraph
-                        className={'visible-larger-than-phone'}
+                        className={'at-visible-larger-than-phone'}
                         size={'small'}
                         textcolor={get_form_bottom_message?.color}
                     >
diff --git a/src/features/pages/partners/deriv-prime/hero/index.tsx b/src/features/pages/partners/deriv-prime/hero/index.tsx
index 389d3131256..5c5674a809d 100644
--- a/src/features/pages/partners/deriv-prime/hero/index.tsx
+++ b/src/features/pages/partners/deriv-prime/hero/index.tsx
@@ -30,7 +30,7 @@ const Hero = () => {
                     formats={['avif', 'webp', 'auto']}
                     style={{ height: '100%' }}
                     objectPosition="center"
-                    className={dclsx('visible-larger-than-tablet')}
+                    className={dclsx('at-visible-larger-than-tablet')}
                 />
                 <StaticImage
                     src="../../../../../images/common/deriv-prime/hero-mobile.png"
@@ -42,7 +42,7 @@ const Hero = () => {
                     placeholder="blurred"
                     formats={['avif', 'webp', 'auto']}
                     style={{ height: '100%' }}
-                    className={dclsx('visible-phone-and-tablet')}
+                    className={dclsx('at-visible-phone-and-tablet')}
                 />
             </div>
             <Flex.Box
diff --git a/src/features/pages/partners/deriv-prime/meet-us-there/index.tsx b/src/features/pages/partners/deriv-prime/meet-us-there/index.tsx
index 9205a4d7dd8..10744e677f2 100644
--- a/src/features/pages/partners/deriv-prime/meet-us-there/index.tsx
+++ b/src/features/pages/partners/deriv-prime/meet-us-there/index.tsx
@@ -10,7 +10,7 @@ import { Divider } from 'components/elements'
 const MeetUsThere = () => {
     return (
         <>
-            <Divider className="visible-larger-than-tablet" />
+            <Divider className="at-visible-larger-than-tablet" />
             <FlexBox.Box
                 container={'fluid'}
                 direction={'col'}
diff --git a/src/features/styles/theme/accordion/styles.scss b/src/features/styles/theme/accordion/styles.scss
index d046653e4f6..062b53c1339 100644
--- a/src/features/styles/theme/accordion/styles.scss
+++ b/src/features/styles/theme/accordion/styles.scss
@@ -1,11 +1,11 @@
 @use 'features/styles/theme/theme-mixins' as *;
 @import 'features/styles/theme/variables';
 
-.accordion_root {
+.at-accordion_root {
     inline-size: 100%;
 }
 
-.accordion {
+.at-accordion {
     @keyframes slideDown {
         from {
             block-size: 0;
@@ -57,11 +57,11 @@
         padding-inline: 1.6rem;
         min-block-size: 5rem;
 
-        .accordion_icon {
+        .at-accordion_icon {
             transition: transform 0.25s linear;
             transform: rotate(-180deg);
         }
-        .plus_icon {
+        .at-plus_icon {
             inline-size: 1.6rem;
             block-size: 1.6rem;
             background: url(images/svg/elements/plus.svg) no-repeat top left;
@@ -74,7 +74,7 @@
             }
         }
 
-        &[data-state='open'] .plus_icon {
+        &[data-state='open'] .at-plus_icon {
             background: url(images/svg/elements/minus.svg) no-repeat top left;
             background-size: contain;
         }
diff --git a/src/features/styles/theme/alert.scss b/src/features/styles/theme/alert.scss
index bb5b5a795bd..59a4da88e4a 100644
--- a/src/features/styles/theme/alert.scss
+++ b/src/features/styles/theme/alert.scss
@@ -22,7 +22,7 @@
     }
 }
 
-.alert {
+.at-alert {
     &-overlay {
         background-color: rgba(0, 0, 0, 0.126);
         position: fixed;
diff --git a/src/features/styles/theme/colors.scss b/src/features/styles/theme/colors.scss
index d45375f4c27..18f7b2828be 100644
--- a/src/features/styles/theme/colors.scss
+++ b/src/features/styles/theme/colors.scss
@@ -1,26 +1,26 @@
 @import './variables';
 
-.bg-color-brand {
+.at-bg-color-brand {
     background-color: $color-brand;
 }
-.bg-color-primary {
+.at-bg-color-primary {
     background-color: $color-white;
 }
-.bg-color-secondary {
+.at-bg-color-secondary {
     background-color: $color-white-1;
 }
-.bg-color-tertiary {
+.at-bg-color-tertiary {
     background-color: $color-grey-44;
 }
-.bg-color-inverted {
+.at-bg-color-inverted {
     background-color: $color-black-9;
 }
-.bg-color-white {
+.at-bg-color-white {
     background-color: $color-white;
 }
-.bg-color-black {
+.at-bg-color-black {
     background-color: $color-black-9;
 }
-.bg-color-blue {
+.at-bg-color-blue {
     background-color: $color-blue-15;
 }
diff --git a/src/features/styles/theme/containers.scss b/src/features/styles/theme/containers.scss
index 1aad55736ba..57d0d77cf62 100644
--- a/src/features/styles/theme/containers.scss
+++ b/src/features/styles/theme/containers.scss
@@ -1,6 +1,6 @@
 @use 'features/styles/theme/theme-mixins' as *;
 
-.container-fluid {
+.at-container-fluid {
     margin-inline: auto;
     inline-size: 95%;
 
@@ -18,6 +18,6 @@
     }
 }
 
-.container-fixed {
+.at-container-fixed {
     inline-size: 100%;
 }
diff --git a/src/features/styles/theme/flex.scss b/src/features/styles/theme/flex.scss
index dbd112f5746..f75413f60d7 100644
--- a/src/features/styles/theme/flex.scss
+++ b/src/features/styles/theme/flex.scss
@@ -2,510 +2,510 @@
 
 $flex-medias: (md, lg);
 
-.flex {
+.at-flex {
     display: flex;
 }
-.align-self-start {
+.at-align-self-start {
     align-self: flex-start;
 }
-.align-self-end {
+.at-align-self-end {
     align-self: flex-end;
 }
-.align-self-center {
+.at-align-self-center {
     align-self: center;
 }
-.align-self-baseline {
+.at-align-self-baseline {
     align-self: baseline;
 }
-.align-self-stretch {
+.at-align-self-stretch {
     align-self: stretch;
 }
-.align-items-start {
+.at-align-items-start {
     align-items: flex-start;
 }
-.align-items-end {
+.at-align-items-end {
     align-items: flex-end;
 }
-.align-items-center {
+.at-align-items-center {
     align-items: center;
 }
-.align-items-baseline {
+.at-align-items-baseline {
     align-items: baseline;
 }
-.align-items-stretch {
+.at-align-items-stretch {
     align-items: stretch;
 }
-.justify-start {
+.at-justify-start {
     justify-content: flex-start;
 }
-.justify-end {
+.at-justify-end {
     justify-content: flex-end;
 }
-.justify-center {
+.at-justify-center {
     justify-content: center;
 }
-.justify-between {
+.at-justify-between {
     justify-content: space-between;
 }
-.justify-around {
+.at-justify-around {
     justify-content: space-around;
 }
-.justify-evenly {
+.at-justify-evenly {
     justify-content: space-evenly;
 }
-.flex-grow-1 {
+.at-flex-grow-1 {
     flex-grow: 1;
 }
-.flex-grow-0 {
+.at-flex-grow-0 {
     flex-grow: 0;
 }
-.flex-shrink-1 {
+.at-flex-shrink-1 {
     flex-shrink: 1;
 }
-.flex-shrink-0 {
+.at-flex-shrink-0 {
     flex-shrink: 0;
 }
-.flex-wrap-wrap {
+.at-flex-wrap-wrap {
     flex-wrap: wrap;
 }
-.flex-wrap-reverse {
+.at-flex-wrap-reverse {
     flex-wrap: wrap-reverse;
 }
-.flex-wrap-nowrap {
+.at-flex-wrap-nowrap {
     flex-wrap: nowrap;
 }
-.flex-dir-row {
+.at-flex-dir-row {
     flex-direction: row;
 }
-.flex-dir-row-reverse {
+.at-flex-dir-row-reverse {
     flex-direction: row-reverse;
 }
-.flex-dir-col {
+.at-flex-dir-col {
     flex-direction: column;
 }
-.flex-dir-col-reverse {
+.at-flex-dir-col-reverse {
     flex-direction: column-reverse;
 }
-.flex-basis-0 {
+.at-flex-basis-0 {
     flex-basis: 0%;
 }
-.flex-basis-1-2 {
+.at-flex-basis-1-2 {
     flex-basis: 50%;
 }
-.flex-basis-1-3 {
+.at-flex-basis-1-3 {
     flex-basis: 33.333333%;
 }
-.flex-basis-2-3 {
+.at-flex-basis-2-3 {
     flex-basis: 66.666667%;
 }
-.flex-basis-1-4 {
+.at-flex-basis-1-4 {
     flex-basis: 25%;
 }
-.flex-basis-2-4 {
+.at-flex-basis-2-4 {
     flex-basis: 50%;
 }
-.flex-basis-3-4 {
+.at-flex-basis-3-4 {
     flex-basis: 75%;
 }
-.flex-basis-1-5 {
+.at-flex-basis-1-5 {
     flex-basis: 20%;
 }
-.flex-basis-2-5 {
+.at-flex-basis-2-5 {
     flex-basis: 40%;
 }
-.flex-basis-3-5 {
+.at-flex-basis-3-5 {
     flex-basis: 60%;
 }
-.flex-basis-4-5 {
+.at-flex-basis-4-5 {
     flex-basis: 80%;
 }
-.flex-basis-1-6 {
+.at-flex-basis-1-6 {
     flex-basis: 16.666667%;
 }
-.flex-basis-2-6 {
+.at-flex-basis-2-6 {
     flex-basis: 33.333333%;
 }
-.flex-basis-3-6 {
+.at-flex-basis-3-6 {
     flex-basis: 50%;
 }
-.flex-basis-4-6 {
+.at-flex-basis-4-6 {
     flex-basis: 66.666667%;
 }
-.flex-basis-5-6 {
+.at-flex-basis-5-6 {
     flex-basis: 83.333333%;
 }
-.flex-basis-1-12 {
+.at-flex-basis-1-12 {
     flex-basis: 8.333333%;
 }
-.flex-basis-2-12 {
+.at-flex-basis-2-12 {
     flex-basis: 16.666667%;
 }
-.flex-basis-3-12 {
+.at-flex-basis-3-12 {
     flex-basis: 25%;
 }
-.flex-basis-4-12 {
+.at-flex-basis-4-12 {
     flex-basis: 33.333333%;
 }
-.flex-basis-5-12 {
+.at-flex-basis-5-12 {
     flex-basis: 41.666667%;
 }
-.flex-basis-6-12 {
+.at-flex-basis-6-12 {
     flex-basis: 50%;
 }
-.flex-basis-7-12 {
+.at-flex-basis-7-12 {
     flex-basis: 58.333333%;
 }
-.flex-basis-8-12 {
+.at-flex-basis-8-12 {
     flex-basis: 66.666667%;
 }
-.flex-basis-9-12 {
+.at-flex-basis-9-12 {
     flex-basis: 75%;
 }
-.flex-basis-10-12 {
+.at-flex-basis-10-12 {
     flex-basis: 83.333333%;
 }
-.flex-basis-11-12 {
+.at-flex-basis-11-12 {
     flex-basis: 91.666667%;
 }
-.flex-basis-full {
+.at-flex-basis-full {
     flex-basis: 100%;
 }
-.flex-basis-auto {
+.at-flex-basis-auto {
     flex-basis: auto;
 }
 
 @mixin flex($media-name) {
-    .#{$media-name + #{'-'}}align-self-start {
+    .#{$media-name + #{'-'}}at-align-self-start {
         @include media($media-name) {
             align-self: flex-start;
         }
     }
 
-    .#{$media-name + #{'-'}}align-self-end {
+    .#{$media-name + #{'-'}}at-align-self-end {
         @include media($media-name) {
             align-self: flex-end;
         }
     }
 
-    .#{$media-name + #{'-'}}align-self-center {
+    .#{$media-name + #{'-'}}at-align-self-center {
         @include media($media-name) {
             align-self: center;
         }
     }
 
-    .#{$media-name + #{'-'}}align-self-baseline {
+    .#{$media-name + #{'-'}}at-align-self-baseline {
         @include media($media-name) {
             align-self: baseline;
         }
     }
 
-    .#{$media-name + #{'-'}}align-self-stretch {
+    .#{$media-name + #{'-'}}at-align-self-stretch {
         @include media($media-name) {
             align-self: stretch;
         }
     }
 
-    .#{$media-name + #{'-'}}align-items-start {
+    .#{$media-name + #{'-'}}at-align-items-start {
         @include media($media-name) {
             align-items: flex-start;
         }
     }
 
-    .#{$media-name + #{'-'}}align-items-end {
+    .#{$media-name + #{'-'}}at-align-items-end {
         @include media($media-name) {
             align-items: flex-end;
         }
     }
 
-    .#{$media-name + #{'-'}}align-items-center {
+    .#{$media-name + #{'-'}}at-align-items-center {
         @include media($media-name) {
             align-items: center;
         }
     }
 
-    .#{$media-name + #{'-'}}align-items-baseline {
+    .#{$media-name + #{'-'}}at-align-items-baseline {
         @include media($media-name) {
             align-items: baseline;
         }
     }
 
-    .#{$media-name + #{'-'}}align-items-stretch {
+    .#{$media-name + #{'-'}}at-align-items-stretch {
         @include media($media-name) {
             align-items: stretch;
         }
     }
 
-    .#{$media-name + #{'-'}}justify-start {
+    .#{$media-name + #{'-'}}at-justify-start {
         @include media($media-name) {
             justify-content: flex-start;
         }
     }
 
-    .#{$media-name + #{'-'}}justify-end {
+    .#{$media-name + #{'-'}}at-justify-end {
         @include media($media-name) {
             justify-content: flex-end;
         }
     }
 
-    .#{$media-name + #{'-'}}justify-center {
+    .#{$media-name + #{'-'}}at-justify-center {
         @include media($media-name) {
             justify-content: center;
         }
     }
 
-    .#{$media-name + #{'-'}}justify-between {
+    .#{$media-name + #{'-'}}at-justify-between {
         @include media($media-name) {
             justify-content: space-between;
         }
     }
 
-    .#{$media-name + #{'-'}}justify-around {
+    .#{$media-name + #{'-'}}at-justify-around {
         @include media($media-name) {
             justify-content: space-around;
         }
     }
 
-    .#{$media-name + #{'-'}}justify-evenly {
+    .#{$media-name + #{'-'}}at-justify-evenly {
         @include media($media-name) {
             justify-content: space-evenly;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-grow-1 {
+    .#{$media-name + #{'-'}}at-flex-grow-1 {
         @include media($media-name) {
             flex-grow: 1;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-grow-0 {
+    .#{$media-name + #{'-'}}at-flex-grow-0 {
         @include media($media-name) {
             flex-grow: 0;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-shrink-1 {
+    .#{$media-name + #{'-'}}at-flex-shrink-1 {
         @include media($media-name) {
             flex-shrink: 1;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-shrink-0 {
+    .#{$media-name + #{'-'}}at-flex-shrink-0 {
         @include media($media-name) {
             flex-shrink: 0;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-wrap-wrap {
+    .#{$media-name + #{'-'}}at-flex-wrap-wrap {
         @include media($media-name) {
             flex-wrap: wrap;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-wrap-reverse {
+    .#{$media-name + #{'-'}}at-flex-wrap-reverse {
         @include media($media-name) {
             flex-wrap: wrap-reverse;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-wrap-nowrap {
+    .#{$media-name + #{'-'}}at-flex-wrap-nowrap {
         @include media($media-name) {
             flex-wrap: nowrap;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-dir-row {
+    .#{$media-name + #{'-'}}at-flex-dir-row {
         @include media($media-name) {
             flex-direction: row;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-dir-row-reverse {
+    .#{$media-name + #{'-'}}at-flex-dir-row-reverse {
         @include media($media-name) {
             flex-direction: row-reverse;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-dir-col {
+    .#{$media-name + #{'-'}}at-flex-dir-col {
         @include media($media-name) {
             flex-direction: column;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-dir-col-reverse {
+    .#{$media-name + #{'-'}}at-flex-dir-col-reverse {
         @include media($media-name) {
             flex-direction: column-reverse;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-0 {
+    .#{$media-name + #{'-'}}at-flex-basis-0 {
         @include media($media-name) {
             flex-basis: 0%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-1-2 {
+    .#{$media-name + #{'-'}}at-flex-basis-1-2 {
         @include media($media-name) {
             flex-basis: 50%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-1-3 {
+    .#{$media-name + #{'-'}}at-flex-basis-1-3 {
         @include media($media-name) {
             flex-basis: 33.333333%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-2-3 {
+    .#{$media-name + #{'-'}}at-flex-basis-2-3 {
         @include media($media-name) {
             flex-basis: 66.666667%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-1-4 {
+    .#{$media-name + #{'-'}}at-flex-basis-1-4 {
         @include media($media-name) {
             flex-basis: 25%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-2-4 {
+    .#{$media-name + #{'-'}}at-flex-basis-2-4 {
         @include media($media-name) {
             flex-basis: 50%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-3-4 {
+    .#{$media-name + #{'-'}}at-flex-basis-3-4 {
         @include media($media-name) {
             flex-basis: 75%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-1-5 {
+    .#{$media-name + #{'-'}}at-flex-basis-1-5 {
         @include media($media-name) {
             flex-basis: 20%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-2-5 {
+    .#{$media-name + #{'-'}}at-flex-basis-2-5 {
         @include media($media-name) {
             flex-basis: 40%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-3-5 {
+    .#{$media-name + #{'-'}}at-flex-basis-3-5 {
         @include media($media-name) {
             flex-basis: 60%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-4-5 {
+    .#{$media-name + #{'-'}}at-flex-basis-4-5 {
         @include media($media-name) {
             flex-basis: 80%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-1-6 {
+    .#{$media-name + #{'-'}}at-flex-basis-1-6 {
         @include media($media-name) {
             flex-basis: 16.666667%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-2-6 {
+    .#{$media-name + #{'-'}}at-flex-basis-2-6 {
         @include media($media-name) {
             flex-basis: 33.333333%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-3-6 {
+    .#{$media-name + #{'-'}}at-flex-basis-3-6 {
         @include media($media-name) {
             flex-basis: 50%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-4-6 {
+    .#{$media-name + #{'-'}}at-flex-basis-4-6 {
         @include media($media-name) {
             flex-basis: 66.666667%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-5-6 {
+    .#{$media-name + #{'-'}}at-flex-basis-5-6 {
         @include media($media-name) {
             flex-basis: 83.333333%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-1-12 {
+    .#{$media-name + #{'-'}}at-flex-basis-1-12 {
         @include media($media-name) {
             flex-basis: 8.333333%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-2-12 {
+    .#{$media-name + #{'-'}}at-flex-basis-2-12 {
         @include media($media-name) {
             flex-basis: 16.666667%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-3-12 {
+    .#{$media-name + #{'-'}}at-flex-basis-3-12 {
         @include media($media-name) {
             flex-basis: 25%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-4-12 {
+    .#{$media-name + #{'-'}}at-flex-basis-4-12 {
         @include media($media-name) {
             flex-basis: 33.333333%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-5-12 {
+    .#{$media-name + #{'-'}}at-flex-basis-5-12 {
         @include media($media-name) {
             flex-basis: 41.666667%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-6-12 {
+    .#{$media-name + #{'-'}}at-flex-basis-6-12 {
         @include media($media-name) {
             flex-basis: 50%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-7-12 {
+    .#{$media-name + #{'-'}}at-flex-basis-7-12 {
         @include media($media-name) {
             flex-basis: 58.333333%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-8-12 {
+    .#{$media-name + #{'-'}}at-flex-basis-8-12 {
         @include media($media-name) {
             flex-basis: 66.666667%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-9-12 {
+    .#{$media-name + #{'-'}}at-flex-basis-9-12 {
         @include media($media-name) {
             flex-basis: 75%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-10-12 {
+    .#{$media-name + #{'-'}}at-flex-basis-10-12 {
         @include media($media-name) {
             flex-basis: 83.333333%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-11-12 {
+    .#{$media-name + #{'-'}}at-flex-basis-11-12 {
         @include media($media-name) {
             flex-basis: 91.666667%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-full {
+    .#{$media-name + #{'-'}}at-flex-basis-full {
         @include media($media-name) {
             flex-basis: 100%;
         }
     }
 
-    .#{$media-name + #{'-'}}flex-basis-auto {
+    .#{$media-name + #{'-'}}at-flex-basis-auto {
         @include media($media-name) {
             flex-basis: auto;
         }
diff --git a/src/features/styles/theme/icon.scss b/src/features/styles/theme/icon.scss
index 620e6f80aeb..d9ba5057d12 100644
--- a/src/features/styles/theme/icon.scss
+++ b/src/features/styles/theme/icon.scss
@@ -1,12 +1,12 @@
 @use 'features/styles/theme/theme-mixins' as *;
 
-.icon-rtl {
+.at-icon-rtl {
     @include rtl() {
         transform: scaleX(-1);
     }
 }
 
-.icon-small {
+.at-icon-small {
     inline-size: 12px;
     block-size: 12px;
 
@@ -16,7 +16,7 @@
     }
 }
 
-.icon-medium {
+.at-icon-medium {
     inline-size: 16px;
     block-size: 16px;
 
@@ -26,7 +26,7 @@
     }
 }
 
-.icon-large {
+.at-icon-large {
     inline-size: 24px;
     block-size: 24px;
 
@@ -36,7 +36,7 @@
     }
 }
 
-.icon-xlarge {
+.at-icon-xlarge {
     inline-size: 32px;
     block-size: 32px;
 
diff --git a/src/features/styles/theme/inputs/checkbox.styles.scss b/src/features/styles/theme/inputs/checkbox.styles.scss
index 4652e9be922..84041155d57 100644
--- a/src/features/styles/theme/inputs/checkbox.styles.scss
+++ b/src/features/styles/theme/inputs/checkbox.styles.scss
@@ -1,6 +1,6 @@
 @import 'features/styles/theme/variables';
 
-.checkbox_input_container {
+.at-checkbox_input_container {
     cursor: pointer;
     user-select: none;
     & input[type='checkbox'] {
diff --git a/src/features/styles/theme/inputs/text.styles.scss b/src/features/styles/theme/inputs/text.styles.scss
index 085f9d77593..b95deb9dd9b 100644
--- a/src/features/styles/theme/inputs/text.styles.scss
+++ b/src/features/styles/theme/inputs/text.styles.scss
@@ -1,6 +1,6 @@
 @import 'features/styles/theme/variables';
 
-.text_input {
+.at-text_input {
     &_container {
         position: relative;
         &.error {
@@ -29,19 +29,19 @@
 
             &:focus {
                 outline: none;
-                ~ .text_input_label {
+                ~ .at-text_input_label {
                     inset-block-start: -8px;
                     color: $color-black;
                     inline-size: auto;
                 }
             }
-            &:not(:placeholder-shown) ~ .text_input_label {
+            &:not(:placeholder-shown) ~ .at-text_input_label {
                 inset-block-start: -12px;
                 inline-size: auto;
                 color: $color-black;
             }
         }
-        .cross_icon {
+        .at-cross_icon {
             position: absolute;
             inset-inline-end: 0.8rem;
             inset-block-start: 1.2rem;
diff --git a/src/features/styles/theme/radius.scss b/src/features/styles/theme/radius.scss
index 45e7ab4bf9d..6082133ea66 100644
--- a/src/features/styles/theme/radius.scss
+++ b/src/features/styles/theme/radius.scss
@@ -3,7 +3,7 @@ $sm-base-spacing: 0.2rem;
 @for $i from 0 through 10 {
   $sm-value: $i * $sm-base-spacing;
 
-  .border-radius-#{$i}x {
+  .at-border-radius-#{$i}x {
     border-radius: $sm-value
   }
 }
\ No newline at end of file
diff --git a/src/features/styles/theme/spacing.scss b/src/features/styles/theme/spacing.scss
index d5794d61605..89f905a1c7f 100644
--- a/src/features/styles/theme/spacing.scss
+++ b/src/features/styles/theme/spacing.scss
@@ -6,49 +6,49 @@ $space-medias: (md, lg);
 @for $i from 0 through 40 {
     $sm-value: $i * $sm-base-spacing;
 
-    .gap-#{$i}x {
+    .at-gap-#{$i}x {
         gap: $sm-value;
     }
-    .margin-#{$i}x {
+    .at-margin-#{$i}x {
         margin: $sm-value;
     }
-    .margin-top-#{$i}x {
+    .at-margin-top-#{$i}x {
         margin-block-start: $sm-value;
     }
-    .margin-bottom-#{$i}x {
+    .at-margin-bottom-#{$i}x {
         margin-block-end: $sm-value;
     }
-    .margin-left-#{$i}x {
+    .at-margin-left-#{$i}x {
         margin-inline-start: $sm-value;
     }
-    .margin-right-#{$i}x {
+    .at-margin-right-#{$i}x {
         margin-inline-end: $sm-value;
     }
-    .margin-block-#{$i}x {
+    .at-margin-block-#{$i}x {
         margin-block: $sm-value;
     }
-    .margin-inline-#{$i}x {
+    .at-margin-inline-#{$i}x {
         margin-inline: $sm-value;
     }
-    .padding-#{$i}x {
+    .at-padding-#{$i}x {
         padding: $sm-value;
     }
-    .padding-top-#{$i}x {
+    .at-padding-top-#{$i}x {
         padding-block-start: $sm-value;
     }
-    .padding-bottom-#{$i}x {
+    .at-padding-bottom-#{$i}x {
         padding-block-end: $sm-value;
     }
-    .padding-left-#{$i}x {
+    .at-padding-left-#{$i}x {
         padding-inline-start: $sm-value;
     }
-    .padding-right-#{$i}x {
+    .at-padding-right-#{$i}x {
         padding-inline-end: $sm-value;
     }
-    .padding-block-#{$i}x {
+    .at-padding-block-#{$i}x {
         padding-block: $sm-value;
     }
-    .padding-inline-#{$i}x {
+    .at-padding-inline-#{$i}x {
         padding-inline: $sm-value;
     }
 }
@@ -56,77 +56,77 @@ $space-medias: (md, lg);
 @mixin margins($media-name) {
     @for $i from 0 through 40 {
         $sm-value: $i * $sm-base-spacing;
-        .#{$media-name + #{'-'}}gap-#{$i}x {
+        .#{$media-name + #{'-'}}at-gap-#{$i}x {
             @include media($media-name) {
                 gap: $sm-value;
             }
         }
-        .#{$media-name + #{'-'}}margin-#{$i}x {
+        .#{$media-name + #{'-'}}at-margin-#{$i}x {
             @include media($media-name) {
                 margin: $sm-value;
             }
         }
-        .#{$media-name + #{'-'}}margin-top-#{$i}x {
+        .#{$media-name + #{'-'}}at-margin-top-#{$i}x {
             @include media($media-name) {
                 margin-block-start: $sm-value;
             }
         }
-        .#{$media-name + #{'-'}}margin-bottom-#{$i}x {
+        .#{$media-name + #{'-'}}at-margin-bottom-#{$i}x {
             @include media($media-name) {
                 margin-block-end: $sm-value;
             }
         }
-        .#{$media-name + #{'-'}}margin-left-#{$i}x {
+        .#{$media-name + #{'-'}}at-margin-left-#{$i}x {
             @include media($media-name) {
                 margin-inline-start: $sm-value;
             }
         }
-        .#{$media-name + #{'-'}}margin-right-#{$i}x {
+        .#{$media-name + #{'-'}}at-margin-right-#{$i}x {
             @include media($media-name) {
                 margin-inline-end: $sm-value;
             }
         }
-        .#{$media-name + #{'-'}}margin-block-#{$i}x {
+        .#{$media-name + #{'-'}}at-margin-block-#{$i}x {
             @include media($media-name) {
                 margin-block: $sm-value;
             }
         }
-        .#{$media-name + #{'-'}}margin-inline-#{$i}x {
+        .#{$media-name + #{'-'}}at-margin-inline-#{$i}x {
             @include media($media-name) {
                 margin-inline: $sm-value;
             }
         }
-        .#{$media-name + #{'-'}}padding-#{$i}x {
+        .#{$media-name + #{'-'}}at-padding-#{$i}x {
             @include media($media-name) {
                 padding: $sm-value;
             }
         }
-        .#{$media-name + #{'-'}}padding-top-#{$i}x {
+        .#{$media-name + #{'-'}}at-padding-top-#{$i}x {
             @include media($media-name) {
                 padding-block-start: $sm-value;
             }
         }
-        .#{$media-name + #{'-'}}padding-bottom-#{$i}x {
+        .#{$media-name + #{'-'}}at-padding-bottom-#{$i}x {
             @include media($media-name) {
                 padding-block-end: $sm-value;
             }
         }
-        .#{$media-name + #{'-'}}padding-left-#{$i}x {
+        .#{$media-name + #{'-'}}at-padding-left-#{$i}x {
             @include media($media-name) {
                 padding-inline-start: $sm-value;
             }
         }
-        .#{$media-name + #{'-'}}padding-right-#{$i}x {
+        .#{$media-name + #{'-'}}at-padding-right-#{$i}x {
             @include media($media-name) {
                 padding-inline-end: $sm-value;
             }
         }
-        .#{$media-name + #{'-'}}padding-block-#{$i}x {
+        .#{$media-name + #{'-'}}at-padding-block-#{$i}x {
             @include media($media-name) {
                 padding-block: $sm-value;
             }
         }
-        .#{$media-name + #{'-'}}padding-inline-#{$i}x {
+        .#{$media-name + #{'-'}}at-padding-inline-#{$i}x {
             @include media($media-name) {
                 padding-inline: $sm-value;
             }
diff --git a/src/features/styles/theme/table.scss b/src/features/styles/theme/table.scss
index ce7d9401f4b..073abf1840f 100644
--- a/src/features/styles/theme/table.scss
+++ b/src/features/styles/theme/table.scss
@@ -1,25 +1,25 @@
 @import 'features/styles/theme/variables';
 
-.table-responsive {
+.at-table-responsive {
     display: block;
     inline-size: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 }
-.table {
+.at-table {
     inline-size: 100%;
     background-color: transparent;
     th, td {
         line-height: 1.8;
     }
 }
-.table-layout-fixed {
+.at-table-layout-fixed {
     table-layout: fixed;
 }
-.table-shadow {
+.at-table-shadow {
     box-shadow: 0px 24px 48px 0px rgba(14, 14, 14, 0.18);
 }
-.table-striped {
+.at-table-striped {
     background-color: $color-white;
     thead {
         tr {
diff --git a/src/features/styles/theme/tabs.scss b/src/features/styles/theme/tabs.scss
index f9ebbd5f3c0..22b46edfe28 100644
--- a/src/features/styles/theme/tabs.scss
+++ b/src/features/styles/theme/tabs.scss
@@ -1,7 +1,7 @@
 @use 'features/styles/theme/theme-mixins' as *;
 @import 'features/styles/theme/variables';
 
-.tab {
+.at-tab {
     cursor: pointer;
     border-color: transparent;
     background-color: transparent;
@@ -12,23 +12,23 @@
     white-space: nowrap;
     @include breakpoints(tablet) {
         font-size: 2rem;
-        &.navigation-tabs {
+        &.at-navigation-tabs {
             min-inline-size: 14rem;
         }
     }
 }
 
-.tab.menu-item {
+.at-tab.at-menu-item {
     color: $color-grey-5;
     border-bottom: 2px solid $color-grey-8;
-    &.navigation-tabs {
+    &.at-navigation-tabs {
         border-bottom: none;
     }
 }
-.tab.menu-item.selected {
+.at-tab.at-menu-item.at-selected {
     color: $color-red;
     border-bottom: 2px solid $color-red;
-    &.navigation-tabs {
+    &.at-navigation-tabs {
         border-bottom: none;
     }
 }
diff --git a/src/features/styles/theme/typography.scss b/src/features/styles/theme/typography.scss
index 34c4034105e..57640064e83 100644
--- a/src/features/styles/theme/typography.scss
+++ b/src/features/styles/theme/typography.scss
@@ -1,21 +1,21 @@
 @use './theme-mixins' as *;
 @import './variables';
 
-.typography {
+.at-typography {
     line-height: calc(2px + 2.5ex + 2px);
     color: $color-black-9;
     word-break: break-word;
 }
 
-[dir='ltr'] .typography-font-IBM {
+[dir='ltr'] .at-typography-font-IBM {
     font-family: 'IBM Plex Sans', sans-serif;
 }
 
-[dir='ltr'] .typography-font-UBUNTU {
+[dir='ltr'] .at-typography-font-UBUNTU {
     font-family: Ubuntu, sans-serif;
 }
 
-.typography-link {
+.at-typography-link {
     cursor: pointer;
     text-decoration: none;
     transition: text-shadow 0.25s;
@@ -29,167 +29,167 @@
         opacity: 0.32;
     }
 }
-.typography-hover {
+.at-typography-hover {
     &:hover {
         color: $color-red;
         text-decoration: underline;
     }
 }
 
-.typography-align-center {
+.at-typography-align-center {
     text-align: center;
 }
-.typography-align-left {
+.at-typography-align-left {
     text-align: start;
 }
-.typography-align-right {
+.at-typography-align-right {
     text-align: end;
 }
-.typography-align-justify {
+.at-typography-align-justify {
     text-align: justify;
 }
 
-.typography-color-brand {
+.at-typography-color-brand {
     color: $color-brand;
 }
-.typography-color-primary {
+.at-typography-color-primary {
     color: $color-black-9;
 }
-.typography-color-secondary {
+.at-typography-color-secondary {
     color: #414652b2;
 }
-.typography-color-tertiary {
+.at-typography-color-tertiary {
     color: #425651;
 }
-.typography-color-inverted {
+.at-typography-color-inverted {
     color: $color-white;
 }
-.typography-color-white {
+.at-typography-color-white {
     color: $color-white;
 }
-.typography-color-black {
+.at-typography-color-black {
     color: $color-black-9;
 }
-.typography-color-light {
+.at-typography-color-light {
     color: $color-grey-5;
 }
-.typography-color-light-grey {
+.at-typography-color-light-grey {
     color: $color-grey-19;
 }
-.typography-color-light-black {
+.at-typography-color-light-black {
     color: #000000b8;
 }
-.typography-color-profit {
+.at-typography-color-profit {
     color: $color-blue-7;
 }
-.typography-color-gray-shade {
+.at-typography-color-gray-shade {
     color: $color-grey-46;
 }
-.typography-break-word {
+.at-typography-break-word {
     word-break: break-word;
 }
 
-.typography-break-normal {
+.at-typography-break-normal {
     word-break: normal;
 }
 
-.typography-weight-normal {
+.at-typography-weight-normal {
     font-weight: normal;
 }
-.typography-weight-bold {
+.at-typography-weight-bold {
     font-weight: bold;
 }
-.typography-weight-bolder {
+.at-typography-weight-bolder {
     font-weight: 700;
 }
 
 *[dir='ltr'] {
-    .heading {
+    .at-heading {
         font-family: Ubuntu, sans-serif;
     }
 }
 
-.heading-xxxl {
+.at-heading-xxxl {
     @include font-size($font-size-1300);
 }
 
-.heading-xxl {
+.at-heading-xxl {
     @include font-size($font-size-1200);
 }
 
-.heading-xlarge {
+.at-heading-xlarge {
     @include font-size($font-size-1100);
 }
 
-.heading-large {
+.at-heading-large {
     @include font-size($font-size-1000);
 }
 
-.heading-medium {
+.at-heading-medium {
     @include font-size($font-size-900);
 }
 
-.heading-small {
+.at-heading-small {
     @include font-size($font-size-800);
 }
 
-.heading-xs {
+.at-heading-xs {
     @include font-size($font-size-700);
 }
 
-.heading-xxs {
+.at-heading-xxs {
     @include font-size($font-size-600);
 }
 
-.text-xxxl {
+.at-text-xxxl {
     @include font-size($font-size-900);
 }
 
-.text-xxl {
+.at-text-xxl {
     @include font-size($font-size-800);
 }
 
-.text-xlarge {
+.at-text-xlarge {
     @include font-size($font-size-700);
 }
 
-.text-large {
+.at-text-large {
     @include font-size($font-size-600);
 }
 
-.text-medium {
+.at-text-medium {
     @include font-size($font-size-500);
 }
 
-.text-small {
+.at-text-small {
     @include font-size($font-size-400);
 }
 
-.text-xs {
+.at-text-xs {
     @include font-size($font-size-300);
 }
 
-.text-xxs {
+.at-text-xxs {
     @include font-size($font-size-200);
 }
 
 @mixin typography-align($media-name) {
-    .#{$media-name + #{'-'}}typography-align-center {
+    .#{$media-name + #{'-'}}at-typography-align-center {
         @include media($media-name) {
             text-align: center;
         }
     }
-    .#{$media-name + #{'-'}}typography-align-left {
+    .#{$media-name + #{'-'}}at-typography-align-left {
         @include media($media-name) {
             text-align: start;
         }
     }
-    .#{$media-name + #{'-'}}typography-align-right {
+    .#{$media-name + #{'-'}}at-typography-align-right {
         @include media($media-name) {
             text-align: end;
         }
     }
-    .#{$media-name + #{'-'}}typography-align-justify {
+    .#{$media-name + #{'-'}}at-typography-align-justify {
         @include media($media-name) {
             text-align: justify;
         }
@@ -197,17 +197,17 @@
 }
 
 @mixin typography-weight($media-name) {
-    .#{$media-name + #{'-'}}typography-weight-normal {
+    .#{$media-name + #{'-'}}at-typography-weight-normal {
         @include media($media-name) {
             font-weight: normal;
         }
     }
-    .#{$media-name + #{'-'}}typography-weight-bold {
+    .#{$media-name + #{'-'}}at-typography-weight-bold {
         @include media($media-name) {
             font-weight: bold;
         }
     }
-    .#{$media-name + #{'-'}}typography-weight-bolder {
+    .#{$media-name + #{'-'}}at-typography-weight-bolder {
         @include media($media-name) {
             font-weight: 700;
         }
diff --git a/src/features/styles/theme/utility.scss b/src/features/styles/theme/utility.scss
index 52463fd2ef7..208dae67ca8 100644
--- a/src/features/styles/theme/utility.scss
+++ b/src/features/styles/theme/utility.scss
@@ -1,4 +1,4 @@
-.sr-only {
+.at-sr-only {
     width: 1px;
     height: 1px;
     padding: 0;
diff --git a/src/features/styles/theme/visibility.scss b/src/features/styles/theme/visibility.scss
index 59b131d1742..4b8327cad8e 100644
--- a/src/features/styles/theme/visibility.scss
+++ b/src/features/styles/theme/visibility.scss
@@ -1,33 +1,33 @@
 @use './theme-mixins.scss' as *;
-.visible-phone-only {
+.at-visible-phone-only {
     // 0 - 600px
     @include breakpoints(phone) {
         display: none;
     }
 }
 
-.visible-phone-and-tablet {
+.at-visible-phone-and-tablet {
     // 0px - 992px
     @include breakpoints(tablet) {
         display: none;
     }
 }
 
-.visible-larger-than-tablet {
+.at-visible-larger-than-tablet {
     // 992px - ....
     @include breakpoints(tablet, max) {
         display: none;
     }
 }
 
-.visible-larger-than-laptop {
+.at-visible-larger-than-laptop {
     // 1280px - ....
     @include breakpoints(laptop, max) {
         display: none;
     }
 }
 
-.visible-larger-than-phone {
+.at-visible-larger-than-phone {
     // 600 - ....
     @include breakpoints(phone, max) {
         display: none;
diff --git a/src/features/styles/utils/index.ts b/src/features/styles/utils/index.ts
index efc67215fb1..32c318b78d7 100644
--- a/src/features/styles/utils/index.ts
+++ b/src/features/styles/utils/index.ts
@@ -31,7 +31,7 @@ type SpacingClasses = {
 
 export const generateVisibleClasses = (visible: TVisible) => {
     return dclsx({
-        [`visible-${visible}`]: visible,
+        [`at-visible-${visible}`]: visible,
     })
 }
 
@@ -54,66 +54,66 @@ export const generateSpacingClasses = (options: SpacingClasses, prefix = '') =>
         padding_block,
     } = options
     return dclsx({
-        [`${classPrefix}margin-${margin}`]: margin,
-        [`${classPrefix}margin-left-${ml}`]: ml,
-        [`${classPrefix}margin-right-${mr}`]: mr,
-        [`${classPrefix}margin-top-${mt}`]: mt,
-        [`${classPrefix}margin-bottom-${mb}`]: mb,
-        [`${classPrefix}margin-inline-${margin_inline}`]: margin_inline,
-        [`${classPrefix}margin-block-${margin_block}`]: margin_block,
-        [`${classPrefix}padding-${padding}`]: padding,
-        [`${classPrefix}padding-left-${pl}`]: pl,
-        [`${classPrefix}padding-right-${pr}`]: pr,
-        [`${classPrefix}padding-top-${pt}`]: pt,
-        [`${classPrefix}padding-bottom-${pb}`]: pb,
-        [`${classPrefix}padding-inline-${padding_inline}`]: padding_inline,
-        [`${classPrefix}padding-block-${padding_block}`]: padding_block,
+        [`${classPrefix}at-margin-${margin}`]: margin,
+        [`${classPrefix}at-margin-left-${ml}`]: ml,
+        [`${classPrefix}at-margin-right-${mr}`]: mr,
+        [`${classPrefix}at-margin-top-${mt}`]: mt,
+        [`${classPrefix}at-margin-bottom-${mb}`]: mb,
+        [`${classPrefix}at-margin-inline-${margin_inline}`]: margin_inline,
+        [`${classPrefix}at-margin-block-${margin_block}`]: margin_block,
+        [`${classPrefix}at-padding-${padding}`]: padding,
+        [`${classPrefix}at-padding-left-${pl}`]: pl,
+        [`${classPrefix}at-padding-right-${pr}`]: pr,
+        [`${classPrefix}at-padding-top-${pt}`]: pt,
+        [`${classPrefix}at-padding-bottom-${pb}`]: pb,
+        [`${classPrefix}at-padding-inline-${padding_inline}`]: padding_inline,
+        [`${classPrefix}at-padding-block-${padding_block}`]: padding_block,
     })
 }
 
 export const generateGapClasses = (gap?: TSpacingSize) => {
-    return dclsx({ [`gap-${gap}`]: gap })
+    return dclsx({ [`at-gap-${gap}`]: gap })
 }
 
 export const generateBackgroundColor = (bgColor?: TBGColor) => {
     return dclsx({
-        [`bg-color-${bgColor}`]: bgColor,
+        [`at-bg-color-${bgColor}`]: bgColor,
     })
 }
 
 export const generateHeadingSize = (size?: THeadingSize) => {
     return dclsx({
-        [`heading-${size}`]: size,
+        [`at-heading-${size}`]: size,
     })
 }
 
 export const generateBorderRadius = (radius?: TBorderRadius) => {
     return dclsx({
-        [`border-radius-${radius}`]: radius,
+        [`at-border-radius-${radius}`]: radius,
     })
 }
 export const generateTextSize = (size?: THeadingSize) => {
     return dclsx({
-        [`text-${size}`]: size,
+        [`at-text-${size}`]: size,
     })
 }
 
 export const generateTextColor = (color?: TTypographyColor) => {
     return dclsx({
-        [`typography-color-${color}`]: color,
+        [`at-typography-color-${color}`]: color,
     })
 }
 
 export const generateTypographyWeightClasses = (weight?: TTypographyWeight, prefix = '') => {
     const classPrefix = prefix !== '' ? `${prefix}-` : ''
     return dclsx({
-        [`${classPrefix}typography-weight-${weight}`]: weight,
+        [`${classPrefix}at-typography-weight-${weight}`]: weight,
     })
 }
 
 export const generateTypographyFontClasses = (font_family?: TTypographyFont) => {
     return dclsx({
-        [`typography-font-${font_family}`]: font_family,
+        [`at-typography-font-${font_family}`]: font_family,
     })
 }
 
@@ -121,7 +121,7 @@ export const generateTypographyAlignClasses = (align?: TTypographyAlign, prefix
     const classPrefix = prefix !== '' ? `${prefix}-` : ''
 
     return dclsx({
-        [`${classPrefix}typography-align-${align}`]: align,
+        [`${classPrefix}at-typography-align-${align}`]: align,
     })
 }
 
@@ -134,7 +134,7 @@ export const generateTypographyClasses = ({
 }) => {
     return dclsx(
         {
-            [`typography-break-${break_word}`]: break_word,
+            [`at-typography-break-${break_word}`]: break_word,
         },
         generateTextColor(textcolor),
     )
diff --git a/src/features/types/index.ts b/src/features/types/index.ts
index c1c8b83e7f3..d5f672ce8bc 100644
--- a/src/features/types/index.ts
+++ b/src/features/types/index.ts
@@ -107,30 +107,30 @@ export type LinkUrlType = InternalLinkType | ExternalLinkType
 type InferSide<T, K extends string> = T extends `${K}-${infer R}` ? R : never
 
 // Typography Classes
-export type TTypographyAlign = InferSide<ClassNames, 'typography-align'>
-export type TTypographyBreakWord = InferSide<ClassNames, 'typography-break'>
-export type TTypographyWeight = InferSide<ClassNames, 'typography-weight'>
-export type THeadingSize = InferSide<ClassNames, 'heading'>
-export type TTextSize = InferSide<ClassNames, 'text'>
-export type TBorderRadius = InferSide<ClassNames, 'border-radius'>
-export type TSpacingSize = InferSide<ClassNames, 'margin-block'>
-export type TTypographyColor = InferSide<ClassNames, 'typography-color'>
-export type TTypographyFont = InferSide<ClassNames, 'typography-font'>
+export type TTypographyAlign = InferSide<ClassNames, 'at-typography-align'>
+export type TTypographyBreakWord = InferSide<ClassNames, 'at-typography-break'>
+export type TTypographyWeight = InferSide<ClassNames, 'at-typography-weight'>
+export type THeadingSize = InferSide<ClassNames, 'at-heading'>
+export type TTextSize = InferSide<ClassNames, 'at-text'>
+export type TBorderRadius = InferSide<ClassNames, 'at-border-radius'>
+export type TSpacingSize = InferSide<ClassNames, 'at-margin-block'>
+export type TTypographyColor = InferSide<ClassNames, 'at-typography-color'>
+export type TTypographyFont = InferSide<ClassNames, 'at-typography-font'>
 
 // Background Classes
-export type TBGColor = InferSide<ClassNames, 'bg-color'>
+export type TBGColor = InferSide<ClassNames, 'at-bg-color'>
 
 // FlexBox Classes
-export type TAlignItems = InferSide<ClassNames, 'align-items'>
-export type TAlignSelf = InferSide<ClassNames, 'align-self'>
-export type TJustifyContent = InferSide<ClassNames, 'justify'>
-export type TFlexGrow = InferSide<ClassNames, 'flex-grow'>
-export type TFlexShrink = InferSide<ClassNames, 'flex-shrink'>
-export type TFlexWrap = InferSide<ClassNames, 'flex-wrap'>
-export type TFlexDirection = InferSide<ClassNames, 'flex-dir'>
-export type TFlexBasis = InferSide<ClassNames, 'flex-basis'>
-export type TContainerType = InferSide<ClassNames, 'container'>
-export type TVisible = InferSide<ClassNames, 'visible'>
+export type TAlignItems = InferSide<ClassNames, 'at-align-items'>
+export type TAlignSelf = InferSide<ClassNames, 'at-align-self'>
+export type TJustifyContent = InferSide<ClassNames, 'at-justify'>
+export type TFlexGrow = InferSide<ClassNames, 'at-flex-grow'>
+export type TFlexShrink = InferSide<ClassNames, 'at-flex-shrink'>
+export type TFlexWrap = InferSide<ClassNames, 'at-flex-wrap'>
+export type TFlexDirection = InferSide<ClassNames, 'at-flex-dir'>
+export type TFlexBasis = InferSide<ClassNames, 'at-flex-basis'>
+export type TContainerType = InferSide<ClassNames, 'at-container'>
+export type TVisible = InferSide<ClassNames, 'at-visible'>
 
 export interface ClassProps {
     margin?: TSpacingSize