diff --git a/.changeset/rare-poems-happen.md b/.changeset/rare-poems-happen.md
new file mode 100644
index 000000000..d80d07393
--- /dev/null
+++ b/.changeset/rare-poems-happen.md
@@ -0,0 +1,9 @@
+---
+"@logto/experience": patch
+"@logto/demo-app": patch
+"@logto/elements": patch
+"@logto/console": patch
+"@logto/core": patch
+---
+
+improve RTL language support
diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx
index c5f3a5022..d24380d6c 100644
--- a/packages/console/src/App.tsx
+++ b/packages/console/src/App.tsx
@@ -123,6 +123,7 @@ function Providers() {
             // hook will cause a re-render following some bugs here. This still works for the
             // initial render, so we're good for now. Consider refactoring this in the future.
             lang: i18next.language,
+            dir: i18next.dir(),
           }}
         />
         <Toast />
diff --git a/packages/console/src/cloud/pages/Main/InvitationList/index.module.scss b/packages/console/src/cloud/pages/Main/InvitationList/index.module.scss
index 3f223613f..d5032092e 100644
--- a/packages/console/src/cloud/pages/Main/InvitationList/index.module.scss
+++ b/packages/console/src/cloud/pages/Main/InvitationList/index.module.scss
@@ -43,7 +43,7 @@
       }
 
       .tag {
-        margin-left: _.unit(-2);
+        margin-inline-start: _.unit(-2);
       }
     }
 
diff --git a/packages/console/src/components/AppError/index.module.scss b/packages/console/src/components/AppError/index.module.scss
index 8f6a541ef..df3de2080 100644
--- a/packages/console/src/components/AppError/index.module.scss
+++ b/packages/console/src/components/AppError/index.module.scss
@@ -36,7 +36,7 @@
     .expander {
       display: inline-flex;
       align-items: center;
-      margin-left: _.unit(2);
+      margin-inline-start: _.unit(2);
       margin-top: _.unit(2);
       color: var(--color-primary);
       cursor: pointer;
diff --git a/packages/console/src/components/AuditLogTable/components/EventName/index.module.scss b/packages/console/src/components/AuditLogTable/components/EventName/index.module.scss
index 86794a94c..42118ea01 100644
--- a/packages/console/src/components/AuditLogTable/components/EventName/index.module.scss
+++ b/packages/console/src/components/AuditLogTable/components/EventName/index.module.scss
@@ -8,7 +8,7 @@
 
   .icon {
     flex-shrink: 0;
-    margin-right: _.unit(1);
+    margin-inline-end: _.unit(1);
     width: 24px;
     height: 24px;
 
diff --git a/packages/console/src/components/AuditLogTable/index.module.scss b/packages/console/src/components/AuditLogTable/index.module.scss
index 46645153a..98e268152 100644
--- a/packages/console/src/components/AuditLogTable/index.module.scss
+++ b/packages/console/src/components/AuditLogTable/index.module.scss
@@ -12,11 +12,11 @@
 
   .eventSelector {
     width: 300px;
-    margin-left: _.unit(2);
+    margin-inline-start: _.unit(2);
   }
 
   .applicationSelector {
     width: 250px;
-    margin-left: _.unit(2);
+    margin-inline-start: _.unit(2);
   }
 }
diff --git a/packages/console/src/components/ConnectorForm/BasicForm/index.module.scss b/packages/console/src/components/ConnectorForm/BasicForm/index.module.scss
index 8bea1b809..c35747433 100644
--- a/packages/console/src/components/ConnectorForm/BasicForm/index.module.scss
+++ b/packages/console/src/components/ConnectorForm/BasicForm/index.module.scss
@@ -15,10 +15,7 @@
   border-radius: 8px;
   display: flex;
   align-items: center;
-
-  .icon {
-    margin-right: _.unit(3);
-  }
+  gap: _.unit(3);
 
   .content {
     span {
@@ -26,7 +23,7 @@
     }
 
     > ul {
-      padding-left: _.unit(3);
+      padding-inline-start: _.unit(3);
     }
   }
 }
diff --git a/packages/console/src/components/ConnectorForm/BasicForm/index.tsx b/packages/console/src/components/ConnectorForm/BasicForm/index.tsx
index 0711588a6..027744620 100644
--- a/packages/console/src/components/ConnectorForm/BasicForm/index.tsx
+++ b/packages/console/src/components/ConnectorForm/BasicForm/index.tsx
@@ -103,9 +103,7 @@ function BasicForm({ isAllowEditTarget, isStandard, conflictConnectorName }: Pro
         </div>
         {conflictConnectorName && (
           <div className={styles.error}>
-            <div className={styles.icon}>
-              <Error />
-            </div>
+            <Error />
             <div className={styles.content}>
               <Trans
                 components={{
diff --git a/packages/console/src/components/ConnectorForm/ConfigForm/ConfigFormFields/index.module.scss b/packages/console/src/components/ConnectorForm/ConfigForm/ConfigFormFields/index.module.scss
index 6da111187..3a855edb2 100644
--- a/packages/console/src/components/ConnectorForm/ConfigForm/ConfigFormFields/index.module.scss
+++ b/packages/console/src/components/ConnectorForm/ConfigForm/ConfigFormFields/index.module.scss
@@ -8,5 +8,5 @@
 
 .multiSelect {
   padding-top: _.unit(1);
-  padding-left: _.unit(1);
+  padding-inline-start: _.unit(1);
 }
diff --git a/packages/console/src/components/ConnectorTester/index.module.scss b/packages/console/src/components/ConnectorTester/index.module.scss
index e3f795a45..ef752ea05 100644
--- a/packages/console/src/components/ConnectorTester/index.module.scss
+++ b/packages/console/src/components/ConnectorTester/index.module.scss
@@ -10,7 +10,7 @@
   }
 
   .send {
-    margin-left: _.unit(1.5);
+    margin-inline-start: _.unit(1.5);
     margin-bottom: 1px;
   }
 }
diff --git a/packages/console/src/components/CreateConnectorForm/ConnectorRadioGroup/ConnectorRadio/index.module.scss b/packages/console/src/components/CreateConnectorForm/ConnectorRadioGroup/ConnectorRadio/index.module.scss
index 87ddf6fb4..6a0b97170 100644
--- a/packages/console/src/components/CreateConnectorForm/ConnectorRadioGroup/ConnectorRadio/index.module.scss
+++ b/packages/console/src/components/CreateConnectorForm/ConnectorRadioGroup/ConnectorRadio/index.module.scss
@@ -3,15 +3,14 @@
 .connector {
   font: var(--font-body-2);
   display: flex;
+  gap: _.unit(3);
 
   .content {
     flex: 1;
-    margin-left: _.unit(3);
 
     .name {
       font: var(--font-label-2);
       @include _.multi-line-ellipsis(1);
-      padding-right: _.unit(3);
     }
 
     .connectorId {
diff --git a/packages/console/src/components/CreateTenantModal/EnvTagOptionContent/index.module.scss b/packages/console/src/components/CreateTenantModal/EnvTagOptionContent/index.module.scss
index 905497329..0b30c20e7 100644
--- a/packages/console/src/components/CreateTenantModal/EnvTagOptionContent/index.module.scss
+++ b/packages/console/src/components/CreateTenantModal/EnvTagOptionContent/index.module.scss
@@ -39,5 +39,5 @@
 }
 
 .planNameTag {
-  margin-left: _.unit(1);
+  margin-inline-start: _.unit(1);
 }
diff --git a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/index.tsx b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/index.tsx
index e69dcb606..fa3edbf8e 100644
--- a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/index.tsx
+++ b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/index.tsx
@@ -12,6 +12,7 @@ import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button, { type Props as ButtonProps } from '@/ds-components/Button';
 import DangerousRaw from '@/ds-components/DangerousRaw';
 import DynamicT from '@/ds-components/DynamicT';
+import FlipOnRtl from '@/ds-components/FlipOnRtl';
 import TextLink from '@/ds-components/TextLink';
 
 import FeaturedSkuContent from './FeaturedSkuContent';
@@ -67,7 +68,11 @@ function SkuCardItem({ sku, onSelect, buttonProps }: Props) {
               isTrailingIcon
               href={pricingLink}
               targetBlank="noopener"
-              icon={<ArrowRight className={styles.linkIcon} />}
+              icon={
+                <FlipOnRtl>
+                  <ArrowRight className={styles.linkIcon} />
+                </FlipOnRtl>
+              }
               className={styles.link}
             >
               <DynamicT forKey="upsell.create_tenant.view_all_features" />
diff --git a/packages/console/src/components/DetailsPage/DetailsPageHeader/index.tsx b/packages/console/src/components/DetailsPage/DetailsPageHeader/index.tsx
index d72e741f6..154431509 100644
--- a/packages/console/src/components/DetailsPage/DetailsPageHeader/index.tsx
+++ b/packages/console/src/components/DetailsPage/DetailsPageHeader/index.tsx
@@ -105,12 +105,13 @@ function DetailsPageHeader({
   additionalCustomElement,
   actionMenuItems,
 }: Props) {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { t, i18n } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [showIcon, setShowIcon] = useState(true);
   const [isCompact, setIsCompact] = useState(false);
   const [showAdditionalCustomElement, setShowAdditionalCustomElement] = useState(true);
   const identifierRef = useRef<HTMLDivElement>(null);
   const operationRef = useRef<HTMLDivElement>(null);
+  const isRtl = i18n.dir() === 'rtl';
 
   useWindowResize(() => {
     if (!identifierRef.current || !operationRef.current) {
@@ -119,37 +120,45 @@ function DetailsPageHeader({
 
     // Dynamically handle the visibility of the icon and action button styles. Sources:
     // https://www.figma.com/file/hqAWH3Di8gkiV5TXAt6juO/%F0%9F%8C%B9-%5BAC%5D-Layout-UI-Optimization?type=design&node-id=896-75673
-    const { right: identifierRightEdge, width: identifierWidth } =
-      identifierRef.current.getBoundingClientRect();
-    const operationLeftEdge = operationRef.current.getBoundingClientRect().left;
+    const {
+      left: identifierLeftEdge,
+      right: identifierRightEdge,
+      width: identifierWidth,
+    } = identifierRef.current.getBoundingClientRect();
+
+    const { left: operationLeftEdge, right: operationRightEdge } =
+      operationRef.current.getBoundingClientRect();
+
+    const identifierEdge = isRtl ? identifierLeftEdge : identifierRightEdge;
+    const operationEdge = isRtl ? operationRightEdge : operationLeftEdge;
 
     // When the operation buttons are in regular form, and the gap between the operation area and the identifier copy box is
     // only 24px. This means the window is shrinking and reaching the 1st breakpoint. Set operation buttons to compact form.
-    if (!isCompact && operationLeftEdge - identifierRightEdge <= 24) {
+    if (!isCompact && Math.abs(operationEdge - identifierEdge) <= 24) {
       setIsCompact(true);
     }
 
     // When the operation buttons are compact, and the gap between the operation area and the identifier copy box is only 24px.
     // This means the window keeps shrinking and reaching the 2nd breakpoint. Hide the main icon on the very left.
-    if (isCompact && showIcon && operationLeftEdge - identifierRightEdge <= 24) {
+    if (isCompact && showIcon && Math.abs(operationEdge - identifierEdge) <= 24) {
       setShowIcon(false);
     }
 
     // When the identifier copy box is 50px, and the gap between the operation area and the identifier copy box is only 24px.
     // This is when the page header is extremely narrow and barely has space to hold the identifier. Hide the additional custom element.
-    if (identifierWidth <= 50 && operationLeftEdge - identifierRightEdge <= 24) {
+    if (identifierWidth <= 50 && Math.abs(operationEdge - identifierEdge) <= 24) {
       setShowAdditionalCustomElement(false);
     }
 
     // When the gap between the operation buttons and the identifier copy box is greater than 80px, show the additional custom element.
-    if (!showAdditionalCustomElement && operationLeftEdge - identifierRightEdge > 80) {
+    if (!showAdditionalCustomElement && Math.abs(operationEdge - identifierEdge) > 80) {
       setShowAdditionalCustomElement(true);
     }
 
     // When the operation buttons are compact, icon is hidden, and the operation area is 120px away from the identifier copy box.
     // This means the window is enlarging and there is enough room to hold the icon. Show the icon.
     // 120px is a bit greater than the space required to hold the icon (60px + 24px padding), in order to avoid jittering.
-    if (isCompact && !showIcon && operationLeftEdge - identifierRightEdge > 120) {
+    if (isCompact && !showIcon && Math.abs(operationEdge - identifierEdge) > 120) {
       setShowIcon(true);
     }
 
@@ -160,7 +169,7 @@ function DetailsPageHeader({
     if (
       isCompact &&
       showIcon &&
-      operationLeftEdge - identifierRightEdge > (additionalCustomElement ? 240 : 180)
+      Math.abs(operationEdge - identifierEdge) > (additionalCustomElement ? 240 : 180)
     ) {
       setIsCompact(false);
     }
diff --git a/packages/console/src/components/DetailsPage/Skeleton/index.module.scss b/packages/console/src/components/DetailsPage/Skeleton/index.module.scss
index d7a86f5d7..311aa5ad3 100644
--- a/packages/console/src/components/DetailsPage/Skeleton/index.module.scss
+++ b/packages/console/src/components/DetailsPage/Skeleton/index.module.scss
@@ -16,12 +16,12 @@
     padding: _.unit(6);
     border-radius: 16px;
     background-color: var(--color-layer-1);
+    gap: _.unit(6);
 
     .icon {
       width: 60px;
       height: 60px;
       border-radius: 12px;
-      margin-right: _.unit(6);
       @include _.shimmering-animation;
     }
 
diff --git a/packages/console/src/components/DetailsPage/index.tsx b/packages/console/src/components/DetailsPage/index.tsx
index 2f4f86774..0d3d6384a 100644
--- a/packages/console/src/components/DetailsPage/index.tsx
+++ b/packages/console/src/components/DetailsPage/index.tsx
@@ -6,6 +6,7 @@ import { type To } from 'react-router-dom';
 import Back from '@/assets/icons/back.svg?react';
 import type DangerousRaw from '@/ds-components/DangerousRaw';
 import DynamicT from '@/ds-components/DynamicT';
+import FlipOnRtl from '@/ds-components/FlipOnRtl';
 import TextLink from '@/ds-components/TextLink';
 import type { RequestError } from '@/hooks/use-api';
 
@@ -35,7 +36,15 @@ function DetailsPage({
 }: Props) {
   return (
     <div className={classNames(styles.container, className)}>
-      <TextLink to={backLink} icon={<Back />} className={styles.backLink}>
+      <TextLink
+        to={backLink}
+        icon={
+          <FlipOnRtl>
+            <Back />
+          </FlipOnRtl>
+        }
+        className={styles.backLink}
+      >
         {typeof backLinkTitle === 'string' ? <DynamicT forKey={backLinkTitle} /> : backLinkTitle}
       </TextLink>
       {isLoading ? (
diff --git a/packages/console/src/components/EntitiesTransfer/components/EntityItem/index.module.scss b/packages/console/src/components/EntitiesTransfer/components/EntityItem/index.module.scss
index 78c459c72..50b1ae8d4 100644
--- a/packages/console/src/components/EntitiesTransfer/components/EntityItem/index.module.scss
+++ b/packages/console/src/components/EntitiesTransfer/components/EntityItem/index.module.scss
@@ -10,10 +10,10 @@
   flex: 1 1 0;
   font: var(--font-body-2);
   @include _.text-ellipsis;
-  margin-left: _.unit(2);
+  margin-inline-start: _.unit(2);
   max-width: fit-content;
 }
 
 .suspended {
-  margin-left: _.unit(1);
+  margin-inline-start: _.unit(1);
 }
diff --git a/packages/console/src/components/EntitiesTransfer/components/SourceEntityItem/index.module.scss b/packages/console/src/components/EntitiesTransfer/components/SourceEntityItem/index.module.scss
index 1f4ccdfe2..5c84462b1 100644
--- a/packages/console/src/components/EntitiesTransfer/components/SourceEntityItem/index.module.scss
+++ b/packages/console/src/components/EntitiesTransfer/components/SourceEntityItem/index.module.scss
@@ -17,12 +17,12 @@
     flex: 1 1 0;
     font: var(--font-body-2);
     @include _.text-ellipsis;
-    margin-left: _.unit(2);
+    margin-inline-start: _.unit(2);
     max-width: fit-content;
   }
 
   .suspended {
-    margin-left: _.unit(1);
+    margin-inline-start: _.unit(1);
   }
 
   &:hover {
diff --git a/packages/console/src/components/EntitiesTransfer/components/TargetEntityItem/index.module.scss b/packages/console/src/components/EntitiesTransfer/components/TargetEntityItem/index.module.scss
index 0c01be48e..7b530b14e 100644
--- a/packages/console/src/components/EntitiesTransfer/components/TargetEntityItem/index.module.scss
+++ b/packages/console/src/components/EntitiesTransfer/components/TargetEntityItem/index.module.scss
@@ -22,7 +22,7 @@
       flex: 1 1 0;
       font: var(--font-body-2);
       @include _.text-ellipsis;
-      margin-left: _.unit(2);
+      margin-inline-start: _.unit(2);
       max-width: fit-content;
     }
 
diff --git a/packages/console/src/components/Guide/GuideCard/index.module.scss b/packages/console/src/components/Guide/GuideCard/index.module.scss
index bf6890d33..e591bd63d 100644
--- a/packages/console/src/components/Guide/GuideCard/index.module.scss
+++ b/packages/console/src/components/Guide/GuideCard/index.module.scss
@@ -58,12 +58,12 @@
     display: flex;
     align-items: flex-start; // align name and the feature tag to the top
     justify-content: space-between;
+    gap: _.unit(1);
   }
 
   .name {
     font: var(--font-label-2);
     color: var(--color-text);
-    margin-right: _.unit(1);
   }
 
   .description {
diff --git a/packages/console/src/components/Guide/ModalFooter/index.module.scss b/packages/console/src/components/Guide/ModalFooter/index.module.scss
index 39754a73f..df83cab2b 100644
--- a/packages/console/src/components/Guide/ModalFooter/index.module.scss
+++ b/packages/console/src/components/Guide/ModalFooter/index.module.scss
@@ -15,12 +15,12 @@
     justify-content: space-between;
     max-width: dim.$guide-main-content-max-width;
     margin: 0 auto;
+    gap: _.unit(3);
   }
 
   .text {
     font: var(--font-body-2);
     color: var(--color-text);
-    margin-right: _.unit(3);
     @include _.multi-line-ellipsis(2);
   }
 }
diff --git a/packages/console/src/components/Guide/ModalHeader/index.module.scss b/packages/console/src/components/Guide/ModalHeader/index.module.scss
index 0309365dc..0c4667ee5 100644
--- a/packages/console/src/components/Guide/ModalHeader/index.module.scss
+++ b/packages/console/src/components/Guide/ModalHeader/index.module.scss
@@ -1,11 +1,11 @@
 @use '@/scss/underscore' as _;
 
 .requestSdkButton {
-  margin-right: _.unit(15);
+  margin-inline-end: _.unit(15);
 }
 
 @media screen and (max-width: 918px) {
   .requestSdkButton {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }
diff --git a/packages/console/src/components/Guide/StepsSkeleton/index.module.scss b/packages/console/src/components/Guide/StepsSkeleton/index.module.scss
index e9c657a4a..b0d079265 100644
--- a/packages/console/src/components/Guide/StepsSkeleton/index.module.scss
+++ b/packages/console/src/components/Guide/StepsSkeleton/index.module.scss
@@ -9,12 +9,12 @@
   background-color: var(--color-layer-1);
   max-width: dim.$guide-main-content-max-width;
   margin: 0 auto;
+  gap: _.unit(4);
 
   .index {
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    margin-right: _.unit(4);
     @include _.shimmering-animation;
   }
 
diff --git a/packages/console/src/components/Guide/index.module.scss b/packages/console/src/components/Guide/index.module.scss
index f386e683d..0617fc8be 100644
--- a/packages/console/src/components/Guide/index.module.scss
+++ b/packages/console/src/components/Guide/index.module.scss
@@ -88,8 +88,7 @@
     max-width: dim.$guide-main-content-max-width;
 
     > button {
-      margin-right: 0;
-      margin-left: auto;
+      margin-inline: auto 0;
     }
   }
 }
diff --git a/packages/console/src/components/ItemPreview/index.module.scss b/packages/console/src/components/ItemPreview/index.module.scss
index 292e43bf9..8d5d17d8e 100644
--- a/packages/console/src/components/ItemPreview/index.module.scss
+++ b/packages/console/src/components/ItemPreview/index.module.scss
@@ -10,11 +10,11 @@
   }
 
   > div:not(:first-child) {
-    margin-left: _.unit(3);
+    margin-inline-start: _.unit(3);
   }
 
   .content {
-    padding-right: _.unit(4);
+    padding-inline-end: _.unit(4);
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -22,7 +22,7 @@
     margin-top: _.unit(-1);
 
     > div:not(:last-child) {
-      margin-right: _.unit(2);
+      margin-inline-end: _.unit(2);
     }
 
     .meta {
@@ -56,7 +56,7 @@
         align-items: baseline;
 
         .title {
-          margin-right: _.unit(1);
+          margin-inline-end: _.unit(1);
         }
       }
     }
diff --git a/packages/console/src/components/LivePreviewButton/index.tsx b/packages/console/src/components/LivePreviewButton/index.tsx
index c773cfaac..82720c31f 100644
--- a/packages/console/src/components/LivePreviewButton/index.tsx
+++ b/packages/console/src/components/LivePreviewButton/index.tsx
@@ -7,6 +7,7 @@ import ExternalLinkIcon from '@/assets/icons/external-link.svg?react';
 import { AppDataContext } from '@/contexts/AppDataProvider';
 import type { Props as ButtonProps, ButtonType } from '@/ds-components/Button';
 import Button from '@/ds-components/Button';
+import FlipOnRtl from '@/ds-components/FlipOnRtl';
 import { Tooltip } from '@/ds-components/Tip';
 
 import styles from './index.module.scss';
@@ -29,12 +30,14 @@ function LivePreviewButton({ size, type, isDisabled }: Props) {
         disabled={isDisabled}
         title="sign_in_exp.preview.live_preview"
         trailingIcon={
-          <ExternalLinkIcon
-            className={conditional(
-              type !== 'violet' &&
-                classNames(styles.defaultIcon, isDisabled && styles.disabledDefaultIcon)
-            )}
-          />
+          <FlipOnRtl>
+            <ExternalLinkIcon
+              className={conditional(
+                type !== 'violet' &&
+                  classNames(styles.defaultIcon, isDisabled && styles.disabledDefaultIcon)
+              )}
+            />
+          </FlipOnRtl>
         }
         onClick={() => {
           window.open(new URL('/demo-app', tenantEndpoint), '_blank');
diff --git a/packages/console/src/components/Markdown/index.module.scss b/packages/console/src/components/Markdown/index.module.scss
index 4e7b22169..98ab4872f 100644
--- a/packages/console/src/components/Markdown/index.module.scss
+++ b/packages/console/src/components/Markdown/index.module.scss
@@ -77,7 +77,7 @@
         color: var(--color-text);
         padding: _.unit(3);
         border-bottom: 1px solid var(--color-divider);
-        text-align: left;
+        text-align: start;
       }
     }
 
diff --git a/packages/console/src/components/MfaFactorTitle/index.module.scss b/packages/console/src/components/MfaFactorTitle/index.module.scss
index 0973142c4..928f7305b 100644
--- a/packages/console/src/components/MfaFactorTitle/index.module.scss
+++ b/packages/console/src/components/MfaFactorTitle/index.module.scss
@@ -8,9 +8,9 @@
 
 .factorIcon {
   color: var(--color-text-secondary);
-  margin-right: _.unit(3);
+  margin-inline-end: _.unit(3);
 }
 
 .factorTip {
-  margin-left: _.unit(1);
+  margin-inline-start: _.unit(1);
 }
diff --git a/packages/console/src/components/MultiOptionInput/index.module.scss b/packages/console/src/components/MultiOptionInput/index.module.scss
index 933e08bc0..6bd7d31b9 100644
--- a/packages/console/src/components/MultiOptionInput/index.module.scss
+++ b/packages/console/src/components/MultiOptionInput/index.module.scss
@@ -57,7 +57,7 @@
     .delete {
       width: 20px;
       height: 20px;
-      margin-right: _.unit(-0.5);
+      margin-inline-end: _.unit(-0.5);
     }
 
     input {
diff --git a/packages/console/src/components/MultiTextInputField/index.module.scss b/packages/console/src/components/MultiTextInputField/index.module.scss
index 715b900b3..e5f7cfb8b 100644
--- a/packages/console/src/components/MultiTextInputField/index.module.scss
+++ b/packages/console/src/components/MultiTextInputField/index.module.scss
@@ -1,5 +1,5 @@
 @use '@/scss/underscore' as _;
 
 .headlineWithMultiInputs {
-  padding-right: _.unit(9);
+  padding-inline-end: _.unit(9);
 }
diff --git a/packages/console/src/components/OpenExternalLink/index.tsx b/packages/console/src/components/OpenExternalLink/index.tsx
index 649fbde7f..d2fd66ff1 100644
--- a/packages/console/src/components/OpenExternalLink/index.tsx
+++ b/packages/console/src/components/OpenExternalLink/index.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 
 import ExternalLinkIcon from '@/assets/icons/external-link.svg?react';
+import FlipOnRtl from '@/ds-components/FlipOnRtl';
 import IconButton from '@/ds-components/IconButton';
 import { Tooltip } from '@/ds-components/Tip';
 
@@ -18,7 +19,9 @@ function OpenExternalLink({ link }: Props) {
           window.open(link, '_blank');
         }}
       >
-        <ExternalLinkIcon />
+        <FlipOnRtl>
+          <ExternalLinkIcon />
+        </FlipOnRtl>
       </IconButton>
     </Tooltip>
   );
diff --git a/packages/console/src/components/PermissionsTable/index.module.scss b/packages/console/src/components/PermissionsTable/index.module.scss
index 147a324bd..9419074be 100644
--- a/packages/console/src/components/PermissionsTable/index.module.scss
+++ b/packages/console/src/components/PermissionsTable/index.module.scss
@@ -11,7 +11,7 @@
     align-items: center;
 
     .createButton {
-      margin-left: _.unit(2);
+      margin-inline-start: _.unit(2);
     }
   }
 
@@ -25,6 +25,6 @@
   }
 
   .actionColumn {
-    text-align: right;
+    text-align: end;
   }
 }
diff --git a/packages/console/src/components/Region/index.module.scss b/packages/console/src/components/Region/index.module.scss
index 569beaf3f..73727b5e2 100644
--- a/packages/console/src/components/Region/index.module.scss
+++ b/packages/console/src/components/Region/index.module.scss
@@ -4,7 +4,7 @@
   font: var(--font-label-2);
 
   .comingSoon {
-    margin-left: _.unit(1);
+    margin-inline-start: _.unit(1);
     font: var(--font-body-2);
     color: var(--color-text-secondary);
   }
diff --git a/packages/console/src/components/RoleScopesTransfer/components/ResourceItem/index.module.scss b/packages/console/src/components/RoleScopesTransfer/components/ResourceItem/index.module.scss
index d9f39526a..ea63e6f78 100644
--- a/packages/console/src/components/RoleScopesTransfer/components/ResourceItem/index.module.scss
+++ b/packages/console/src/components/RoleScopesTransfer/components/ResourceItem/index.module.scss
@@ -16,7 +16,7 @@
       overflow: hidden;
 
       .caret {
-        margin-right: _.unit(2);
+        margin-inline-end: _.unit(2);
       }
 
       .name {
@@ -28,7 +28,7 @@
         flex-shrink: 0;
         font: var(--font-body-2);
         color: var(--color-text-secondary);
-        margin-left: _.unit(2);
+        margin-inline-start: _.unit(2);
       }
     }
   }
diff --git a/packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.module.scss b/packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.module.scss
index 3936a0fdc..e4908d3f9 100644
--- a/packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.module.scss
+++ b/packages/console/src/components/RolesTransfer/TargetRolesBox/TargetRoleItem/index.module.scss
@@ -12,6 +12,6 @@
   }
 
   .closeIcon {
-    margin-left: _.unit(1);
+    margin-inline-start: _.unit(1);
   }
 }
diff --git a/packages/console/src/components/RolesTransfer/components/RoleInformation/index.module.scss b/packages/console/src/components/RolesTransfer/components/RoleInformation/index.module.scss
index 1ddd688fa..e1b0e9b6a 100644
--- a/packages/console/src/components/RolesTransfer/components/RoleInformation/index.module.scss
+++ b/packages/console/src/components/RolesTransfer/components/RoleInformation/index.module.scss
@@ -13,13 +13,13 @@
   // Todo @xiaoyijun Remove this `count` style together with the dev feature flag
   .count {
     flex-shrink: 0;
-    margin-left: _.unit(2);
+    margin-inline-start: _.unit(2);
     color: var(--color-text-secondary);
   }
 
   .flag {
     flex-shrink: 0;
-    margin-left: _.unit(2);
+    margin-inline-start: _.unit(2);
     color: var(--color-text-secondary);
     display: flex;
     align-items: center;
diff --git a/packages/console/src/components/SignInExperiencePreview/index.module.scss b/packages/console/src/components/SignInExperiencePreview/index.module.scss
index c8d4d83a7..3a30c6daa 100644
--- a/packages/console/src/components/SignInExperiencePreview/index.module.scss
+++ b/packages/console/src/components/SignInExperiencePreview/index.module.scss
@@ -22,7 +22,7 @@
           width: _screenSize.$web-iframe-width;
           height: _screenSize.$web-iframe-height;
           transform: scaleX(_screenSize.$web-scale-x) scaleY(_screenSize.$web-scale-y);
-          margin-left: _screenSize.$web-to-wrapper-offset-x;
+          margin-inline-start: _screenSize.$web-to-wrapper-offset-x;
           margin-top: _screenSize.$web-to-wrapper-offset-y;
         }
       }
@@ -79,7 +79,7 @@
           width: _screenSize.$mobile-iframe-width;
           height: _screenSize.$mobile-iframe-height;
           transform: scaleX(_screenSize.$mobile-scale-x) scaleY(_screenSize.$mobile-scale-y);
-          margin-left: _screenSize.$mobile-to-wrapper-offset-x;
+          margin-inline-start: _screenSize.$mobile-to-wrapper-offset-x;
           margin-top: _screenSize.$mobile-to-wrapper-offset-y;
         }
       }
diff --git a/packages/console/src/components/SubmitFormChangesActionBar/index.module.scss b/packages/console/src/components/SubmitFormChangesActionBar/index.module.scss
index cd88d406c..6a98680b6 100644
--- a/packages/console/src/components/SubmitFormChangesActionBar/index.module.scss
+++ b/packages/console/src/components/SubmitFormChangesActionBar/index.module.scss
@@ -19,10 +19,7 @@
     border-radius: 12px 12px 0 0;
     transform: translateY(100%);
     transition: transform 0.3s ease-out;
-
-    > button + button {
-      margin-left: _.unit(3);
-    }
+    gap: _.unit(3);
   }
 
   &.active {
diff --git a/packages/console/src/components/Topbar/ContactModal/index.module.scss b/packages/console/src/components/Topbar/ContactModal/index.module.scss
index cfb97e140..9efeda57b 100644
--- a/packages/console/src/components/Topbar/ContactModal/index.module.scss
+++ b/packages/console/src/components/Topbar/ContactModal/index.module.scss
@@ -9,7 +9,7 @@
     padding: _.unit(3) _.unit(4);
 
     .icon {
-      margin-right: _.unit(6);
+      margin-inline-end: _.unit(6);
     }
 
     &:not(:last-child) {
diff --git a/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss b/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss
index e7e739bf1..6e902a625 100644
--- a/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss
+++ b/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss
@@ -20,7 +20,7 @@
   .info {
     display: flex;
     flex-direction: column;
-    margin-right: _.unit(4);
+    margin-inline-end: _.unit(4);
 
     .meta {
       display: flex;
diff --git a/packages/console/src/components/Topbar/TenantSelector/index.module.scss b/packages/console/src/components/Topbar/TenantSelector/index.module.scss
index 512d64d2a..4d9b72540 100644
--- a/packages/console/src/components/Topbar/TenantSelector/index.module.scss
+++ b/packages/console/src/components/Topbar/TenantSelector/index.module.scss
@@ -11,8 +11,8 @@ $dropdown-item-height: 40px;
   display: flex;
   align-items: center;
   padding: _.unit(1);
-  padding-left: _.unit(2);
-  margin-left: _.unit(4);
+  padding-inline-start: _.unit(2);
+  margin-inline-start: _.unit(4);
   max-width: 500px;
   border-radius: _.unit(2);
   transition: background-color 0.2s ease-in-out;
@@ -62,6 +62,13 @@ $dropdown-item-height: 40px;
     pointer-events: none;
     cursor: default;
   }
+
+  &.rtl {
+    &::before {
+      left: unset;
+      right: _.unit(-3);
+    }
+  }
 }
 
 .dropdown {
diff --git a/packages/console/src/components/Topbar/TenantSelector/index.tsx b/packages/console/src/components/Topbar/TenantSelector/index.tsx
index f882a351f..3b11c599d 100644
--- a/packages/console/src/components/Topbar/TenantSelector/index.tsx
+++ b/packages/console/src/components/Topbar/TenantSelector/index.tsx
@@ -1,4 +1,5 @@
 import { OrganizationInvitationStatus } from '@logto/schemas';
+import classNames from 'classnames';
 import { useContext, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -20,7 +21,7 @@ import TenantInvitationDropdownItem from './TenantInvitationDropdownItem';
 import styles from './index.module.scss';
 
 export default function TenantSelector() {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { t, i18n } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const {
     tenants,
     prependTenant,
@@ -44,7 +45,7 @@ export default function TenantSelector() {
       <div
         ref={anchorRef}
         tabIndex={0}
-        className={styles.currentTenantCard}
+        className={classNames(styles.currentTenantCard, styles[i18n.dir()])}
         role="button"
         onKeyDown={onKeyDownHandler(() => {
           setShowDropdown(true);
diff --git a/packages/console/src/components/Topbar/UserInfo/SubMenu/index.module.scss b/packages/console/src/components/Topbar/UserInfo/SubMenu/index.module.scss
index 380ff74ee..55775b8f7 100644
--- a/packages/console/src/components/Topbar/UserInfo/SubMenu/index.module.scss
+++ b/packages/console/src/components/Topbar/UserInfo/SubMenu/index.module.scss
@@ -8,6 +8,7 @@
   font: var(--font-body-2);
   border-radius: _.unit(2);
   cursor: pointer;
+  gap: _.unit(4);
 
   &:hover {
     background: var(--color-hover);
@@ -22,7 +23,6 @@
 
 .title {
   font: var(--font-body-2);
-  margin-left: _.unit(4);
 }
 
 .menu {
@@ -38,6 +38,11 @@
   &.visible {
     visibility: visible;
   }
+
+  &.rtl {
+    right: unset;
+    left: calc(100% + 5px);
+  }
 }
 
 .menuOption {
@@ -55,4 +60,13 @@
     left: 8px;
     top: 10px;
   }
+
+  &.rtl {
+    padding: _.unit(2.5) _.unit(8) _.unit(2.5) _.unit(5.5);
+
+    .tick {
+      left: unset;
+      right: 8px;
+    }
+  }
 }
diff --git a/packages/console/src/components/Topbar/UserInfo/SubMenu/index.tsx b/packages/console/src/components/Topbar/UserInfo/SubMenu/index.tsx
index 415ac6664..ffb38069b 100644
--- a/packages/console/src/components/Topbar/UserInfo/SubMenu/index.tsx
+++ b/packages/console/src/components/Topbar/UserInfo/SubMenu/index.tsx
@@ -1,11 +1,13 @@
 import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
 import { type ReactNode, useCallback, useState, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import ArrowRight from '@/assets/icons/arrow-right.svg?react';
 import Tick from '@/assets/icons/tick.svg?react';
 import { DropdownItem } from '@/ds-components/Dropdown';
 import DynamicT from '@/ds-components/DynamicT';
+import FlipOnRtl from '@/ds-components/FlipOnRtl';
 import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
 import type { Option } from '@/ds-components/Select';
 import Spacer from '@/ds-components/Spacer';
@@ -42,6 +44,7 @@ function SubMenu<T extends string>({
   const mouseEnterTimeoutRef = useRef(0);
   const mouseLeaveTimeoutRef = useRef(0);
   const [menuHeight, setMenuHeight] = useState<number>();
+  const { i18n } = useTranslation();
 
   const calculateDropdownHeight = useCallback(() => {
     if (anchorRef.current) {
@@ -90,9 +93,11 @@ function SubMenu<T extends string>({
         <DynamicT forKey={title} />
       </span>
       <Spacer />
-      <ArrowRight className={styles.icon} />
+      <FlipOnRtl>
+        <ArrowRight className={styles.icon} />
+      </FlipOnRtl>
       <OverlayScrollbar
-        className={classNames(styles.menu, showMenu && styles.visible)}
+        className={classNames(styles.menu, showMenu && styles.visible, styles[i18n.dir()])}
         style={{ maxHeight: menuHeight }}
       >
         {options.map(({ value, title }) => {
@@ -104,7 +109,8 @@ function SubMenu<T extends string>({
               className={classNames(
                 styles.menuOption,
                 selected && styles.selected,
-                menuItemClassName
+                menuItemClassName,
+                styles[i18n.dir()]
               )}
               onClick={() => {
                 onItemClick(value);
diff --git a/packages/console/src/components/Topbar/UserInfo/UserInfoSkeleton/index.module.scss b/packages/console/src/components/Topbar/UserInfo/UserInfoSkeleton/index.module.scss
index 105793633..d13f743cb 100644
--- a/packages/console/src/components/Topbar/UserInfo/UserInfoSkeleton/index.module.scss
+++ b/packages/console/src/components/Topbar/UserInfo/UserInfoSkeleton/index.module.scss
@@ -4,13 +4,13 @@
   display: flex;
   align-items: center;
   padding: _.unit(2);
-  margin-left: _.unit(4);
+  margin-inline-start: _.unit(4);
   border-radius: 8px;
 
   .image {
     width: 36px;
     height: 36px;
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
     border-radius: 6px;
     @include _.shimmering-animation;
   }
diff --git a/packages/console/src/components/Topbar/UserInfo/index.module.scss b/packages/console/src/components/Topbar/UserInfo/index.module.scss
index 2d2582a01..5429bd3ec 100644
--- a/packages/console/src/components/Topbar/UserInfo/index.module.scss
+++ b/packages/console/src/components/Topbar/UserInfo/index.module.scss
@@ -57,6 +57,6 @@
   }
 
   .spinner {
-    margin-left: _.unit(6);
+    margin-inline-start: _.unit(6);
   }
 }
diff --git a/packages/console/src/components/Topbar/UserInfo/index.tsx b/packages/console/src/components/Topbar/UserInfo/index.tsx
index 81519b3bf..42bfed860 100644
--- a/packages/console/src/components/Topbar/UserInfo/index.tsx
+++ b/packages/console/src/components/Topbar/UserInfo/index.tsx
@@ -15,6 +15,7 @@ import UserInfoCard from '@/components/UserInfoCard';
 import { isCloud } from '@/consts/env';
 import Divider from '@/ds-components/Divider';
 import Dropdown, { DropdownItem } from '@/ds-components/Dropdown';
+import FlipOnRtl from '@/ds-components/FlipOnRtl';
 import Spacer from '@/ds-components/Spacer';
 import { Ring as Spinner } from '@/ds-components/Spinner';
 import useCurrentUser from '@/hooks/use-current-user';
@@ -90,7 +91,9 @@ function UserInfo() {
           {t('menu.profile')}
           <Spacer />
           <div className={styles.icon}>
-            <ExternalLinkIcon />
+            <FlipOnRtl>
+              <ExternalLinkIcon />
+            </FlipOnRtl>
           </div>
         </DropdownItem>
         <Divider />
@@ -132,7 +135,11 @@ function UserInfo() {
         <Divider />
         <DropdownItem
           className={classNames(styles.dropdownItem, isLoading && styles.loading)}
-          icon={<SignOut className={styles.icon} />}
+          icon={
+            <FlipOnRtl>
+              <SignOut className={styles.icon} />
+            </FlipOnRtl>
+          }
           onClick={(event) => {
             event.stopPropagation();
 
diff --git a/packages/console/src/components/Topbar/index.module.scss b/packages/console/src/components/Topbar/index.module.scss
index 0de21ef48..5a743f086 100644
--- a/packages/console/src/components/Topbar/index.module.scss
+++ b/packages/console/src/components/Topbar/index.module.scss
@@ -37,7 +37,7 @@
   user-select: none;
   outline: none;
   cursor: pointer;
-  margin-left: _.unit(-1);
+  margin-inline-start: _.unit(-1);
   text-decoration: none;
   gap: _.unit(1);
   font: var(--font-label-2);
@@ -71,5 +71,5 @@
   height: 8px;
   border-radius: 50%;
   background-color: var(--color-error);
-  margin-left: _.unit(0.5);
+  margin-inline-start: _.unit(0.5);
 }
diff --git a/packages/console/src/components/UserAccountInformation/index.module.scss b/packages/console/src/components/UserAccountInformation/index.module.scss
index 4a5884ab7..c17bc9d8c 100644
--- a/packages/console/src/components/UserAccountInformation/index.module.scss
+++ b/packages/console/src/components/UserAccountInformation/index.module.scss
@@ -20,11 +20,11 @@
 
       .infoContent {
         font: var(--font-label-2);
-        padding-left: _.unit(1);
+        padding-inline-start: _.unit(1);
       }
 
       .operation {
-        padding-left: _.unit(1);
+        padding-inline-start: _.unit(1);
       }
 
       .eyeIcon {
diff --git a/packages/console/src/components/UserAvatar/index.module.scss b/packages/console/src/components/UserAvatar/index.module.scss
index 7e8dbd60a..a9d0a0c56 100644
--- a/packages/console/src/components/UserAvatar/index.module.scss
+++ b/packages/console/src/components/UserAvatar/index.module.scss
@@ -45,7 +45,11 @@
   width: 48px;
   height: 48px;
   object-fit: cover;
-  transform-origin: 0 0;
+  transform-origin: top left;
+
+  &.rtl {
+    transform-origin: top right;
+  }
 
   &.micro {
     transform: scale(0.416);
@@ -90,6 +94,6 @@
   .value {
     // Fixed font color should used in Tooltip component as the color does not change when theme changes.
     color: #f7f8f8;
-    margin-left: _.unit(1);
+    margin-inline-start: _.unit(1);
   }
 }
diff --git a/packages/console/src/components/UserAvatar/index.tsx b/packages/console/src/components/UserAvatar/index.tsx
index 71c7c9df0..e085ca01c 100644
--- a/packages/console/src/components/UserAvatar/index.tsx
+++ b/packages/console/src/components/UserAvatar/index.tsx
@@ -46,7 +46,8 @@ function UserInfoTipContent({ user }: { readonly user: Partial<UserInfo> }) {
 }
 
 function UserAvatar({ className, size = 'medium', user, hasTooltip = false }: Props) {
-  const avatarClassName = classNames(styles.avatar, styles[size]);
+  const { i18n } = useTranslation();
+  const avatarClassName = classNames(styles.avatar, styles[size], styles[i18n.dir()]);
   const wrapperClassName = classNames(styles.wrapper, styles[size], className);
   const defaultColorPalette = [
     '#E74C3C',
diff --git a/packages/console/src/components/UserInfoCard/index.module.scss b/packages/console/src/components/UserInfoCard/index.module.scss
index 058b95d7f..d78d257d7 100644
--- a/packages/console/src/components/UserInfoCard/index.module.scss
+++ b/packages/console/src/components/UserInfoCard/index.module.scss
@@ -5,12 +5,12 @@
   align-items: center;
   user-select: none;
   cursor: default;
+  gap: _.unit(3);
 }
 
 .nameWrapper {
   display: flex;
   flex-direction: column;
-  margin-left: _.unit(3);
 
   .name {
     font: var(--font-label-2);
diff --git a/packages/console/src/components/UserName/index.module.scss b/packages/console/src/components/UserName/index.module.scss
index bd9461ce4..bdd63abca 100644
--- a/packages/console/src/components/UserName/index.module.scss
+++ b/packages/console/src/components/UserName/index.module.scss
@@ -11,7 +11,7 @@
     @include _.text-ellipsis;
 
     span {
-      margin-left: _.unit(2);
+      margin-inline-start: _.unit(2);
     }
   }
 
diff --git a/packages/console/src/components/VerificationCodeInput/index.module.scss b/packages/console/src/components/VerificationCodeInput/index.module.scss
index acec145ea..c7c0aa14e 100644
--- a/packages/console/src/components/VerificationCodeInput/index.module.scss
+++ b/packages/console/src/components/VerificationCodeInput/index.module.scss
@@ -33,6 +33,6 @@
 .errorMessage {
   font: var(--font-body-2);
   color: var(--color-error);
-  margin-left: _.unit(0.5);
+  margin-inline-start: _.unit(0.5);
   margin-top: _.unit(1);
 }
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.module.scss b/packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.module.scss
index 696e6ea77..207071337 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.module.scss
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.module.scss
@@ -13,6 +13,11 @@
   background: none;
   border: none;
   width: calc(100% - _.unit(10));
+  gap: _.unit(4);
+
+  &.rtl {
+    margin: _.unit(1) _.unit(4) _.unit(1) _.unit(6);
+  }
 
   .icon {
     height: _.unit(5);
@@ -38,10 +43,6 @@
     }
   }
 
-  > div + div {
-    margin-left: _.unit(4);
-  }
-
   .title {
     font: var(--font-label-2);
   }
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.tsx
index 641d1e1c9..a8afad73c 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/components/Item/index.tsx
@@ -18,7 +18,7 @@ type Props = {
 };
 
 function Item({ icon, titleKey, modal, externalLink, isActive = false }: Props) {
-  const { t } = useTranslation(undefined, {
+  const { t, i18n } = useTranslation(undefined, {
     keyPrefix: 'admin_console.tabs',
   });
   const [isOpen, setIsOpen] = useState(false);
@@ -37,7 +37,7 @@ function Item({ icon, titleKey, modal, externalLink, isActive = false }: Props)
     return (
       <>
         <button
-          className={styles.row}
+          className={classNames(styles.row, styles[i18n.dir()])}
           onClick={() => {
             setIsOpen(true);
           }}
@@ -60,7 +60,10 @@ function Item({ icon, titleKey, modal, externalLink, isActive = false }: Props)
   }
 
   return (
-    <Link to={getPath(titleKey)} className={classNames(styles.row, isActive && styles.active)}>
+    <Link
+      to={getPath(titleKey)}
+      className={classNames(styles.row, isActive && styles.active, styles[i18n.dir()])}
+    >
       {content}
     </Link>
   );
diff --git a/packages/console/src/containers/ConsoleContent/index.module.scss b/packages/console/src/containers/ConsoleContent/index.module.scss
index 81b297790..fce601f81 100644
--- a/packages/console/src/containers/ConsoleContent/index.module.scss
+++ b/packages/console/src/containers/ConsoleContent/index.module.scss
@@ -15,6 +15,10 @@
   height: 100%;
   padding: 0 _.unit(6) 0 _.unit(2);
 
+  &.rtl {
+    padding: 0 _.unit(2) 0 _.unit(6);
+  }
+
   > :not(svg) {
     @include _.main-content-width;
   }
@@ -30,6 +34,11 @@
   position: absolute;
   bottom: _.unit(3);
   left: _.unit(4);
+
+  &.rtl {
+    left: unset;
+    right: _.unit(4);
+  }
 }
 
 .daisy {
diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx
index e1ca78420..cb3f2ca64 100644
--- a/packages/console/src/containers/ConsoleContent/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/index.tsx
@@ -1,4 +1,6 @@
+import classNames from 'classnames';
 import { Suspense } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useOutletContext, useRoutes } from 'react-router-dom';
 import { safeLazy } from 'react-safe-lazy';
 
@@ -21,6 +23,8 @@ function ConsoleContent() {
   const { scrollableContent } = useOutletContext<AppContentOutletContext>();
   const routeObjects = useConsoleRoutes();
   const routes = useRoutes(routeObjects);
+  const { i18n } = useTranslation();
+  const direction = i18n.dir();
 
   usePlausiblePageview(routeObjects, ':tenantId');
   // Use this hook here to make sure console listens to user tenant scope changes.
@@ -32,12 +36,17 @@ function ConsoleContent() {
         <Sidebar />
       </Suspense>
       <OverlayScrollbar className={styles.overlayScrollbarWrapper}>
-        <div ref={scrollableContent} className={styles.main}>
+        <div ref={scrollableContent} className={classNames(styles.main, styles[direction])}>
           <Suspense fallback={<DelayedSuspenseFallback />}>{routes}</Suspense>
         </div>
       </OverlayScrollbar>
       {isDevFeaturesEnabled && (
-        <Tag type="state" status="success" variant="plain" className={styles.devStatus}>
+        <Tag
+          type="state"
+          status="success"
+          variant="plain"
+          className={classNames(styles.devStatus, styles[direction])}
+        >
           Dev features enabled
         </Tag>
       )}
diff --git a/packages/console/src/ds-components/Button/index.module.scss b/packages/console/src/ds-components/Button/index.module.scss
index b44432fb1..f96953098 100644
--- a/packages/console/src/ds-components/Button/index.module.scss
+++ b/packages/console/src/ds-components/Button/index.module.scss
@@ -205,7 +205,7 @@
 
   &.text {
     background: none;
-    border-color: none;
+    border-color: transparent;
     font: var(--font-label-2);
     color: var(--color-text-link);
     padding: _.unit(0.5) _.unit(1);
diff --git a/packages/console/src/ds-components/CardTitle/index.tsx b/packages/console/src/ds-components/CardTitle/index.tsx
index 9c122a2d4..c5507c274 100644
--- a/packages/console/src/ds-components/CardTitle/index.tsx
+++ b/packages/console/src/ds-components/CardTitle/index.tsx
@@ -58,7 +58,7 @@ function CardTitle({
           {learnMoreLink?.href && (
             <>
               {/* Use a space to keep the link and the text separate.
-               * Avoid using `margin-left` since it will cause an unexpected gap when the "learn more" text is at the start of a new line
+               * Avoid using `margin-inline-start` since it will cause an unexpected gap when the "learn more" text is at the start of a new line
                */}{' '}
               <TextLink href={learnMoreLink.href} targetBlank={learnMoreLink.targetBlank}>
                 {t('general.learn_more')}
diff --git a/packages/console/src/ds-components/Checkbox/Checkbox/index.module.scss b/packages/console/src/ds-components/Checkbox/Checkbox/index.module.scss
index 8cf75f171..05cf86859 100644
--- a/packages/console/src/ds-components/Checkbox/Checkbox/index.module.scss
+++ b/packages/console/src/ds-components/Checkbox/Checkbox/index.module.scss
@@ -44,12 +44,12 @@
     display: flex;
     align-items: center;
     cursor: pointer;
+    gap: _.unit(2);
   }
 
   .tooltipAnchor {
     display: flex;
     align-items: center;
-    margin-right: _.unit(2);
   }
 
   .label {
diff --git a/packages/console/src/ds-components/CodeEditor/index.module.scss b/packages/console/src/ds-components/CodeEditor/index.module.scss
index 1b93856fc..55b3169cf 100644
--- a/packages/console/src/ds-components/CodeEditor/index.module.scss
+++ b/packages/console/src/ds-components/CodeEditor/index.module.scss
@@ -7,6 +7,7 @@
   background: #34353f;
   position: relative;
   overflow-y: auto;
+  direction: ltr;
 
   .title {
     margin-top: _.unit(-2);
diff --git a/packages/console/src/ds-components/CodeEditor/index.tsx b/packages/console/src/ds-components/CodeEditor/index.tsx
index ffbbe8d50..4cd0acb48 100644
--- a/packages/console/src/ds-components/CodeEditor/index.tsx
+++ b/packages/console/src/ds-components/CodeEditor/index.tsx
@@ -108,9 +108,9 @@ function CodeEditor({
             value={value}
             style={
               isShowingPlaceholder
-                ? { marginLeft: '8px', width: 'calc(100% - 8px)' }
+                ? { marginInlineStart: '8px', width: 'calc(100% - 8px)' }
                 : {
-                    marginLeft: `calc(${maxLineNumberDigits}ch + 20px)`,
+                    marginInlineStart: `calc(${maxLineNumberDigits}ch + 20px)`,
                     width: `calc(100% - ${maxLineNumberDigits}ch - 20px)`,
                   }
             }
diff --git a/packages/console/src/ds-components/CodeEditor/utils.ts b/packages/console/src/ds-components/CodeEditor/utils.ts
index 93a198f39..b28456c9b 100644
--- a/packages/console/src/ds-components/CodeEditor/utils.ts
+++ b/packages/console/src/ds-components/CodeEditor/utils.ts
@@ -5,17 +5,17 @@ export const lineNumberContainerStyle = (): CSSProperties => {
     display: 'flex',
     flexDirection: 'column',
     textAlign: 'right',
-    paddingLeft: '0px',
-    paddingRight: '0px',
+    paddingInlineStart: '0px',
+    paddingInlineEnd: '0px',
   };
 };
 
 export const lineNumberStyle = (numberOfLines: number): CSSProperties => {
   return {
     minWidth: `calc(${numberOfLines}ch + 20px)`,
-    marginLeft: '0px',
-    paddingRight: '20px',
-    paddingLeft: '0px',
+    marginInlineStart: '0px',
+    paddingInlineEnd: '20px',
+    paddingInlineStart: '0px',
     display: 'inline-flex',
     justifyContent: 'flex-end',
     counterIncrement: 'line',
diff --git a/packages/console/src/ds-components/ColorPicker/index.module.scss b/packages/console/src/ds-components/ColorPicker/index.module.scss
index 1cd1d6a04..97174c3ed 100644
--- a/packages/console/src/ds-components/ColorPicker/index.module.scss
+++ b/packages/console/src/ds-components/ColorPicker/index.module.scss
@@ -11,6 +11,7 @@
   font: var(--font-body-2);
   display: flex;
   align-items: center;
+  gap: _.unit(2);
 
   &:focus,
   &.highlight {
@@ -25,7 +26,6 @@
     height: 24px;
     border: 1px solid var(--color-divider);
     border-radius: 4px;
-    margin-right: _.unit(2);
   }
 }
 
diff --git a/packages/console/src/ds-components/CopyToClipboard/index.module.scss b/packages/console/src/ds-components/CopyToClipboard/index.module.scss
index a2a60f55e..61993d723 100644
--- a/packages/console/src/ds-components/CopyToClipboard/index.module.scss
+++ b/packages/console/src/ds-components/CopyToClipboard/index.module.scss
@@ -37,7 +37,7 @@
       display: inline-flex;
       align-items: center;
       gap: _.unit(2);
-      margin-right: _.unit(1);
+      margin-inline-end: _.unit(1);
       flex-wrap: nowrap;
 
       &.wrapContent {
diff --git a/packages/console/src/ds-components/DataTransferBox/SourceGroupItem/index.module.scss b/packages/console/src/ds-components/DataTransferBox/SourceGroupItem/index.module.scss
index db0719418..a6007a38b 100644
--- a/packages/console/src/ds-components/DataTransferBox/SourceGroupItem/index.module.scss
+++ b/packages/console/src/ds-components/DataTransferBox/SourceGroupItem/index.module.scss
@@ -16,7 +16,7 @@
       overflow: hidden;
 
       .caret {
-        margin-right: _.unit(2);
+        margin-inline-end: _.unit(2);
       }
 
       .name {
@@ -28,7 +28,7 @@
         flex-shrink: 0;
         font: var(--font-body-2);
         color: var(--color-text-secondary);
-        margin-left: _.unit(2);
+        margin-inline-start: _.unit(2);
       }
     }
   }
@@ -39,5 +39,5 @@
 }
 
 .dataList {
-  padding-left: _.unit(10);
+  padding-inline-start: _.unit(10);
 }
diff --git a/packages/console/src/ds-components/Dropdown/DropdownItem.module.scss b/packages/console/src/ds-components/Dropdown/DropdownItem.module.scss
index d775f51a6..b217bddd9 100644
--- a/packages/console/src/ds-components/Dropdown/DropdownItem.module.scss
+++ b/packages/console/src/ds-components/Dropdown/DropdownItem.module.scss
@@ -8,6 +8,7 @@
   display: flex;
   align-items: center;
   overflow: hidden;
+  gap: _.unit(4);
 
   &:hover {
     background: var(--color-hover);
@@ -20,6 +21,5 @@
   .icon {
     display: flex;
     align-items: center;
-    margin-right: _.unit(4);
   }
 }
diff --git a/packages/console/src/ds-components/FlipOnRtl/index.module.scss b/packages/console/src/ds-components/FlipOnRtl/index.module.scss
new file mode 100644
index 000000000..c7d735b82
--- /dev/null
+++ b/packages/console/src/ds-components/FlipOnRtl/index.module.scss
@@ -0,0 +1,3 @@
+.flip {
+  transform: scaleX(-1);
+}
diff --git a/packages/console/src/ds-components/FlipOnRtl/index.tsx b/packages/console/src/ds-components/FlipOnRtl/index.tsx
new file mode 100644
index 000000000..c39698a02
--- /dev/null
+++ b/packages/console/src/ds-components/FlipOnRtl/index.tsx
@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { cloneElement, isValidElement, type ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './index.module.scss';
+
+type Props = {
+  readonly children: ReactElement<HTMLElement>;
+};
+
+/**
+ * This component flips its child element horizontally if the browser's text direction is RTL (right-to-left).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FlipOnRtl>
+ *   <SVG />
+ * </FlipOnRtl>
+ * ```
+ *
+ * @param {React.ReactNode} children - The SVG or other HTML content to render and flip if RTL.
+ * @returns {JSX.Element} The flipped content.
+ */
+function FlipOnRtl({ children }: Props) {
+  const { i18n } = useTranslation();
+  const isRtl = i18n.dir() === 'rtl';
+
+  if (!isValidElement(children)) {
+    return children;
+  }
+
+  return cloneElement(children, {
+    className: classNames(children.props.className, isRtl && styles.flip),
+  });
+}
+
+export default FlipOnRtl;
diff --git a/packages/console/src/ds-components/FormField/index.module.scss b/packages/console/src/ds-components/FormField/index.module.scss
index 8516be515..454c42a02 100644
--- a/packages/console/src/ds-components/FormField/index.module.scss
+++ b/packages/console/src/ds-components/FormField/index.module.scss
@@ -20,14 +20,14 @@
     color: var(--color-text);
 
     .multiple {
-      margin-left: _.unit(1);
+      margin-inline-start: _.unit(1);
       font: var(--font-body-2);
       color: var(--color-text-secondary);
     }
   }
 
   .toggleTipButton {
-    margin-left: _.unit(0.5);
+    margin-inline-start: _.unit(0.5);
   }
 
   .required {
@@ -38,7 +38,7 @@
   .tagsWrapper {
     display: flex;
     align-items: center;
-    margin-left: _.unit(2);
+    margin-inline-start: _.unit(2);
     gap: _.unit(1);
   }
 }
diff --git a/packages/console/src/ds-components/IconButton/index.module.scss b/packages/console/src/ds-components/IconButton/index.module.scss
index f1090aea6..d23ba9d63 100644
--- a/packages/console/src/ds-components/IconButton/index.module.scss
+++ b/packages/console/src/ds-components/IconButton/index.module.scss
@@ -4,7 +4,7 @@
   border: none;
   outline: none;
   background: none;
-  border-color: none;
+  border-color: transparent;
   color: var(--color-primary);
   border-radius: 6px;
   font: var(--font-label-2);
diff --git a/packages/console/src/ds-components/ModalLayout/index.module.scss b/packages/console/src/ds-components/ModalLayout/index.module.scss
index b79e1a5c6..b17719195 100644
--- a/packages/console/src/ds-components/ModalLayout/index.module.scss
+++ b/packages/console/src/ds-components/ModalLayout/index.module.scss
@@ -36,7 +36,7 @@
     justify-content: flex-end;
 
     > :not(:first-child) {
-      margin-left: _.unit(4);
+      margin-inline-start: _.unit(4);
     }
   }
 
diff --git a/packages/console/src/ds-components/MultiTextInput/index.module.scss b/packages/console/src/ds-components/MultiTextInput/index.module.scss
index 4a8efa95b..881a32c16 100644
--- a/packages/console/src/ds-components/MultiTextInput/index.module.scss
+++ b/packages/console/src/ds-components/MultiTextInput/index.module.scss
@@ -6,7 +6,7 @@
   }
 
   .firstFieldWithMultiInputs {
-    padding-right: _.unit(9);
+    padding-inline-end: _.unit(9);
   }
 
   .deletableInput {
@@ -18,7 +18,7 @@
     }
 
     > :not(:first-child) {
-      margin-left: _.unit(2);
+      margin-inline-start: _.unit(2);
     }
   }
 
diff --git a/packages/console/src/ds-components/OverlayScrollbar/index.tsx b/packages/console/src/ds-components/OverlayScrollbar/index.tsx
index bafaa34bd..b26535f86 100644
--- a/packages/console/src/ds-components/OverlayScrollbar/index.tsx
+++ b/packages/console/src/ds-components/OverlayScrollbar/index.tsx
@@ -1,11 +1,17 @@
+import classNames from 'classnames';
 import type { OverlayScrollbarsComponentProps } from 'overlayscrollbars-react';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+import { useTranslation } from 'react-i18next';
 
 function OverlayScrollbar(props: OverlayScrollbarsComponentProps) {
+  const { i18n } = useTranslation();
+  const isRtl = i18n.dir() === 'rtl';
+
   return (
     <OverlayScrollbarsComponent
       options={{ scrollbars: { autoHide: 'leave', autoHideDelay: 0 } }}
       {...props}
+      className={classNames(props.className, isRtl && 'os-scrollbar-rtl')}
     />
   );
 }
diff --git a/packages/console/src/ds-components/Pagination/index.module.scss b/packages/console/src/ds-components/Pagination/index.module.scss
index c9c878382..dfff07557 100644
--- a/packages/console/src/ds-components/Pagination/index.module.scss
+++ b/packages/console/src/ds-components/Pagination/index.module.scss
@@ -21,7 +21,7 @@
       list-style: none;
 
       &:not(:first-child) {
-        margin-left: _.unit(2);
+        margin-inline-start: _.unit(2);
       }
 
       .button {
diff --git a/packages/console/src/ds-components/RadioGroup/Radio.module.scss b/packages/console/src/ds-components/RadioGroup/Radio.module.scss
index a7ec31397..5b410c26e 100644
--- a/packages/console/src/ds-components/RadioGroup/Radio.module.scss
+++ b/packages/console/src/ds-components/RadioGroup/Radio.module.scss
@@ -13,12 +13,12 @@
   .content {
     display: flex;
     align-items: center;
+    gap: _.unit(2);
 
     .indicator {
       border-radius: 50%;
       border: 2px solid var(--color-neutral-60);
       display: inline-block;
-      margin-right: _.unit(2);
 
       &::before {
         content: '';
@@ -33,7 +33,7 @@
 
     .icon,
     .trailingIcon {
-      margin-right: _.unit(2);
+      margin-inline-end: _.unit(2);
       color: var(--color-text-secondary);
 
       > svg {
@@ -42,8 +42,8 @@
     }
 
     .trailingIcon {
-      margin-right: unset;
-      margin-left: _.unit(2);
+      margin-inline-end: unset;
+      margin-inline-start: _.unit(2);
     }
   }
 }
@@ -66,7 +66,7 @@
       border-radius: unset;
       border: unset;
       display: block;
-      margin-right: unset;
+      margin-inline-end: unset;
       position: absolute;
       right: 0;
       top: 0;
@@ -82,7 +82,7 @@
 
     .icon,
     .trailingIcon {
-      margin-right: _.unit(2);
+      margin-inline-end: _.unit(2);
       vertical-align: middle;
       color: var(--color-text-secondary);
 
@@ -92,8 +92,8 @@
     }
 
     .trailingIcon {
-      margin-right: unset;
-      margin-left: _.unit(2);
+      margin-inline-end: unset;
+      margin-inline-start: _.unit(2);
     }
 
     .disabledLabel {
@@ -104,6 +104,11 @@
       color: var(--color-text);
     }
   }
+
+  &.rtl .content .indicator {
+    right: unset;
+    left: 0;
+  }
 }
 
 .compact {
@@ -128,16 +133,31 @@
     margin-bottom: unset;
   }
 
+  &.rtl {
+    &:first-child {
+      border-radius: 0 12px 12px 0;
+    }
+
+    &:last-child {
+      border-radius: 12px 0 0 12px;
+    }
+
+    &:not(:first-child) {
+      border-left: 1px solid var(--color-border);
+      border-right: none;
+    }
+  }
+
   .content {
     padding: _.unit(5);
     height: 100%;
 
     .icon {
-      margin-right: _.unit(4);
+      margin-inline-end: _.unit(4);
     }
 
     .trailingIcon {
-      margin-left: _.unit(4);
+      margin-inline-start: _.unit(4);
     }
   }
 }
@@ -165,6 +185,21 @@
     margin-bottom: unset;
   }
 
+  &.rtl {
+    &:first-child {
+      border-radius: 0 6px 6px 0;
+    }
+
+    &:last-child {
+      border-radius: 6px 0 0 6px;
+    }
+
+    &:not(:first-child) {
+      border-left: 1px solid var(--color-border);
+      border-right: none;
+    }
+  }
+
   .content {
     height: 100%;
     display: flex;
@@ -219,6 +254,17 @@
     bottom: -1px;
     background-color: var(--color-primary);
   }
+
+  &.rtl {
+    &:not(:first-child) {
+      border-left: 1px solid var(--color-primary);
+
+      &::before {
+        left: unset;
+        right: -1px;
+      }
+    }
+  }
 }
 
 .small.checked {
@@ -235,6 +281,17 @@
     bottom: -1px;
     background-color: var(--color-text-link);
   }
+
+  &.rtl {
+    &:not(:first-child) {
+      border-color: var(--color-text-link);
+
+      &::before {
+        left: unset;
+        right: -1px;
+      }
+    }
+  }
 }
 
 
diff --git a/packages/console/src/ds-components/RadioGroup/Radio.tsx b/packages/console/src/ds-components/RadioGroup/Radio.tsx
index 37f2068a1..22c0d840a 100644
--- a/packages/console/src/ds-components/RadioGroup/Radio.tsx
+++ b/packages/console/src/ds-components/RadioGroup/Radio.tsx
@@ -2,6 +2,7 @@ import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
 import type { KeyboardEventHandler, ReactElement, ReactNode } from 'react';
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import type DangerousRaw from '../DangerousRaw';
 import DynamicT from '../DynamicT';
@@ -52,6 +53,7 @@ function Radio({
   trailingIcon,
   hasCheckIconForCard = true,
 }: Props) {
+  const { i18n } = useTranslation();
   const handleKeyPress: KeyboardEventHandler<HTMLDivElement> = useCallback(
     (event) => {
       if (isDisabled) {
@@ -73,7 +75,8 @@ function Radio({
         styles[type],
         isChecked && styles.checked,
         isDisabled && styles.disabled,
-        className
+        className,
+        styles[i18n.dir()]
       )}
       // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
       role="radio"
diff --git a/packages/console/src/ds-components/Search/index.module.scss b/packages/console/src/ds-components/Search/index.module.scss
index 037c63a1e..3f28d3129 100644
--- a/packages/console/src/ds-components/Search/index.module.scss
+++ b/packages/console/src/ds-components/Search/index.module.scss
@@ -5,7 +5,7 @@
   align-items: center;
 
   >:not(:first-child) {
-    margin-left: _.unit(2);
+    margin-inline-start: _.unit(2);
   }
 
   .searchIcon {
diff --git a/packages/console/src/ds-components/Select/index.module.scss b/packages/console/src/ds-components/Select/index.module.scss
index 0fbb7e63b..93071331a 100644
--- a/packages/console/src/ds-components/Select/index.module.scss
+++ b/packages/console/src/ds-components/Select/index.module.scss
@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 _.unit(2) 0 _.unit(3);
+  padding: 0 _.unit(2);
   background: var(--color-layer-1);
   border: 1px solid var(--color-border);
   border-radius: 8px;
@@ -46,7 +46,7 @@
     .delete {
       width: 20px;
       height: 20px;
-      margin-right: _.unit(-0.5);
+      margin-inline-end: _.unit(-0.5);
     }
 
     input {
@@ -63,6 +63,7 @@
   }
 
   .title {
+    padding: 0 _.unit(1);
     @include _.text-ellipsis;
   }
 
@@ -88,7 +89,6 @@
 
   .icon {
     display: flex;
-    margin-left: _.unit(1);
     color: var(--color-text-secondary);
   }
 
@@ -147,7 +147,7 @@
   align-items: center;
 
   .search {
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
     color: var(--color-text-secondary);
     width: 20px;
     height: 20px;
diff --git a/packages/console/src/ds-components/Select/index.tsx b/packages/console/src/ds-components/Select/index.tsx
index d8fc81632..80e482875 100644
--- a/packages/console/src/ds-components/Select/index.tsx
+++ b/packages/console/src/ds-components/Select/index.tsx
@@ -76,7 +76,8 @@ function Select<T extends string>({
     }
     const element = anchorRef.current;
     const cs = getComputedStyle(element);
-    const paddingX = Number.parseFloat(cs.paddingLeft) + Number.parseFloat(cs.paddingRight);
+    const paddingX =
+      Number.parseFloat(cs.paddingInlineStart) + Number.parseFloat(cs.paddingInlineEnd);
     const paddingY = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom);
     const borderX = Number.parseFloat(cs.borderLeftWidth) + Number.parseFloat(cs.borderRightWidth);
     const borderY = Number.parseFloat(cs.borderTopWidth) + Number.parseFloat(cs.borderBottomWidth);
@@ -92,7 +93,7 @@ function Select<T extends string>({
       left: `${
         element.getBoundingClientRect().left +
         Number.parseFloat(cs.borderLeftWidth) +
-        Number.parseFloat(cs.paddingLeft)
+        Number.parseFloat(cs.paddingInlineStart)
       }px`,
       backgroundColor: cs.backgroundColor,
     };
diff --git a/packages/console/src/ds-components/Switch/index.module.scss b/packages/console/src/ds-components/Switch/index.module.scss
index b2255cb13..ec5142cf1 100644
--- a/packages/console/src/ds-components/Switch/index.module.scss
+++ b/packages/console/src/ds-components/Switch/index.module.scss
@@ -34,6 +34,11 @@
     }
   }
 
+  &.rtl .slider::before {
+    left: unset;
+    right: 2px;
+  }
+
   input:checked + .slider {
     background-color: var(--color-success-70);
   }
@@ -50,6 +55,10 @@
     background-color: var(--color-specific-toggle-thumb-disabled);
     box-shadow: unset;
   }
+
+  &.rtl input:checked + .slider::before {
+    transform: translateX(-16px);
+  }
 }
 
 .wrapper {
diff --git a/packages/console/src/ds-components/Switch/index.tsx b/packages/console/src/ds-components/Switch/index.tsx
index c962217ce..daf3c3df3 100644
--- a/packages/console/src/ds-components/Switch/index.tsx
+++ b/packages/console/src/ds-components/Switch/index.tsx
@@ -2,6 +2,7 @@ import { type AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
 import type { HTMLProps, ReactElement, ReactNode, Ref } from 'react';
 import { forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import DynamicT from '../DynamicT';
 
@@ -20,6 +21,7 @@ type Props =
 
 function Switch(props: Props, ref?: Ref<HTMLInputElement>) {
   const { label, hasError, ...rest } = props;
+  const { i18n } = useTranslation();
 
   return (
     <div className={classNames(styles.wrapper, hasError && styles.error)}>
@@ -33,7 +35,7 @@ function Switch(props: Props, ref?: Ref<HTMLInputElement>) {
         </div>
       )}
       {label && <div className={styles.label}>{label}</div>}
-      <label className={styles.switch}>
+      <label className={classNames(styles.switch, styles[i18n.dir()])}>
         <input type="checkbox" {...rest} ref={ref} />
         <span className={styles.slider} />
       </label>
diff --git a/packages/console/src/ds-components/TabNav/TabNavItem.module.scss b/packages/console/src/ds-components/TabNav/TabNavItem.module.scss
index 63948a0ad..3f4e29367 100644
--- a/packages/console/src/ds-components/TabNav/TabNavItem.module.scss
+++ b/packages/console/src/ds-components/TabNav/TabNavItem.module.scss
@@ -4,10 +4,6 @@
   display: flex;
   align-items: center;
 
-  &:not(:last-child) {
-    margin-right: _.unit(6);
-  }
-
   .link {
     font: var(--font-label-2);
     padding: _.unit(0.5) _.unit(1.5);
@@ -48,7 +44,7 @@
   }
 
   .errors {
-    margin-left: _.unit(0.5);
+    margin-inline-start: _.unit(0.5);
     font: var(--font-label-3);
     color: var(--color-white);
     padding: _.unit(0.5) _.unit(1.5);
diff --git a/packages/console/src/ds-components/TabNav/index.module.scss b/packages/console/src/ds-components/TabNav/index.module.scss
index 984980080..d9330ac4a 100644
--- a/packages/console/src/ds-components/TabNav/index.module.scss
+++ b/packages/console/src/ds-components/TabNav/index.module.scss
@@ -4,4 +4,5 @@
   border-bottom: 1px solid var(--color-surface-5);
   display: flex;
   margin-top: _.unit(1);
+  gap: _.unit(6);
 }
diff --git a/packages/console/src/ds-components/Table/Skeleton/index.module.scss b/packages/console/src/ds-components/Table/Skeleton/index.module.scss
index 78d5984aa..bd706cc89 100644
--- a/packages/console/src/ds-components/Table/Skeleton/index.module.scss
+++ b/packages/console/src/ds-components/Table/Skeleton/index.module.scss
@@ -14,7 +14,7 @@
     .avatar {
       width: 40px;
       height: 40px;
-      margin-right: _.unit(4);
+      margin-inline-end: _.unit(4);
       border-radius: 12px;
       flex-shrink: 0;
       @include _.shimmering-animation;
diff --git a/packages/console/src/ds-components/Table/index.module.scss b/packages/console/src/ds-components/Table/index.module.scss
index 1367226c3..d227c3122 100644
--- a/packages/console/src/ds-components/Table/index.module.scss
+++ b/packages/console/src/ds-components/Table/index.module.scss
@@ -43,7 +43,7 @@
           color: var(--color-text);
           border-bottom: unset;
           padding: _.unit(3);
-          text-align: left;
+          text-align: start;
         }
       }
     }
@@ -104,11 +104,11 @@
       border: 1px solid var(--color-divider);
 
       tr th:first-child {
-        padding-left: _.unit(7);
+        padding-inline-start: _.unit(7);
       }
 
       tr th:last-child {
-        padding-right: _.unit(7);
+        padding-inline-end: _.unit(7);
       }
     }
 
@@ -126,11 +126,11 @@
       }
 
       tr td:first-child {
-        padding-left: _.unit(7);
+        padding-inline-start: _.unit(7);
       }
 
       tr td:last-child {
-        padding-right: _.unit(7);
+        padding-inline-end: _.unit(7);
       }
     }
   }
@@ -174,3 +174,17 @@
 .pagination {
   margin-top: _.unit(4);
 }
+
+.container.rtl {
+  .tableContainer {
+    tr.hoverEffect:hover {
+      td:first-child {
+        border-radius: 0 8px 8px 0;
+      }
+
+      td:last-child {
+        border-radius: 8px 0 0 8px;
+      }
+    }
+  }
+}
diff --git a/packages/console/src/ds-components/Table/index.tsx b/packages/console/src/ds-components/Table/index.tsx
index ce51cfd75..215ce81e0 100644
--- a/packages/console/src/ds-components/Table/index.tsx
+++ b/packages/console/src/ds-components/Table/index.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { Fragment } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 
 import type { Props as PaginationProps } from '@/ds-components/Pagination';
 import Pagination from '@/ds-components/Pagination';
@@ -98,6 +99,7 @@ function Table<
   onRetry,
   footer,
 }: Props<TFieldValues, TName>) {
+  const { i18n } = useTranslation();
   const totalColspan = columns.reduce((result, { colSpan }) => {
     return result + (colSpan ?? 1);
   }, 0);
@@ -108,7 +110,7 @@ function Table<
   const isLoaded = !isLoading && hasData;
 
   return (
-    <div className={classNames(styles.container, className)}>
+    <div className={classNames(styles.container, className, styles[i18n.dir()])}>
       <div className={classNames(styles.tableContainer, hasBorder && styles.hasBorder)}>
         {filter && (
           <div className={styles.filterContainer}>
diff --git a/packages/console/src/ds-components/Tag/index.module.scss b/packages/console/src/ds-components/Tag/index.module.scss
index dddff3983..edfc77826 100644
--- a/packages/console/src/ds-components/Tag/index.module.scss
+++ b/packages/console/src/ds-components/Tag/index.module.scss
@@ -4,13 +4,13 @@
   display: inline-flex;
   align-items: center;
   font: var(--font-body-2);
+  gap: _.unit(2);
   @include _.text-ellipsis;
 
   .icon {
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    margin-right: _.unit(2);
     background: var(--color-on-success-container);
   }
 
diff --git a/packages/console/src/ds-components/TextInput/NumericInput.module.scss b/packages/console/src/ds-components/TextInput/NumericInput.module.scss
index 0c2e24371..ca00feb84 100644
--- a/packages/console/src/ds-components/TextInput/NumericInput.module.scss
+++ b/packages/console/src/ds-components/TextInput/NumericInput.module.scss
@@ -7,6 +7,11 @@
   top: 1px;
   bottom: 1px;
 
+  &.rtl {
+    right: unset;
+    left: 1px;
+  }
+
   .button {
     user-select: none;
     width: 32px;
diff --git a/packages/console/src/ds-components/TextInput/NumericInput.tsx b/packages/console/src/ds-components/TextInput/NumericInput.tsx
index 462409a70..0039303e3 100644
--- a/packages/console/src/ds-components/TextInput/NumericInput.tsx
+++ b/packages/console/src/ds-components/TextInput/NumericInput.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { type ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import CaretDown from '@/assets/icons/caret-down.svg?react';
 import CaretUp from '@/assets/icons/caret-up.svg?react';
@@ -47,6 +48,7 @@ type Props = Omit<ComponentProps<typeof TextInput>, 'type' | 'suffix'> & {
 
 /** A numeric text input with up and down buttons for incrementing and decrementing the value. */
 function NumericInput({ onValueUp, onValueDown, ...props }: Props) {
+  const { i18n } = useTranslation();
   const isDisabled = Boolean(props.disabled) || Boolean(props.readOnly);
 
   return (
@@ -55,7 +57,7 @@ function NumericInput({ onValueUp, onValueDown, ...props }: Props) {
       alwaysShowSuffix
       type="number"
       suffix={
-        <div className={styles.container}>
+        <div className={classNames(styles.container, styles[i18n.dir()])}>
           <Button
             className={styles.up}
             isDisabled={
diff --git a/packages/console/src/ds-components/TextInput/index.module.scss b/packages/console/src/ds-components/TextInput/index.module.scss
index d41280be6..7af40ca03 100644
--- a/packages/console/src/ds-components/TextInput/index.module.scss
+++ b/packages/console/src/ds-components/TextInput/index.module.scss
@@ -30,6 +30,7 @@
   height: 36px;
   background-color: var(--color-layer-1);
   font: var(--font-body-2);
+  gap: _.unit(2);
 
   &.withIcon {
     display: flex;
@@ -38,7 +39,6 @@
     .icon {
       width: 20px;
       height: 20px;
-      margin-right: _.unit(2);
     }
   }
 
diff --git a/packages/console/src/ds-components/Textarea/index.module.scss b/packages/console/src/ds-components/Textarea/index.module.scss
index bc5510b3c..354f7d3b9 100644
--- a/packages/console/src/ds-components/Textarea/index.module.scss
+++ b/packages/console/src/ds-components/Textarea/index.module.scss
@@ -32,7 +32,7 @@
 
     // Leave space for scrollbar by setting `box-sizing` and `padding-right`
     box-sizing: content-box;
-    padding-right: 10px;
+    padding-inline-end: 10px;
 
     &::placeholder {
       color: var(--color-placeholder);
diff --git a/packages/console/src/ds-components/Uploader/ImageUploader/index.module.scss b/packages/console/src/ds-components/Uploader/ImageUploader/index.module.scss
index 8d27f7ff9..5b4fe7817 100644
--- a/packages/console/src/ds-components/Uploader/ImageUploader/index.module.scss
+++ b/packages/console/src/ds-components/Uploader/ImageUploader/index.module.scss
@@ -29,6 +29,12 @@
     }
   }
 
+  &.rtl {
+    .delete {
+      left: _.unit(2);
+      right: unset;
+    }
+  }
 
   &:hover {
     .delete {
diff --git a/packages/console/src/ds-components/Uploader/ImageUploader/index.tsx b/packages/console/src/ds-components/Uploader/ImageUploader/index.tsx
index 6b1600901..404535778 100644
--- a/packages/console/src/ds-components/Uploader/ImageUploader/index.tsx
+++ b/packages/console/src/ds-components/Uploader/ImageUploader/index.tsx
@@ -1,5 +1,6 @@
 import type { AllowedUploadMimeType } from '@logto/schemas';
 import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 
 import Delete from '@/assets/icons/delete.svg?react';
 import ImageWithErrorFallback from '@/ds-components/ImageWithErrorFallback';
@@ -29,9 +30,13 @@ function ImageUploader({
   uploadedClassName,
   ...rest
 }: Props) {
+  const { i18n } = useTranslation();
   const { allowedMimeTypes } = useImageMimeTypes(imageMimeTypes);
+
   return value ? (
-    <div className={classNames(styles.imageUploader, className, uploadedClassName)}>
+    <div
+      className={classNames(styles.imageUploader, className, uploadedClassName, styles[i18n.dir()])}
+    >
       <ImageWithErrorFallback
         containerClassName={styles.container}
         src={value}
diff --git a/packages/console/src/mdx-components/DetailsSummary/index.module.scss b/packages/console/src/mdx-components/DetailsSummary/index.module.scss
index a1259a915..3c4bd33ca 100644
--- a/packages/console/src/mdx-components/DetailsSummary/index.module.scss
+++ b/packages/console/src/mdx-components/DetailsSummary/index.module.scss
@@ -17,7 +17,7 @@
     cursor: pointer;
 
     .arrow {
-      margin-right: _.unit(2);
+      margin-inline-end: _.unit(2);
       transform: rotate(0deg);
       transition: transform 0.3s;
     }
diff --git a/packages/console/src/mdx-components/Steps/index.module.scss b/packages/console/src/mdx-components/Steps/index.module.scss
index 4ee3bfd53..473bab15c 100644
--- a/packages/console/src/mdx-components/Steps/index.module.scss
+++ b/packages/console/src/mdx-components/Steps/index.module.scss
@@ -14,7 +14,7 @@
   position: sticky;
   top: _.unit(6);
   flex-shrink: 0;
-  margin-right: _.unit(7.5);
+  margin-inline-end: _.unit(7.5);
   width: 220px;
 
   > :not(:last-child) {
@@ -61,7 +61,7 @@
 @media screen and (max-width: dim.$guide-content-max-width) {
   .content {
     margin: 0;
-    padding-right: dim.$guide-content-padding;
+    padding-inline-end: dim.$guide-content-padding;
     max-width: calc(dim.$guide-main-content-max-width + dim.$guide-sidebar-width + dim.$guide-panel-gap + 2 * dim.$guide-content-padding);
   }
 }
diff --git a/packages/console/src/mdx-components/TabItem/index.module.scss b/packages/console/src/mdx-components/TabItem/index.module.scss
index 294c202a0..7244acc49 100644
--- a/packages/console/src/mdx-components/TabItem/index.module.scss
+++ b/packages/console/src/mdx-components/TabItem/index.module.scss
@@ -9,10 +9,10 @@
     display: flex;
     margin: _.unit(1) 0;
     padding: 0;
+    gap: _.unit(6);
 
     li {
       list-style: none;
-      margin-right: _.unit(6);
       padding-bottom: _.unit(1);
       font: var(--font-label-2);
       color: var(--color-text-secondary);
diff --git a/packages/console/src/onboarding/components/CardSelector/MultiCardSelector/CardItem.module.scss b/packages/console/src/onboarding/components/CardSelector/MultiCardSelector/CardItem.module.scss
index b174f20a6..732c58af1 100644
--- a/packages/console/src/onboarding/components/CardSelector/MultiCardSelector/CardItem.module.scss
+++ b/packages/console/src/onboarding/components/CardSelector/MultiCardSelector/CardItem.module.scss
@@ -14,7 +14,7 @@
 
   .icon {
     color: var(--color-text-secondary);
-    margin-right: _.unit(4);
+    margin-inline-end: _.unit(4);
     vertical-align: middle;
 
     > svg {
@@ -29,7 +29,7 @@
     }
 
     .trailingTag {
-      margin-left: _.unit(1);
+      margin-inline-start: _.unit(1);
     }
   }
 
diff --git a/packages/console/src/onboarding/pages/SignInExperience/InspireMe/index.module.scss b/packages/console/src/onboarding/pages/SignInExperience/InspireMe/index.module.scss
index 9dfcb6612..0dbd79e44 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/InspireMe/index.module.scss
+++ b/packages/console/src/onboarding/pages/SignInExperience/InspireMe/index.module.scss
@@ -10,7 +10,7 @@
   justify-content: space-between;
 
   .inspireContent {
-    margin-right: _.unit(6);
+    margin-inline-end: _.unit(6);
     display: flex;
     flex-direction: column;
 
@@ -27,7 +27,7 @@
   .button {
     border-color: var(--color-neutral-variant-80);
     // Note: this is a special case for the inspire me button since the bulb icon does not follow the standard icon size
-    padding-right: _.unit(7);
+    padding-inline-end: _.unit(7);
 
     &:not(:disabled) {
       &:not(:active),
diff --git a/packages/console/src/onboarding/pages/SignInExperience/Preview/PlatformTabs/PlatformTab.module.scss b/packages/console/src/onboarding/pages/SignInExperience/Preview/PlatformTabs/PlatformTab.module.scss
index 58cca4227..eb59dff65 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/Preview/PlatformTabs/PlatformTab.module.scss
+++ b/packages/console/src/onboarding/pages/SignInExperience/Preview/PlatformTabs/PlatformTab.module.scss
@@ -11,7 +11,7 @@
 
   .icon {
     color: var(--color-primary);
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
 
     > svg {
       display: block;
diff --git a/packages/console/src/onboarding/pages/SignInExperience/Skeleton/index.module.scss b/packages/console/src/onboarding/pages/SignInExperience/Skeleton/index.module.scss
index ae2d44bd6..3beb86ba1 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/Skeleton/index.module.scss
+++ b/packages/console/src/onboarding/pages/SignInExperience/Skeleton/index.module.scss
@@ -44,14 +44,14 @@
     .smallButton {
       width: 30px;
       height: 30px;
-      margin-left: _.unit(2.5);
+      margin-inline-start: _.unit(2.5);
       @include _.shimmering-animation;
     }
 
     .button {
       width: 104px;
       height: 30px;
-      margin-left: _.unit(2.5);
+      margin-inline-start: _.unit(2.5);
       @include _.shimmering-animation;
     }
   }
diff --git a/packages/console/src/onboarding/pages/SignInExperience/index.module.scss b/packages/console/src/onboarding/pages/SignInExperience/index.module.scss
index f1bcc6fbc..d24439cee 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/index.module.scss
+++ b/packages/console/src/onboarding/pages/SignInExperience/index.module.scss
@@ -16,7 +16,7 @@
     background-color: var(--color-layer-1);
     border-radius: 8px;
     padding: _.unit(12);
-    margin-right: _.unit(6);
+    margin-inline-end: _.unit(6);
 
     .authnSelector {
       grid-template-columns: repeat(2, 1fr);
diff --git a/packages/console/src/pages/ApiResourceDetails/components/GuideDrawer/index.tsx b/packages/console/src/pages/ApiResourceDetails/components/GuideDrawer/index.tsx
index ed98c00ed..80b6708e2 100644
--- a/packages/console/src/pages/ApiResourceDetails/components/GuideDrawer/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/components/GuideDrawer/index.tsx
@@ -7,6 +7,7 @@ import Close from '@/assets/icons/close.svg?react';
 import { type SelectedGuide } from '@/components/Guide/GuideCard';
 import GuideCardGroup from '@/components/Guide/GuideCardGroup';
 import { useApiGuideMetadata } from '@/components/Guide/hooks';
+import FlipOnRtl from '@/ds-components/FlipOnRtl';
 import IconButton from '@/ds-components/IconButton';
 import Spacer from '@/ds-components/Spacer';
 
@@ -35,7 +36,9 @@ function GuideDrawer({ apiResource, onClose }: Props) {
                 setSelectedGuide(undefined);
               }}
             >
-              <ArrowLeft />
+              <FlipOnRtl>
+                <ArrowLeft />
+              </FlipOnRtl>
             </IconButton>
             <div className={styles.separator} />
             <span>{t('checkout_tutorial', { name: selectedGuide.metadata.name })}</span>
diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/MachineToMachineApplicationRoles/index.module.scss b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/MachineToMachineApplicationRoles/index.module.scss
index 0bfc1d319..855c79c44 100644
--- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/MachineToMachineApplicationRoles/index.module.scss
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/MachineToMachineApplicationRoles/index.module.scss
@@ -19,5 +19,5 @@
 .icon {
   width: 40px;
   height: 40px;
-  margin-right: _.unit(2);
+  margin-inline-end: _.unit(2);
 }
diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx
index ac96e6ea9..ba37711d2 100644
--- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx
@@ -21,6 +21,7 @@ import { isCloud } from '@/consts/env';
 import { openIdProviderConfigPath } from '@/consts/oidc';
 import Button from '@/ds-components/Button';
 import CopyToClipboard from '@/ds-components/CopyToClipboard';
+import FlipOnRtl from '@/ds-components/FlipOnRtl';
 import FormField from '@/ds-components/FormField';
 import InlineNotification from '@/ds-components/InlineNotification';
 import Spacer from '@/ds-components/Spacer';
@@ -110,7 +111,11 @@ function ProtectedAppSettings({ data }: Props) {
             className={styles.button}
             size="small"
             title="application_details.try_it"
-            trailingIcon={<ExternalLinkIcon />}
+            trailingIcon={
+              <FlipOnRtl>
+                <ExternalLinkIcon />
+              </FlipOnRtl>
+            }
             onClick={() => {
               window.open(externalLink, '_blank');
             }}
diff --git a/packages/console/src/pages/ApplicationDetails/components/AppGuide/index.module.scss b/packages/console/src/pages/ApplicationDetails/components/AppGuide/index.module.scss
index f5e4abf71..fa74e7e06 100644
--- a/packages/console/src/pages/ApplicationDetails/components/AppGuide/index.module.scss
+++ b/packages/console/src/pages/ApplicationDetails/components/AppGuide/index.module.scss
@@ -77,8 +77,7 @@
     max-width: dim.$guide-main-content-max-width;
 
     > button {
-      margin-right: 0;
-      margin-left: auto;
+      margin-inline: auto 0;
     }
   }
 }
diff --git a/packages/console/src/pages/Applications/components/GuideLibrary/index.module.scss b/packages/console/src/pages/Applications/components/GuideLibrary/index.module.scss
index 6525c5919..959b18dbb 100644
--- a/packages/console/src/pages/Applications/components/GuideLibrary/index.module.scss
+++ b/packages/console/src/pages/Applications/components/GuideLibrary/index.module.scss
@@ -24,6 +24,13 @@
   transform: translateX(-100%);
 }
 
+.wrapper.rtl {
+  .filterAnchor {
+    inset: 0 0 0 auto;
+    transform: translateX(100%);
+  }
+}
+
 .filters {
   position: sticky;
   top: dim.$guide-content-padding;
@@ -31,7 +38,7 @@
   flex-direction: column;
   width: dim.$guide-sidebar-width;
   gap: _.unit(4);
-  margin-right: dim.$guide-panel-gap;
+  margin-inline-end: dim.$guide-panel-gap;
 
   label {
     font: var(--font-label-2);
@@ -99,8 +106,8 @@
 
 @media screen and (max-width: dim.$guide-content-max-width) {
   .wrapper.hasFilters {
-    margin-left: 0;
-    padding-right: dim.$guide-content-padding;
+    margin-inline-start: 0;
+    padding-inline-end: dim.$guide-content-padding;
     max-width: calc(dim.$guide-main-content-max-width + dim.$guide-sidebar-width + dim.$guide-panel-gap + 2 * dim.$guide-content-padding);
   }
 }
diff --git a/packages/console/src/pages/Applications/components/GuideLibrary/index.tsx b/packages/console/src/pages/Applications/components/GuideLibrary/index.tsx
index a013dc3ea..f1a65506c 100644
--- a/packages/console/src/pages/Applications/components/GuideLibrary/index.tsx
+++ b/packages/console/src/pages/Applications/components/GuideLibrary/index.tsx
@@ -30,7 +30,7 @@ type Props = {
 };
 
 function GuideLibrary({ className, hasCardBorder, hasCardButton, onSelectGuide }: Props) {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { t, i18n } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { pathname } = useLocation();
   const [keyword, setKeyword] = useState<string>('');
   const [filterCategories, setFilterCategories] = useState<AppGuideCategory[]>([]);
@@ -68,7 +68,13 @@ function GuideLibrary({ className, hasCardBorder, hasCardButton, onSelectGuide }
 
   return (
     <OverlayScrollbar className={classNames(styles.container, className)}>
-      <div className={classNames(styles.wrapper, isApplicationCreateModal && styles.hasFilters)}>
+      <div
+        className={classNames(
+          styles.wrapper,
+          isApplicationCreateModal && styles.hasFilters,
+          styles[i18n.dir()]
+        )}
+      >
         <div className={styles.groups}>
           {isApplicationCreateModal && (
             <div className={styles.filterAnchor}>
diff --git a/packages/console/src/pages/Applications/components/ProtectedAppForm/index.module.scss b/packages/console/src/pages/Applications/components/ProtectedAppForm/index.module.scss
index 44893cfe4..438de4846 100644
--- a/packages/console/src/pages/Applications/components/ProtectedAppForm/index.module.scss
+++ b/packages/console/src/pages/Applications/components/ProtectedAppForm/index.module.scss
@@ -78,6 +78,6 @@ form {
 
   &.leftAligned {
     align-self: flex-start;
-    margin-left: _.unit(15);
+    margin-inline-start: _.unit(15);
   }
 }
diff --git a/packages/console/src/pages/AuditLogDetails/index.module.scss b/packages/console/src/pages/AuditLogDetails/index.module.scss
index b4911fc7a..edfd97f6e 100644
--- a/packages/console/src/pages/AuditLogDetails/index.module.scss
+++ b/packages/console/src/pages/AuditLogDetails/index.module.scss
@@ -5,7 +5,7 @@
   display: flex;
 
   > *:not(:first-child) {
-    margin-left: _.unit(6);
+    margin-inline-start: _.unit(6);
   }
 
   .content {
diff --git a/packages/console/src/pages/ConnectorDetails/ConnectorTabs/index.module.scss b/packages/console/src/pages/ConnectorDetails/ConnectorTabs/index.module.scss
index d7f82aa96..de4668da2 100644
--- a/packages/console/src/pages/ConnectorDetails/ConnectorTabs/index.module.scss
+++ b/packages/console/src/pages/ConnectorDetails/ConnectorTabs/index.module.scss
@@ -16,14 +16,14 @@
     border: 1px solid var(--color-surface-5);
 
     &:not(:last-child) {
-      margin-right: _.unit(4);
+      margin-inline-end: _.unit(4);
     }
 
     .icon {
       width: 16px;
       height: 16px;
       object-fit: cover;
-      margin-right: _.unit(1);
+      margin-inline-end: _.unit(1);
       color: var(--color-text-link);
     }
 
diff --git a/packages/console/src/pages/Connectors/ConnectorName/index.module.scss b/packages/console/src/pages/Connectors/ConnectorName/index.module.scss
index 092b897cb..d70d09656 100644
--- a/packages/console/src/pages/Connectors/ConnectorName/index.module.scss
+++ b/packages/console/src/pages/Connectors/ConnectorName/index.module.scss
@@ -24,10 +24,7 @@
 .previewTitle {
   display: flex;
   align-items: center;
-
-  > *:first-child {
-    margin-right: _.unit(2);
-  }
+  gap: _.unit(2);
 }
 
 .platforms {
@@ -37,6 +34,7 @@
   .platform {
     display: flex;
     align-items: center;
+    gap: _.unit(1);
 
     &:not(:last-child)::after {
       content: '';
@@ -45,9 +43,5 @@
       border-right: 1px solid var(--color-border);
       margin: 0 _.unit(1);
     }
-
-    svg {
-      margin-right: _.unit(1);
-    }
   }
 }
diff --git a/packages/console/src/pages/Connectors/ConnectorStatusField/index.module.scss b/packages/console/src/pages/Connectors/ConnectorStatusField/index.module.scss
index 236613a11..b80f20548 100644
--- a/packages/console/src/pages/Connectors/ConnectorStatusField/index.module.scss
+++ b/packages/console/src/pages/Connectors/ConnectorStatusField/index.module.scss
@@ -5,7 +5,7 @@
   align-items: center;
 
   .tipButton {
-    margin-left: _.unit(0.5);
+    margin-inline-start: _.unit(0.5);
   }
 }
 
diff --git a/packages/console/src/pages/Connectors/Guide/index.module.scss b/packages/console/src/pages/Connectors/Guide/index.module.scss
index 6183ffeb0..b34633e84 100644
--- a/packages/console/src/pages/Connectors/Guide/index.module.scss
+++ b/packages/console/src/pages/Connectors/Guide/index.module.scss
@@ -15,7 +15,7 @@
     padding: 0 _.unit(21) 0 _.unit(2);
 
     button {
-      margin-left: _.unit(4);
+      margin-inline-start: _.unit(4);
     }
 
     .separator {
diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss
index 601a41e42..51c3d210a 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss
@@ -65,7 +65,7 @@
 
         // TODO (LOG-8602): Remove the default left margin of CopyToClipboard copyToolTipAnchor component.
         div[class*='copyToolTipAnchor'] {
-          margin-left: 0;
+          margin-inline-start: 0;
         }
       }
     }
@@ -74,6 +74,7 @@
   .editorContainer {
     position: relative;
     flex-grow: 1;
+    direction: ltr;
 
     &.dashboardOpen {
       flex-grow: 0;
diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/index.module.scss b/packages/console/src/pages/CustomizeJwtDetails/MainContent/index.module.scss
index cd752d350..e279e8dd2 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/index.module.scss
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/index.module.scss
@@ -9,7 +9,7 @@
 
   > * {
     &:first-child {
-      margin-right: _.unit(3);
+      margin-inline-end: _.unit(3);
       flex: 9;
     }
 
diff --git a/packages/console/src/pages/CustomizeJwtDetails/PageLoadingSkeleton/index.module.scss b/packages/console/src/pages/CustomizeJwtDetails/PageLoadingSkeleton/index.module.scss
index 02c74e428..4d73436c3 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/PageLoadingSkeleton/index.module.scss
+++ b/packages/console/src/pages/CustomizeJwtDetails/PageLoadingSkeleton/index.module.scss
@@ -10,7 +10,7 @@
     margin-bottom: _.unit(6);
 
     &:first-child {
-      margin-right: _.unit(3);
+      margin-inline-end: _.unit(3);
       flex: 9;
     }
 
diff --git a/packages/console/src/pages/Dashboard/components/Block.module.scss b/packages/console/src/pages/Dashboard/components/Block.module.scss
index 3df4abbf0..8a30ee889 100644
--- a/packages/console/src/pages/Dashboard/components/Block.module.scss
+++ b/packages/console/src/pages/Dashboard/components/Block.module.scss
@@ -19,7 +19,7 @@
   flex: 1;
 
   &:not(:last-child) {
-    margin-right: _.unit(4);
+    margin-inline-end: _.unit(4);
   }
 
   &.bordered {
@@ -35,7 +35,7 @@
     align-items: center;
 
     .toggleTipButton {
-      margin-left: _.unit(0.5);
+      margin-inline-start: _.unit(0.5);
     }
   }
 
@@ -61,7 +61,7 @@
       align-items: center;
 
       .number {
-        margin-right: _.unit(2);
+        margin-inline-end: _.unit(2);
         flex: 0;
       }
     }
diff --git a/packages/console/src/pages/Dashboard/components/Skeleton/index.module.scss b/packages/console/src/pages/Dashboard/components/Skeleton/index.module.scss
index 1242c7d92..4391037d5 100644
--- a/packages/console/src/pages/Dashboard/components/Skeleton/index.module.scss
+++ b/packages/console/src/pages/Dashboard/components/Skeleton/index.module.scss
@@ -21,7 +21,7 @@
   flex: 1;
 
   &:not(:last-child) {
-    margin-right: _.unit(4);
+    margin-inline-end: _.unit(4);
   }
 }
 
diff --git a/packages/console/src/pages/Dashboard/index.module.scss b/packages/console/src/pages/Dashboard/index.module.scss
index fb2a1354a..8fc10294e 100644
--- a/packages/console/src/pages/Dashboard/index.module.scss
+++ b/packages/console/src/pages/Dashboard/index.module.scss
@@ -17,7 +17,7 @@
 
   .subtitle {
     margin-top: _.unit(1);
-    padding-right: _.unit(6);
+    padding-inline-end: _.unit(6);
     font: var(--font-body-2);
     color: var(--color-text-secondary);
   }
@@ -38,10 +38,18 @@
     top: _.unit(6);
     width: 160px;
   }
+
+  &.rtl {
+    .datePicker {
+      right: unset;
+      left: _.unit(6);
+    }
+  }
 }
 
 .curve {
   margin: _.unit(10) 0 _.unit(6);
   width: 100%;
   height: 168px;
+  direction: ltr;
 }
diff --git a/packages/console/src/pages/Dashboard/index.tsx b/packages/console/src/pages/Dashboard/index.tsx
index ee2d27ebc..6017d8daa 100644
--- a/packages/console/src/pages/Dashboard/index.tsx
+++ b/packages/console/src/pages/Dashboard/index.tsx
@@ -1,6 +1,7 @@
+import classNames from 'classnames';
 import { format } from 'date-fns';
 import type { ChangeEventHandler } from 'react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Area,
@@ -47,7 +48,22 @@ function Dashboard() {
   const { data: activeData, error: activeError } = useSWR<ActiveUsersResponse, RequestError>(
     `api/dashboard/users/active?date=${date}`
   );
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { t, i18n } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const isRtl = i18n.dir() === 'rtl';
+
+  const areaChartData = useMemo(() => {
+    const chartData = activeData?.dauCurve.map((item) => ({
+      ...item,
+      // Remove "year" for a compact label.
+      date: item.date.replace(/\d{4}-/, ''),
+    }));
+
+    if (isRtl) {
+      // eslint-disable-next-line @silverhand/fp/no-mutating-methods
+      return chartData?.slice().reverse();
+    }
+    return chartData;
+  }, [activeData?.dauCurve, isRtl]);
 
   // Pick an error as the page's error
   const error = totalError ?? newError ?? activeError;
@@ -87,7 +103,7 @@ function Dashboard() {
               delta={newData.last7Days.delta}
             />
           </div>
-          <Card className={styles.activeCard}>
+          <Card className={classNames(styles.activeCard, styles[i18n.dir()])}>
             <Block
               title="dashboard.daily_active_users"
               tip={t('dashboard.daily_active_users_tip')}
@@ -98,17 +114,9 @@ function Dashboard() {
             <div className={styles.datePicker}>
               <TextInput type="date" value={date} onChange={handleDateChange} />
             </div>
-            <div className={styles.curve}>
+            <div className={classNames(styles.curve, styles[i18n.dir()])}>
               <ResponsiveContainer>
-                <AreaChart
-                  data={activeData.dauCurve.map((item) => ({
-                    ...item,
-                    // Remove "year" for a compact label.
-                    date: item.date.replace(/\d{4}-/, ''),
-                  }))}
-                  width={1100}
-                  height={168}
-                >
+                <AreaChart data={areaChartData} width={1100} height={168}>
                   <CartesianGrid vertical={false} stroke="var(--color-divider)" />
                   <Area
                     type="monotone"
@@ -116,10 +124,12 @@ function Dashboard() {
                     stroke="var(--color-primary)"
                     strokeWidth={2}
                     fill="var(--color-hover-variant)"
+                    animationDuration={isRtl ? 0 : 1500}
                   />
                   <XAxis dataKey="date" tickLine={false} tick={tickStyle} />
                   <YAxis
                     width={35}
+                    orientation={isRtl ? 'right' : 'left'}
                     axisLine={false}
                     tickLine={false}
                     tick={tickStyle}
diff --git a/packages/console/src/pages/EnterpriseSso/SsoCreationModal/SsoConnectorRadioGroup/SsoConnectorRadio/index.module.scss b/packages/console/src/pages/EnterpriseSso/SsoCreationModal/SsoConnectorRadioGroup/SsoConnectorRadio/index.module.scss
index b6666fb71..cd5b3ba55 100644
--- a/packages/console/src/pages/EnterpriseSso/SsoCreationModal/SsoConnectorRadioGroup/SsoConnectorRadio/index.module.scss
+++ b/packages/console/src/pages/EnterpriseSso/SsoCreationModal/SsoConnectorRadioGroup/SsoConnectorRadio/index.module.scss
@@ -3,15 +3,14 @@
 .ssoConnector {
   font: var(--font-body-2);
   display: flex;
+  gap: _.unit(3);
 
   .content {
     flex: 1;
-    margin-left: _.unit(3);
 
     .name {
       font: var(--font-label-2);
       @include _.multi-line-ellipsis(1);
-      padding-right: _.unit(3);
     }
 
     .description {
diff --git a/packages/console/src/pages/EnterpriseSsoDetails/Connection/FileReader/index.module.scss b/packages/console/src/pages/EnterpriseSsoDetails/Connection/FileReader/index.module.scss
index 66a7c3d39..451d6f1e5 100644
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/FileReader/index.module.scss
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/FileReader/index.module.scss
@@ -21,7 +21,7 @@
     align-items: flex-start;
     gap: _.unit(0.5);
     flex: 1;
-    margin-left: _.unit(2);
+    margin-inline-start: _.unit(2);
 
     .fileName {
       font: var(--font-label-2);
diff --git a/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlAttributeMapping/index.module.scss b/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlAttributeMapping/index.module.scss
index 005119c6b..be2d8515b 100644
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlAttributeMapping/index.module.scss
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlAttributeMapping/index.module.scss
@@ -27,7 +27,7 @@
   * > th {
     font: var(--font-label-2);
     color: var(--color-text);
-    text-align: left;
+    text-align: start;
   }
 }
 
diff --git a/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/ParsedConfigPreview/index.module.scss b/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/ParsedConfigPreview/index.module.scss
index 42ca608ca..af247f216 100644
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/ParsedConfigPreview/index.module.scss
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/ParsedConfigPreview/index.module.scss
@@ -36,7 +36,7 @@
   .indicator {
     width: 10px;
     height: 10px;
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
     border-radius: 50%;
     background: var(--color-on-success-container);
   }
diff --git a/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/SwitchFormatButton/index.module.scss b/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/SwitchFormatButton/index.module.scss
index c5543abc0..ab960fbb9 100644
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/SwitchFormatButton/index.module.scss
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlMetadataForm/SwitchFormatButton/index.module.scss
@@ -22,11 +22,11 @@
 .title {
   display: flex;
   align-items: center;
-  margin-left: _.unit(1);
+  margin-inline-start: _.unit(1);
 
   .optionText {
     font: var(--font-body-2);
-    margin-left: _.unit(3);
+    margin-inline-start: _.unit(3);
   }
 
   &.selected {
diff --git a/packages/console/src/pages/EnterpriseSsoDetails/Experience/DomainsInput/index.module.scss b/packages/console/src/pages/EnterpriseSsoDetails/Experience/DomainsInput/index.module.scss
index e83d6fad3..89dbf3fc3 100644
--- a/packages/console/src/pages/EnterpriseSsoDetails/Experience/DomainsInput/index.module.scss
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Experience/DomainsInput/index.module.scss
@@ -50,7 +50,7 @@
     .delete {
       width: 20px;
       height: 20px;
-      margin-right: _.unit(-0.5);
+      margin-inline-end: _.unit(-0.5);
     }
 
     input {
diff --git a/packages/console/src/pages/OrganizationRoleDetails/Permissions/ResourceName/index.module.scss b/packages/console/src/pages/OrganizationRoleDetails/Permissions/ResourceName/index.module.scss
index ac817b5d8..d7e38a05b 100644
--- a/packages/console/src/pages/OrganizationRoleDetails/Permissions/ResourceName/index.module.scss
+++ b/packages/console/src/pages/OrganizationRoleDetails/Permissions/ResourceName/index.module.scss
@@ -1,13 +1,13 @@
 @use '@/scss/underscore' as _;
 
 .container {
-  margin-left: _.unit(2);
+  margin-inline-start: _.unit(2);
   color: var(--color-text-secondary);
 
   .icon {
     width: 16px;
     height: 16px;
-    margin-right: _.unit(1);
+    margin-inline-end: _.unit(1);
     // Align icon with text
     vertical-align: text-bottom;
   }
diff --git a/packages/console/src/pages/OrganizationRoleDetails/Permissions/index.module.scss b/packages/console/src/pages/OrganizationRoleDetails/Permissions/index.module.scss
index 1adec369d..a9a1e0ca9 100644
--- a/packages/console/src/pages/OrganizationRoleDetails/Permissions/index.module.scss
+++ b/packages/console/src/pages/OrganizationRoleDetails/Permissions/index.module.scss
@@ -6,6 +6,6 @@
   align-items: center;
 
   .assignButton {
-    margin-left: _.unit(2);
+    margin-inline-start: _.unit(2);
   }
 }
diff --git a/packages/console/src/pages/OrganizationTemplate/OrganizationPermissions/index.module.scss b/packages/console/src/pages/OrganizationTemplate/OrganizationPermissions/index.module.scss
index 59e6e65b1..30e96ccea 100644
--- a/packages/console/src/pages/OrganizationTemplate/OrganizationPermissions/index.module.scss
+++ b/packages/console/src/pages/OrganizationTemplate/OrganizationPermissions/index.module.scss
@@ -6,6 +6,6 @@
   align-items: center;
 
   .createButton {
-    margin-left: _.unit(2);
+    margin-inline-start: _.unit(2);
   }
 }
diff --git a/packages/console/src/pages/Profile/components/CardContent/index.module.scss b/packages/console/src/pages/Profile/components/CardContent/index.module.scss
index 8dcb1d67c..4b99449c9 100644
--- a/packages/console/src/pages/Profile/components/CardContent/index.module.scss
+++ b/packages/console/src/pages/Profile/components/CardContent/index.module.scss
@@ -12,7 +12,7 @@
     display: inline-flex;
 
     + .actionButton {
-      margin-left: _.unit(4);
+      margin-inline-start: _.unit(4);
     }
   }
 
@@ -24,7 +24,7 @@
   .icon {
     width: 32px;
     height: 32px;
-    margin-right: _.unit(4);
+    margin-inline-end: _.unit(4);
   }
 
   table {
@@ -46,7 +46,7 @@
       }
 
       &:last-child {
-        text-align: right;
+        text-align: end;
         width: 25%;
 
         .wrapper {
diff --git a/packages/console/src/pages/Profile/components/ExperienceLikeModal/index.tsx b/packages/console/src/pages/Profile/components/ExperienceLikeModal/index.tsx
index ba443d513..78966e94e 100644
--- a/packages/console/src/pages/Profile/components/ExperienceLikeModal/index.tsx
+++ b/packages/console/src/pages/Profile/components/ExperienceLikeModal/index.tsx
@@ -5,8 +5,9 @@ import { Trans, useTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
 import { useNavigate } from 'react-router-dom';
 
-import Arrow from '@/assets/icons/arrow-left.svg?react';
+import ArrowLeft from '@/assets/icons/arrow-left.svg?react';
 import DynamicT from '@/ds-components/DynamicT';
+import FlipOnRtl from '@/ds-components/FlipOnRtl';
 import TextLink from '@/ds-components/TextLink';
 import modalStyles from '@/scss/modal.module.scss';
 
@@ -37,7 +38,11 @@ function ExperienceLikeModal({
         <div className={styles.wrapper}>
           <TextLink
             className={styles.backButton}
-            icon={<Arrow />}
+            icon={
+              <FlipOnRtl>
+                <ArrowLeft />
+              </FlipOnRtl>
+            }
             onClick={() => {
               if (onGoBack) {
                 onGoBack();
diff --git a/packages/console/src/pages/Profile/components/LinkAccountSection/index.module.scss b/packages/console/src/pages/Profile/components/LinkAccountSection/index.module.scss
index 21f5c6d49..05a77378f 100644
--- a/packages/console/src/pages/Profile/components/LinkAccountSection/index.module.scss
+++ b/packages/console/src/pages/Profile/components/LinkAccountSection/index.module.scss
@@ -6,7 +6,7 @@
 
   svg {
     flex-shrink: 0;
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
   }
 
   span {
diff --git a/packages/console/src/pages/Profile/components/Skeleton/index.module.scss b/packages/console/src/pages/Profile/components/Skeleton/index.module.scss
index dd02832fe..4f860f9c9 100644
--- a/packages/console/src/pages/Profile/components/Skeleton/index.module.scss
+++ b/packages/console/src/pages/Profile/components/Skeleton/index.module.scss
@@ -21,7 +21,7 @@
 .titleWrapper {
   width: 296px;
   padding-bottom: _.unit(6);
-  margin-right: _.unit(14);
+  margin-inline-end: _.unit(14);
   flex-shrink: 0;
 
   > :not(:first-child) {
@@ -73,7 +73,7 @@
       }
 
       &:last-child {
-        text-align: right;
+        text-align: end;
         width: 25%;
 
         .item {
@@ -95,7 +95,7 @@
 
   .titleWrapper {
     width: 100%;
-    margin-right: unset;
+    margin-inline-end: unset;
   }
 
   .card {
diff --git a/packages/console/src/pages/Profile/index.module.scss b/packages/console/src/pages/Profile/index.module.scss
index 26226a6af..f6a09d5c5 100644
--- a/packages/console/src/pages/Profile/index.module.scss
+++ b/packages/console/src/pages/Profile/index.module.scss
@@ -37,7 +37,7 @@
 
     .description {
       font: var(--font-body-2);
-      margin-right: _.unit(2);
+      margin-inline-end: _.unit(2);
     }
   }
 }
diff --git a/packages/console/src/pages/RoleDetails/RoleApplications/index.module.scss b/packages/console/src/pages/RoleDetails/RoleApplications/index.module.scss
index f549a7d08..6e3e23e3f 100644
--- a/packages/console/src/pages/RoleDetails/RoleApplications/index.module.scss
+++ b/packages/console/src/pages/RoleDetails/RoleApplications/index.module.scss
@@ -22,5 +22,5 @@
 .icon {
   width: 40px;
   height: 40px;
-  margin-right: _.unit(2);
+  margin-inline-end: _.unit(2);
 }
diff --git a/packages/console/src/pages/Roles/components/AssignedEntities/index.module.scss b/packages/console/src/pages/Roles/components/AssignedEntities/index.module.scss
index 78292e071..68687082d 100644
--- a/packages/console/src/pages/Roles/components/AssignedEntities/index.module.scss
+++ b/packages/console/src/pages/Roles/components/AssignedEntities/index.module.scss
@@ -3,6 +3,7 @@
 .entities {
   display: flex;
   align-items: center;
+  gap: _.unit(2);
 
   .avatars {
     display: flex;
@@ -15,7 +16,7 @@
       box-sizing: content-box;
 
       &:not(:last-child) {
-        margin-left: _.unit(-2);
+        margin-inline-start: _.unit(-2);
       }
     }
 
@@ -27,12 +28,11 @@
   }
 
   .count {
-    margin-left: 9px;
     color: var(--color-text);
     font: var(--font-body-2);
   }
 }
 
 .empty {
-  padding-left: _.unit(0.5);
+  padding-inline-start: _.unit(0.5);
 }
diff --git a/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageDetails.module.scss b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageDetails.module.scss
index 3d877d052..d2650aef8 100644
--- a/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageDetails.module.scss
+++ b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageDetails.module.scss
@@ -44,7 +44,7 @@
       }
 
       .clearButton {
-        margin-left: _.unit(1);
+        margin-inline-start: _.unit(1);
       }
 
       .clearIcon {
@@ -113,7 +113,7 @@
       display: flex;
       flex-direction: row-reverse;
       align-items: center;
-      padding-right: _.unit(5);
+      padding-inline-end: _.unit(5);
     }
   }
 }
diff --git a/packages/console/src/pages/SignInExperience/PageContent/PasswordPolicy/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/PasswordPolicy/index.module.scss
index 2d44a590b..142746057 100644
--- a/packages/console/src/pages/SignInExperience/PageContent/PasswordPolicy/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/PageContent/PasswordPolicy/index.module.scss
@@ -11,7 +11,7 @@
 }
 
 .textarea {
-  margin-left: _.unit(7);
+  margin-inline-start: _.unit(7);
   margin-top: _.unit(2);
 }
 
diff --git a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignInForm/SignInMethodEditBox/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignInForm/SignInMethodEditBox/index.module.scss
index 05ce5ad8d..406777bfb 100644
--- a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignInForm/SignInMethodEditBox/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignInForm/SignInMethodEditBox/index.module.scss
@@ -8,6 +8,7 @@
   display: flex;
   align-items: center;
   margin: _.unit(2) 0;
+  gap: _.unit(2);
 }
 
 .signInMethod {
@@ -15,7 +16,6 @@
   align-items: center;
   height: 44px;
   width: 100%;
-  margin-right: _.unit(2);
   padding: _.unit(3) _.unit(2);
   background-color: var(--color-layer-2);
   border-radius: 8px;
@@ -31,6 +31,7 @@
     display: flex;
     font: var(--font-label-2);
     align-items: center;
+    gap: _.unit(1);
   }
 
   .authentication {
@@ -53,7 +54,6 @@
 
   .draggableIcon {
     color: var(--color-text-secondary);
-    margin-right: _.unit(1);
   }
 }
 
diff --git a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/index.module.scss
index 27a3f520a..ded53a35c 100644
--- a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/index.module.scss
@@ -6,7 +6,7 @@
 }
 
 .socialOnlyDescription {
-  margin-left: _.unit(1);
+  margin-inline-start: _.unit(1);
   color: var(--color-text-secondary);
 }
 
diff --git a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SocialSignInForm/SocialConnectorEditBox/AddButton/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SocialSignInForm/SocialConnectorEditBox/AddButton/index.module.scss
index 234bb86c4..01935f52f 100644
--- a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SocialSignInForm/SocialConnectorEditBox/AddButton/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SocialSignInForm/SocialConnectorEditBox/AddButton/index.module.scss
@@ -15,17 +15,17 @@
 .title {
   display: flex;
   align-items: center;
+  gap: _.unit(3);
 
   .name {
     font: var(--font-body-2);
-    margin-left: _.unit(3);
   }
 
   .icon {
     width: 16px;
     height: 16px;
     object-fit: cover;
-    margin-left: _.unit(1);
+    margin-inline-start: _.unit(1);
     color: var(--color-text-secondary);
   }
 }
diff --git a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SocialSignInForm/SocialConnectorEditBox/SelectedConnectorItem/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SocialSignInForm/SocialConnectorEditBox/SelectedConnectorItem/index.module.scss
index 3b37fc5f3..d3962583d 100644
--- a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SocialSignInForm/SocialConnectorEditBox/SelectedConnectorItem/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SocialSignInForm/SocialConnectorEditBox/SelectedConnectorItem/index.module.scss
@@ -5,34 +5,32 @@
   align-items: center;
   margin: _.unit(2) 0;
 
-
   .info {
     display: flex;
     align-items: center;
     height: 44px;
     width: 100%;
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
     padding: _.unit(3) _.unit(2);
     background-color: var(--color-layer-2);
     border-radius: 8px;
     cursor: move;
     color: var(--color-text);
+    gap: _.unit(3);
 
     .draggableIcon {
       color: var(--color-text-secondary);
-      margin-right: _.unit(3);
     }
 
     .name {
       font: var(--font-label-2);
-      margin-left: _.unit(3);
     }
 
     .icon {
       width: 16px;
       height: 16px;
       object-fit: cover;
-      margin-left: _.unit(1);
+      margin-inline-start: _.unit(1);
       color: var(--color-text-secondary);
     }
   }
diff --git a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.module.scss
index 15f7bbb8a..47f32b106 100644
--- a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.module.scss
@@ -5,7 +5,7 @@
 }
 
 .list {
-  padding-left: _.unit(6);
+  padding-inline-start: _.unit(6);
 
   li {
     word-break: break-word;
diff --git a/packages/console/src/pages/SignInExperience/PageContent/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/index.module.scss
index c2142b351..80ed22c73 100644
--- a/packages/console/src/pages/SignInExperience/PageContent/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/PageContent/index.module.scss
@@ -13,6 +13,7 @@
     display: flex;
     flex: 1;
     margin-bottom: _.unit(6);
+    gap: _.unit(3);
 
     &.withSubmitActionBar {
       margin-bottom: _.unit(3);
@@ -23,10 +24,6 @@
       min-width: 510px;
     }
 
-    .form {
-      margin-right: _.unit(3);
-    }
-
     .preview {
       position: sticky;
       top: _.unit(4);
diff --git a/packages/console/src/pages/SignInExperience/PageContent/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/index.tsx
index f437aa240..6c0a9a6fa 100644
--- a/packages/console/src/pages/SignInExperience/PageContent/index.tsx
+++ b/packages/console/src/pages/SignInExperience/PageContent/index.tsx
@@ -135,7 +135,7 @@ function PageContent({ data, onSignInExperienceUpdated }: Props) {
       <div className={styles.content}>
         <div className={classNames(styles.contentTop, isDirty && styles.withSubmitActionBar)}>
           <FormProvider {...methods}>
-            <form className={styles.form}>
+            <form>
               <Branding isActive={tab === SignInExperienceTab.Branding} />
               <SignUpAndSignIn isActive={tab === SignInExperienceTab.SignUpAndSignIn} />
               <Content isActive={tab === SignInExperienceTab.Content} />
diff --git a/packages/console/src/pages/SignInExperience/Skeleton/index.module.scss b/packages/console/src/pages/SignInExperience/Skeleton/index.module.scss
index 0634358e7..fc7d07c07 100644
--- a/packages/console/src/pages/SignInExperience/Skeleton/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/Skeleton/index.module.scss
@@ -63,7 +63,7 @@
         .button {
           width: 104px;
           height: 30px;
-          margin-left: _.unit(2.5);
+          margin-inline-start: _.unit(2.5);
           @include _.shimmering-animation;
         }
       }
diff --git a/packages/console/src/pages/SignInExperience/Skeleton/index.tsx b/packages/console/src/pages/SignInExperience/Skeleton/index.tsx
index 0107535a1..b0a5cc966 100644
--- a/packages/console/src/pages/SignInExperience/Skeleton/index.tsx
+++ b/packages/console/src/pages/SignInExperience/Skeleton/index.tsx
@@ -19,7 +19,7 @@ function Skeleton() {
       <div className={classNames(pageContentStyles.tabs, styles.tabBar)} />
       <div className={classNames(pageContentStyles.content, styles.content)}>
         <div className={pageContentStyles.contentTop}>
-          <div className={pageContentStyles.form}>
+          <div>
             <div className={styles.card}>
               <div className={styles.title} />
               <div className={styles.field} />
diff --git a/packages/console/src/pages/SignInExperience/Welcome/GuideModal.module.scss b/packages/console/src/pages/SignInExperience/Welcome/GuideModal.module.scss
index 2edffc3e9..1ee951577 100644
--- a/packages/console/src/pages/SignInExperience/Welcome/GuideModal.module.scss
+++ b/packages/console/src/pages/SignInExperience/Welcome/GuideModal.module.scss
@@ -15,7 +15,7 @@
     padding: 0 _.unit(21) 0 _.unit(2);
 
     button {
-      margin-left: _.unit(4);
+      margin-inline-start: _.unit(4);
     }
 
     .separator {
@@ -63,7 +63,7 @@
 
     .preview {
       flex: 1;
-      margin-left: _.unit(8);
+      margin-inline-start: _.unit(8);
       position: sticky;
       top: _.unit(4);
     }
diff --git a/packages/console/src/pages/SignInExperience/Welcome/index.module.scss b/packages/console/src/pages/SignInExperience/Welcome/index.module.scss
index 8cf970925..e94681a75 100644
--- a/packages/console/src/pages/SignInExperience/Welcome/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/Welcome/index.module.scss
@@ -19,7 +19,7 @@
   }
 
   .wrapper {
-    margin-left: _.unit(6);
+    margin-inline-start: _.unit(6);
   }
 
   .title {
diff --git a/packages/console/src/pages/SignInExperience/components/Preview/index.module.scss b/packages/console/src/pages/SignInExperience/components/Preview/index.module.scss
index bddf9cbec..44ddf9d53 100644
--- a/packages/console/src/pages/SignInExperience/components/Preview/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/components/Preview/index.module.scss
@@ -20,6 +20,7 @@
     .selects {
       display: flex;
       align-items: center;
+      gap: _.unit(2);
 
       .language {
         width: 112px;
@@ -27,7 +28,7 @@
 
       > * {
         &:not(:last-child) {
-          margin-right: _.unit(2);
+          margin-inline-end: _.unit(2);
         }
       }
     }
diff --git a/packages/console/src/pages/SignInExperience/index.module.scss b/packages/console/src/pages/SignInExperience/index.module.scss
index 721c7e7fd..0d5d2f79d 100644
--- a/packages/console/src/pages/SignInExperience/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/index.module.scss
@@ -26,6 +26,7 @@
       display: flex;
       flex: 1;
       margin-bottom: _.unit(6);
+      gap: _.unit(3);
 
       &.withSubmitActionBar {
         margin-bottom: _.unit(3);
@@ -36,10 +37,6 @@
         min-width: 510px;
       }
 
-      .form {
-        margin-right: _.unit(3);
-      }
-
       .preview {
         position: sticky;
         top: _.unit(4);
diff --git a/packages/console/src/pages/TenantSettings/Subscription/DowngradeConfirmModalContent/PlanQuotaDiffCard/PlanQuotaList/DiffQuotaItem/index.module.scss b/packages/console/src/pages/TenantSettings/Subscription/DowngradeConfirmModalContent/PlanQuotaDiffCard/PlanQuotaList/DiffQuotaItem/index.module.scss
index 49eed8c32..0f25f43a1 100644
--- a/packages/console/src/pages/TenantSettings/Subscription/DowngradeConfirmModalContent/PlanQuotaDiffCard/PlanQuotaList/DiffQuotaItem/index.module.scss
+++ b/packages/console/src/pages/TenantSettings/Subscription/DowngradeConfirmModalContent/PlanQuotaDiffCard/PlanQuotaList/DiffQuotaItem/index.module.scss
@@ -3,7 +3,7 @@
 .quotaListItem {
   font: var(--font-body-2);
   // Add a margin to the left for the list item marker
-  margin-left: _.unit(4);
+  margin-inline-start: _.unit(4);
 
   .content {
     display: flex;
@@ -27,6 +27,6 @@
   &.withIcon {
     list-style-type: none;
     // Unset a margin to the left for the list item marker
-    margin-left: unset;
+    margin-inline-start: unset;
   }
 }
diff --git a/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/TableDataWrapper/TableDataContent/index.module.scss b/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/TableDataWrapper/TableDataContent/index.module.scss
index 4f270f7e5..f74993c5e 100644
--- a/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/TableDataWrapper/TableDataContent/index.module.scss
+++ b/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/TableDataWrapper/TableDataContent/index.module.scss
@@ -7,6 +7,6 @@
   justify-content: center;
 
   svg + span {
-    margin-left: _.unit(1);
+    margin-inline-start: _.unit(1);
   }
 }
diff --git a/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/index.module.scss b/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/index.module.scss
index 33a3161fa..ee2643032 100644
--- a/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/index.module.scss
+++ b/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/index.module.scss
@@ -31,14 +31,14 @@
 
       .groupLabel {
         font: var(--font-title-2);
-        text-align: left;
+        text-align: start;
         background-color: var(--color-layer-light);
         border-radius: 6px;
       }
 
       .quotaKeyColumn {
         padding: _.unit(4) _.unit(6);
-        text-align: left;
+        text-align: start;
       }
     }
   }
diff --git a/packages/console/src/pages/TenantSettings/TenantBasicSettings/DeleteCard/index.module.scss b/packages/console/src/pages/TenantSettings/TenantBasicSettings/DeleteCard/index.module.scss
index c0833584f..d57b6869e 100644
--- a/packages/console/src/pages/TenantSettings/TenantBasicSettings/DeleteCard/index.module.scss
+++ b/packages/console/src/pages/TenantSettings/TenantBasicSettings/DeleteCard/index.module.scss
@@ -9,7 +9,7 @@
 
   .description {
     flex: 1;
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
     font: var(--font-body-2);
   }
 }
diff --git a/packages/console/src/pages/TenantSettings/TenantBasicSettings/LeaveCard/index.module.scss b/packages/console/src/pages/TenantSettings/TenantBasicSettings/LeaveCard/index.module.scss
index 2bbae3ea2..b4f5fe313 100644
--- a/packages/console/src/pages/TenantSettings/TenantBasicSettings/LeaveCard/index.module.scss
+++ b/packages/console/src/pages/TenantSettings/TenantBasicSettings/LeaveCard/index.module.scss
@@ -9,7 +9,7 @@
 
   .description {
     flex: 1;
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
     font: var(--font-body-2);
   }
 }
diff --git a/packages/console/src/pages/TenantSettings/TenantDomainSettings/AddDomainForm/index.module.scss b/packages/console/src/pages/TenantSettings/TenantDomainSettings/AddDomainForm/index.module.scss
index 8b0b5e9d7..abd0760d1 100644
--- a/packages/console/src/pages/TenantSettings/TenantDomainSettings/AddDomainForm/index.module.scss
+++ b/packages/console/src/pages/TenantSettings/TenantDomainSettings/AddDomainForm/index.module.scss
@@ -6,7 +6,7 @@
 
   .textInput {
     flex: 1;
-    margin-right: _.unit(3);
+    margin-inline-end: _.unit(3);
   }
 
   .addButton {
diff --git a/packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/ActivationProcess/Step/index.module.scss b/packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/ActivationProcess/Step/index.module.scss
index a116587bb..7d867990d 100644
--- a/packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/ActivationProcess/Step/index.module.scss
+++ b/packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/ActivationProcess/Step/index.module.scss
@@ -11,11 +11,11 @@
 
     .title {
       font: var(--font-label-2);
-      margin-left: _.unit(5);
+      margin-inline-start: _.unit(5);
     }
 
     .tip {
-      margin-left: _.unit(0.5);
+      margin-inline-start: _.unit(0.5);
     }
   }
 
diff --git a/packages/console/src/pages/TenantSettings/TenantMembers/InviteEmailsInput/index.module.scss b/packages/console/src/pages/TenantSettings/TenantMembers/InviteEmailsInput/index.module.scss
index da81cfcc6..1122e7d69 100644
--- a/packages/console/src/pages/TenantSettings/TenantMembers/InviteEmailsInput/index.module.scss
+++ b/packages/console/src/pages/TenantSettings/TenantMembers/InviteEmailsInput/index.module.scss
@@ -51,7 +51,7 @@
     .delete {
       width: 20px;
       height: 20px;
-      margin-right: _.unit(-0.5);
+      margin-inline-end: _.unit(-0.5);
     }
 
     input {
diff --git a/packages/console/src/pages/UserDetails/UserSettings/UserSocialIdentities/index.module.scss b/packages/console/src/pages/UserDetails/UserSettings/UserSocialIdentities/index.module.scss
index ea011097e..5976e2593 100644
--- a/packages/console/src/pages/UserDetails/UserSettings/UserSocialIdentities/index.module.scss
+++ b/packages/console/src/pages/UserDetails/UserSettings/UserSocialIdentities/index.module.scss
@@ -22,7 +22,7 @@
   }
 
   .name {
-    margin-left: _.unit(3);
+    margin-inline-start: _.unit(3);
   }
 }
 
diff --git a/packages/console/src/pages/WebhookDetails/WebhookLogs/index.module.scss b/packages/console/src/pages/WebhookDetails/WebhookLogs/index.module.scss
index c6d58ad6b..b199bcaea 100644
--- a/packages/console/src/pages/WebhookDetails/WebhookLogs/index.module.scss
+++ b/packages/console/src/pages/WebhookDetails/WebhookLogs/index.module.scss
@@ -19,7 +19,7 @@
 
   .eventSelector {
     width: 300px;
-    margin-left: _.unit(2);
+    margin-inline-start: _.unit(2);
   }
 }
 
diff --git a/packages/console/src/pages/WebhookDetails/WebhookSettings/TestWebhook/index.module.scss b/packages/console/src/pages/WebhookDetails/WebhookSettings/TestWebhook/index.module.scss
index e122d307c..7df3e9755 100644
--- a/packages/console/src/pages/WebhookDetails/WebhookSettings/TestWebhook/index.module.scss
+++ b/packages/console/src/pages/WebhookDetails/WebhookSettings/TestWebhook/index.module.scss
@@ -10,7 +10,7 @@
 
 .description {
   font: var(--font-body-2);
-  margin-right: _.unit(3);
+  margin-inline-end: _.unit(3);
 }
 
 .result {
diff --git a/packages/console/src/pages/Webhooks/index.module.scss b/packages/console/src/pages/Webhooks/index.module.scss
index 65da58292..7e954ef43 100644
--- a/packages/console/src/pages/Webhooks/index.module.scss
+++ b/packages/console/src/pages/Webhooks/index.module.scss
@@ -8,6 +8,6 @@
 
 .requests {
   font: var(--font-body-2);
-  text-align: right;
-  margin-right: _.unit(4);
+  text-align: end;
+  margin-inline-end: _.unit(4);
 }
diff --git a/packages/console/src/pages/Welcome/index.module.scss b/packages/console/src/pages/Welcome/index.module.scss
index feae887b7..ebd608fb0 100644
--- a/packages/console/src/pages/Welcome/index.module.scss
+++ b/packages/console/src/pages/Welcome/index.module.scss
@@ -49,7 +49,7 @@ main {
 }
 
 .content {
-  margin-left: 98px;
+  margin-inline-start: 98px;
   width: 585px;
 }
 
diff --git a/packages/console/src/scss/transfer.module.scss b/packages/console/src/scss/transfer.module.scss
index acd49688a..cb8eb3c74 100644
--- a/packages/console/src/scss/transfer.module.scss
+++ b/packages/console/src/scss/transfer.module.scss
@@ -36,7 +36,7 @@
 
 .boxPagination {
   height: 40px;
-  padding-right: _.unit(4);
+  padding-inline-end: _.unit(4);
   border-top: 1px solid var(--color-border);
 }
 
diff --git a/packages/core/static/html/post-logout/index.html b/packages/core/static/html/post-logout/index.html
index 87a8ccaa1..4fc4ab9a6 100644
--- a/packages/core/static/html/post-logout/index.html
+++ b/packages/core/static/html/post-logout/index.html
@@ -102,7 +102,7 @@
   }
 
   .signature svg {
-    margin-left: 4px;
+    margin-inline-start: 4px;
     height: 18px;
   }
 
diff --git a/packages/demo-app/src/App.module.scss b/packages/demo-app/src/App.module.scss
index b739ae103..120d6b741 100644
--- a/packages/demo-app/src/App.module.scss
+++ b/packages/demo-app/src/App.module.scss
@@ -102,6 +102,11 @@
         justify-content: space-between;
         align-items: center;
       }
+
+      &.rtl {
+        left: unset;
+        right: _.unit(2);
+      }
     }
 
     img {
diff --git a/packages/demo-app/src/App.tsx b/packages/demo-app/src/App.tsx
index a714d4ff3..c4ad39b4d 100644
--- a/packages/demo-app/src/App.tsx
+++ b/packages/demo-app/src/App.tsx
@@ -129,6 +129,7 @@ const Main = () => {
           // will cause a re-render following some bugs here. This still works for the initial
           // render, so we're good for now. Consider refactoring this in the future.
           lang: i18next.language,
+          dir: i18next.dir(),
         }}
       />
       {showDevPanel && <DevPanel />}
diff --git a/packages/demo-app/src/DevPanel.tsx b/packages/demo-app/src/DevPanel.tsx
index 84b09369f..fb07a7434 100644
--- a/packages/demo-app/src/DevPanel.tsx
+++ b/packages/demo-app/src/DevPanel.tsx
@@ -2,6 +2,7 @@ import { useLogto } from '@logto/react';
 import { demoAppApplicationId } from '@logto/schemas';
 import { decodeJwt } from 'jose';
 import { useCallback, useState, type FormEventHandler } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import styles from './App.module.scss';
 import { getLocalData, setLocalData } from './utils';
@@ -15,6 +16,7 @@ const safeDecodeJwt = (token: string) => {
 };
 
 const DevPanel = () => {
+  const { i18n } = useTranslation();
   const config = getLocalData('config');
   const [showSaved, setShowSaved] = useState(false);
   const { getAccessToken, getIdTokenClaims, fetchUserInfo } = useLogto();
@@ -46,7 +48,7 @@ const DevPanel = () => {
   );
 
   return (
-    <div className={[styles.card, styles.devPanel].join(' ')}>
+    <div className={[styles.card, styles.devPanel, styles[i18n.dir()]].join(' ')}>
       <form onSubmit={submitConfig}>
         <div className={styles.title}>Logto config</div>
         <div className={styles.item}>
diff --git a/packages/elements/src/components/logto-list-row.ts b/packages/elements/src/components/logto-list-row.ts
index 866b6003b..ab6d3c918 100644
--- a/packages/elements/src/components/logto-list-row.ts
+++ b/packages/elements/src/components/logto-list-row.ts
@@ -37,7 +37,7 @@ export class LogtoListRow extends LitElement {
     }
 
     slot[name='actions'] {
-      text-align: right;
+      text-align: end;
     }
 
     span.not-set {
diff --git a/packages/experience/src/App.tsx b/packages/experience/src/App.tsx
index 178569c99..25600da10 100644
--- a/packages/experience/src/App.tsx
+++ b/packages/experience/src/App.tsx
@@ -54,6 +54,7 @@ const App = () => {
           // will cause a re-render following some bugs here. This still works for the initial
           // render, so we're good for now. Consider refactoring this in the future.
           lang: i18next.language,
+          dir: i18next.dir(),
         }}
       />
       <PageContextProvider>
diff --git a/packages/experience/src/components/Button/IconButton.module.scss b/packages/experience/src/components/Button/IconButton.module.scss
index 8f55f971b..c5db2a173 100644
--- a/packages/experience/src/components/Button/IconButton.module.scss
+++ b/packages/experience/src/components/Button/IconButton.module.scss
@@ -4,7 +4,7 @@
   border: none;
   outline: none;
   background: none;
-  border-color: none;
+  border-color: transparent;
   border-radius: 6px;
   padding: _.unit(1);
   @include _.flex-column;
diff --git a/packages/experience/src/components/Button/MfaFactorButton.module.scss b/packages/experience/src/components/Button/MfaFactorButton.module.scss
index 68d842442..a6314cd14 100644
--- a/packages/experience/src/components/Button/MfaFactorButton.module.scss
+++ b/packages/experience/src/components/Button/MfaFactorButton.module.scss
@@ -18,7 +18,7 @@
   flex: 1;
   @include _.flex-column;
   align-items: flex-start;
-  text-align: left;
+  text-align: start;
 
   .name {
     font: var(--font-label-1);
diff --git a/packages/experience/src/components/Button/MfaFactorButton.tsx b/packages/experience/src/components/Button/MfaFactorButton.tsx
index be8a5d0c2..52ddd2e12 100644
--- a/packages/experience/src/components/Button/MfaFactorButton.tsx
+++ b/packages/experience/src/components/Button/MfaFactorButton.tsx
@@ -8,6 +8,7 @@ import FactorTotp from '@/assets/icons/factor-totp.svg?react';
 import FactorWebAuthn from '@/assets/icons/factor-webauthn.svg?react';
 
 import DynamicT from '../DynamicT';
+import FlipOnRtl from '../FlipOnRtl';
 
 import mfaFactorButtonStyles from './MfaFactorButton.module.scss';
 import styles from './index.module.scss';
@@ -65,7 +66,9 @@ const MfaFactorButton = ({ factor, isBinding, onClick }: Props) => {
           <DynamicT forKey={(isBinding ? linkFactorDescription : factorDescription)[factor]} />
         </div>
       </div>
-      <ArrowNext className={mfaFactorButtonStyles.icon} />
+      <FlipOnRtl>
+        <ArrowNext className={mfaFactorButtonStyles.icon} />
+      </FlipOnRtl>
     </button>
   );
 };
diff --git a/packages/experience/src/components/Button/SocialLinkButton.module.scss b/packages/experience/src/components/Button/SocialLinkButton.module.scss
index 1f0a5a148..3ad6b73f0 100644
--- a/packages/experience/src/components/Button/SocialLinkButton.module.scss
+++ b/packages/experience/src/components/Button/SocialLinkButton.module.scss
@@ -24,7 +24,7 @@
 .name {
   flex: 1;
   overflow: hidden;
-  margin-left: _.unit(-6);
+  margin-inline-start: _.unit(-6);
   @include _.flex-row;
   height: 100%;
 
diff --git a/packages/experience/src/components/Button/index.module.scss b/packages/experience/src/components/Button/index.module.scss
index 770ec64ca..c04342b40 100644
--- a/packages/experience/src/components/Button/index.module.scss
+++ b/packages/experience/src/components/Button/index.module.scss
@@ -31,7 +31,7 @@
     }
 
     &.iconVisible {
-      padding-left: _.unit(7);
+      padding-inline-start: _.unit(7);
 
       .icon {
         left: 0;
diff --git a/packages/experience/src/components/Checkbox/index.module.scss b/packages/experience/src/components/Checkbox/index.module.scss
index 1db103ef5..6aa3ea7f4 100644
--- a/packages/experience/src/components/Checkbox/index.module.scss
+++ b/packages/experience/src/components/Checkbox/index.module.scss
@@ -6,7 +6,7 @@
   align-items: center;
 
   .icon {
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
     width: 18px;
     height: 18px;
 
diff --git a/packages/experience/src/components/ConfirmModal/Acmodal.module.scss b/packages/experience/src/components/ConfirmModal/Acmodal.module.scss
index 46e9daa00..bfa9207b5 100644
--- a/packages/experience/src/components/ConfirmModal/Acmodal.module.scss
+++ b/packages/experience/src/components/ConfirmModal/Acmodal.module.scss
@@ -56,7 +56,7 @@
   }
 
   > button:first-child {
-    margin-right: _.unit(3);
+    margin-inline-end: _.unit(3);
   }
 }
 
diff --git a/packages/experience/src/components/ConfirmModal/MobileModal.module.scss b/packages/experience/src/components/ConfirmModal/MobileModal.module.scss
index 9a3e7e640..59ef2035f 100644
--- a/packages/experience/src/components/ConfirmModal/MobileModal.module.scss
+++ b/packages/experience/src/components/ConfirmModal/MobileModal.module.scss
@@ -45,7 +45,7 @@
   }
 
   > button:first-child {
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
   }
 }
 
diff --git a/packages/experience/src/components/Divider/index.module.scss b/packages/experience/src/components/Divider/index.module.scss
index 964739418..8d806dfc9 100644
--- a/packages/experience/src/components/Divider/index.module.scss
+++ b/packages/experience/src/components/Divider/index.module.scss
@@ -13,11 +13,11 @@
 
     &.withLabel {
       &:first-child {
-        margin-right: _.unit(4);
+        margin-inline-end: _.unit(4);
       }
 
       &:last-child {
-        margin-left: _.unit(4);
+        margin-inline-start: _.unit(4);
       }
     }
   }
diff --git a/packages/experience/src/components/FlipOnRtl/index.module.scss b/packages/experience/src/components/FlipOnRtl/index.module.scss
new file mode 100644
index 000000000..c7d735b82
--- /dev/null
+++ b/packages/experience/src/components/FlipOnRtl/index.module.scss
@@ -0,0 +1,3 @@
+.flip {
+  transform: scaleX(-1);
+}
diff --git a/packages/experience/src/components/FlipOnRtl/index.tsx b/packages/experience/src/components/FlipOnRtl/index.tsx
new file mode 100644
index 000000000..c39698a02
--- /dev/null
+++ b/packages/experience/src/components/FlipOnRtl/index.tsx
@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { cloneElement, isValidElement, type ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './index.module.scss';
+
+type Props = {
+  readonly children: ReactElement<HTMLElement>;
+};
+
+/**
+ * This component flips its child element horizontally if the browser's text direction is RTL (right-to-left).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FlipOnRtl>
+ *   <SVG />
+ * </FlipOnRtl>
+ * ```
+ *
+ * @param {React.ReactNode} children - The SVG or other HTML content to render and flip if RTL.
+ * @returns {JSX.Element} The flipped content.
+ */
+function FlipOnRtl({ children }: Props) {
+  const { i18n } = useTranslation();
+  const isRtl = i18n.dir() === 'rtl';
+
+  if (!isValidElement(children)) {
+    return children;
+  }
+
+  return cloneElement(children, {
+    className: classNames(children.props.className, isRtl && styles.flip),
+  });
+}
+
+export default FlipOnRtl;
diff --git a/packages/experience/src/components/IdentifierRegisterForm/index.module.scss b/packages/experience/src/components/IdentifierRegisterForm/index.module.scss
index 8fa4bbd9a..d5091e5c5 100644
--- a/packages/experience/src/components/IdentifierRegisterForm/index.module.scss
+++ b/packages/experience/src/components/IdentifierRegisterForm/index.module.scss
@@ -19,7 +19,7 @@
   }
 
   .formErrors {
-    margin-left: _.unit(0.5);
+    margin-inline-start: _.unit(0.5);
     margin-top: _.unit(-3);
   }
 
diff --git a/packages/experience/src/components/IdentifierSignInForm/index.module.scss b/packages/experience/src/components/IdentifierSignInForm/index.module.scss
index eead6c389..fb44b438a 100644
--- a/packages/experience/src/components/IdentifierSignInForm/index.module.scss
+++ b/packages/experience/src/components/IdentifierSignInForm/index.module.scss
@@ -19,7 +19,7 @@
   }
 
   .formErrors {
-    margin-left: _.unit(0.5);
+    margin-inline-start: _.unit(0.5);
     margin-top: _.unit(-3);
   }
 
diff --git a/packages/experience/src/components/InputFields/InputField/NotchedBorder/index.module.scss b/packages/experience/src/components/InputFields/InputField/NotchedBorder/index.module.scss
index e063b0cfe..b8d676b0d 100644
--- a/packages/experience/src/components/InputFields/InputField/NotchedBorder/index.module.scss
+++ b/packages/experience/src/components/InputFields/InputField/NotchedBorder/index.module.scss
@@ -7,7 +7,7 @@
 
   .border,
   .outline {
-    text-align: left;
+    text-align: start;
     position: absolute;
     inset: -10px 0 -0.5px;
     border: _.border(var(--color-line-border));
@@ -22,7 +22,7 @@
       display: inline-block;
       visibility: hidden;
       // To keep the label in the middle of the empty space
-      margin-left: 1px;
+      margin-inline-start: 1px;
       padding: 0;
       // fix to the label font height to keep space for the input container
       height: 20px;
@@ -88,6 +88,12 @@
   }
 }
 
+.container.rtl {
+  .label {
+    left: unset;
+    right: _.unit(3.5);
+  }
+}
 
 .container.danger {
   .border {
diff --git a/packages/experience/src/components/InputFields/InputField/NotchedBorder/index.tsx b/packages/experience/src/components/InputFields/InputField/NotchedBorder/index.tsx
index f8e097e47..133a20071 100644
--- a/packages/experience/src/components/InputFields/InputField/NotchedBorder/index.tsx
+++ b/packages/experience/src/components/InputFields/InputField/NotchedBorder/index.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 
 import styles from './index.module.scss';
 
@@ -26,6 +27,8 @@ type Props = {
  *
  */
 const NotchedBorder = ({ label, isActive, isDanger, isFocused }: Props) => {
+  const { i18n } = useTranslation();
+
   return (
     <div
       className={classNames(
@@ -33,7 +36,8 @@ const NotchedBorder = ({ label, isActive, isDanger, isFocused }: Props) => {
         isDanger && styles.danger,
         isActive && styles.active,
         isFocused && styles.focused,
-        !label && styles.noLabel
+        !label && styles.noLabel,
+        styles[i18n.dir()]
       )}
     >
       <fieldset className={styles.border}>
diff --git a/packages/experience/src/components/InputFields/InputField/index.module.scss b/packages/experience/src/components/InputFields/InputField/index.module.scss
index a63504c1f..0f195d777 100644
--- a/packages/experience/src/components/InputFields/InputField/index.module.scss
+++ b/packages/experience/src/components/InputFields/InputField/index.module.scss
@@ -57,7 +57,7 @@
 
     .suffix {
       position: absolute;
-      right: _.unit(2);
+      inset-inline-end: _.unit(2);
       top: 50%;
       transform: translateY(-50%);
       width: _.unit(8);
@@ -68,7 +68,7 @@
 
     &.isSuffixFocusVisible:focus-within {
       input {
-        padding-right: _.unit(10);
+        padding-inline-end: _.unit(10);
       }
 
       .suffix {
@@ -110,7 +110,7 @@
 
 .errorMessage {
   margin-top: _.unit(1);
-  margin-left: _.unit(0.5);
+  margin-inline-start: _.unit(0.5);
 }
 
 
diff --git a/packages/experience/src/components/InputFields/InputField/index.tsx b/packages/experience/src/components/InputFields/InputField/index.tsx
index 345a1e73c..407036cdb 100644
--- a/packages/experience/src/components/InputFields/InputField/index.tsx
+++ b/packages/experience/src/components/InputFields/InputField/index.tsx
@@ -10,6 +10,7 @@ import {
   useEffect,
   useCallback,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import ErrorMessage from '@/components/ErrorMessage';
 
@@ -47,6 +48,7 @@ const InputField = (
   }: Props,
   reference: Ref<Nullable<HTMLInputElement>>
 ) => {
+  const { i18n } = useTranslation();
   const innerRef = useRef<HTMLInputElement>(null);
 
   useImperativeHandle(reference, () => innerRef.current);
@@ -94,7 +96,8 @@ const InputField = (
           className={classNames(
             styles.inputField,
             isSuffixFocusVisible && styles.isSuffixFocusVisible,
-            inputFieldClassName
+            inputFieldClassName,
+            styles[i18n.dir()]
           )}
         >
           {prefix}
diff --git a/packages/experience/src/components/InputFields/SmartInputField/CountryCodeSelector/CountryCodeDropdown/index.module.scss b/packages/experience/src/components/InputFields/SmartInputField/CountryCodeSelector/CountryCodeDropdown/index.module.scss
index 5bc8098d7..ed66a7cc1 100644
--- a/packages/experience/src/components/InputFields/SmartInputField/CountryCodeSelector/CountryCodeDropdown/index.module.scss
+++ b/packages/experience/src/components/InputFields/SmartInputField/CountryCodeSelector/CountryCodeDropdown/index.module.scss
@@ -27,7 +27,7 @@
   margin-bottom: _.unit(2);
 
   input {
-    padding-left: _.unit(2);
+    padding-inline-start: _.unit(2);
   }
 
   svg {
@@ -48,12 +48,12 @@
     cursor: pointer;
 
     > svg {
-      margin-right: _.unit(1);
+      margin-inline-end: _.unit(1);
     }
 
     &.active {
       color: var(--color-type-link);
-      padding-left: calc(_.unit(7) - _.unit(6));
+      padding-inline-start: calc(_.unit(7) - _.unit(6));
     }
 
     &.selected {
@@ -114,7 +114,7 @@
     }
 
     .innerInputFiled {
-      padding-left: _.unit(4);
+      padding-inline-start: _.unit(4);
     }
   }
 }
diff --git a/packages/experience/src/components/InputFields/SmartInputField/CountryCodeSelector/index.module.scss b/packages/experience/src/components/InputFields/SmartInputField/CountryCodeSelector/index.module.scss
index 1cac34a3d..aefdd77f3 100644
--- a/packages/experience/src/components/InputFields/SmartInputField/CountryCodeSelector/index.module.scss
+++ b/packages/experience/src/components/InputFields/SmartInputField/CountryCodeSelector/index.module.scss
@@ -9,8 +9,7 @@
   background: none;
   position: relative;
   height: 100%;
-  padding-right: _.unit(1);
-  padding-left: _.unit(4);
+  padding-inline: _.unit(4) _.unit(1);
   @include _.flex-row;
   overflow: hidden;
   white-space: nowrap;
@@ -30,7 +29,7 @@
   > svg {
     flex-shrink: 0;
     color: var(--color-type-secondary);
-    margin-left: _.unit(1);
+    margin-inline-start: _.unit(1);
     width: 16px;
     height: 16px;
   }
@@ -41,7 +40,7 @@
     font: var(--font-body-2);
 
     > svg {
-      margin-left: _.unit(2);
+      margin-inline-start: _.unit(2);
       width: 20px;
       height: 20px;
     }
diff --git a/packages/experience/src/components/InputFields/SmartInputField/index.tsx b/packages/experience/src/components/InputFields/SmartInputField/index.tsx
index e0e631a28..543967082 100644
--- a/packages/experience/src/components/InputFields/SmartInputField/index.tsx
+++ b/packages/experience/src/components/InputFields/SmartInputField/index.tsx
@@ -50,8 +50,8 @@ const SmartInputField = (
   });
 
   const isPrefixVisible = identifierType === SignInIdentifier.Phone;
-  const { paddingLeft } = useSpring({
-    paddingLeft: isPrefixVisible ? 4 : 16,
+  const { paddingInlineStart } = useSpring({
+    paddingInlineStart: isPrefixVisible ? 4 : 16,
     config: { ...config.default, clamp: true },
   });
 
@@ -68,7 +68,7 @@ const SmartInputField = (
       {...rest}
       ref={innerRef}
       isSuffixFocusVisible={Boolean(inputValue)}
-      style={{ paddingLeft }}
+      style={{ paddingInlineStart }}
       value={inputValue}
       isPrefixVisible={isPrefixVisible}
       prefix={
diff --git a/packages/experience/src/components/LogtoSignature/index.module.scss b/packages/experience/src/components/LogtoSignature/index.module.scss
index d629966e0..db2916e19 100644
--- a/packages/experience/src/components/LogtoSignature/index.module.scss
+++ b/packages/experience/src/components/LogtoSignature/index.module.scss
@@ -9,6 +9,7 @@
   padding: _.unit(1) _.unit(2);
   text-decoration: none;
   opacity: 75%;
+  direction: ltr;
 
   .staticIcon {
     display: block;
@@ -32,7 +33,7 @@
   }
 
   .text {
-    margin-right: _.unit(1);
+    margin-inline-end: _.unit(1);
   }
 }
 
diff --git a/packages/experience/src/components/NavBar/index.module.scss b/packages/experience/src/components/NavBar/index.module.scss
index 81a6ab36b..49d467812 100644
--- a/packages/experience/src/components/NavBar/index.module.scss
+++ b/packages/experience/src/components/NavBar/index.module.scss
@@ -20,7 +20,7 @@
 
 .navButton {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 50%;
   transform: translateY(-50%);
   font: var(--font-label-2);
@@ -30,13 +30,13 @@
 
 .skipButton {
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   top: 50%;
   transform: translateY(-50%);
   font: var(--font-label-1);
   cursor: pointer;
   color: var(--color-type-link);
-  padding-right: _.unit(1);
+  padding-inline-end: _.unit(1);
 }
 
 :global(body.mobile) {
diff --git a/packages/experience/src/components/NavBar/index.tsx b/packages/experience/src/components/NavBar/index.tsx
index abcfdab53..e5e1bb607 100644
--- a/packages/experience/src/components/NavBar/index.tsx
+++ b/packages/experience/src/components/NavBar/index.tsx
@@ -7,6 +7,8 @@ import ArrowPrev from '@/assets/icons/arrow-prev.svg?react';
 import NavClose from '@/assets/icons/nav-close.svg?react';
 import { onKeyDownHandler } from '@/utils/a11y';
 
+import FlipOnRtl from '../FlipOnRtl';
+
 import styles from './index.module.scss';
 
 type Props = {
@@ -48,7 +50,13 @@ const NavBar = ({ title, type = 'back', isHidden, onClose, onSkip }: Props) => {
         onKeyDown={onKeyDownHandler(clickHandler)}
         onClick={clickHandler}
       >
-        {isClosable ? <NavClose /> : <ArrowPrev />}
+        {isClosable ? (
+          <NavClose />
+        ) : (
+          <FlipOnRtl>
+            <ArrowPrev />
+          </FlipOnRtl>
+        )}
         {!isClosable && <span>{t('action.nav_back')}</span>}
       </div>
       {title && <div className={styles.title}>{title}</div>}
diff --git a/packages/experience/src/components/Notification/AppNotification/index.module.scss b/packages/experience/src/components/Notification/AppNotification/index.module.scss
index aeee21fe3..9a191f6b8 100644
--- a/packages/experience/src/components/Notification/AppNotification/index.module.scss
+++ b/packages/experience/src/components/Notification/AppNotification/index.module.scss
@@ -14,13 +14,13 @@
   .icon {
     width: 20px;
     height: 20px;
-    margin-right: _.unit(3);
+    margin-inline-end: _.unit(3);
     color: var(--color-neutral-variant-60);
   }
 
   .message {
     flex: 1;
-    margin-right: _.unit(4);
+    margin-inline-end: _.unit(4);
   }
 
   .link {
diff --git a/packages/experience/src/components/PasswordSignInForm/index.module.scss b/packages/experience/src/components/PasswordSignInForm/index.module.scss
index fd80ec7c5..47ee75ac4 100644
--- a/packages/experience/src/components/PasswordSignInForm/index.module.scss
+++ b/packages/experience/src/components/PasswordSignInForm/index.module.scss
@@ -26,7 +26,7 @@
   }
 
   .formErrors {
-    margin-left: _.unit(0.5);
+    margin-inline-start: _.unit(0.5);
     margin-top: _.unit(-3);
   }
 
diff --git a/packages/experience/src/components/SingleSignOnForm/index.module.scss b/packages/experience/src/components/SingleSignOnForm/index.module.scss
index 3706ca03c..e2984c8e2 100644
--- a/packages/experience/src/components/SingleSignOnForm/index.module.scss
+++ b/packages/experience/src/components/SingleSignOnForm/index.module.scss
@@ -13,7 +13,7 @@
   }
 
   .formErrors {
-    margin-left: _.unit(0.5);
+    margin-inline-start: _.unit(0.5);
     margin-top: _.unit(-3);
   }
 
diff --git a/packages/experience/src/components/TextLink/index.module.scss b/packages/experience/src/components/TextLink/index.module.scss
index c5bfc937b..5348c7e8c 100644
--- a/packages/experience/src/components/TextLink/index.module.scss
+++ b/packages/experience/src/components/TextLink/index.module.scss
@@ -7,7 +7,7 @@
   justify-content: center;
 
   > svg {
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
   }
 
   &.primary {
diff --git a/packages/experience/src/components/VerificationCode/index.module.scss b/packages/experience/src/components/VerificationCode/index.module.scss
index e182f14fd..f4303d8c3 100644
--- a/packages/experience/src/components/VerificationCode/index.module.scss
+++ b/packages/experience/src/components/VerificationCode/index.module.scss
@@ -27,7 +27,7 @@
 }
 
 .passcode + .errorMessage {
-  margin-left: _.unit(0.5);
+  margin-inline-start: _.unit(0.5);
   margin-top: _.unit(1);
 }
 
diff --git a/packages/experience/src/containers/SetPassword/index.module.scss b/packages/experience/src/containers/SetPassword/index.module.scss
index dd3110917..5a15f67af 100644
--- a/packages/experience/src/containers/SetPassword/index.module.scss
+++ b/packages/experience/src/containers/SetPassword/index.module.scss
@@ -14,7 +14,7 @@
   }
 
   .formErrors {
-    margin-left: _.unit(0.5);
+    margin-inline-start: _.unit(0.5);
     margin-top: _.unit(-3);
   }
 }
@@ -26,7 +26,7 @@
   cursor: pointer;
 
   .checkbox {
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
     fill: var(--color-type-secondary);
     cursor: pointer;
   }
diff --git a/packages/experience/src/containers/SocialLinkAccount/index.module.scss b/packages/experience/src/containers/SocialLinkAccount/index.module.scss
index d5a8caed6..823d460e6 100644
--- a/packages/experience/src/containers/SocialLinkAccount/index.module.scss
+++ b/packages/experience/src/containers/SocialLinkAccount/index.module.scss
@@ -11,12 +11,12 @@
 
 .desc {
   @include _.text-hint;
-  text-align: left;
+  text-align: start;
 }
 
 .hint {
   @include _.text-hint;
-  text-align: left;
+  text-align: start;
   margin-top: _.unit(6);
 }
 
diff --git a/packages/experience/src/containers/TermsAndPrivacyCheckbox/index.module.scss b/packages/experience/src/containers/TermsAndPrivacyCheckbox/index.module.scss
index df79bb41d..c5a828c2d 100644
--- a/packages/experience/src/containers/TermsAndPrivacyCheckbox/index.module.scss
+++ b/packages/experience/src/containers/TermsAndPrivacyCheckbox/index.module.scss
@@ -8,7 +8,7 @@
 }
 
 .checkbox {
-  margin-right: _.unit(2);
+  margin-inline-end: _.unit(2);
   fill: var(--color-type-secondary);
   cursor: pointer;
 }
diff --git a/packages/experience/src/pages/Consent/OrganizationSelector/OrganizationItem/index.module.scss b/packages/experience/src/pages/Consent/OrganizationSelector/OrganizationItem/index.module.scss
index cb102c657..016d9f77b 100644
--- a/packages/experience/src/pages/Consent/OrganizationSelector/OrganizationItem/index.module.scss
+++ b/packages/experience/src/pages/Consent/OrganizationSelector/OrganizationItem/index.module.scss
@@ -10,7 +10,7 @@
     width: 20px;
     height: 20px;
     color: var(--color-type-secondary);
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
   }
 
   .organizationName {
diff --git a/packages/experience/src/pages/Consent/ScopeGroup/index.module.scss b/packages/experience/src/pages/Consent/ScopeGroup/index.module.scss
index b16e41b30..a102d9789 100644
--- a/packages/experience/src/pages/Consent/ScopeGroup/index.module.scss
+++ b/packages/experience/src/pages/Consent/ScopeGroup/index.module.scss
@@ -18,13 +18,13 @@
     color: var(--color-success-pressed);
     width: 20px;
     height: 20px;
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
   }
 
   .scopeGroupName {
     font: var(--font-body-2);
     flex: 1;
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
   }
 
   .toggleButton {
diff --git a/packages/experience/src/pages/Consent/ScopesListCard/index.module.scss b/packages/experience/src/pages/Consent/ScopesListCard/index.module.scss
index e8339c36d..b2c44e055 100644
--- a/packages/experience/src/pages/Consent/ScopesListCard/index.module.scss
+++ b/packages/experience/src/pages/Consent/ScopesListCard/index.module.scss
@@ -29,13 +29,13 @@
     color: var(--color-success-pressed);
     width: 20px;
     height: 20px;
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
   }
 
   .scopeGroupName {
     font: var(--font-body-2);
     flex: 1;
-    margin-right: _.unit(2);
+    margin-inline-end: _.unit(2);
   }
 
   .toggleButton {
diff --git a/packages/experience/src/pages/Consent/UserProfile/index.module.scss b/packages/experience/src/pages/Consent/UserProfile/index.module.scss
index be7caea59..2ba69acda 100644
--- a/packages/experience/src/pages/Consent/UserProfile/index.module.scss
+++ b/packages/experience/src/pages/Consent/UserProfile/index.module.scss
@@ -13,7 +13,7 @@
   border-radius: 6px;
   object-fit: fill;
   object-position: center;
-  margin-right: _.unit(3);
+  margin-inline-end: _.unit(3);
 }
 
 .name {
diff --git a/packages/experience/src/pages/Continue/IdentifierProfileForm/index.module.scss b/packages/experience/src/pages/Continue/IdentifierProfileForm/index.module.scss
index 74d3215ec..931f63e54 100644
--- a/packages/experience/src/pages/Continue/IdentifierProfileForm/index.module.scss
+++ b/packages/experience/src/pages/Continue/IdentifierProfileForm/index.module.scss
@@ -13,7 +13,7 @@
   }
 
   .formErrors {
-    margin-left: _.unit(0.5);
+    margin-inline-start: _.unit(0.5);
     margin-top: _.unit(-3);
   }
 }
diff --git a/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.module.scss b/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.module.scss
index 74d3215ec..931f63e54 100644
--- a/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.module.scss
+++ b/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.module.scss
@@ -13,7 +13,7 @@
   }
 
   .formErrors {
-    margin-left: _.unit(0.5);
+    margin-inline-start: _.unit(0.5);
     margin-top: _.unit(-3);
   }
 }
diff --git a/packages/experience/src/pages/SignInPassword/index.module.scss b/packages/experience/src/pages/SignInPassword/index.module.scss
index 40199b36f..d042d3994 100644
--- a/packages/experience/src/pages/SignInPassword/index.module.scss
+++ b/packages/experience/src/pages/SignInPassword/index.module.scss
@@ -28,7 +28,7 @@
   }
 
   .formErrors {
-    margin-left: _.unit(0.5);
+    margin-inline-start: _.unit(0.5);
     margin-top: _.unit(-3);
   }
 }