diff --git a/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss b/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss
index 2336f29e78e4..5edc9aa93c05 100644
--- a/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss
+++ b/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss
@@ -7,11 +7,17 @@
         row-gap: 1.6rem;
         margin-bottom: 2.4rem;
 
-        @include desktop {
+        @include tablet-screen {
+            grid-template-columns: repeat(2, 1fr);
+            row-gap: 3.2rem;
+        }
+
+        @include desktop-screen {
             grid-template-columns: repeat(3, 1fr);
             column-gap: calc((100% - 23.7rem * 3) / 2);
             row-gap: 3.2rem;
         }
+
         &-layout {
             background-color: var(--transparent-danger);
             gap: 1.6rem;
@@ -25,7 +31,7 @@
             width: 23.7rem;
             height: 21.8rem;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 margin-inline: auto;
             }
         }
diff --git a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
index 04d5a4d4f669..b1c594e4c8cc 100644
--- a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
+++ b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Formik, FormikErrors, FormikHelpers, FormikValues } from 'formik';
+import { useDevice } from '@deriv-com/ui';
 import { Loading, Button, Text, ThemedScrollbars, FormSubmitButton, Modal, HintBox } from '@deriv/components';
 import { useFileUploader } from '@deriv/hooks';
 import { validAddress, validPostCode, validLetterSymbol, validLength, getLocation, WS } from '@deriv/shared';
@@ -44,7 +45,8 @@ const ProofOfAddressForm = observer(
         step_index,
         className,
     }: Partial<TProofOfAddressForm>) => {
-        const { client, notifications, ui } = useStore();
+        const { isDesktop } = useDevice();
+        const { client, notifications } = useStore();
         const { account_settings, fetchResidenceList, fetchStatesList, getChangeableFields, states_list, is_eu } =
             client;
         const {
@@ -52,7 +54,6 @@ const ProofOfAddressForm = observer(
             removeNotificationMessage,
             removeNotificationByKey,
         } = notifications;
-        const { is_mobile } = ui;
         const [document_files, setDocumentFiles] = React.useState<File[]>([]);
         const [file_selection_error, setFileSelectionError] = React.useState<string | null>(null);
         const [is_loading, setIsLoading] = React.useState(true);
@@ -271,7 +272,7 @@ const ProofOfAddressForm = observer(
         }
         const setOffset = (status: { msg: string }) => {
             const mobile_scroll_offset = status?.msg ? '200px' : '154px';
-            return is_mobile && !is_for_cfd_modal ? mobile_scroll_offset : '80px';
+            return !isDesktop && !is_for_cfd_modal ? mobile_scroll_offset : '80px';
         };
 
         return (
@@ -283,12 +284,12 @@ const ProofOfAddressForm = observer(
             >
                 {({ status, handleSubmit, isSubmitting, isValid }) => (
                     <>
-                        <LeaveConfirm onDirty={is_mobile ? showForm : undefined} />
+                        <LeaveConfirm onDirty={!isDesktop ? showForm : undefined} />
                         {form_state.should_show_form && (
                             <form noValidate className='account-form account-form_poa' onSubmit={handleSubmit}>
                                 <ThemedScrollbars
                                     height='572px'
-                                    is_bypassed={!is_for_cfd_modal || is_mobile}
+                                    is_bypassed={!is_for_cfd_modal || !isDesktop}
                                     className={className}
                                 >
                                     <FormBody scroll_offset={setOffset(status)}>
@@ -297,7 +298,7 @@ const ProofOfAddressForm = observer(
                                                 className='account-form_poa-submit-error'
                                                 icon='IcAlertDanger'
                                                 message={
-                                                    <Text as='p' size={is_mobile ? 'xxxs' : 'xs'}>
+                                                    <Text as='p' size={!isDesktop ? 'xxxs' : 'xs'}>
                                                         {!status?.msg && is_resubmit && (
                                                             <Localize i18n_default_text='We were unable to verify your address with the details you provided. Please check and resubmit or choose a different document type.' />
                                                         )}
@@ -342,7 +343,7 @@ const ProofOfAddressForm = observer(
                                                 !!file_selection_error
                                             }
                                             label={localize('Continue')}
-                                            is_absolute={is_mobile}
+                                            is_absolute={!isDesktop}
                                             is_loading={isSubmitting}
                                         />
                                     </Modal.Footer>
diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss
index ea754d80524e..a0aa110fe395 100644
--- a/packages/account/src/Styles/account.scss
+++ b/packages/account/src/Styles/account.scss
@@ -8,7 +8,7 @@ $MIN_HEIGHT_FLOATING: calc(
     margin: 0 16px;
 
     .dc-page-overlay__content {
-        @include mobile {
+        @include mobile-or-tablet-screen {
             overflow-x: hidden;
             overflow-y: auto;
         }
@@ -162,7 +162,7 @@ $MIN_HEIGHT_FLOATING: calc(
             }
         }
 
-        @include desktop {
+        @include desktop-screen {
             & .da-self-exclusion__wrapper {
                 width: calc(100vw - 33rem);
             }
@@ -172,7 +172,7 @@ $MIN_HEIGHT_FLOATING: calc(
             }
         }
 
-        @include desktop {
+        @include desktop-screen {
             grid-template-rows: 5.2rem calc(100vh - 4.8rem - 3.6rem - 5.2rem);
             overflow: hidden;
         }
@@ -205,7 +205,7 @@ $MIN_HEIGHT_FLOATING: calc(
         height: 100%;
         width: 100%;
 
-        @include desktop {
+        @include desktop-screen {
             &__financial-assessment {
                 .account-form__fieldset {
                     margin-top: 0.8rem;
@@ -235,7 +235,7 @@ $MIN_HEIGHT_FLOATING: calc(
                 width: 100%;
                 margin-top: 0.3rem;
 
-                @include mobile {
+                @include mobile-or-tablet-screen {
                     border-top-color: var(--general-disabled);
                 }
             }
@@ -269,7 +269,7 @@ $MIN_HEIGHT_FLOATING: calc(
                 margin-bottom: 1.6rem;
                 max-width: 67.2rem;
 
-                @include mobile {
+                @include mobile-or-tablet-screen {
                     margin-bottom: 2.4rem;
                 }
             }
@@ -338,7 +338,7 @@ $MIN_HEIGHT_FLOATING: calc(
                 top: 1rem;
             }
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 .dc-checkbox {
                     &__box,
                     & .dc-icon {
@@ -377,14 +377,14 @@ $MIN_HEIGHT_FLOATING: calc(
         }
 
         &__personal-details {
-            @include desktop {
+            @include desktop-screen {
                 .account__scrollbars_container {
                     padding-top: 2.4rem;
                     padding-bottom: 2.4rem;
                 }
             }
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 .account__scrollbars_container {
                     &--grid-layout {
                         display: flex;
@@ -423,13 +423,13 @@ $MIN_HEIGHT_FLOATING: calc(
 
             .account__scrollbars_container {
                 &--grid-layout {
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         display: flex;
                         flex-direction: column;
                     }
                 }
 
-                @include desktop {
+                @include desktop-screen {
                     padding-bottom: 0;
                 }
             }
@@ -464,7 +464,7 @@ $MIN_HEIGHT_FLOATING: calc(
                 flex-wrap: wrap;
             }
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 flex-wrap: wrap;
                 margin-bottom: 2.4rem;
             }
@@ -496,7 +496,7 @@ $MIN_HEIGHT_FLOATING: calc(
             }
         }
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             width: 100%;
             margin-right: unset;
             margin-bottom: 2.4rem;
@@ -535,7 +535,7 @@ $MIN_HEIGHT_FLOATING: calc(
             }
         }
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             height: fit-content;
             width: 100%;
             padding: 2.4rem 1.8rem 2rem;
@@ -550,13 +550,13 @@ $MIN_HEIGHT_FLOATING: calc(
                     display: flex;
                     grid-column-gap: 0.8rem;
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         margin-bottom: 2.4rem;
                         flex-direction: column;
                     }
 
                     &__fieldset {
-                        @include mobile {
+                        @include mobile-or-tablet-screen {
                             width: inherit;
                             max-width: 40rem;
 
@@ -586,7 +586,7 @@ $MIN_HEIGHT_FLOATING: calc(
 
     &__password-wrapper {
         & .account__scrollbars_container--grid-layout {
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 display: flex;
                 flex-direction: column;
             }
@@ -652,7 +652,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;
                     }
@@ -663,7 +663,7 @@ $MIN_HEIGHT_FLOATING: calc(
                 width: 12.8rem;
                 height: 12.8rem;
 
-                @include desktop {
+                @include desktop-screen {
                     margin-top: 8rem;
                 }
             }
@@ -689,18 +689,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;
             }
@@ -731,14 +731,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;
@@ -764,7 +764,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);
                     }
@@ -782,7 +782,7 @@ $MIN_HEIGHT_FLOATING: calc(
                     width: 5rem;
                     margin: 0 0.6rem;
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         margin: 1.1rem 0;
                     }
                 }
@@ -795,12 +795,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;
             }
         }
@@ -809,7 +809,7 @@ $MIN_HEIGHT_FLOATING: calc(
     .dashboard__message-content {
         margin-top: 8rem;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             margin-top: 4rem;
         }
     }
@@ -845,7 +845,7 @@ $MIN_HEIGHT_FLOATING: calc(
                 height: 100%;
             }
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 flex-direction: column;
                 overflow-y: auto;
                 overflow-x: hidden;
@@ -856,7 +856,7 @@ $MIN_HEIGHT_FLOATING: calc(
             margin-bottom: 1.5rem;
             margin-left: 1.2rem;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 margin-right: 1.2rem;
             }
         }
@@ -866,7 +866,7 @@ $MIN_HEIGHT_FLOATING: calc(
             width: 40rem;
             margin: 2.7rem auto 0;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 width: 100%;
                 max-width: 40rem;
             }
@@ -891,7 +891,7 @@ $MIN_HEIGHT_FLOATING: calc(
         &__timeline {
             padding: 0 1.4rem;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 margin-left: 1.2rem;
             }
         }
@@ -972,7 +972,7 @@ $MIN_HEIGHT_FLOATING: calc(
             }
         }
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             &__list {
                 width: 90%;
                 margin: 1rem auto;
@@ -1021,7 +1021,7 @@ $MIN_HEIGHT_FLOATING: calc(
     }
 
     .leave-confirm {
-        @include mobile {
+        @include mobile-or-tablet-screen {
             &__message-icon {
                 width: 93px;
             }
@@ -1039,7 +1039,7 @@ $MIN_HEIGHT_FLOATING: calc(
     .submit-success {
         margin-top: 100px;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             &__message-icon {
                 width: 96px;
                 height: 90px;
@@ -1072,7 +1072,7 @@ $MIN_HEIGHT_FLOATING: calc(
             overflow-y: hidden;
         }
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             height: 100%;
         }
     }
@@ -1109,7 +1109,7 @@ $MIN_HEIGHT_FLOATING: calc(
         }
     }
 
-    @include mobile {
+    @include mobile-or-tablet-screen {
         height: 100%;
         margin: 0;
     }
@@ -1143,7 +1143,7 @@ $MIN_HEIGHT_FLOATING: calc(
             &-dashboard {
                 width: calc(100vw - 33rem);
 
-                @include mobile {
+                @include mobile-or-tablet-screen {
                     width: 100%;
 
                     button {
@@ -1157,7 +1157,7 @@ $MIN_HEIGHT_FLOATING: calc(
             margin-top: 2.4rem;
             align-self: center;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 width: 100%;
             }
         }
@@ -1178,7 +1178,7 @@ $MIN_HEIGHT_FLOATING: calc(
             margin-right: 0.5em;
             flex: 1;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 margin-bottom: 2.4rem;
             }
         }
@@ -1192,7 +1192,7 @@ $MIN_HEIGHT_FLOATING: calc(
                 margin-bottom: 4em; // The gap for the error message is dependent on the font-size, better to be `em` instead of `rem`
             }
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 min-width: 100%;
             }
         }
@@ -1389,7 +1389,7 @@ $MIN_HEIGHT_FLOATING: calc(
             font-weight: bold;
         }
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             &:not(:first-child):not(:last-child) {
                 margin: 0;
             }
@@ -1405,7 +1405,7 @@ $MIN_HEIGHT_FLOATING: calc(
         }
     }
 
-    @include mobile {
+    @include mobile-or-tablet-screen {
         display: grid;
         grid-gap: 2.4rem;
         grid-template-columns: 1fr 1fr 1fr;
@@ -1453,7 +1453,7 @@ $MIN_HEIGHT_FLOATING: calc(
 }
 
 .dc-modal__container_sent-email__modal {
-    @include mobile {
+    @include mobile-or-tablet-screen {
         height: 42rem !important;
         overflow-y: scroll !important;
     }
@@ -1511,7 +1511,7 @@ $MIN_HEIGHT_FLOATING: calc(
                 @include typeface(--paragraph-center-bold-red, none);
             }
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 width: 300px;
                 height: 272px;
             }
@@ -1536,7 +1536,7 @@ $MIN_HEIGHT_FLOATING: calc(
         &-field {
             margin-bottom: 3.2rem;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 margin-bottom: 2.4rem;
             }
 
@@ -1561,7 +1561,7 @@ $MIN_HEIGHT_FLOATING: calc(
             margin: 0.5rem 0 0.8rem;
         }
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             &:first-child {
                 & > p {
                     padding-top: 2.4rem;
@@ -1579,7 +1579,7 @@ $MIN_HEIGHT_FLOATING: calc(
             padding-left: 3%;
             list-style-type: disc;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 padding-left: 5%;
             }
 
@@ -1608,7 +1608,7 @@ $MIN_HEIGHT_FLOATING: calc(
         align-self: flex-end;
         background-color: transparent;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             align-self: center;
         }
     }
@@ -1619,7 +1619,7 @@ $MIN_HEIGHT_FLOATING: calc(
             margin-inline-end: 10px;
             float: right;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 margin-top: -8px;
                 margin-inline-end: 10px;
                 float: right;
@@ -1630,7 +1630,7 @@ $MIN_HEIGHT_FLOATING: calc(
             margin-top: 2.4rem;
             float: right;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 float: none;
                 margin: 2.4rem auto 3.2rem;
             }
@@ -1675,7 +1675,7 @@ $MIN_HEIGHT_FLOATING: calc(
             margin-top: 0.8rem;
 
             &-wrapper {
-                @include mobile {
+                @include mobile-or-tablet-screen {
                     margin-bottom: 5.6rem;
                 }
             }
@@ -1692,7 +1692,7 @@ $MIN_HEIGHT_FLOATING: calc(
         }
     }
 
-    @include mobile {
+    @include mobile-or-tablet-screen {
         width: calc(100% - 3rem);
         margin: 0 auto;
 
@@ -1705,7 +1705,7 @@ $MIN_HEIGHT_FLOATING: calc(
                     margin: 0.8rem 0;
                     background-color: var(--general-main-1);
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         position: fixed;
                         bottom: 0;
                         left: 0;
@@ -1729,7 +1729,7 @@ $MIN_HEIGHT_FLOATING: calc(
 
 /* stylelint-disable */
 .dc-modal__container_closing-account-reasons {
-    @include mobile {
+    @include mobile-or-tablet-screen {
         max-height: 70vh;
     }
 
@@ -1747,7 +1747,7 @@ $MIN_HEIGHT_FLOATING: calc(
         padding: 3.2rem;
         width: 440px;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             width: unset;
         }
 
@@ -1759,7 +1759,7 @@ $MIN_HEIGHT_FLOATING: calc(
                 width: 10.3rem;
             }
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 background: unset;
             }
         }
@@ -1845,7 +1845,7 @@ $MIN_HEIGHT_FLOATING: calc(
             margin: 1.6rem 2.4rem;
         }
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             &__button {
                 margin: 1.6rem;
             }
@@ -1865,7 +1865,7 @@ $MIN_HEIGHT_FLOATING: calc(
         position: absolute;
         width: 87%;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             width: 70%;
         }
     }
@@ -1876,7 +1876,7 @@ $MIN_HEIGHT_FLOATING: calc(
     width: 100%;
     overflow: hidden;
 
-    @include mobile {
+    @include mobile-or-tablet-screen {
         margin-top: 2.4rem;
     }
 
@@ -1887,14 +1887,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;
         }
@@ -1943,7 +1943,7 @@ $MIN_HEIGHT_FLOATING: calc(
                 align-items: center;
                 margin-top: 3rem;
 
-                @include mobile {
+                @include mobile-or-tablet-screen {
                     display: flex;
                 }
 
@@ -1953,7 +1953,7 @@ $MIN_HEIGHT_FLOATING: calc(
                     width: 100%;
                     flex-grow: 4;
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         width: 100%;
                     }
                 }
@@ -1964,7 +1964,7 @@ $MIN_HEIGHT_FLOATING: calc(
                     align-self: flex-start;
                     flex-grow: 1;
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         width: 100%;
                     }
                 }
@@ -1974,19 +1974,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;
                 }
@@ -2000,7 +2000,7 @@ $MIN_HEIGHT_FLOATING: calc(
                     color: var(--text-less-prominent);
                     -webkit-text-fill-color: var(--text-less-prominent);
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         width: 100%;
                     }
                 }
@@ -2008,13 +2008,13 @@ $MIN_HEIGHT_FLOATING: calc(
                 &-photo {
                     margin-bottom: 35px;
 
-                    @include mobile {
+                    @include mobile-or-tablet-screen {
                         width: 100%;
                         margin-left: 0;
                         margin-top: 1.6rem;
                     }
 
-                    @include desktop {
+                    @include desktop-screen {
                         .dc-input {
                             flex-grow: 8;
                         }
@@ -2049,7 +2049,7 @@ $MIN_HEIGHT_FLOATING: calc(
         margin-right: 25px;
         overflow: visible;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             margin-right: 8px;
         }
 
@@ -2081,7 +2081,7 @@ $MIN_HEIGHT_FLOATING: calc(
         padding: 2rem auto !important;
         width: 72%;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             width: 100%;
         }
 
@@ -2109,7 +2109,7 @@ $MIN_HEIGHT_FLOATING: calc(
     }
 
     & .account__scrollbars_container--grid-layout {
-        @include mobile {
+        @include mobile-or-tablet-screen {
             display: flex;
             flex-direction: column;
         }
@@ -2124,7 +2124,7 @@ $MIN_HEIGHT_FLOATING: calc(
     &-img {
         padding: 2.4rem 0;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             width: 100%;
             height: auto;
         }
@@ -2158,7 +2158,7 @@ $MIN_HEIGHT_FLOATING: calc(
     position: relaitve;
     background-color: var(--status-warning-transparent);
 
-    @include mobile {
+    @include mobile-or-tablet-screen {
         width: 32.8rem;
         margin: 1rem;
     }
diff --git a/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.scss b/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.scss
index 785498651f19..33456b730287 100644
--- a/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.scss
+++ b/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.scss
@@ -10,7 +10,7 @@
     }
 
     &__content {
-        @include mobile {
+        @include mobile-or-tablet-screen {
             padding: 1.4rem 1.6rem;
             width: 25rem;
         }
diff --git a/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.tsx b/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.tsx
index 5d7496054639..6743a00a2995 100644
--- a/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.tsx
+++ b/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.tsx
@@ -1,19 +1,17 @@
 import React, { useEffect } from 'react';
-import './real-account-creation-banner.scss';
+import { useDevice } from '@deriv-com/ui';
 import { getUrlBase, Jurisdiction } from '@deriv/shared';
 import { Analytics } from '@deriv-com/analytics';
 import { Localize } from '@deriv/translations';
 import { Text, Button } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
+import './real-account-creation-banner.scss';
 
 const RealAccountCreationBanner = observer(() => {
-    const {
-        ui: { is_mobile },
-    } = useStore();
-
+    const { isDesktop } = useDevice();
     const { ui } = useStore();
     const { openRealAccountSignup, is_dark_mode_on } = ui;
-    const device = is_mobile ? 'mobile' : 'desktop';
+    const device = !isDesktop ? 'mobile' : 'desktop';
 
     const handleClick = () => {
         Analytics.trackEvent('ce_tradershub_banner', {
@@ -42,7 +40,7 @@ const RealAccountCreationBanner = observer(() => {
             />
 
             <div className='real-account-creation-banner__content'>
-                <Text size={is_mobile ? 'xs' : 'm'}>
+                <Text size={!isDesktop ? 'xs' : 'm'}>
                     <Localize i18n_default_text='Get a real account to deposit money and start trading.' />
                 </Text>
                 <Button type='button' onClick={handleClick} primary>