diff --git a/packages/account/src/Components/icon-message-content/icon-message-content.tsx b/packages/account/src/Components/icon-message-content/icon-message-content.tsx
index e76f9db8d969..d30c8d3c1933 100644
--- a/packages/account/src/Components/icon-message-content/icon-message-content.tsx
+++ b/packages/account/src/Components/icon-message-content/icon-message-content.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { Div100vhContainer, Text } from '@deriv/components';
-import { isDesktop } from '@deriv/shared';
+import { useDevice } from '@deriv-com/ui';
 
 type TIconMessageContent = {
     className?: string;
@@ -20,57 +20,61 @@ const IconMessageContent = ({
     is_disabled_for_mobile = false,
     message,
     text,
-}: React.PropsWithChildren<TIconMessageContent>) => (
-    <Div100vhContainer
-        className={classNames('account-management__message-wrapper', {
-            'account-management__message-wrapper-full-width': full_width,
-        })}
-        is_disabled={isDesktop() || is_disabled_for_mobile}
-        height_offset='110px'
-    >
-        <div
-            className={classNames('account-management__message-content', {
-                [`${className}__message-content`]: className,
+}: React.PropsWithChildren<TIconMessageContent>) => {
+    const { isDesktop } = useDevice();
+
+    return (
+        <Div100vhContainer
+            className={classNames('account-management__message-wrapper', {
+                'account-management__message-wrapper-full-width': full_width,
             })}
+            is_disabled={isDesktop || is_disabled_for_mobile}
+            height_offset='110px'
         >
-            {icon && (
-                <div
-                    className={classNames('account-management__message-icon', {
-                        [`${className}__message-icon`]: className,
-                    })}
-                >
-                    {icon}
-                </div>
-            )}
-            <Text
-                as='div'
-                color='general'
-                weight='bold'
-                size='s'
-                align='center'
-                className={classNames('account-management__message', {
-                    [`${className}__message`]: className,
+            <div
+                className={classNames('account-management__message-content', {
+                    [`${className}__message-content`]: className,
                 })}
             >
-                {message}
-            </Text>
-            {text && (
-                <div className='account-management__text-container'>
-                    <Text
-                        className={classNames({
-                            [`${className}__text`]: className,
+                {icon && (
+                    <div
+                        className={classNames('account-management__message-icon', {
+                            [`${className}__message-icon`]: className,
                         })}
-                        as='p'
-                        size='xs'
-                        align='center'
                     >
-                        {text}
-                    </Text>
-                </div>
-            )}
-            {children}
-        </div>
-    </Div100vhContainer>
-);
+                        {icon}
+                    </div>
+                )}
+                <Text
+                    as='div'
+                    color='general'
+                    weight='bold'
+                    size='s'
+                    align='center'
+                    className={classNames('account-management__message', {
+                        [`${className}__message`]: className,
+                    })}
+                >
+                    {message}
+                </Text>
+                {text && (
+                    <div className='account-management__text-container'>
+                        <Text
+                            className={classNames({
+                                [`${className}__text`]: className,
+                            })}
+                            as='p'
+                            size='xs'
+                            align='center'
+                        >
+                            {text}
+                        </Text>
+                    </div>
+                )}
+                {children}
+            </div>
+        </Div100vhContainer>
+    );
+};
 
 export default IconMessageContent;
diff --git a/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-form.tsx b/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-form.tsx
index 97d062b6e286..29c595c69114 100644
--- a/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-form.tsx
+++ b/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-form.tsx
@@ -3,6 +3,7 @@ import { Form, Formik, FormikHelpers, FormikProps } from 'formik';
 import DocumentUploader from '@binary-com/binary-document-uploader';
 import { Button } from '@deriv/components';
 import { readFiles, WS, UPLOAD_FILE_TYPE } from '@deriv/shared';
+import { useDevice } from '@deriv-com/ui';
 import { observer, useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
 import FormFooter from '../../../Components/form-footer';
@@ -24,10 +25,10 @@ type TProofOfOwnershipFormProps = {
 };
 
 const ProofOfOwnershipForm = observer(({ grouped_payment_method_data }: TProofOfOwnershipFormProps) => {
-    const { client, notifications, ui } = useStore();
+    const { client, notifications } = useStore();
     const { refreshNotifications } = notifications;
     const { email: client_email, updateAccountStatus } = client;
-    const { is_mobile } = ui;
+    const { isDesktop } = useDevice();
 
     const grouped_payment_method_data_keys = Object.keys(grouped_payment_method_data) as Array<TPaymentMethod>;
 
@@ -46,11 +47,11 @@ const ProofOfOwnershipForm = observer(({ grouped_payment_method_data }: TProofOf
 
     const getScrollOffset = React.useCallback(
         (items_count = 0) => {
-            if (is_mobile) return '20rem';
+            if (!isDesktop) return '20rem';
             if (items_count <= 2) return '0rem';
             return '8rem';
         },
-        [is_mobile]
+        [isDesktop]
     );
 
     if (grouped_payment_method_data_keys) {
diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss
index 74d9337c6c33..929c27adf761 100644
--- a/packages/account/src/Styles/account.scss
+++ b/packages/account/src/Styles/account.scss
@@ -686,7 +686,7 @@ $MIN_HEIGHT_FLOATING: calc(
                     height: 4rem;
                     margin-top: 3.2rem;
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         margin: 1.6rem 0;
                         padding: 1.6rem;
                     }
@@ -697,7 +697,7 @@ $MIN_HEIGHT_FLOATING: calc(
                 width: 12.8rem;
                 height: 12.8rem;
 
-                @include desktop {
+                @include desktop-screen {
                     margin-top: 8rem;
                 }
             }
@@ -726,18 +726,18 @@ $MIN_HEIGHT_FLOATING: calc(
                 &-full-width {
                     width: calc(100vw - 33rem);
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         width: 100%;
                     }
                 }
 
-                @include mobile {
+                @include mobile-or-tablet-screen {
                     overflow-x: hidden;
                     overflow-y: auto;
                 }
             }
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 line-height: 2rem;
                 text-align: center;
             }
@@ -768,14 +768,14 @@ $MIN_HEIGHT_FLOATING: calc(
 
         &-leave-confirm,
         &-submit-success {
-            @include desktop {
+            @include desktop-screen {
                 .dc-btn--primary {
                     width: 13rem;
                     margin-left: 0.8rem;
                 }
             }
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 flex-direction: column;
                 width: 100%;
                 margin-top: 1.2rem;
@@ -801,7 +801,7 @@ $MIN_HEIGHT_FLOATING: calc(
                     @include typeface(--paragraph-left-bold-black, none);
                     color: var(--text-prominent);
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         font-size: 1.2rem;
                         color: var(--text-general);
                     }
@@ -819,7 +819,7 @@ $MIN_HEIGHT_FLOATING: calc(
                     width: 5rem;
                     margin: 0 0.6rem;
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         margin: 1.1rem 0;
                     }
                 }
@@ -832,12 +832,12 @@ $MIN_HEIGHT_FLOATING: calc(
                     margin-left: 0.8rem;
                 }
 
-                @include mobile {
+                @include mobile-or-tablet-screen {
                     margin-left: unset;
                 }
             }
 
-            @include desktop {
+            @include desktop-screen {
                 max-width: 54.6rem;
             }
         }
@@ -1913,7 +1913,7 @@ $MIN_HEIGHT_FLOATING: calc(
     width: 100%;
     overflow: hidden;
 
-    @include mobile {
+    @include mobile-or-tablet-screen {
         margin-top: 2.4rem;
     }
 
@@ -1924,14 +1924,14 @@ $MIN_HEIGHT_FLOATING: calc(
         display: flex;
         flex-direction: column;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             width: 100%;
             flex-direction: column;
             padding: 1.6rem;
             margin-bottom: 0.8rem;
         }
 
-        @include desktop {
+        @include desktop-screen {
             width: 80%;
             padding: 2.4rem;
         }
@@ -1948,11 +1948,11 @@ $MIN_HEIGHT_FLOATING: calc(
 
             &-text {
                 line-height: 2.4rem;
-                padding-left: 1.6rem;
+                padding-inline-start: 1.6rem;
             }
 
             &-icon {
-                margin-left: auto;
+                margin-inline-start: auto;
                 transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
                 padding: 0;
 
@@ -1980,7 +1980,7 @@ $MIN_HEIGHT_FLOATING: calc(
                 align-items: center;
                 margin-top: 3rem;
 
-                @include mobile {
+                @include mobile-or-tablet-screen {
                     display: flex;
                 }
 
@@ -1990,7 +1990,7 @@ $MIN_HEIGHT_FLOATING: calc(
                     width: 100%;
                     flex-grow: 4;
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         width: 100%;
                     }
                 }
@@ -2001,7 +2001,7 @@ $MIN_HEIGHT_FLOATING: calc(
                     align-self: flex-start;
                     flex-grow: 1;
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         width: 100%;
                     }
                 }
@@ -2011,19 +2011,19 @@ $MIN_HEIGHT_FLOATING: calc(
                     -webkit-text-fill-color: var(--text-loss-danger);
                 }
 
-                @include desktop {
+                @include desktop-screen {
                     .dc-input {
                         width: unset;
                     }
                 }
 
-                @include mobile {
+                @include mobile-or-tablet-screen {
                     .dc-input {
                         margin-bottom: 1rem;
                     }
                 }
 
-                @include mobile {
+                @include mobile-or-tablet-screen {
                     flex-direction: column;
                     padding-bottom: 1rem;
                 }
@@ -2033,11 +2033,11 @@ $MIN_HEIGHT_FLOATING: calc(
                     box-sizing: border-box;
                     border-radius: 4px;
                     height: 4rem;
-                    margin-right: 10px;
+                    margin-inline-end: 10px;
                     color: var(--text-less-prominent);
                     -webkit-text-fill-color: var(--text-less-prominent);
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         width: 100%;
                     }
                 }
@@ -2045,20 +2045,20 @@ $MIN_HEIGHT_FLOATING: calc(
                 &-photo {
                     margin-bottom: 35px;
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         width: 100%;
-                        margin-left: 0;
+                        margin-inline-start: 0;
                         margin-top: 1.6rem;
                     }
 
-                    @include desktop {
+                    @include desktop-screen {
                         .dc-input {
                             flex-grow: 8;
                         }
                     }
 
                     &-btn {
-                        margin-left: 1rem;
+                        margin-inline-start: 1rem;
                         padding: 10px 16px;
                         position: static;
                         height: 40px;
@@ -2083,11 +2083,11 @@ $MIN_HEIGHT_FLOATING: calc(
         display: flex;
         flex-direction: column;
         align-items: center;
-        margin-right: 25px;
+        margin-inline-end: 25px;
         overflow: visible;
 
-        @include mobile {
-            margin-right: 8px;
+        @include mobile-or-tablet-screen {
+            margin-inline-end: 8px;
         }
 
         &-number {
@@ -2118,7 +2118,7 @@ $MIN_HEIGHT_FLOATING: calc(
         padding: 2rem auto !important;
         width: 72%;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             width: 100%;
         }
 
@@ -2146,7 +2146,7 @@ $MIN_HEIGHT_FLOATING: calc(
     }
 
     & .account__scrollbars_container--grid-layout {
-        @include mobile {
+        @include mobile-or-tablet-screen {
             display: flex;
             flex-direction: column;
         }
diff --git a/packages/core/src/sass/app/_common/components/account-common.scss b/packages/core/src/sass/app/_common/components/account-common.scss
index e3c4d40c7772..ada23ce530ab 100644
--- a/packages/core/src/sass/app/_common/components/account-common.scss
+++ b/packages/core/src/sass/app/_common/components/account-common.scss
@@ -490,15 +490,15 @@
 
     &-management {
         &__message-content {
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 padding-top: 2.4rem;
             }
         }
         &__container {
-            @include desktop {
+            @include desktop-screen {
                 max-width: 68.2rem;
             }
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 margin: 0 auto;
             }
         }