diff --git a/packages/components/src/components/empty-state/empty-state.scss b/packages/components/src/components/empty-state/empty-state.scss
index 93daeb306e86..587a970ead58 100644
--- a/packages/components/src/components/empty-state/empty-state.scss
+++ b/packages/components/src/components/empty-state/empty-state.scss
@@ -5,4 +5,16 @@
     flex-direction: column;
     align-items: center;
     gap: 2.4rem;
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        gap: 0.8rem;
+    }
+
+    &__action .dc-btn__text {
+        @include mobile {
+            font-size: var(--text-size-xxs);
+        }
+    }
 }
diff --git a/packages/components/src/components/empty-state/empty-state.tsx b/packages/components/src/components/empty-state/empty-state.tsx
index cdb71c835ade..21f9cf1bbca6 100644
--- a/packages/components/src/components/empty-state/empty-state.tsx
+++ b/packages/components/src/components/empty-state/empty-state.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { isMobile } from '@deriv/shared';
 import Button from '../button';
 import Icon from '../icon';
 import Text from '../text';
@@ -20,16 +21,18 @@ export type TProps = {
 const EmptyState: React.FC<TProps> = ({ icon, title, description, action }) => (
     <div className='empty-state'>
         {icon && <Icon icon={icon} size={128} />}
-        {title && (
-            <Text weight='bold' align='center' data-testid='dt_empty_state_title'>
-                {title}
-            </Text>
-        )}
-        {description && (
-            <Text align='center' data-testid='dt_empty_state_description'>
-                {description}
-            </Text>
-        )}
+        <div className='empty-state__content'>
+            {title && (
+                <Text weight='bold' align='center' data-testid='dt_empty_state_title' size={isMobile() ? 'xs' : 's'}>
+                    {title}
+                </Text>
+            )}
+            {description && (
+                <Text align='center' data-testid='dt_empty_state_description' size={isMobile() ? 'xs' : 's'}>
+                    {description}
+                </Text>
+            )}
+        </div>
         {action && (
             <Button
                 large
@@ -39,6 +42,7 @@ const EmptyState: React.FC<TProps> = ({ icon, title, description, action }) => (
                 primary={action.primary || true}
                 tertiary={action.tertiary}
                 is_disabled={action.disabled}
+                className='empty-state__action'
                 data-testid='dt_empty_state_action'
             />
         )}