diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
index b2518d9b..adb4dbeb 100644
--- a/src/app/global-error.tsx
+++ b/src/app/global-error.tsx
@@ -81,7 +81,7 @@ const GlobalError = ({ error, reset }: GlobalErrorViewProps) => {
           locales={languages as unknown as Intl.LanguagesKeys[]}
         >
           <div className='width-container flex flex-1'>
-            <div className="flex flex-col items-center justify-center m-auto max-w-[520rem]">
+            <div className="flex flex-col items-center justify-center m-auto max-w-[520px]">
               <Text
                 className="text-center"
                 message={messages.error.title}
diff --git a/src/components/AmountInput/AmountInput.tsx b/src/components/AmountInput/AmountInput.tsx
index fd682611..53dcf60d 100644
--- a/src/components/AmountInput/AmountInput.tsx
+++ b/src/components/AmountInput/AmountInput.tsx
@@ -29,7 +29,7 @@ const AmountInput: React.FC<AmountInputProps> = (props) => {
   } = props
 
   const controlId = useId()
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
   const testId = dataTestId || `input-${controlId}`
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -38,8 +38,8 @@ const AmountInput: React.FC<AmountInputProps> = (props) => {
       className={cx(s.input, className, 'w-full', {
         'text-dark': !error,
         'text-error': error,
-        'text-h20': isMobile,
-        'text-t40m': !isMobile,
+        'text-h20': !isDesktop,
+        'text-t40m': isDesktop,
       })}
       ref={inputRef}
       placeholder="0"
diff --git a/src/components/AutoHeightToggle/AutoHeightToggle.tsx b/src/components/AutoHeightToggle/AutoHeightToggle.tsx
index 823fd443..690040b9 100644
--- a/src/components/AutoHeightToggle/AutoHeightToggle.tsx
+++ b/src/components/AutoHeightToggle/AutoHeightToggle.tsx
@@ -35,14 +35,14 @@ const AutoHeightToggle: React.FC<AutoHeightToggleProps> = (props) => {
       const marginTop = parseFloat(getComputedStyle(contentRef.current as HTMLDivElement).marginTop)
 
       if (containerRef.current) {
-        containerRef.current.style.height = `calc(${padding * 2}rem + ${contentHeight + containerHeight + marginTop}px)`
+        containerRef.current.style.height = `calc(${padding * 2}px + ${contentHeight + containerHeight + marginTop}px)`
       }
     }
     else {
       const height = childrenRef.current?.clientHeight
 
       if (containerRef.current) {
-        containerRef.current.style.height = `calc(${padding * 2}rem + ${height}px)`
+        containerRef.current.style.height = `calc(${padding * 2}px + ${height}px)`
       }
     }
   }, [ isOpen, toggleContent ])
diff --git a/src/components/Bone/Bone.module.scss b/src/components/Bone/Bone.module.scss
index 8ce14960..8f9a5b1a 100644
--- a/src/components/Bone/Bone.module.scss
+++ b/src/components/Bone/Bone.module.scss
@@ -26,7 +26,7 @@
 
 @keyframes bone {
   0% {
-    transform: translateY(6rem) scale(0.98);
+    transform: translateY(6px) scale(0.98);
     opacity: .2;
   }
   85%,
diff --git a/src/components/Bone/Bone.tsx b/src/components/Bone/Bone.tsx
index 25100c08..494d6254 100644
--- a/src/components/Bone/Bone.tsx
+++ b/src/components/Bone/Bone.tsx
@@ -29,11 +29,11 @@ const Bone: React.FC<BoneProps> = (props: any) => {
     const style: any = styles
 
     if (width) {
-      style.width = style.minWidth = `${width}rem`
+      style.width = style.minWidth = `${width}px`
     }
 
     if (height) {
-      style.height = style.minHeight = `${height}rem`
+      style.height = style.minHeight = `${height}px`
     }
 
     return style
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index d1919b34..c1397c75 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -87,11 +87,11 @@ const Button: React.FC<ButtonProps> = (props) => {
   }, [ loading, disabled, color ])
 
   const buttonSizeClassName = cx({
-    'min-w-[28rem] h-[28rem]': size === 'xs',
+    'min-w-[28px] h-[28px]': size === 'xs',
     'min-w-32 h-32': size === 's',
-    'min-w-[44rem] h-[44rem]': size === 'm',
+    'min-w-[44px] h-[44px]': size === 'm',
     'min-w-60 h-60': size === 'l',
-    'min-w-[70rem] h-[70rem]': size === 'xl',
+    'min-w-[70px] h-[70px]': size === 'xl',
   })
 
   const buttonPaddingClassName = cx({
diff --git a/src/components/ButtonRangePicker/ButtonRangePicker.module.scss b/src/components/ButtonRangePicker/ButtonRangePicker.module.scss
index 628dd8f9..3f5466fb 100644
--- a/src/components/ButtonRangePicker/ButtonRangePicker.module.scss
+++ b/src/components/ButtonRangePicker/ButtonRangePicker.module.scss
@@ -1,3 +1,3 @@
 .rounded {
-  border-radius: 11rem;
+  border-radius: 11px;
 }
diff --git a/src/components/Chart/Chart.tsx b/src/components/Chart/Chart.tsx
index 739fcb37..fee2fb30 100644
--- a/src/components/Chart/Chart.tsx
+++ b/src/components/Chart/Chart.tsx
@@ -43,7 +43,7 @@ const Chart: React.FC<ChartProps> = (props) => {
     <div
       ref={containerRef}
       className={cx(className, 'relative w-full')}
-      style={{ minHeight: `${height || 340}rem` }}
+      style={{ minHeight: `${height || 340}px` }}
       data-testid={dataTestId}
       onMouseOver={showLegend}
       onMouseLeave={hideLegend}
diff --git a/src/components/Chart/Legend/Percentage/Percentage.module.scss b/src/components/Chart/Legend/Percentage/Percentage.module.scss
index 50ac1005..5d7e6dd8 100644
--- a/src/components/Chart/Legend/Percentage/Percentage.module.scss
+++ b/src/components/Chart/Legend/Percentage/Percentage.module.scss
@@ -1,3 +1,3 @@
 .value {
-  min-width: 70rem;
+  min-width: 70px;
 }
diff --git a/src/components/Chart/Skeleton/Skeleton.tsx b/src/components/Chart/Skeleton/Skeleton.tsx
index 95cd732c..db9ec367 100644
--- a/src/components/Chart/Skeleton/Skeleton.tsx
+++ b/src/components/Chart/Skeleton/Skeleton.tsx
@@ -9,8 +9,8 @@ type SkeletonProps = {
 }
 
 const Skeleton: React.FC<SkeletonProps> = ({ className }) => {
-  const { isMobile } = device.useData()
-  const columns = isMobile ? 4 : 6
+  const { isDesktop } = device.useData()
+  const columns = isDesktop ? 6 : 4
 
   return (
     <div className={className}>
@@ -27,7 +27,7 @@ const Skeleton: React.FC<SkeletonProps> = ({ className }) => {
               key={index}
               className="absolute bottom-4 mb-48"
               style={{
-                height: `${50 + index * 30}rem`,
+                height: `${50 + index * 30}px`,
                 left: `${Math.max(((index / columns) * 95), 4)}%`,
                 width: `${50 / columns}%`,
               }}
@@ -44,7 +44,7 @@ const Skeleton: React.FC<SkeletonProps> = ({ className }) => {
         <Bone className="w-full h-20" />
       </div>
       <div className="absolute top-4 left-4 w-full">
-        <Bone className="w-[140rem] h-24" />
+        <Bone className="w-[140px] h-24" />
         <Bone className="mt-12 w-80 h-16" />
       </div>
     </div>
diff --git a/src/components/Counter/Counter.module.scss b/src/components/Counter/Counter.module.scss
index a1fe5492..82edbed8 100644
--- a/src/components/Counter/Counter.module.scss
+++ b/src/components/Counter/Counter.module.scss
@@ -1,6 +1,6 @@
 .counter {
-  min-width: 20rem;
-  height: 20rem;
+  min-width: 20px;
+  height: 20px;
 
   @include dark-theme {
     color: $color-dark;
diff --git a/src/components/Dropdown/Option/Option.module.scss b/src/components/Dropdown/Option/Option.module.scss
index 0576781f..1485c99a 100644
--- a/src/components/Dropdown/Option/Option.module.scss
+++ b/src/components/Dropdown/Option/Option.module.scss
@@ -1,6 +1,6 @@
 .option {
-  min-width: 160rem;
-  height: 48rem;
+  min-width: 160px;
+  height: 48px;
 
   &:hover,
   &:focus {
@@ -9,7 +9,7 @@
 }
 
 .withSubTitle {
-  height: 52rem;
+  height: 52px;
 }
 
 .logo {
diff --git a/src/components/Image/util/getImageStyle.ts b/src/components/Image/util/getImageStyle.ts
index 480f639e..e224e33e 100644
--- a/src/components/Image/util/getImageStyle.ts
+++ b/src/components/Image/util/getImageStyle.ts
@@ -8,7 +8,7 @@ type Input = {
 }
 
 const getImageStyle = ({ size, color, imageUrl }: Input) => {
-  const remSize = size ? `${size}rem` : undefined
+  const remSize = size ? `${size}px` : undefined
 
   const dimensions: CSSProperties = {
     width: remSize,
diff --git a/src/components/Input/InputButton/InputButton.module.scss b/src/components/Input/InputButton/InputButton.module.scss
index a17e602f..31e5aa13 100644
--- a/src/components/Input/InputButton/InputButton.module.scss
+++ b/src/components/Input/InputButton/InputButton.module.scss
@@ -1,4 +1,4 @@
 .button {
-  height: 24rem;
+  height: 24px;
   background-color: rgba($color-dark-rgb, .06);
 }
diff --git a/src/components/Input/InputView/InputView.module.scss b/src/components/Input/InputView/InputView.module.scss
index d05b6b1f..0fb52307 100644
--- a/src/components/Input/InputView/InputView.module.scss
+++ b/src/components/Input/InputView/InputView.module.scss
@@ -21,16 +21,16 @@ $bg-color-error-hover: rgba($color-error-rgb, .15);
   @include field-colors($border-color-default, $bg-color-default);
 
   &.isMultiline {
-    min-height: 20rem;
+    min-height: 20px;
 
     .crossButton {
-      top: 12rem;
-      right: 16rem;
+      top: 12px;
+      right: 16px;
     }
   }
 
   &:not(.isMultiline) {
-    height: 48rem;
+    height: 48px;
   }
 
   &:not(.disabled) {
@@ -60,7 +60,7 @@ $bg-color-error-hover: rgba($color-error-rgb, .15);
   &.focused {
 
     .label {
-      top: 5rem;
+      top: 5px;
     }
   }
 
@@ -74,7 +74,7 @@ $bg-color-error-hover: rgba($color-error-rgb, .15);
 }
 
 .label {
-  top: 14rem;
+  top: 14px;
   pointer-events: none;
   @include basic-transition();
 }
@@ -88,7 +88,7 @@ $bg-color-error-hover: rgba($color-error-rgb, .15);
   caret-color: $color-dark;
 
   &.isMultiline {
-    line-height: 20rem;
+    line-height: 20px;
   }
 
   &:focus {
diff --git a/src/components/MenuDropdown/Option/Option.module.scss b/src/components/MenuDropdown/Option/Option.module.scss
index 79a9de24..d3186013 100644
--- a/src/components/MenuDropdown/Option/Option.module.scss
+++ b/src/components/MenuDropdown/Option/Option.module.scss
@@ -1,5 +1,5 @@
 .option {
-  min-width: 160rem;
+  min-width: 160px;
 
   @media (hover: hover) {
     &:hover {
diff --git a/src/components/MenuDropdown/Option/Option.tsx b/src/components/MenuDropdown/Option/Option.tsx
index 0168d24b..d197829d 100644
--- a/src/components/MenuDropdown/Option/Option.tsx
+++ b/src/components/MenuDropdown/Option/Option.tsx
@@ -39,7 +39,7 @@ const Option: React.FC<OptionProps> = (props) => {
       className={cx(s.option, className, 'flex items-center pl-16 pr-24 cursor-pointer', {
         'bg-primary/10': active,
         'h-48': !subTitle,
-        'h-[52rem]': subTitle,
+        'h-[52px]': subTitle,
       })}
       data-testid={dataTestId}
       onClick={onClick}
diff --git a/src/components/Modal/Content/Buttons/Buttons.module.scss b/src/components/Modal/Content/Buttons/Buttons.module.scss
index 065d2880..a4ccd401 100644
--- a/src/components/Modal/Content/Buttons/Buttons.module.scss
+++ b/src/components/Modal/Content/Buttons/Buttons.module.scss
@@ -1,5 +1,5 @@
 @include desktop {
   .button {
-    min-width: 210rem;
+    min-width: 210px;
   }
 }
diff --git a/src/components/Modal/Content/Content.tsx b/src/components/Modal/Content/Content.tsx
index b0b1b130..3d2c3336 100644
--- a/src/components/Modal/Content/Content.tsx
+++ b/src/components/Modal/Content/Content.tsx
@@ -43,7 +43,7 @@ const Content: React.FC<ContentProps> = (props) => {
     handleClose,
   } = props
 
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   const isWide = size === 'wide'
   const isNarrow = size === 'narrow'
@@ -119,7 +119,7 @@ const Content: React.FC<ContentProps> = (props) => {
       <Description
         as="div"
         className={cx(contentClassName, 'mt-24 relative h-full', {
-          'flex-1': isMobile,
+          'flex-1': !isDesktop,
         })}
       >
         {isNarrow && descriptionNode}
diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
index 61c0352f..dd80d8bd 100644
--- a/src/components/Modal/Modal.module.scss
+++ b/src/components/Modal/Modal.module.scss
@@ -1,7 +1,7 @@
 .overlay {
   overflow-y: auto;
-  -webkit-backdrop-filter: blur(28rem);
-  backdrop-filter: blur(28rem);
+  -webkit-backdrop-filter: blur(28px);
+  backdrop-filter: blur(28px);
   @include fade-in(animation, 300ms, ease);
 
   @include light-theme {
@@ -51,10 +51,10 @@
 @include desktop {
 
   .narrow {
-    width: 480rem;
+    width: 480px;
   }
 
   .wide {
-    width: 800rem;
+    width: 800px;
   }
 }
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 3a46349b..536965e4 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -29,7 +29,7 @@ const Modal: React.FC<ModalProps> = (props) => {
   // This state use for animation
   const [ isOpen, setIsOpen ] = useState(true)
 
-  const { isMobile, isDesktop } = device.useData()
+  const { isDesktop } = device.useData()
 
   useEffect(() => {
     // Headless UI Dialog sets the #global-wrapper to inert,
@@ -117,8 +117,8 @@ const Modal: React.FC<ModalProps> = (props) => {
           >
             <DialogPanel
               className={cx(className, s.modal, 'relative m-auto p-24 bg-modal', s[size], {
-                'rounded-16': !isMobile,
-                'flex flex-col': isMobile,
+                'rounded-16': isDesktop,
+                'flex flex-col': !isDesktop,
               })}
               data-testid={dataTestId}
             >
diff --git a/src/components/Notification/Notification.module.scss b/src/components/Notification/Notification.module.scss
index 4b2c4fc1..1d4fa44b 100644
--- a/src/components/Notification/Notification.module.scss
+++ b/src/components/Notification/Notification.module.scss
@@ -1,6 +1,6 @@
 .notification {
-  min-width: 210rem;
-  max-width: 560rem;
+  min-width: 210px;
+  max-width: 560px;
   background-color: $color-light;
   animation: openNotification 500ms ease;
 
@@ -34,8 +34,8 @@
 
 .closeButton {
   top: 50%;
-  right: 16rem;
-  margin-top: -12rem;
+  right: 16px;
+  margin-top: -12px;
   background-color: rgba($color-dark-rgb, .05);
   pointer-events: auto;
 }
diff --git a/src/components/PercentInput/PercentInput.tsx b/src/components/PercentInput/PercentInput.tsx
index 548f5e0b..2066939f 100644
--- a/src/components/PercentInput/PercentInput.tsx
+++ b/src/components/PercentInput/PercentInput.tsx
@@ -36,7 +36,7 @@ export type PercentInputProps = {
 }
 
 const PercentInput: React.FC<PercentInputProps> = ({ field, isDisabled, dataTestId }) => {
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   const { value, error } = forms.useFieldValue(field)
 
@@ -106,12 +106,12 @@ const PercentInput: React.FC<PercentInputProps> = ({ field, isDisabled, dataTest
 
   return (
     <div
-      className="pt-16 px-16 pb-12 flex flex-col justify-between bg-dark/5 rounded-8 h-[108rem]"
+      className="pt-16 px-16 pb-12 flex flex-col justify-between bg-dark/5 rounded-8 h-[108px]"
       data-testid={dataTestId}
     >
       <div
         className={cx('flex justify-between items-center w-full gap-8', {
-          'pt-8': isMobile,
+          'pt-8': !isDesktop,
         })}
       >
         <AmountInput
diff --git a/src/components/PopupInfo/PopupInfo.module.scss b/src/components/PopupInfo/PopupInfo.module.scss
index 4e122359..5d5ec3de 100644
--- a/src/components/PopupInfo/PopupInfo.module.scss
+++ b/src/components/PopupInfo/PopupInfo.module.scss
@@ -1,12 +1,12 @@
 @include desktop {
   .container {
-    min-width: 347rem;
+    min-width: 347px;
   }
 }
 
 @include except-desktop {
   .container {
-    min-width: 270rem;
+    min-width: 270px;
     max-width: 100%;
   }
 }
diff --git a/src/components/PopupInfo/PopupInfo.tsx b/src/components/PopupInfo/PopupInfo.tsx
index 007fd98d..b1c62193 100644
--- a/src/components/PopupInfo/PopupInfo.tsx
+++ b/src/components/PopupInfo/PopupInfo.tsx
@@ -30,12 +30,12 @@ export type PopupInfoProps = {
 const PopupInfo: React.FC<PopupInfoProps> = (props) => {
   const { className, buttonClassName, childClassName, headNode, children } = props
 
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
   const [ isOpen, setIsOpen ] = useState(false)
 
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
-    placement: isMobile ? 'top' : 'top-end',
+    placement: isDesktop ? 'top-end' : 'top',
     middleware: [
       offset(10),
       flip({
@@ -94,7 +94,7 @@ const PopupInfo: React.FC<PopupInfoProps> = (props) => {
                 {children}
               </div>
               {
-                isMobile && (
+                !isDesktop && (
                   <ButtonBase
                     className="absolute -top-40 right-0 rounded-full bg-background p-4 border border-dark/10"
                     ariaLabel={messages.closePopup}
diff --git a/src/components/RangeSliderView/RangeSliderView.module.scss b/src/components/RangeSliderView/RangeSliderView.module.scss
index aeea5745..9d7eb653 100644
--- a/src/components/RangeSliderView/RangeSliderView.module.scss
+++ b/src/components/RangeSliderView/RangeSliderView.module.scss
@@ -4,7 +4,7 @@ $success-light-light-rgba: rgba(49, 212, 139, 0.3);
 
 
 .trackLine {
-  height: 6rem;
+  height: 6px;
 
   @include dark-theme {
     background-color: rgba($color-white-rgb, .2);
@@ -16,10 +16,10 @@ $success-light-light-rgba: rgba(49, 212, 139, 0.3);
 
   &::after {
     position: absolute;
-    top: -8rem;
+    top: -8px;
     left: 0;
     width: 100%;
-    height: 20rem;
+    height: 20px;
     content: '';
   }
 
@@ -27,25 +27,25 @@ $success-light-light-rgba: rgba(49, 212, 139, 0.3);
 
 .track {
   width: 100%;
-  height: 6rem;
-  margin-top: -6rem;
+  height: 6px;
+  margin-top: -6px;
 }
 
 .fill {
-  height: 6rem;
+  height: 6px;
 }
 
 .thumb {
-  width: 25rem;
-  height: 25rem;
-  margin-top: -10rem;
+  width: 25px;
+  height: 25px;
+  margin-top: -10px;
 
   &::before {
     position: absolute;
-    top: 5rem;
-    left: 5rem;
-    width: 15rem;
-    height: 15rem;
+    top: 5px;
+    left: 5px;
+    width: 15px;
+    height: 15px;
     background: $color-light;
     border-radius: 100%;
     content: '';
@@ -60,12 +60,12 @@ $success-light-light-rgba: rgba(49, 212, 139, 0.3);
   .thumb {
     background: linear-gradient(90deg, $success-light-light 5.26%, $primary-light 94.74%);
     background-color: $primary-light;
-    box-shadow: 0 0 8rem $success-light-light-rgba;
+    box-shadow: 0 0 8px $success-light-light-rgba;
   }
 
   .fill {
     background: linear-gradient(90deg, $success-light-light 0%, $primary-light 108.5%);
-    box-shadow: 0 0 6rem $success-light-light;
+    box-shadow: 0 0 6px $success-light-light;
   }
 }
 
@@ -73,12 +73,12 @@ $success-light-light-rgba: rgba(49, 212, 139, 0.3);
 
   .thumb {
     background-color: $primary-light;
-    box-shadow: 0 0 8rem $color-warning;
+    box-shadow: 0 0 8px $color-warning;
   }
 
   .fill {
     background: linear-gradient(90deg, $color-warning 0%, $primary-light 109.09%);
-    box-shadow: 0 0 6rem $color-warning;
+    box-shadow: 0 0 6px $color-warning;
   }
 }
 
@@ -86,12 +86,12 @@ $success-light-light-rgba: rgba(49, 212, 139, 0.3);
 
   .thumb {
     background-color: $primary-light;
-    box-shadow: 0 0 8rem rgba($color-error-rgb, .5);
+    box-shadow: 0 0 8px rgba($color-error-rgb, .5);
   }
 
   .fill {
     background: linear-gradient(90deg, $color-error 0%, $primary-light 100%);
-    box-shadow: 0 0 6rem $color-error;
+    box-shadow: 0 0 6px $color-error;
   }
 }
 
@@ -99,11 +99,11 @@ $success-light-light-rgba: rgba(49, 212, 139, 0.3);
 
   .thumb {
     background-color: $color-error;
-    box-shadow: 0 0 8rem rgba($color-primary-rgb, .5);
+    box-shadow: 0 0 8px rgba($color-primary-rgb, .5);
   }
 
   .fill {
     background: linear-gradient(90deg, $color-primary 0%, $color-error 100%);
-    box-shadow: 0 0 6rem $color-primary;
+    box-shadow: 0 0 6px $color-primary;
   }
 }
diff --git a/src/components/RangeSliderView/RangeSliderView.tsx b/src/components/RangeSliderView/RangeSliderView.tsx
index b461b71b..8af7b65f 100644
--- a/src/components/RangeSliderView/RangeSliderView.tsx
+++ b/src/components/RangeSliderView/RangeSliderView.tsx
@@ -47,7 +47,7 @@ const RangeSliderView: React.FC<RangeSliderViewProps> = (props: RangeSliderViewP
   })
 
   const percent = Math.min((value - min) / (max - min) * 100, 100)
-  const thumbStyle = { left: `calc(${percent}% - ${25 * percent / 100}rem)` }
+  const thumbStyle = { left: `calc(${percent}% - ${25 * percent / 100}px)` }
 
   return (
     <div
diff --git a/src/components/RoundButton/RoundButton.module.scss b/src/components/RoundButton/RoundButton.module.scss
index 5ed1d6b6..b05e2a54 100644
--- a/src/components/RoundButton/RoundButton.module.scss
+++ b/src/components/RoundButton/RoundButton.module.scss
@@ -3,14 +3,14 @@
 }
 
 .size-32 {
-  width: 32rem;
-  height: 32rem;
+  width: 32px;
+  height: 32px;
   @include button-light-color();
 }
 
 .size-24 {
-  width: 24rem;
-  height: 24rem;
+  width: 24px;
+  height: 24px;
 }
 
 .color-dark {
diff --git a/src/components/Select/SelectWithLabelButton/SelectWithLabelButton.module.scss b/src/components/Select/SelectWithLabelButton/SelectWithLabelButton.module.scss
index 14dae6db..43a17f78 100644
--- a/src/components/Select/SelectWithLabelButton/SelectWithLabelButton.module.scss
+++ b/src/components/Select/SelectWithLabelButton/SelectWithLabelButton.module.scss
@@ -14,7 +14,7 @@ $bg-color-error-hover: rgba($color-error-rgb, .15);
 }
 
 .container {
-  height: 48rem;
+  height: 48px;
   border: 1px solid;
   @include basic-transition();
   @include field-colors($border-color-default, $bg-color-default);
@@ -39,13 +39,13 @@ $bg-color-error-hover: rgba($color-error-rgb, .15);
 
   &.filled {
     .label {
-      top: 5rem;
+      top: 5px;
     }
   }
 }
 
 .label {
-  top: 14rem;
+  top: 14px;
   pointer-events: none;
   @include basic-transition();
 }
diff --git a/src/components/TabsView/TabsView.module.scss b/src/components/TabsView/TabsView.module.scss
index 3997d361..7ac76df2 100644
--- a/src/components/TabsView/TabsView.module.scss
+++ b/src/components/TabsView/TabsView.module.scss
@@ -1,7 +1,7 @@
 .line {
   position: absolute;
   bottom: 0;
-  height: 2rem;
+  height: 2px;
   content: '';
   @include basic-transition();
 }
diff --git a/src/components/Token/Token.tsx b/src/components/Token/Token.tsx
index b8e977c9..4086c79b 100644
--- a/src/components/Token/Token.tsx
+++ b/src/components/Token/Token.tsx
@@ -16,7 +16,7 @@ export type TokenProps = {
 const Token: React.FC<TokenProps> = (props) => {
   const { className, token, dataTestId } = props
 
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   return (
     <div className={cx(className, 'flex justify-end items-center')}>
@@ -26,7 +26,7 @@ const Token: React.FC<TokenProps> = (props) => {
       />
       <Text
         message={token}
-        size={isMobile ? 't14b' : 'h20'}
+        size={!isDesktop ? 't14b' : 'h20'}
         color="dark"
         dataTestId={dataTestId}
       />
diff --git a/src/components/TokenAmountInput/Token/Token.tsx b/src/components/TokenAmountInput/Token/Token.tsx
index 62439d76..e9c5a2e9 100644
--- a/src/components/TokenAmountInput/Token/Token.tsx
+++ b/src/components/TokenAmountInput/Token/Token.tsx
@@ -16,7 +16,7 @@ type TokenProps = {
 const Token: React.FC<TokenProps> = (props) => {
   const { className, token, dataTestId } = props
 
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   return (
     <div className={cx(className, 'flex justify-end items-center')}>
@@ -26,7 +26,7 @@ const Token: React.FC<TokenProps> = (props) => {
       />
       <Text
         message={token}
-        size={isMobile ? 't14b' : 'h20'}
+        size={!isDesktop ? 't14b' : 'h20'}
         color="dark"
         dataTestId={dataTestId}
       />
diff --git a/src/components/TokenAmountInputView/TokenAmountInputView.tsx b/src/components/TokenAmountInputView/TokenAmountInputView.tsx
index 7d264a5a..08160d7d 100644
--- a/src/components/TokenAmountInputView/TokenAmountInputView.tsx
+++ b/src/components/TokenAmountInputView/TokenAmountInputView.tsx
@@ -45,7 +45,7 @@ const TokenAmountInputView: React.FC<TokenAmountInputViewProps> = (props) => {
     onMaxButtonClick,
   } = props
 
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
   const { error } = forms.useFieldValue(field)
   const { formattedValue, handleChange, setSpecialFormat } = useSpecialFormat({
     field,
@@ -63,7 +63,7 @@ const TokenAmountInputView: React.FC<TokenAmountInputViewProps> = (props) => {
           <Text
             className="mb-16"
             message={label as string}
-            size={isMobile ? 't12' : 't14m'}
+            size={!isDesktop ? 't12' : 't14m'}
             color="dark"
             dataTestId={dataTestId ? `${dataTestId}-label` : ''}
           />
@@ -72,7 +72,7 @@ const TokenAmountInputView: React.FC<TokenAmountInputViewProps> = (props) => {
       <div className="pt-16 px-16 pb-8 flex flex-col bg-dark/5 rounded-8">
         <div
           className={cx('mb-16 flex justify-between items-center w-full', {
-            'pt-8': isMobile,
+            'pt-8': !isDesktop,
           })}
         >
           <Input
@@ -98,12 +98,12 @@ const TokenAmountInputView: React.FC<TokenAmountInputViewProps> = (props) => {
         </div>
         <div
           className={cx('flex items-end w-full', {
-            'justify-between' : !isMobile,
-            'justify-end' : isMobile,
+            'justify-between' : isDesktop,
+            'justify-end' : !isDesktop,
           })}
         >
           {
-            !isMobile && (
+            isDesktop && (
               <FiatAmount
                 amount={formattedValue || '0'}
                 token={balance.token}
diff --git a/src/components/TokenDropdown/TokenDropdown.tsx b/src/components/TokenDropdown/TokenDropdown.tsx
index 0d5b9de8..3c7f2e8f 100644
--- a/src/components/TokenDropdown/TokenDropdown.tsx
+++ b/src/components/TokenDropdown/TokenDropdown.tsx
@@ -31,7 +31,7 @@ const TokenDropdown: React.FC<TokenDropdownProps> = (props) => {
   } = props
 
   const { chainId } = useConfig()
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
   const { isFetching, open } = useTokenDropdown({
     isFetchingDisabled,
   })
@@ -71,7 +71,7 @@ const TokenDropdown: React.FC<TokenDropdownProps> = (props) => {
       contentClassName={contentClassName}
       dataTestId={dataTestId}
       middleware={(
-        isMobile
+        !isDesktop
           ? {
             offsetOptions: {
               mainAxis: 26,
diff --git a/src/components/TokenDropdown/TokenOptions/Option/Option.module.scss b/src/components/TokenDropdown/TokenOptions/Option/Option.module.scss
index 2c417d15..98818473 100644
--- a/src/components/TokenDropdown/TokenOptions/Option/Option.module.scss
+++ b/src/components/TokenDropdown/TokenOptions/Option/Option.module.scss
@@ -1,5 +1,5 @@
 .option {
-  height: 56rem;
+  height: 56px;
 
   &:hover,
   &:focus {
diff --git a/src/components/TokenDropdown/TokenOptions/TokenOptions.tsx b/src/components/TokenDropdown/TokenOptions/TokenOptions.tsx
index b2fcc0bc..47849d95 100644
--- a/src/components/TokenDropdown/TokenOptions/TokenOptions.tsx
+++ b/src/components/TokenDropdown/TokenOptions/TokenOptions.tsx
@@ -28,7 +28,7 @@ const TokenOptions: React.FC<TokenOptionsProps> = (props) => {
 
   const { sdk, isGnosis } = useConfig()
 
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
   const { value: search } = forms.useFieldValue(field)
 
   const filteredTokens = useMemo(() => {
@@ -55,8 +55,8 @@ const TokenOptions: React.FC<TokenOptionsProps> = (props) => {
     <>
       <TokenSearch
         className={cx({
-          'min-w-[320rem]': !isMobile,
-          'w-[calc(100vw-48rem-2px)]': isMobile,
+          'min-w-[320px]': isDesktop,
+          'w-[calc(100vw-48px-2px)]': !isDesktop,
         })}
         field={field}
         dataTestId={dataTestId}
@@ -67,7 +67,7 @@ const TokenOptions: React.FC<TokenOptionsProps> = (props) => {
             className="overflow-y-auto"
             fadeClassName="fixed"
             style={{
-              height: `calc(5 * 56rem - 28rem)`,
+              height: `calc(5 * 56px - 28px)`,
             }}
           >
             <div>
@@ -85,8 +85,8 @@ const TokenOptions: React.FC<TokenOptionsProps> = (props) => {
               fadeClassName="fixed"
               style={{
                 height: filteredTokens.length > 5
-                  ? `calc(5 * 56rem - 28rem)`
-                  : `calc(${filteredTokens.length} * 56rem)`,
+                  ? `calc(5 * 56px - 28px)`
+                  : `calc(${filteredTokens.length} * 56px)`,
               }}
             >
               <div>
diff --git a/src/components/TokenDropdown/TokenOptions/TokenSearch/TokenSearch.tsx b/src/components/TokenDropdown/TokenOptions/TokenSearch/TokenSearch.tsx
index 140b222a..b06e04d8 100644
--- a/src/components/TokenDropdown/TokenOptions/TokenSearch/TokenSearch.tsx
+++ b/src/components/TokenDropdown/TokenOptions/TokenSearch/TokenSearch.tsx
@@ -24,7 +24,7 @@ const TokenSearch: React.FC<TokenSearchProps> = (props) => {
 
   return (
     <div
-      className={cx(className, 'flex justify-end items-center h-[44rem] border-bottom border-dark/10')}
+      className={cx(className, 'flex justify-end items-center h-[44px] border-bottom border-dark/10')}
     >
       <Icon
         className="opacity-60 ml-16"
diff --git a/src/components/Tooltip/TooltipContent/TooltipContent.module.scss b/src/components/Tooltip/TooltipContent/TooltipContent.module.scss
index f5773f41..3a4e3905 100644
--- a/src/components/Tooltip/TooltipContent/TooltipContent.module.scss
+++ b/src/components/Tooltip/TooltipContent/TooltipContent.module.scss
@@ -1,3 +1,3 @@
 .tooltip {
-  max-width: 330rem;
+  max-width: 330px;
 }
diff --git a/src/components/Transactions/Transactions.module.scss b/src/components/Transactions/Transactions.module.scss
index e49797df..9266fc3d 100644
--- a/src/components/Transactions/Transactions.module.scss
+++ b/src/components/Transactions/Transactions.module.scss
@@ -3,10 +3,10 @@
 
   &::before {
     position: absolute;
-    top: 38rem;
-    left: 15rem;
-    width: 2rem;
-    height: 44rem;
+    top: 38px;
+    left: 15px;
+    width: 2px;
+    height: 44px;
     background: rgba($color-dark-rgb, .05);
     content: '';
   }
diff --git a/src/components/TransactionsModal/TransactionsModal.tsx b/src/components/TransactionsModal/TransactionsModal.tsx
index a683441d..44d81071 100644
--- a/src/components/TransactionsModal/TransactionsModal.tsx
+++ b/src/components/TransactionsModal/TransactionsModal.tsx
@@ -19,7 +19,7 @@ const TransactionsModal: React.FC<TransactionsModalProps> = ({ title, items, ...
     {...rest}
   >
     <Transactions.View
-      className="mx-auto w-[290rem]"
+      className="mx-auto w-[290px]"
       items={items}
     />
   </Modal>
diff --git a/src/hooks/controls/useTabButton.ts b/src/hooks/controls/useTabButton.ts
index e7d782a2..d2e4343a 100644
--- a/src/hooks/controls/useTabButton.ts
+++ b/src/hooks/controls/useTabButton.ts
@@ -13,7 +13,7 @@ const useTabButton = (props: Input, deps: any[] = []) => {
   const { gap = 0, index = 0, firstRenderClassName } = props || {}
 
   const { locale } = intl.useIntl()
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   const tabButtonRef = useRef<HTMLDivElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -33,7 +33,7 @@ const useTabButton = (props: Input, deps: any[] = []) => {
 
       if (widths[index] && height) {
         return {
-          left: `calc(${offset}px + ${gapOffset}rem)`,
+          left: `calc(${offset}px + ${gapOffset}px)`,
           width: `${widths[index]}px`,
           height: `${height}px`,
         }
@@ -70,7 +70,7 @@ const useTabButton = (props: Input, deps: any[] = []) => {
   useLayoutEffect(() => {
     setPosition()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ ...deps, locale, isMobile, setPosition ])
+  }, [ ...deps, locale, isDesktop, setPosition ])
 
   useEffect(() => {
     const children = containerRef.current?.children
diff --git a/src/hooks/controls/useViewportHeight.ts b/src/hooks/controls/useViewportHeight.ts
index 3d4de63a..12bef597 100644
--- a/src/hooks/controls/useViewportHeight.ts
+++ b/src/hooks/controls/useViewportHeight.ts
@@ -37,10 +37,10 @@ import device from 'modules/device'
  */
 
 const useViewportHeight = () => {
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   useEffect(() => {
-    if (isMobile) {
+    if (!isDesktop) {
       const handler = () => {
         const vh = window.innerHeight  * 0.01
 
@@ -55,7 +55,7 @@ const useViewportHeight = () => {
         document.documentElement.style.removeProperty('--vh')
       }
     }
-  }, [ isMobile ])
+  }, [ isDesktop ])
 }
 
 
diff --git a/src/layouts/AppLayout/BottomLoader/BottomLoader.module.scss b/src/layouts/AppLayout/BottomLoader/BottomLoader.module.scss
index b2a90e10..e2aa4432 100644
--- a/src/layouts/AppLayout/BottomLoader/BottomLoader.module.scss
+++ b/src/layouts/AppLayout/BottomLoader/BottomLoader.module.scss
@@ -1,5 +1,5 @@
 .loader {
-  backdrop-filter: blur(30rem);
+  backdrop-filter: blur(30px);
   transition: all 0.3s ease-in-out;
   animation: openLoader 0.3s ease-in-out;
 
@@ -34,7 +34,7 @@
 
 @keyframes openLoader {
   from {
-    transform: translateX(calc(100% + 24rem));
+    transform: translateX(calc(100% + 24px));
     opacity: 0;
   }
   to {
diff --git a/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.module.scss b/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.module.scss
index fa0a4d0f..b35c997d 100644
--- a/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.module.scss
+++ b/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.module.scss
@@ -1,10 +1,10 @@
 .wrapper {
-  width: 44rem;
+  width: 44px;
 }
 
 .container {
-  width: 24rem;
-  height: 24rem;
+  width: 24px;
+  height: 24px;
 }
 
 .line {
diff --git a/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.tsx b/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.tsx
index 62a4d065..8695a8c3 100644
--- a/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.tsx
+++ b/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.tsx
@@ -25,7 +25,7 @@ const BurgerButton: React.FC<BurgerButtonProps> = (props) => {
 
   return (
     <ButtonBase
-      className={cx(className, s.wrapper, 'h-[44rem]')}
+      className={cx(className, s.wrapper, 'h-[44px]')}
       dataTestId={dataTestId}
       ariaLabel={ariaLabel}
       onClick={onClick}
diff --git a/src/layouts/AppLayout/Header/Connect/Account/Account.module.scss b/src/layouts/AppLayout/Header/Connect/Account/Account.module.scss
index 30c82b97..f76eb5ce 100644
--- a/src/layouts/AppLayout/Header/Connect/Account/Account.module.scss
+++ b/src/layouts/AppLayout/Header/Connect/Account/Account.module.scss
@@ -1,8 +1,8 @@
 .label {
-  top: -4rem;
-  right: -8rem;
+  top: -4px;
+  right: -8px;
 }
 
 .container {
-  width: 300rem;
+  width: 300px;
 }
diff --git a/src/layouts/AppLayout/Header/Connect/Account/ClaimLabel/ClaimLabel.module.scss b/src/layouts/AppLayout/Header/Connect/Account/ClaimLabel/ClaimLabel.module.scss
index 1bfc1c25..90b88449 100644
--- a/src/layouts/AppLayout/Header/Connect/Account/ClaimLabel/ClaimLabel.module.scss
+++ b/src/layouts/AppLayout/Header/Connect/Account/ClaimLabel/ClaimLabel.module.scss
@@ -3,7 +3,7 @@
 }
 
 .text {
-  font-size: 9rem !important;
+  font-size: 9px !important;
   line-height: 0 !important;
   transition: 0.7s all ease;
 }
diff --git a/src/layouts/AppLayout/Header/Connect/Account/util/useAccount.ts b/src/layouts/AppLayout/Header/Connect/Account/util/useAccount.ts
index 1197c467..8ac74dc6 100644
--- a/src/layouts/AppLayout/Header/Connect/Account/util/useAccount.ts
+++ b/src/layouts/AppLayout/Header/Connect/Account/util/useAccount.ts
@@ -7,7 +7,7 @@ import type { LogoProps } from 'components'
 
 
 const useAccount = () => {
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
   const { address, accountName, activeWallet } = useConfig()
 
   const addressOption = accountName || methods.shortenAddress(address)
@@ -18,8 +18,8 @@ const useAccount = () => {
 
   return useMemo(() => ({
     logo,
-    title: isMobile ? '' : addressOption,
-  }), [ addressOption, isMobile, logo ])
+    title: !isDesktop ? '' : addressOption,
+  }), [ addressOption, isDesktop, logo ])
 }
 
 
diff --git a/src/layouts/AppLayout/Header/Connect/Connect.tsx b/src/layouts/AppLayout/Header/Connect/Connect.tsx
index fe1de0e5..0be5298b 100644
--- a/src/layouts/AppLayout/Header/Connect/Connect.tsx
+++ b/src/layouts/AppLayout/Header/Connect/Connect.tsx
@@ -24,7 +24,7 @@ const networkSizes = {
 const Connect: React.FC<Connect> = ({ className }) => {
   const { address, networkId, autoConnectChecked } = useConfig()
 
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   if (!autoConnectChecked) {
     const networkWidth = networkSizes[networkId] || networkSizes.mainnet
@@ -35,14 +35,14 @@ const Connect: React.FC<Connect> = ({ className }) => {
           supportedChains.length > 1 && (
             <Bone
               className="rounded-8"
-              w={isMobile ? 44 : networkWidth}
+              w={!isDesktop ? 44 : networkWidth}
               h={44}
             />
           )
         }
         <Bone
           className="rounded-8"
-          w={isMobile ? 136 : 180}
+          w={!isDesktop ? 136 : 180}
           h={44}
         />
       </div>
@@ -57,7 +57,7 @@ const Connect: React.FC<Connect> = ({ className }) => {
           <Account />
         ) : (
           <Button
-            title={isMobile
+            title={!isDesktop
               ? commonMessages.buttonTitle.connect
               : commonMessages.buttonTitle.connectWallet
             }
diff --git a/src/layouts/AppLayout/Header/Connect/NetworkSelect/NetworkSelect.tsx b/src/layouts/AppLayout/Header/Connect/NetworkSelect/NetworkSelect.tsx
index 1fb1373e..7152de7c 100644
--- a/src/layouts/AppLayout/Header/Connect/NetworkSelect/NetworkSelect.tsx
+++ b/src/layouts/AppLayout/Header/Connect/NetworkSelect/NetworkSelect.tsx
@@ -38,7 +38,7 @@ const dataTestId = 'network-select'
 const NetworkSelect: React.FC<NetworkSelectProps> = (props) => {
   const { className } = props
 
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
   const isChangeChainDisabled = useChangeChainDisabled()
   const { sdk, networkId, wallet, address, isGnosis } = useConfig()
 
@@ -60,7 +60,7 @@ const NetworkSelect: React.FC<NetworkSelectProps> = (props) => {
     <Dropdown
       className={className}
       dataTestId={dataTestId}
-      placement={isMobile && !address ? 'bottom-start' : 'bottom-end'}
+      placement={!isDesktop && !address ? 'bottom-start' : 'bottom-end'}
       disabled={isChangeChainDisabled}
       button={({ isOpen }) => {
         const arrow = isOpen ? 'up' : 'down'
@@ -70,15 +70,15 @@ const NetworkSelect: React.FC<NetworkSelectProps> = (props) => {
             className="rounded-8"
             color="light"
             dataTestId={`${dataTestId}-button`}
-            title={isMobile ? '' : sdk.config.network.name}
+            title={!isDesktop ? '' : sdk.config.network.name}
             logo={isGnosis ? 'token/GNO' : 'token/ETH'}
-            arrow={!isMobile ? arrow : undefined}
+            arrow={isDesktop ? arrow : undefined}
             ariaLabel={commonMessages.accessibility.changeNetwork}
           />
         )
       }}
       value={networkId}
-      withArrow={!isMobile}
+      withArrow={isDesktop}
       options={networkOptions}
       onChange={handleChangeChain}
     />
diff --git a/src/layouts/AppLayout/Header/Header.tsx b/src/layouts/AppLayout/Header/Header.tsx
index fed7d567..0b05977d 100644
--- a/src/layouts/AppLayout/Header/Header.tsx
+++ b/src/layouts/AppLayout/Header/Header.tsx
@@ -9,13 +9,13 @@ import BurgerButton from './BurgerButton/BurgerButton'
 
 
 const Header: React.FC = () => {
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   const headerClassName = 'width-container flex items-center justify-end py-12'
 
   const [ active, setActive ] = useState(false)
 
-  if (isMobile) {
+  if (!isDesktop) {
     return (
       <>
         <header
diff --git a/src/layouts/AppLayout/Header/MenuMobile/MenuMobile.module.scss b/src/layouts/AppLayout/Header/MenuMobile/MenuMobile.module.scss
index 30bbb2a8..9e31757f 100644
--- a/src/layouts/AppLayout/Header/MenuMobile/MenuMobile.module.scss
+++ b/src/layouts/AppLayout/Header/MenuMobile/MenuMobile.module.scss
@@ -1,7 +1,7 @@
 .menu {
   z-index: 99;
-  grid-template-rows: 1fr 68rem 48rem;
-  backdrop-filter: blur(20rem) opacity(1);
+  grid-template-rows: 1fr 68px 48px;
+  backdrop-filter: blur(20px) opacity(1);
   @include basic-transition;
   @include viewportHeight(height, 100);
 }
@@ -9,5 +9,5 @@
 .hidden {
   transform: translate3d(0, -100%, 0);
   opacity: 0;
-  backdrop-filter: blur(20rem) opacity(0);
+  backdrop-filter: blur(20px) opacity(0);
 }
diff --git a/src/layouts/AppLayout/Header/Settings/Settings.tsx b/src/layouts/AppLayout/Header/Settings/Settings.tsx
index c5135567..3d66c88f 100644
--- a/src/layouts/AppLayout/Header/Settings/Settings.tsx
+++ b/src/layouts/AppLayout/Header/Settings/Settings.tsx
@@ -13,11 +13,11 @@ type SettingsProps = {
 }
 
 const Settings: React.FC<SettingsProps> = ({ className }) => {
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   const settingsOptions = useAppConfig()
 
-  if (isMobile) {
+  if (!isDesktop) {
     return (
       <div
         className={cx(className, 'flex items-center justify-center gap-32 pt-96 mt-96')}
diff --git a/src/layouts/AppLayout/Notifications/Notifications.module.scss b/src/layouts/AppLayout/Notifications/Notifications.module.scss
index 3416c364..9f6f809d 100644
--- a/src/layouts/AppLayout/Notifications/Notifications.module.scss
+++ b/src/layouts/AppLayout/Notifications/Notifications.module.scss
@@ -1,16 +1,16 @@
 @include mobile {
 
   .notifications {
-    right: 16rem;
-    left: 16rem;
+    right: 16px;
+    left: 16px;
   }
 }
 
 @include tablet {
 
   .notifications {
-    right: 24rem;
-    left: 24rem;
+    right: 24px;
+    left: 24px;
   }
 }
 
@@ -18,7 +18,7 @@
 
   .notifications {
     left: 50%;
-    width: 560rem;
-    margin-left: -280rem;
+    width: 560px;
+    margin-left: -280px;
   }
 }
diff --git a/src/layouts/modals/ConnectWalletModal/ConnectWalletModal.tsx b/src/layouts/modals/ConnectWalletModal/ConnectWalletModal.tsx
index 4d66219d..3694d58d 100644
--- a/src/layouts/modals/ConnectWalletModal/ConnectWalletModal.tsx
+++ b/src/layouts/modals/ConnectWalletModal/ConnectWalletModal.tsx
@@ -21,7 +21,7 @@ export const [ ConnectWalletModal, openConnectWalletModal, closeConnectWalletMod
     const { closeModal } = props
 
     const pathname = usePathname()
-    const { isMobile } = device.useData()
+    const { isDesktop } = device.useData()
     const { address, wallet } = useConfig()
     const metaMaskOnboarding = useMetaMaskOnboarding()
     const [ selectedWalletId, setSelectedWalletId ] = useState<WalletIds | null>(null)
@@ -101,7 +101,7 @@ export const [ ConnectWalletModal, openConnectWalletModal, closeConnectWalletMod
         size="narrow"
         bottomNode={bottomNode}
         contentClassName={cx({
-          'flex justify-center': isMobile,
+          'flex justify-center': !isDesktop,
         })}
         closeModal={closeModal}
         onBackButtonClick={(isMonitorAddress || isLedger) ? () => setSelectedWalletId(null) : undefined}
diff --git a/src/layouts/modals/ConnectWalletModal/ConnectorsView/ConnectorButton/ConnectorButton.module.scss b/src/layouts/modals/ConnectWalletModal/ConnectorsView/ConnectorButton/ConnectorButton.module.scss
index 40ae9001..91c8546e 100644
--- a/src/layouts/modals/ConnectWalletModal/ConnectorsView/ConnectorButton/ConnectorButton.module.scss
+++ b/src/layouts/modals/ConnectWalletModal/ConnectorsView/ConnectorButton/ConnectorButton.module.scss
@@ -1,5 +1,5 @@
 .button {
-  width: 90rem;
+  width: 90px;
   @include button-light-color(logo);
 }
 
@@ -8,7 +8,7 @@
 }
 
 .text {
-  max-width: 90rem;
+  max-width: 90px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
diff --git a/src/layouts/modals/ConnectWalletModal/LedgerTransportView/LedgerTransportView.tsx b/src/layouts/modals/ConnectWalletModal/LedgerTransportView/LedgerTransportView.tsx
index 69892d61..e55db11e 100644
--- a/src/layouts/modals/ConnectWalletModal/LedgerTransportView/LedgerTransportView.tsx
+++ b/src/layouts/modals/ConnectWalletModal/LedgerTransportView/LedgerTransportView.tsx
@@ -21,7 +21,7 @@ const LedgerTransportView: React.FC<LedgerTransportViewProps> = (props) => {
   const selectBLE = useCallback(() => wallet.connect(wallets.ledger.id, 'ble'), [ wallet ])
 
   return (
-    <div className={cx(className, 'mx-auto max-w-[300rem]')}>
+    <div className={cx(className, 'mx-auto max-w-[300px]')}>
       <Button
         title={messages.usbButton}
         onClick={selectUSB}
diff --git a/src/layouts/modals/GuideModal/GuideModal.tsx b/src/layouts/modals/GuideModal/GuideModal.tsx
index b3c5404b..a12c1bf5 100644
--- a/src/layouts/modals/GuideModal/GuideModal.tsx
+++ b/src/layouts/modals/GuideModal/GuideModal.tsx
@@ -26,7 +26,7 @@ export const [ GuideModal, openGuideModal ] = (
     useModalClose({ closeModal })
 
     const pathname = usePathname()
-    const { isMobile } = device.useData()
+    const { isDesktop } = device.useData()
 
     const slideMessages = (() => {
       const isVaultPage = /^\/vault\/./.test(pathname)
@@ -38,7 +38,7 @@ export const [ GuideModal, openGuideModal ] = (
       return texts.stakePage
     })()
 
-    const slideImages = isMobile ? images.portrait : images.landscape
+    const slideImages = !isDesktop ? images.portrait : images.landscape
     const slides: SliderProps['items'] = slideCounts.map((count) => ({
       text: slideMessages[count as keyof typeof slideMessages],
       image: slideImages[count as keyof typeof images.landscape],
diff --git a/src/layouts/modals/GuideModal/Slider/Content/Arrows/Arrows.module.scss b/src/layouts/modals/GuideModal/Slider/Content/Arrows/Arrows.module.scss
index 1b0e0516..41d3d3d1 100644
--- a/src/layouts/modals/GuideModal/Slider/Content/Arrows/Arrows.module.scss
+++ b/src/layouts/modals/GuideModal/Slider/Content/Arrows/Arrows.module.scss
@@ -1,7 +1,7 @@
 .arrow {
   top: 50%;
   z-index: 10;
-  margin-top: -12rem;
+  margin-top: -12px;
   opacity: .7;
   transition: .2s;
 
@@ -16,10 +16,10 @@
 }
 
 .prev {
-  left: 12rem;
+  left: 12px;
 }
 
 .next {
-  right: 12rem;
+  right: 12px;
 }
 
diff --git a/src/layouts/modals/GuideModal/Slider/Content/Arrows/Arrows.tsx b/src/layouts/modals/GuideModal/Slider/Content/Arrows/Arrows.tsx
index c3922f61..c99778d9 100644
--- a/src/layouts/modals/GuideModal/Slider/Content/Arrows/Arrows.tsx
+++ b/src/layouts/modals/GuideModal/Slider/Content/Arrows/Arrows.tsx
@@ -20,7 +20,7 @@ const Arrows: React.FC<ArrowsProps> = (props) => {
 
   const swiper = useSwiper()
   const slide = useSwiperSlide()
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   const handlePrev = useCallback(() => swiper?.slidePrev(), [ swiper ])
   const handleNext = useCallback(() => swiper?.slideNext(), [ swiper ])
@@ -35,7 +35,7 @@ const Arrows: React.FC<ArrowsProps> = (props) => {
         className={cx(s.arrow, s.prev, prevClassName, 'absolute')}
         ariaLabel={messages.prevSlide}
         disabled={!swiper?.activeIndex}
-        size={isMobile ? 24 : 48}
+        size={!isDesktop ? 24 : 48}
         icon="arrow/left"
         iconColor="light"
         color="dark"
@@ -45,7 +45,7 @@ const Arrows: React.FC<ArrowsProps> = (props) => {
         className={cx(s.arrow, s.next, nextClassName, 'absolute')}
         ariaLabel={messages.nextSlide}
         disabled={swiper?.slides?.length - 1 === swiper?.activeIndex}
-        size={isMobile ? 24 : 48}
+        size={!isDesktop ? 24 : 48}
         icon="arrow/right"
         iconColor="light"
         color="dark"
diff --git a/src/layouts/modals/GuideModal/Slider/Content/Content.module.scss b/src/layouts/modals/GuideModal/Slider/Content/Content.module.scss
index 78d070da..07adc386 100644
--- a/src/layouts/modals/GuideModal/Slider/Content/Content.module.scss
+++ b/src/layouts/modals/GuideModal/Slider/Content/Content.module.scss
@@ -1,6 +1,6 @@
 .bottomPosition {
   top: auto !important;
-  bottom: -32rem !important;
+  bottom: -32px !important;
   margin-top: 0 !important;
 }
 
diff --git a/src/layouts/modals/GuideModal/Slider/Content/Content.tsx b/src/layouts/modals/GuideModal/Slider/Content/Content.tsx
index ff46d6db..3cb4bcbb 100644
--- a/src/layouts/modals/GuideModal/Slider/Content/Content.tsx
+++ b/src/layouts/modals/GuideModal/Slider/Content/Content.tsx
@@ -54,7 +54,7 @@ const Content: React.FC<ContentProps> = (props) => {
           >
             <Text
               className={cx('py-24 px-12', {
-                'min-h-[88rem]': isDesktop,
+                'min-h-[88px]': isDesktop,
               })}
               message={text as Intl.Message}
               color="dark"
diff --git a/src/layouts/modals/GuideModal/Slider/Slider.module.scss b/src/layouts/modals/GuideModal/Slider/Slider.module.scss
index 100afbf0..4403a279 100644
--- a/src/layouts/modals/GuideModal/Slider/Slider.module.scss
+++ b/src/layouts/modals/GuideModal/Slider/Slider.module.scss
@@ -1,5 +1,5 @@
 .container {
-  margin: 0 -25rem -25rem;
+  margin: 0 -25px -25px;
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;
 
@@ -8,6 +8,6 @@
   }
 
   @include mobile {
-    bottom: 12rem;
+    bottom: 12px;
   }
 }
diff --git a/src/layouts/modals/TxCompletedModal/TxCompletedModal.tsx b/src/layouts/modals/TxCompletedModal/TxCompletedModal.tsx
index 5839ac4f..f199c566 100644
--- a/src/layouts/modals/TxCompletedModal/TxCompletedModal.tsx
+++ b/src/layouts/modals/TxCompletedModal/TxCompletedModal.tsx
@@ -41,7 +41,7 @@ export const [ TxCompletedModal, openTxCompletedModal ] = (
   modal.wrapper(UNIQUE_FILE_ID, (props: ModalProps) => {
     const { tokens, fails, hash, closeModal } = props
 
-    const { isMobile } = device.useData()
+    const { isDesktop } = device.useData()
     const { activeWallet } = useConfig()
 
     useModalClose({ closeModal })
@@ -106,8 +106,8 @@ export const [ TxCompletedModal, openTxCompletedModal ] = (
         }
         <div
           className={cx('hide-empty gap-16 mt-8', {
-            'grid': isMobile,
-            'flex': !isMobile,
+            'grid': !isDesktop,
+            'flex': isDesktop,
           })}
         >
           {
diff --git a/src/modules/device/_SSR/getCookieDevice.ts b/src/modules/device/_SSR/getCookieDevice.ts
index 8991bbdb..c1d26b15 100644
--- a/src/modules/device/_SSR/getCookieDevice.ts
+++ b/src/modules/device/_SSR/getCookieDevice.ts
@@ -11,10 +11,13 @@ const getCookieDevice = async () => {
       const parsedDevice = JSON.parse(cookieDevice)
 
       const isMobile = Boolean(parsedDevice?.isMobile)
+      const isTablet = Boolean(parsedDevice?.isTablet)
+      const isDesktop = Boolean(parsedDevice?.isDesktop)
 
       return {
-        isDesktop: !isMobile,
+        isTablet,
         isMobile,
+        isDesktop,
         isCalculated: false,
       }
     }
diff --git a/src/modules/device/_SSR/getUserAgentDevice.ts b/src/modules/device/_SSR/getUserAgentDevice.ts
index bb887c0c..64388f9f 100644
--- a/src/modules/device/_SSR/getUserAgentDevice.ts
+++ b/src/modules/device/_SSR/getUserAgentDevice.ts
@@ -8,9 +8,11 @@ const getUserAgentDevice = async () => {
   const serverUI = new UAParser(userAgent)
 
   const device = serverUI.getDevice().type
-  const isMobile = device === 'mobile' || device === 'tablet'
+  const isMobile = device === 'mobile'
+  const isTablet = device === 'tablet'
 
   return {
+    isTablet,
     isMobile: isMobile,
     isDesktop: !isMobile,
     isCalculated: false,
diff --git a/src/modules/device/ctx.ts b/src/modules/device/ctx.ts
index 9fa30558..67d1093d 100644
--- a/src/modules/device/ctx.ts
+++ b/src/modules/device/ctx.ts
@@ -4,8 +4,9 @@ import initContext from 'helpers/initContext'
 
 
 const initialContext: Device.Context = {
-  isDesktop: true,
   isMobile: false,
+  isTablet: false,
+  isDesktop: true,
   isCalculated: false,
 }
 
@@ -22,12 +23,14 @@ const {
   const [ deviceContext, setDeviceContext ] = useState<Device.Context>(initialValue || initialContext)
 
   useIsomorphicLayoutEffect(() => {
-    const mobileMediaQuery = window.matchMedia('(max-width: 999px)')
+    const mobileMediaQuery = window.matchMedia('(max-width: 576px)')
+    const tabletMediaQuery = window.matchMedia('(min-width: 577px) and (max-width: 999px)')
     const desktopMediaQuery = window.matchMedia('(min-width: 1000px)')
 
     const handleSetDevice = () => {
       const value = {
         isMobile: mobileMediaQuery.matches,
+        isTablet: tabletMediaQuery.matches,
         isDesktop: desktopMediaQuery.matches,
         isCalculated: true,
       }
diff --git a/src/modules/device/index.ts b/src/modules/device/index.ts
index e7d7eb4f..8caf712c 100644
--- a/src/modules/device/index.ts
+++ b/src/modules/device/index.ts
@@ -7,6 +7,7 @@ declare global {
   namespace Device {
 
     type Context = {
+      isTablet: boolean
       isMobile: boolean
       isDesktop: boolean
       isCalculated: boolean
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 33c0ec08..bae25341 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -7,9 +7,8 @@
 @use './scss/text';
 @use './scss/color';
 @use './scss/focus';
-@use './scss/resize';
 @use './scss/shadow';
 @use './scss/z-index';
 @use './scss/background';
 @use './scss/transition';
-@use './locals';
\ No newline at end of file
+@use './locals';
diff --git a/src/styles/mixins/_common.scss b/src/styles/mixins/_common.scss
index 921fec5e..36178aa4 100644
--- a/src/styles/mixins/_common.scss
+++ b/src/styles/mixins/_common.scss
@@ -128,7 +128,7 @@
 // Shadow
 
 @mixin shadow-md {
-  box-shadow: 0 2rem 12rem rgba($color-dark-rgb, .04);
+  box-shadow: 0 2px 12px rgba($color-dark-rgb, .04);
 }
 
 
diff --git a/src/styles/scss/focus.scss b/src/styles/scss/focus.scss
index 56e670e8..1656842d 100644
--- a/src/styles/scss/focus.scss
+++ b/src/styles/scss/focus.scss
@@ -3,11 +3,11 @@
 
 .js-focus-visible .focus-visible:focus {
   outline: 1px solid variables.$color-primary;
-  outline-offset: 2rem;
+  outline-offset: 2px;
 }
 
 *:focus-visible {
-  border-radius: 8rem;
+  border-radius: 8px;
   outline: none;
-  box-shadow: 0 0 0 3rem rgba(variables.$color-primary-rgb, .5);
+  box-shadow: 0 0 0 3px rgba(variables.$color-primary-rgb, .5);
 }
diff --git a/src/styles/scss/resize.scss b/src/styles/scss/resize.scss
deleted file mode 100644
index 24c80df8..00000000
--- a/src/styles/scss/resize.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@use '../mixins/media';
-
-@include media.mobile {
-
-  html {
-    font-size: 0.267vw; // 1px for mobiles with 374px screen width
-  }
-}
-
-@include media.tablet-portrait {
-
-  html {
-    font-size: 0.1758vw; // 1px for tablet with > 568px screen width
-  }
-}
-
-@include media.tablet-landscape {
-
-  html {
-    font-size: 0.1301vw; // 1px for tablet with > 768px screen width
-  }
-}
diff --git a/src/styles/scss/shadow.scss b/src/styles/scss/shadow.scss
index 36512ae7..58aa61a0 100644
--- a/src/styles/scss/shadow.scss
+++ b/src/styles/scss/shadow.scss
@@ -6,9 +6,9 @@
 }
 
 .shadow-black {
-  box-shadow: 0 0 40rem 0 rgba(variables.$color-black-rgb, .15);
+  box-shadow: 0 0 40px 0 rgba(variables.$color-black-rgb, .15);
 }
 
 .shadow-secondary {
-  box-shadow: 0 0 40rem 0 rgba(variables.$color-secondary-rgb, .1);
+  box-shadow: 0 0 40px 0 rgba(variables.$color-secondary-rgb, .1);
 }
diff --git a/src/styles/scss/size.scss b/src/styles/scss/size.scss
index 9eb9d94d..3559347b 100644
--- a/src/styles/scss/size.scss
+++ b/src/styles/scss/size.scss
@@ -4,11 +4,11 @@
 
   .width-container {
     width: 100%;
-    max-width: 1320rem;
+    max-width: 1320px;
     margin-right: auto;
     margin-left: auto;
-    padding-right: 60rem;
-    padding-left: 60rem;
+    padding-right: 60px;
+    padding-left: 60px;
   }
 }
 
@@ -16,8 +16,8 @@
 
   .width-container {
     width: 100%;
-    padding-right: 32rem;
-    padding-left: 32rem;
+    padding-right: 32px;
+    padding-left: 32px;
   }
 }
 
@@ -25,7 +25,7 @@
 
   .width-container {
     width: 100%;
-    padding-right: 24rem;
-    padding-left: 24rem;
+    padding-right: 24px;
+    padding-left: 24px;
   }
 }
diff --git a/src/styles/tailwind/layers/base.css b/src/styles/tailwind/layers/base.css
index 02dc0f5d..a22ec702 100644
--- a/src/styles/tailwind/layers/base.css
+++ b/src/styles/tailwind/layers/base.css
@@ -102,7 +102,7 @@
   }
 
   html {
-    font-size: 1px;
+    font-size: 16px;
     line-height: 0;
   }
 
@@ -166,7 +166,7 @@
   select:-webkit-autofill:focus,
   textarea:-webkit-autofill:focus {
     background-color: #fff;
-    -webkit-box-shadow: inset 0 0 0 100rem #fff;
+    -webkit-box-shadow: inset 0 0 0 100px #fff;
   }
 
   select:-moz-focusring {
diff --git a/src/styles/tailwind/layers/components.css b/src/styles/tailwind/layers/components.css
index aa8f392c..74a52274 100644
--- a/src/styles/tailwind/layers/components.css
+++ b/src/styles/tailwind/layers/components.css
@@ -3,146 +3,146 @@
   /* Typography */
   .text-h100 {
     font-weight: 700;
-    font-size: 100rem;
-    line-height: 110rem;
+    font-size: 100px;
+    line-height: 110px;
   }
 
   .text-h90 {
     font-weight: 700;
-    font-size: 90rem;
-    line-height: 100rem;
+    font-size: 90px;
+    line-height: 100px;
   }
 
   .text-h60 {
     font-weight: 700;
-    font-size: 60rem;
-    line-height: 72rem;
+    font-size: 60px;
+    line-height: 72px;
   }
 
   .text-h48 {
     font-weight: 700;
-    font-size: 48rem;
-    line-height: 56rem;
+    font-size: 48px;
+    line-height: 56px;
   }
 
   .text-h40 {
     font-weight: 700;
-    font-size: 40rem;
-    line-height: 48rem;
+    font-size: 40px;
+    line-height: 48px;
   }
 
   .text-h32 {
     font-weight: 700;
-    font-size: 32rem;
-    line-height: 44rem;
+    font-size: 32px;
+    line-height: 44px;
   }
 
   .text-h24 {
     font-weight: 700;
-    font-size: 24rem;
-    line-height: 32rem;
+    font-size: 24px;
+    line-height: 32px;
   }
 
   .text-h22 {
     font-weight: 700;
-    font-size: 22rem;
-    line-height: 26rem;
+    font-size: 22px;
+    line-height: 26px;
   }
 
   .text-h20 {
     font-weight: 700;
-    font-size: 20rem;
-    line-height: 24rem;
+    font-size: 20px;
+    line-height: 24px;
   }
 
   .text-t40m {
     font-weight: 500;
-    font-size: 40rem;
-    line-height: 48rem;
+    font-size: 40px;
+    line-height: 48px;
   }
 
   .text-t20b {
     font-weight: 700;
-    font-size: 20rem;
-    line-height: 32rem;
+    font-size: 20px;
+    line-height: 32px;
   }
 
   .text-t18m {
     font-weight: 500;
-    font-size: 18rem;
-    line-height: 24rem;
+    font-size: 18px;
+    line-height: 24px;
   }
 
   .text-t18b {
     font-weight: 700;
-    font-size: 18rem;
-    line-height: 24rem;
+    font-size: 18px;
+    line-height: 24px;
   }
 
   .text-t16m {
     font-weight: 500;
-    font-size: 16rem;
-    line-height: 22rem;
+    font-size: 16px;
+    line-height: 22px;
   }
 
   .text-t16b {
     font-weight: 700;
-    font-size: 16rem;
-    line-height: 22rem;
+    font-size: 16px;
+    line-height: 22px;
   }
 
   .text-t14m {
     font-weight: 500;
-    font-size: 14rem;
-    line-height: 20rem;
+    font-size: 14px;
+    line-height: 20px;
   }
 
   .text-t14b {
     font-weight: 700;
-    font-size: 14rem;
-    line-height: 20rem;
+    font-size: 14px;
+    line-height: 20px;
   }
 
   .text-t14 {
     font-weight: 400;
-    font-size: 14rem;
-    line-height: 20rem;
+    font-size: 14px;
+    line-height: 20px;
   }
 
   .text-t12m {
     font-weight: 500;
-    font-size: 12rem;
-    line-height: 18rem;
+    font-size: 12px;
+    line-height: 18px;
   }
 
   .text-t12b {
     font-weight: 700;
-    font-size: 12rem;
-    line-height: 18rem;
+    font-size: 12px;
+    line-height: 18px;
   }
 
   .text-t12 {
     font-weight: 400;
-    font-size: 12rem;
-    line-height: 18rem;
+    font-size: 12px;
+    line-height: 18px;
   }
 
   .text-n10m {
     font-weight: 500;
-    font-size: 10rem;
-    line-height: 16rem;
+    font-size: 10px;
+    line-height: 16px;
   }
 
   .text-n10b {
     font-weight: 700;
-    font-size: 10rem;
-    line-height: 16rem;
+    font-size: 10px;
+    line-height: 16px;
   }
 
   .text-n10 {
     font-weight: 400;
-    font-size: 10rem;
-    line-height: 16rem;
+    font-size: 10px;
+    line-height: 16px;
   }
 
   /* Ellipsis */
diff --git a/src/styles/tailwind/theme.css b/src/styles/tailwind/theme.css
index 341edaf1..d7a2dfa7 100644
--- a/src/styles/tailwind/theme.css
+++ b/src/styles/tailwind/theme.css
@@ -19,27 +19,27 @@
   --color-white: var(--white);
 
   /* Border radius */
-  --radius-2: 2rem;
-  --radius-4: 4rem;
-  --radius-6: 6rem;
-  --radius-8: 8rem;
-  --radius-12: 12rem;
-  --radius-16: 16rem;
-  --radius-24: 24rem;
-  --radius-72: 72rem;
+  --radius-2: 2px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-12: 12px;
+  --radius-16: 16px;
+  --radius-24: 24px;
+  --radius-72: 72px;
 
   /* Blur */
-  --blur-xs: 4rem;
-  --blur-sm: 8rem;
-  --blur-md: 12rem;
-  --blur-lg: 16rem;
-  --blur-xl: 24rem;
-  --blur-2xl: 40rem;
-  --blur-3xl: 64rem;
+  --blur-xs: 4px;
+  --blur-sm: 8px;
+  --blur-md: 12px;
+  --blur-lg: 16px;
+  --blur-xl: 24px;
+  --blur-2xl: 40px;
+  --blur-3xl: 64px;
 
   /* Animation */
   --animate-spin: spin 1s linear infinite;
 
   /* Other */
-  --spacing: 1rem;
+  --spacing: 1px;
 }
diff --git a/src/views/SwapView/SwapView.tsx b/src/views/SwapView/SwapView.tsx
index c0b93808..dd003e41 100644
--- a/src/views/SwapView/SwapView.tsx
+++ b/src/views/SwapView/SwapView.tsx
@@ -25,7 +25,7 @@ const SwapView: React.FC = () => {
 
   return (
     <div className="width-container">
-      <div className="max-w-[515rem] mx-auto mb-40 mt-96">
+      <div className="max-w-[515px] mx-auto mb-40 mt-96">
         <swapCtx.Provider value={ctx}>
           {
             ctx.isFetching ? (
diff --git a/src/views/SwapView/Tabs/TabButton/TabButton.module.scss b/src/views/SwapView/Tabs/TabButton/TabButton.module.scss
index 0d59493d..c2188782 100644
--- a/src/views/SwapView/Tabs/TabButton/TabButton.module.scss
+++ b/src/views/SwapView/Tabs/TabButton/TabButton.module.scss
@@ -9,7 +9,7 @@
   }
   70% {
     background-color: rgba($color-success-rgb, 0.9);
-    box-shadow: 0 0 0 8rem rgba($color-success-rgb, 0);
+    box-shadow: 0 0 0 8px rgba($color-success-rgb, 0);
   }
   100% {
     background-color: rgba($color-success-rgb, 0.8);
diff --git a/src/views/SwapView/Tabs/Tabs.tsx b/src/views/SwapView/Tabs/Tabs.tsx
index abe6545f..2ceee16a 100644
--- a/src/views/SwapView/Tabs/Tabs.tsx
+++ b/src/views/SwapView/Tabs/Tabs.tsx
@@ -27,7 +27,7 @@ const Tabs: React.FC<TabsProps> = (props) => {
 
   const { isEthereum } = useConfig()
   const { tabs } = swapCtx.useData()
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   const {
     isMoreV2,
@@ -46,13 +46,13 @@ const Tabs: React.FC<TabsProps> = (props) => {
   const withToggleButton = withMint || withBoost
 
   const { tabButtonRef, containerRef } = useTabButton({
-    gap: isMobile ? 4 : 12,
+    gap: !isDesktop ? 4 : 12,
     index: tabIndex,
   }, [ tabIndex, tabs.list, isClaimAvailable ])
 
   const gapClassName = cx({
-    'gap-12': !isMobile,
-    'gap-4': isMobile,
+    'gap-12': isDesktop,
+    'gap-4': !isDesktop,
   })
 
   return (
diff --git a/src/views/SwapView/common/ChartWithFilter/ChartWithFilter.tsx b/src/views/SwapView/common/ChartWithFilter/ChartWithFilter.tsx
index f1d6b601..2a41e0ac 100644
--- a/src/views/SwapView/common/ChartWithFilter/ChartWithFilter.tsx
+++ b/src/views/SwapView/common/ChartWithFilter/ChartWithFilter.tsx
@@ -31,7 +31,7 @@ const ChartWithFilter: React.FC<ChartWithFilterProps> = (props) => {
   } = props
 
   const { sdk, address } = useConfig()
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   const {
     data,
@@ -42,7 +42,7 @@ const ChartWithFilter: React.FC<ChartWithFilterProps> = (props) => {
     values: { tab, type },
   } = useChart(tabsItems)
 
-  const View = isMobile ? Mobile : Desktop
+  const View = isDesktop ? Desktop : Mobile
 
   return (
     <View
@@ -58,7 +58,7 @@ const ChartWithFilter: React.FC<ChartWithFilterProps> = (props) => {
         className="mt-24"
         data={data}
         isFetching={isFetching}
-        hideRightScale={isMobile}
+        hideRightScale={!isDesktop}
         token={sdk.config.tokens.depositToken}
         noItemsDescription={noItemsDescription}
         dataTestId={`${dataTestId}-${tab}-${type}`}
diff --git a/src/views/SwapView/common/ChartWithFilter/Skeleton/Skeleton.tsx b/src/views/SwapView/common/ChartWithFilter/Skeleton/Skeleton.tsx
index 73ee927e..58510c33 100644
--- a/src/views/SwapView/common/ChartWithFilter/Skeleton/Skeleton.tsx
+++ b/src/views/SwapView/common/ChartWithFilter/Skeleton/Skeleton.tsx
@@ -33,11 +33,11 @@ const tabsItems: ChartWithFilterProps['tabsItems'] =[
 const Skeleton: React.FC<SkeletonProps> = (props) => {
   const { className } = props
 
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
   const options = useOptions(tabsItems)
   const { form } = useForm(options)
 
-  const View = isMobile ? Mobile : Desktop
+  const View = isDesktop ? Desktop : Mobile
 
   return (
     <View
@@ -49,7 +49,7 @@ const Skeleton: React.FC<SkeletonProps> = (props) => {
     >
       <Chart
         data={[]}
-        hideRightScale={isMobile}
+        hideRightScale={!isDesktop}
         pointType="percent"
         token="ETH"
         style="bar"
diff --git a/src/views/SwapView/common/ChartWithFilter/common/ExportButton/ExportButton.tsx b/src/views/SwapView/common/ChartWithFilter/common/ExportButton/ExportButton.tsx
index 59398b8f..03450627 100644
--- a/src/views/SwapView/common/ChartWithFilter/common/ExportButton/ExportButton.tsx
+++ b/src/views/SwapView/common/ChartWithFilter/common/ExportButton/ExportButton.tsx
@@ -18,7 +18,7 @@ const ExportButton: React.FC<ExportButtonProps> = (props) => {
   const { className, vaultAddress, onClick } = props
 
   const { address } = useConfig()
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   const handleClick = useCallback(() => {
     if (typeof onClick === 'function') {
@@ -31,7 +31,7 @@ const ExportButton: React.FC<ExportButtonProps> = (props) => {
   return (
     <>
       {
-        isMobile ? (
+        !isDesktop ? (
           <Button
             size="s"
             color="light"
diff --git a/src/views/SwapView/common/ChartWithFilter/common/TimeRange/TimeRange.tsx b/src/views/SwapView/common/ChartWithFilter/common/TimeRange/TimeRange.tsx
index d4009b40..bda791c6 100644
--- a/src/views/SwapView/common/ChartWithFilter/common/TimeRange/TimeRange.tsx
+++ b/src/views/SwapView/common/ChartWithFilter/common/TimeRange/TimeRange.tsx
@@ -20,7 +20,7 @@ const TimeRange: React.FC<TimeRangeProps> = (props) => {
 
   return (
     <ButtonRangePicker
-      className={cx(className, 'h-[30rem]')}
+      className={cx(className, 'h-[30px]')}
       field={field}
       range={range}
       dataTestId="stake-chart-time-range"
diff --git a/src/views/SwapView/common/Skeleton/Skeleton.tsx b/src/views/SwapView/common/Skeleton/Skeleton.tsx
index fd0c2be1..1bc4464e 100644
--- a/src/views/SwapView/common/Skeleton/Skeleton.tsx
+++ b/src/views/SwapView/common/Skeleton/Skeleton.tsx
@@ -13,7 +13,7 @@ const Skeleton: React.FC = () => {
   const searchParams = useSearchParams()
 
   const { tabs } = swapCtx.useData()
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   const isBalancesRef = useRef(Boolean(searchParams.get('balances')))
 
@@ -73,7 +73,7 @@ const Skeleton: React.FC = () => {
           <div className="mt-20">
             <Bone
               className="rounded-8"
-              h={isMobile ? 90 : 108}
+              h={!isDesktop ? 90 : 108}
               wFull
               delay={1}
             />
diff --git a/src/views/SwapView/common/StakeStats/APY/APY.tsx b/src/views/SwapView/common/StakeStats/APY/APY.tsx
index a4f5c3f8..b16d2b3f 100644
--- a/src/views/SwapView/common/StakeStats/APY/APY.tsx
+++ b/src/views/SwapView/common/StakeStats/APY/APY.tsx
@@ -25,7 +25,7 @@ const APY: React.FC<APYProps> = (props) => {
   const { className } = props
 
   const { isEthereum } = useConfig()
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
   const { apy, maxBoostApy } = useStore(storeSelector)
 
   const isProfitable = apy < maxBoostApy
@@ -62,13 +62,13 @@ const APY: React.FC<APYProps> = (props) => {
         }
       </div>
       <div
-        className={cx('flex items-center gap-4', { 'mt-4': isMobile })}
+        className={cx('flex items-center gap-4', { 'mt-4': !isDesktop })}
       >
         <Text
           className="opacity-40"
-          message={isMobile ? 'APY' : messages.apy}
+          message={!isDesktop ? 'APY' : messages.apy}
           color="dark"
-          size={isMobile ? 't12m' : 't14m'}
+          size={!isDesktop ? 't12m' : 't14m'}
         />
         {
           isBoostEnabled && (
diff --git a/src/views/SwapView/common/StakeStats/Block/Block.tsx b/src/views/SwapView/common/StakeStats/Block/Block.tsx
index 4b304367..c1896c15 100644
--- a/src/views/SwapView/common/StakeStats/Block/Block.tsx
+++ b/src/views/SwapView/common/StakeStats/Block/Block.tsx
@@ -15,7 +15,7 @@ type BlockProps = {
 const Block: React.FC<BlockProps> = (props) => {
   const { className, value, text, dataTestId } = props
 
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   return (
     <div className={className}>
@@ -27,10 +27,10 @@ const Block: React.FC<BlockProps> = (props) => {
         dataTestId={dataTestId}
       />
       <Text
-        className={cx('opacity-40', { 'mt-4': isMobile })}
+        className={cx('opacity-40', { 'mt-4': !isDesktop })}
         message={text}
         color="dark"
-        size={isMobile ? 't12m' : 't14m'}
+        size={!isDesktop ? 't12m' : 't14m'}
       />
     </div>
   )
diff --git a/src/views/SwapView/common/StakeStats/StakeStats.tsx b/src/views/SwapView/common/StakeStats/StakeStats.tsx
index ce631bdb..57568bab 100644
--- a/src/views/SwapView/common/StakeStats/StakeStats.tsx
+++ b/src/views/SwapView/common/StakeStats/StakeStats.tsx
@@ -19,7 +19,7 @@ const StakeStats: React.FC<StakeStatsProps> = (props) => {
   const { className } = props
 
   const { tvl } = swapCtx.useData()
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   return (
     <Box className={cx(className, 'flex justify-between items-start p-12')}>
@@ -30,7 +30,7 @@ const StakeStats: React.FC<StakeStatsProps> = (props) => {
         <Block
           className="flex flex-col items-center text-center"
           value={tvl}
-          text={isMobile ? 'TVL' : messages.tvl}
+          text={!isDesktop ? 'TVL' : messages.tvl}
           dataTestId="stake-tvl"
         />
       </div>
diff --git a/src/views/SwapView/common/ToggleBox/ToggleBox.module.scss b/src/views/SwapView/common/ToggleBox/ToggleBox.module.scss
index 1c5ba233..0e5807cb 100644
--- a/src/views/SwapView/common/ToggleBox/ToggleBox.module.scss
+++ b/src/views/SwapView/common/ToggleBox/ToggleBox.module.scss
@@ -1,7 +1,7 @@
 .arrow {
-  top: calc(100% - 10rem);
-  left: calc(50% - 10rem);
-  padding: 2rem;
+  top: calc(100% - 10px);
+  left: calc(50% - 10px);
+  padding: 2px;
   transition: .2s;
 
   @include dark-theme {