diff --git a/.changeset/cuddly-ends-wait.md b/.changeset/cuddly-ends-wait.md
new file mode 100644
index 00000000000..61a21cc03cd
--- /dev/null
+++ b/.changeset/cuddly-ends-wait.md
@@ -0,0 +1,15 @@
+---
+'@clerk/ui': minor
+---
+
+Improve RTL support by converting physical CSS properties (margins, padding, text alignment, borders) to logical equivalents and adding direction-aware arrow icons
+
+The changes included:
+
+- Positioning (left → insetInlineStart)
+- Margins (marginLeft/Right → marginInlineStart/End)
+- Padding (paddingLeft/Right → paddingInlineStart/End)
+- Text alignment (left/right → start/end)
+- Border radius (borderTopLeftRadius → borderStartStartRadius)
+- Arrow icon flipping with scaleX(-1) in RTL
+- Animation direction adjustments
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 23ef3f174bd..1cef3d663c3 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -171,6 +171,83 @@ const noUnstableMethods = {
   },
 };
 
+const noPhysicalCssProperties = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Enforce use of CSS logical properties instead of physical properties for RTL support',
+      recommended: false,
+    },
+    messages: {
+      useLogicalProperty:
+        'Use logical CSS property "{{logical}}" instead of physical property "{{physical}}" for RTL support.',
+      useLogicalTextAlign:
+        'Use logical textAlign value "{{logical}}" instead of physical value "{{physical}}" for RTL support.',
+    },
+    schema: [],
+  },
+  create(context) {
+    // Mapping of physical properties to logical equivalents
+    const propertyMap = {
+      left: 'insetInlineStart',
+      right: 'insetInlineEnd',
+      marginLeft: 'marginInlineStart',
+      marginRight: 'marginInlineEnd',
+      paddingLeft: 'paddingInlineStart',
+      paddingRight: 'paddingInlineEnd',
+      borderLeft: 'borderInlineStart',
+      borderRight: 'borderInlineEnd',
+      borderLeftWidth: 'borderInlineStartWidth',
+      borderRightWidth: 'borderInlineEndWidth',
+      borderLeftStyle: 'borderInlineStartStyle',
+      borderRightStyle: 'borderInlineEndStyle',
+      borderLeftColor: 'borderInlineStartColor',
+      borderRightColor: 'borderInlineEndColor',
+      borderTopLeftRadius: 'borderStartStartRadius',
+      borderTopRightRadius: 'borderStartEndRadius',
+      borderBottomLeftRadius: 'borderEndStartRadius',
+      borderBottomRightRadius: 'borderEndEndRadius',
+    };
+
+    const checkProperty = (key, value) => {
+      const keyName = key.type === 'Identifier' ? key.name : key.value;
+
+      // Check for physical property names
+      if (propertyMap[keyName]) {
+        context.report({
+          node: key,
+          messageId: 'useLogicalProperty',
+          data: {
+            physical: keyName,
+            logical: propertyMap[keyName],
+          },
+        });
+      }
+
+      // Check for textAlign with physical values
+      if (keyName === 'textAlign' && value) {
+        if (value.type === 'Literal' && (value.value === 'left' || value.value === 'right')) {
+          const logicalValue = value.value === 'left' ? 'start' : 'end';
+          context.report({
+            node: value,
+            messageId: 'useLogicalTextAlign',
+            data: {
+              physical: value.value,
+              logical: logicalValue,
+            },
+          });
+        }
+      }
+    };
+
+    return {
+      Property(node) {
+        checkProperty(node.key, node.value);
+      },
+    };
+  },
+};
+
 export default tseslint.config([
   {
     name: 'repo/ignores',
@@ -248,6 +325,7 @@ export default tseslint.config([
         rules: {
           'no-global-object': noGlobalObject,
           'no-unstable-methods': noUnstableMethods,
+          'no-physical-css-properties': noPhysicalCssProperties,
         },
       },
       'simple-import-sort': pluginSimpleImportSort,
@@ -458,6 +536,13 @@ export default tseslint.config([
       'custom-rules/no-unstable-methods': 'error',
     },
   },
+  {
+    name: 'packages/ui',
+    files: ['packages/ui/src/**/*'],
+    rules: {
+      'custom-rules/no-physical-css-properties': 'error',
+    },
+  },
   {
     name: 'packages - vitest',
     files: ['packages/*/src/**/*.test.{ts,tsx}'],
diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
index 4983019bdf9..cae088d5fb6 100644
--- a/packages/clerk-js/sandbox/template.html
+++ b/packages/clerk-js/sandbox/template.html
@@ -1,5 +1,8 @@
 <!doctype html>
-<html class="h-full">
+<html
+  class="h-full"
+  dir="rtl"
+>
   <head>
     <title>clerk-js Sandbox</title>
     <meta charset="utf-8" />
diff --git a/packages/ui/src/common/InfiniteListSpinner.tsx b/packages/ui/src/common/InfiniteListSpinner.tsx
index 97ae637e73f..7e053404f2f 100644
--- a/packages/ui/src/common/InfiniteListSpinner.tsx
+++ b/packages/ui/src/common/InfiniteListSpinner.tsx
@@ -16,6 +16,7 @@ export const InfiniteListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
         sx={{
           margin: 'auto',
           position: 'absolute',
+          // eslint-disable-next-line custom-rules/no-physical-css-properties -- Centering with transform: translateX(-50%)
           left: '50%',
           top: '50%',
           transform: 'translateY(-50%) translateX(-50%)',
diff --git a/packages/ui/src/common/NotificationCountBadge.tsx b/packages/ui/src/common/NotificationCountBadge.tsx
index 97d27ac6757..7fb99e121af 100644
--- a/packages/ui/src/common/NotificationCountBadge.tsx
+++ b/packages/ui/src/common/NotificationCountBadge.tsx
@@ -32,7 +32,7 @@ export const NotificationCountBadge = (props: NotificationCountBadgeProps) => {
       as='span'
       sx={[
         t => ({
-          marginLeft: t.space.$1x5,
+          marginInlineStart: t.space.$1x5,
         }),
         containerSx,
       ]}
diff --git a/packages/ui/src/common/PrintableComponent.tsx b/packages/ui/src/common/PrintableComponent.tsx
index 6cfc8c273c4..95542d4b041 100644
--- a/packages/ui/src/common/PrintableComponent.tsx
+++ b/packages/ui/src/common/PrintableComponent.tsx
@@ -24,6 +24,7 @@ export const PrintableComponent = (props: UsePrintableReturn['printableProps'] &
   return (
     <div
       ref={ref}
+      // eslint-disable-next-line custom-rules/no-physical-css-properties -- Off-screen hide for print functionality
       style={{ position: 'fixed', left: '-9999px', top: 0, display: 'none' }}
     >
       {children}
diff --git a/packages/ui/src/common/organizations/OrganizationPreview.tsx b/packages/ui/src/common/organizations/OrganizationPreview.tsx
index 7078c2d3d62..7fa78eb8fac 100644
--- a/packages/ui/src/common/organizations/OrganizationPreview.tsx
+++ b/packages/ui/src/common/organizations/OrganizationPreview.tsx
@@ -96,6 +96,7 @@ export const OrganizationPreviewSpinner = forwardRef<HTMLDivElement>((_, ref) =>
         sx={{
           margin: 'auto',
           position: 'absolute',
+          // eslint-disable-next-line custom-rules/no-physical-css-properties -- Centering with transform: translateX(-50%)
           left: '50%',
           top: '50%',
           transform: 'translateY(-50%) translateX(-50%)',
diff --git a/packages/ui/src/components/APIKeys/APIKeyModal.tsx b/packages/ui/src/components/APIKeys/APIKeyModal.tsx
index d1cdd43429c..1ffd6e85bfe 100644
--- a/packages/ui/src/components/APIKeys/APIKeyModal.tsx
+++ b/packages/ui/src/components/APIKeys/APIKeyModal.tsx
@@ -18,7 +18,7 @@ const getScopedPortalContainerStyles = (modalRoot?: React.MutableRefObject<HTMLE
     modalRoot
       ? t => ({
           position: 'absolute',
-          right: 0,
+          insetInlineEnd: 0,
           bottom: 0,
           backgroundColor: 'inherit',
           backdropFilter: `blur(${t.sizes.$2})`,
diff --git a/packages/ui/src/components/APIKeys/ApiKeysTable.tsx b/packages/ui/src/components/APIKeys/ApiKeysTable.tsx
index 819f65ecdc0..2584cf93bff 100644
--- a/packages/ui/src/components/APIKeys/ApiKeysTable.tsx
+++ b/packages/ui/src/components/APIKeys/ApiKeysTable.tsx
@@ -42,7 +42,7 @@ export const APIKeysTable = ({
           <Tr>
             <Th>Name</Th>
             <Th>Last used</Th>
-            {canManageAPIKeys && <Th sx={{ textAlign: 'right' }}>Actions</Th>}
+            {canManageAPIKeys && <Th sx={{ textAlign: 'end' }}>Actions</Th>}
           </Tr>
         </Thead>
         <Tbody>
@@ -98,7 +98,7 @@ export const APIKeysTable = ({
                   </Box>
                 </Td>
                 {canManageAPIKeys && (
-                  <Td sx={{ textAlign: 'right' }}>
+                  <Td sx={{ textAlign: 'end' }}>
                     <ThreeDotsMenu
                       actions={[
                         {
diff --git a/packages/ui/src/components/APIKeys/CopyAPIKeyModal.tsx b/packages/ui/src/components/APIKeys/CopyAPIKeyModal.tsx
index a7530a6a550..a5c8aa35d6e 100644
--- a/packages/ui/src/components/APIKeys/CopyAPIKeyModal.tsx
+++ b/packages/ui/src/components/APIKeys/CopyAPIKeyModal.tsx
@@ -63,7 +63,7 @@ export const CopyAPIKeyModal = ({
       >
         <Card.Content
           sx={t => ({
-            textAlign: 'left',
+            textAlign: 'start',
             padding: `${t.sizes.$4} ${t.sizes.$5} ${t.sizes.$4} ${t.sizes.$6}`,
           })}
         >
diff --git a/packages/ui/src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx b/packages/ui/src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx
index a8aa6e1d6fb..c21e709931b 100644
--- a/packages/ui/src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx
+++ b/packages/ui/src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx
@@ -74,7 +74,7 @@ export const RevokeAPIKeyConfirmationModal = ({
       >
         <Card.Content
           sx={t => ({
-            textAlign: 'left',
+            textAlign: 'start',
             padding: `${t.sizes.$4} ${t.sizes.$5} ${t.sizes.$4} ${t.sizes.$6}`,
           })}
         >
diff --git a/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx
index 0bc7f29a13d..df71448620f 100644
--- a/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx
+++ b/packages/ui/src/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -139,7 +139,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
         headerSubtitle={props?.startPage?.headerSubtitle}
         headerTitleTextVariant={headerTitleTextVariant}
         headerSubtitleTextVariant={headerSubtitleTextVariant}
-        sx={t => ({ minHeight: t.sizes.$60, gap: t.space.$6, textAlign: 'left' })}
+        sx={t => ({ minHeight: t.sizes.$60, gap: t.space.$6, textAlign: 'start' })}
       >
         <Form.Root
           onSubmit={onSubmit}
@@ -224,7 +224,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
         headerTitle={localizationKeys('organizationProfile.invitePage.title')}
         headerTitleTextVariant={headerTitleTextVariant}
         headerSubtitleTextVariant={headerSubtitleTextVariant}
-        sx={t => ({ minHeight: t.sizes.$60, textAlign: 'left' })}
+        sx={t => ({ minHeight: t.sizes.$60, textAlign: 'start' })}
       >
         {organization && (
           <InviteMembersForm
@@ -239,7 +239,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
         <Header.Root>
           <Header.Title
             localizationKey={localizationKeys('organizationProfile.invitePage.title')}
-            sx={{ textAlign: 'left' }}
+            sx={{ textAlign: 'start' }}
           />
         </Header.Root>
         <SuccessPage
diff --git a/packages/ui/src/components/ImpersonationFab/index.tsx b/packages/ui/src/components/ImpersonationFab/index.tsx
index 33f2f6512bb..787795d0567 100644
--- a/packages/ui/src/components/ImpersonationFab/index.tsx
+++ b/packages/ui/src/components/ImpersonationFab/index.tsx
@@ -77,8 +77,8 @@ const FabContent = ({ title, signOutText }: FabContentProps) => {
     <Col
       sx={t => ({
         width: '100%',
-        paddingLeft: t.sizes.$4,
-        paddingRight: t.sizes.$6,
+        paddingInlineStart: t.sizes.$4,
+        paddingInlineEnd: t.sizes.$6,
         whiteSpace: 'nowrap',
       })}
     >
@@ -199,6 +199,7 @@ const ImpersonationFabInternal = () => {
           position: 'fixed',
           overflow: 'hidden',
           top: `var(${topProperty}, ${defaultTop}px)`,
+          // eslint-disable-next-line custom-rules/no-physical-css-properties -- Complex JS-based positioning via CSS custom properties
           right: `var(${rightProperty}, ${defaultRight}px)`,
           zIndex: t.zIndices.$fab,
           boxShadow: t.shadows.$fabShadow,
diff --git a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
index 8555248176f..efcd76b684a 100644
--- a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
+++ b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
@@ -81,7 +81,7 @@ export function OAuthConsentInternal() {
                     sx={t => ({
                       position: 'absolute',
                       bottom: `calc(${t.space.$3} * -1)`,
-                      right: `calc(${t.space.$3} * -1)`,
+                      insetInlineEnd: `calc(${t.space.$3} * -1)`,
                     })}
                   />
                 </Box>
@@ -112,7 +112,7 @@ export function OAuthConsentInternal() {
           </Header.Root>
           <Box
             sx={t => ({
-              textAlign: 'left',
+              textAlign: 'start',
               borderWidth: t.borderWidths.$normal,
               borderStyle: t.borderStyles.$solid,
               borderColor: t.colors.$borderAlpha100,
@@ -157,7 +157,7 @@ export function OAuthConsentInternal() {
                       background: t.colors.$colorMutedForeground,
                       borderRadius: t.radii.$circle,
                       transform: 'translateY(-0.1875rem)',
-                      marginRight: t.space.$2,
+                      marginInlineEnd: t.space.$2,
                       flexShrink: 0,
                     },
                   })}
diff --git a/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx b/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx
index cfb28a0fa9f..ef713846990 100644
--- a/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx
+++ b/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx
@@ -125,7 +125,7 @@ const MemberRow = (props: {
           />
         </Protect>
       </Td>
-      <Td sx={{ textAlign: 'right' }}>
+      <Td sx={{ textAlign: 'end' }}>
         <Protect permission={'org:sys_memberships:manage'}>
           <ThreeDotsMenu
             actions={[
diff --git a/packages/ui/src/components/OrganizationProfile/DomainList.tsx b/packages/ui/src/components/OrganizationProfile/DomainList.tsx
index a6c72ef4bc4..96ebfdd8a6f 100644
--- a/packages/ui/src/components/OrganizationProfile/DomainList.tsx
+++ b/packages/ui/src/components/OrganizationProfile/DomainList.tsx
@@ -168,6 +168,7 @@ export const DomainList = withProtect(
                 display: 'flex',
                 margin: 'auto',
                 position: 'absolute',
+                // eslint-disable-next-line custom-rules/no-physical-css-properties -- Centering with transform: translateX(-50%)
                 left: '50%',
                 top: '50%',
                 transform: 'translateY(-50%) translateX(-50%)',
diff --git a/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx b/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx
index 47badeb9621..9f933315c42 100644
--- a/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx
+++ b/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx
@@ -101,7 +101,7 @@ const InvitationRow = (props: {
           localizationKey={localizeCustomRole(invitation.role) || unlocalizedRoleLabel}
         />
       </Td>
-      <Td sx={{ textAlign: 'right' }}>
+      <Td sx={{ textAlign: 'end' }}>
         <ThreeDotsMenu
           actions={[
             {
diff --git a/packages/ui/src/components/OrganizationProfile/MembersActions.tsx b/packages/ui/src/components/OrganizationProfile/MembersActions.tsx
index a4f9de893cb..c4fe5caf852 100644
--- a/packages/ui/src/components/OrganizationProfile/MembersActions.tsx
+++ b/packages/ui/src/components/OrganizationProfile/MembersActions.tsx
@@ -19,7 +19,7 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
           justify={actionSlot ? 'between' : 'end'}
           sx={t => ({
             width: '100%',
-            marginLeft: 'auto',
+            marginInlineStart: 'auto',
             padding: `${t.space.$none} ${t.space.$1}`,
           })}
           gap={actionSlot ? 2 : undefined}
diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx
index d8a766f3223..a062f131014 100644
--- a/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx
+++ b/packages/ui/src/components/OrganizationProfile/OrganizationGeneralPage.tsx
@@ -162,7 +162,7 @@ const OrganizationDomainsSection = () => {
               <Text
                 localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
                 sx={t => ({
-                  paddingLeft: t.space.$9,
+                  paddingInlineStart: t.space.$9,
                 })}
                 colorScheme='secondary'
               />
@@ -198,7 +198,7 @@ const OrganizationLeaveSection = () => {
             sx={t => ({
               paddingTop: 0,
               paddingBottom: 0,
-              paddingLeft: t.space.$1,
+              paddingInlineStart: t.space.$1,
             })}
             id='organizationDanger'
           >
@@ -252,7 +252,7 @@ const OrganizationDeleteSection = () => {
             sx={t => ({
               paddingTop: 0,
               paddingBottom: 0,
-              paddingLeft: t.space.$1,
+              paddingInlineStart: t.space.$1,
             })}
             id={'organizationDanger'}
           >
diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
index 8b212b98018..5857aa1943d 100644
--- a/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
+++ b/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
@@ -30,8 +30,8 @@ export const OrganizationMembersTabInvitations = withCardStateProvider(() => {
               width: '100%',
               gap: t.space.$8,
               paddingBottom: t.space.$4,
-              paddingLeft: t.space.$1,
-              paddingRight: t.space.$1,
+              paddingInlineStart: t.space.$1,
+              paddingInlineEnd: t.space.$1,
               borderBottomWidth: t.borderWidths.$normal,
               borderBottomStyle: t.borderStyles.$solid,
               borderBottomColor: t.colors.$borderAlpha100,
@@ -68,10 +68,10 @@ export const OrganizationMembersTabInvitations = withCardStateProvider(() => {
                         'organizationProfile.membersPage.invitationsTab.autoInvitations.headerSubtitle',
                       )}
                       sx={t => ({
-                        paddingLeft: t.space.$10,
+                        paddingInlineStart: t.space.$10,
                         color: t.colors.$colorMutedForeground,
                         [mqu.md]: {
-                          paddingLeft: 0,
+                          paddingInlineStart: 0,
                         },
                       })}
                     />
diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
index ef9231129ac..ca0c9e5302b 100644
--- a/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
+++ b/packages/ui/src/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
@@ -29,8 +29,8 @@ export const OrganizationMembersTabRequests = () => {
               width: '100%',
               gap: t.space.$8,
               paddingBottom: t.space.$4,
-              paddingLeft: t.space.$1,
-              paddingRight: t.space.$1,
+              paddingInlineStart: t.space.$1,
+              paddingInlineEnd: t.space.$1,
               borderBottomWidth: t.borderWidths.$normal,
               borderBottomStyle: t.borderStyles.$solid,
               borderBottomColor: t.colors.$borderAlpha100,
@@ -67,10 +67,10 @@ export const OrganizationMembersTabRequests = () => {
                         'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
                       )}
                       sx={t => ({
-                        paddingLeft: t.space.$10,
+                        paddingInlineStart: t.space.$10,
                         color: t.colors.$colorMutedForeground,
                         [mqu.md]: {
-                          paddingLeft: 0,
+                          paddingInlineStart: 0,
                         },
                       })}
                     />
diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
index fa2c5133528..7717294f89c 100644
--- a/packages/ui/src/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
+++ b/packages/ui/src/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
@@ -21,7 +21,7 @@ export const OrganizationProfileAvatarUploader = (
       <Text
         variant='subtitle'
         sx={t => ({
-          textAlign: 'left',
+          textAlign: 'start',
           marginBottom: t.space.$2,
         })}
         localizationKey={localizationKeys('organizationProfile.start.profileSection.uploadAction__title')}
diff --git a/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx b/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx
index e17f08f3980..24bfc86a93b 100644
--- a/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx
+++ b/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx
@@ -100,7 +100,7 @@ const RequestRow = withCardStateProvider(
           </Box>
         </Td>
 
-        <Td sx={{ textAlign: 'right' }}>
+        <Td sx={{ textAlign: 'end' }}>
           <AcceptRejectRequestButtons {...{ onAccept, onReject }} />
         </Td>
       </RowContainer>
diff --git a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index 40f39578b47..52c43d01821 100644
--- a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -115,7 +115,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
         align='center'
         sx={t => ({
           width: '100%',
-          paddingRight: t.space.$5,
+          paddingInlineEnd: t.space.$5,
         })}
       >
         <OrganizationPreview
diff --git a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index 6ed473f1c95..f410052f286 100644
--- a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -82,7 +82,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
         <Icon
           elementDescriptor={descriptors.organizationSwitcherTriggerIcon}
           icon={ChevronDown}
-          sx={t => ({ marginLeft: `${t.space.$2}` })}
+          sx={t => ({ marginInlineStart: `${t.space.$2}` })}
         />
       </Button>
     );
@@ -115,7 +115,7 @@ const NotificationCountBadgeSwitcherTrigger = () => {
       containerSx={t => ({
         position: 'absolute',
         top: `calc(${t.space.$2} * -1)`,
-        right: `calc(${t.space.$2} * -1)`,
+        insetInlineEnd: `calc(${t.space.$2} * -1)`,
       })}
       notificationCount={notificationCount}
     />
diff --git a/packages/ui/src/components/PricingTable/PricingTableDefault.tsx b/packages/ui/src/components/PricingTable/PricingTableDefault.tsx
index 879ed453c3c..fd6397b82d1 100644
--- a/packages/ui/src/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/ui/src/components/PricingTable/PricingTableDefault.tsx
@@ -157,7 +157,7 @@ function Card(props: CardProps) {
         borderColor: t.colors.$borderAlpha150,
         borderRadius: t.radii.$xl,
         overflow: 'hidden',
-        textAlign: 'left',
+        textAlign: 'start',
       })}
       data-variant={isCompact ? 'compact' : 'default'}
     >
diff --git a/packages/ui/src/components/Statements/Statement.tsx b/packages/ui/src/components/Statements/Statement.tsx
index 2cef2bc3e28..3400514a998 100644
--- a/packages/ui/src/components/Statements/Statement.tsx
+++ b/packages/ui/src/components/Statements/Statement.tsx
@@ -220,7 +220,7 @@ function SectionContentDetailsHeader({
       <Box
         elementDescriptor={descriptors.statementSectionContentDetailsHeaderItem}
         sx={{
-          textAlign: 'right',
+          textAlign: 'end',
         }}
       >
         {secondaryTitle && (
diff --git a/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx b/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx
index 8d19c89c08b..43dc1b4a052 100644
--- a/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx
+++ b/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx
@@ -178,7 +178,7 @@ function SubscriptionRow({ subscription, length }: { subscription: BillingSubscr
             />
             <Text
               variant='subtitle'
-              sx={t => ({ marginRight: t.sizes.$1 })}
+              sx={t => ({ marginInlineEnd: t.sizes.$1 })}
             >
               {subscription.plan.name}
             </Text>
@@ -199,7 +199,7 @@ function SubscriptionRow({ subscription, length }: { subscription: BillingSubscr
       </Td>
       <Td
         sx={_ => ({
-          textAlign: 'right',
+          textAlign: 'end',
         })}
       >
         <Text variant='subtitle'>
diff --git a/packages/ui/src/components/UserButton/SessionActions.tsx b/packages/ui/src/components/UserButton/SessionActions.tsx
index cd2ec7e9d9d..2947759741e 100644
--- a/packages/ui/src/components/UserButton/SessionActions.tsx
+++ b/packages/ui/src/components/UserButton/SessionActions.tsx
@@ -170,7 +170,7 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
         >
           <Flex
             justify='between'
-            sx={t => ({ marginLeft: t.space.$12, padding: `0 ${t.space.$5} ${t.space.$4}`, gap: t.space.$2 })}
+            sx={t => ({ marginInlineStart: t.space.$12, padding: `0 ${t.space.$5} ${t.space.$4}`, gap: t.space.$2 })}
           >
             <SmallAction
               elementDescriptor={descriptors.userButtonPopoverActionButton}
diff --git a/packages/ui/src/components/UserButton/UserButtonTopLevelIdentifier.tsx b/packages/ui/src/components/UserButton/UserButtonTopLevelIdentifier.tsx
index 1800efb4a69..578f0d3983f 100644
--- a/packages/ui/src/components/UserButton/UserButtonTopLevelIdentifier.tsx
+++ b/packages/ui/src/components/UserButton/UserButtonTopLevelIdentifier.tsx
@@ -20,7 +20,7 @@ export const UserButtonTopLevelIdentifier = ({ showName }: UserButtonTopLevelIde
       elementDescriptor={descriptors.userButtonOuterIdentifier}
       sx={[
         t => ({
-          paddingLeft: t.space.$2,
+          paddingInlineStart: t.space.$2,
         }),
       ]}
     >
diff --git a/packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx b/packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx
index ff00fdb0f25..ad294468763 100644
--- a/packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx
+++ b/packages/ui/src/components/UserProfile/ConnectedAccountsSection.tsx
@@ -198,7 +198,7 @@ const ConnectedAccount = ({ account }: { account: ExternalAccountResource }) =>
           <Text
             colorScheme='secondary'
             sx={t => ({
-              paddingRight: t.sizes.$1x5,
+              paddingInlineEnd: t.sizes.$1x5,
               display: 'inline-block',
             })}
             localizationKey={connectedAccountErrorMessage}
diff --git a/packages/ui/src/components/UserProfile/DeleteSection.tsx b/packages/ui/src/components/UserProfile/DeleteSection.tsx
index ea08292f1c0..55392de00e4 100644
--- a/packages/ui/src/components/UserProfile/DeleteSection.tsx
+++ b/packages/ui/src/components/UserProfile/DeleteSection.tsx
@@ -27,7 +27,7 @@ export const DeleteSection = () => {
         <Action.Closed value='delete'>
           <ProfileSection.Item
             id='danger'
-            sx={t => ({ paddingLeft: t.space.$1 })}
+            sx={t => ({ paddingInlineStart: t.space.$1 })}
           >
             <Action.Trigger value='delete'>
               <ProfileSection.Button
diff --git a/packages/ui/src/components/UserProfile/MfaBackupCodeList.tsx b/packages/ui/src/components/UserProfile/MfaBackupCodeList.tsx
index 898ee2bade5..d97482fc1de 100644
--- a/packages/ui/src/components/UserProfile/MfaBackupCodeList.tsx
+++ b/packages/ui/src/components/UserProfile/MfaBackupCodeList.tsx
@@ -85,16 +85,16 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
             borderTopColor: t.colors.$borderAlpha100,
             gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
             '>:not([hidden])~:not([hidden])': {
-              borderRightWidth: '0px',
-              borderLeftWidth: '1px',
+              borderInlineEndWidth: '0px',
+              borderInlineStartWidth: '1px',
               borderStyle: 'solid',
               borderColor: t.colors.$borderAlpha100,
             },
             '>:first-child': {
-              borderBottomLeftRadius: t.radii.$lg,
+              borderEndStartRadius: t.radii.$lg,
             },
             '>:last-child': {
-              borderBottomRightRadius: t.radii.$lg,
+              borderEndEndRadius: t.radii.$lg,
             },
           })}
         >
diff --git a/packages/ui/src/components/UserProfile/MfaPhoneCodeScreen.tsx b/packages/ui/src/components/UserProfile/MfaPhoneCodeScreen.tsx
index 52b4ea80701..01bf70c47ad 100644
--- a/packages/ui/src/components/UserProfile/MfaPhoneCodeScreen.tsx
+++ b/packages/ui/src/components/UserProfile/MfaPhoneCodeScreen.tsx
@@ -208,7 +208,7 @@ const AddMfa = (props: AddMfaProps) => {
           icon={
             <Icon
               icon={Plus}
-              sx={t => ({ marginRight: t.space.$2 })}
+              sx={t => ({ marginInlineEnd: t.space.$2 })}
             />
           }
           localizationKey={localizationKeys('userProfile.mfaPhoneCodePage.primaryButton__addPhoneNumber')}
diff --git a/packages/ui/src/components/UserProfile/PasswordSection.tsx b/packages/ui/src/components/UserProfile/PasswordSection.tsx
index f2390103512..0402a5c508b 100644
--- a/packages/ui/src/components/UserProfile/PasswordSection.tsx
+++ b/packages/ui/src/components/UserProfile/PasswordSection.tsx
@@ -37,7 +37,7 @@ export const PasswordSection = () => {
           <ProfileSection.Item
             id='password'
             sx={t => ({
-              paddingLeft: !passwordEnabled ? '0' : undefined,
+              paddingInlineStart: !passwordEnabled ? '0' : undefined,
               paddingTop: t.space.$0x25,
               paddingBottom: t.space.$0x25,
             })}
diff --git a/packages/ui/src/components/UserProfile/UsernameSection.tsx b/packages/ui/src/components/UserProfile/UsernameSection.tsx
index 2e74ce56c66..aa2c0d98979 100644
--- a/packages/ui/src/components/UserProfile/UsernameSection.tsx
+++ b/packages/ui/src/components/UserProfile/UsernameSection.tsx
@@ -36,7 +36,7 @@ export const UsernameSection = () => {
           <ProfileSection.Item
             id='username'
             sx={{
-              paddingLeft: !user.username ? '0' : undefined,
+              paddingInlineStart: !user.username ? '0' : undefined,
             }}
           >
             {user.username && (
diff --git a/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx b/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx
index 9844b8ef814..cc445a75774 100644
--- a/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx
+++ b/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx
@@ -118,10 +118,10 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
         sx={t => ({
           position: 'fixed',
           bottom: '1.25rem',
-          right: '1.25rem',
+          insetInlineEnd: '1.25rem',
           height: `${t.sizes.$10}`,
           minWidth: '13.4rem',
-          paddingLeft: `${t.space.$3}`,
+          paddingInlineStart: `${t.space.$3}`,
           borderRadius: '1.25rem',
           transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
 
@@ -520,6 +520,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
           href={`#${buttonIdentifier}`}
           css={css`
             position: fixed;
+            /* eslint-disable-next-line custom-rules/no-physical-css-properties -- Skip link - visually hidden pattern */
             left: -999px;
             top: 1rem;
             z-index: 999999;
@@ -531,6 +532,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
             text-decoration: underline;
 
             &:focus {
+              /* eslint-disable-next-line custom-rules/no-physical-css-properties -- Skip link - visually hidden pattern */
               left: 1rem;
               outline: 2px solid;
               outline-offset: 2px;
diff --git a/packages/ui/src/elements/Actions.tsx b/packages/ui/src/elements/Actions.tsx
index ca5959372a3..b7ef9f0e7df 100644
--- a/packages/ui/src/elements/Actions.tsx
+++ b/packages/ui/src/elements/Actions.tsx
@@ -217,7 +217,7 @@ export const Action = (props: ActionProps) => {
             size={spinnerSize || 'xs'}
             elementDescriptor={descriptors.spinner}
             sx={t => ({
-              marginRight: t.space.$1,
+              marginInlineEnd: t.space.$1,
             })}
           />
         ) : (
diff --git a/packages/ui/src/elements/Alert.tsx b/packages/ui/src/elements/Alert.tsx
index ce0f13ee5a6..21270cdc5dc 100644
--- a/packages/ui/src/elements/Alert.tsx
+++ b/packages/ui/src/elements/Alert.tsx
@@ -39,7 +39,7 @@ export const Alert = (props: AlertProps): JSX.Element | null => {
         elementDescriptor={descriptors.alertTextContainer}
         elementId={descriptors.alertTextContainer.setId(variant)}
         gap={1}
-        sx={{ textAlign: 'left' }}
+        sx={{ textAlign: 'start' }}
       >
         <Text
           elementDescriptor={descriptors.alertText}
diff --git a/packages/ui/src/elements/ArrowBlockButton.tsx b/packages/ui/src/elements/ArrowBlockButton.tsx
index 92a9a475dbd..7ebc83e5407 100644
--- a/packages/ui/src/elements/ArrowBlockButton.tsx
+++ b/packages/ui/src/elements/ArrowBlockButton.tsx
@@ -66,10 +66,16 @@ export const ArrowBlockButton = React.forwardRef<HTMLButtonElement, ArrowBlockBu
           alignItems: 'center',
           padding: `${theme.space.$1x5} ${theme.space.$3} ${theme.space.$1x5} ${theme.space.$2x5}`,
           '--arrow-opacity': '0',
-          '--arrow-transform': `translateX(-${theme.space.$2});`,
+          '--arrow-transform': `translateX(-${theme.space.$2})`,
           '&:hover,&:focus ': {
             '--arrow-opacity': '0.5',
-            '--arrow-transform': 'translateX(0px);',
+            '--arrow-transform': 'translateX(0px)',
+          },
+          '[dir="rtl"] &': {
+            '--arrow-transform': `translateX(${theme.space.$2})`,
+          },
+          '[dir="rtl"] &:hover, [dir="rtl"] &:focus': {
+            '--arrow-transform': 'translateX(0px)',
           },
         },
         props.sx,
@@ -141,6 +147,9 @@ export const ArrowBlockButton = React.forwardRef<HTMLButtonElement, ArrowBlockBu
               height: '1em',
               opacity: `var(--arrow-opacity)`,
               transform: `var(--arrow-transform)`,
+              '[dir="rtl"] &': {
+                transform: `var(--arrow-transform) scaleX(-1)`,
+              },
             }),
             rightIconSx,
           ]}
diff --git a/packages/ui/src/elements/Avatar.tsx b/packages/ui/src/elements/Avatar.tsx
index 958df6b1eb2..2560197a913 100644
--- a/packages/ui/src/elements/Avatar.tsx
+++ b/packages/ui/src/elements/Avatar.tsx
@@ -159,6 +159,9 @@ export const Avatar = (props: AvatarProps) => {
           overflow: 'hidden',
           background: t.colors.$colorShimmer,
           position: 'absolute',
+          top: 0,
+          // eslint-disable-next-line custom-rules/no-physical-css-properties -- Shimmer effect uses translateX animation
+          left: 0,
           width: '25%',
           height: '100%',
           transition: `all ${t.transitionDuration.$slow} ${t.transitionTiming.$easeOut}`,
@@ -168,6 +171,9 @@ export const Avatar = (props: AvatarProps) => {
             boxSizing: 'border-box',
             content: "''",
             position: 'absolute',
+            top: 0,
+            // eslint-disable-next-line custom-rules/no-physical-css-properties -- Shimmer effect uses translateX animation
+            left: 0,
             width: '400%',
             height: '100%',
             transform: 'var(--cl-shimmer-hover-after-transform, skewX(45deg) translateX(75%))',
diff --git a/packages/ui/src/elements/Badge.tsx b/packages/ui/src/elements/Badge.tsx
index cf91b1ecdbf..44f4eef2fc5 100644
--- a/packages/ui/src/elements/Badge.tsx
+++ b/packages/ui/src/elements/Badge.tsx
@@ -25,10 +25,13 @@ export const LastAuthenticationStrategyBadge = ({
           boxShadow: `0 0 0 1px ${t.colors.$colorBackground}`,
           ...(overlay && {
             position: 'absolute',
-            right: -1,
+            insetInlineEnd: -1,
             top: -1,
             transform: `translate(${t.space.$2x5}, calc(-50% - ${t.space.$0x5}))`,
             pointerEvents: 'none',
+            '[dir="rtl"] &': {
+              transform: `translate(-${t.space.$2x5}, calc(-50% - ${t.space.$0x5}))`,
+            },
           }),
         }),
         sx,
diff --git a/packages/ui/src/elements/Card/CardClerkAndPagesTag.tsx b/packages/ui/src/elements/Card/CardClerkAndPagesTag.tsx
index 9008f1d498f..986bccfce8e 100644
--- a/packages/ui/src/elements/Card/CardClerkAndPagesTag.tsx
+++ b/packages/ui/src/elements/Card/CardClerkAndPagesTag.tsx
@@ -41,8 +41,7 @@ export const CardClerkAndPagesTag = React.memo(
         <Col
           sx={t => ({
             gap: displayConfig.branded || withFooterPages ? t.space.$2 : 0,
-            marginLeft: 'auto',
-            marginRight: 'auto',
+            marginInline: 'auto',
             width: '100%',
             justifyContent: 'center',
             alignItems: 'center',
diff --git a/packages/ui/src/elements/Card/CardContent.tsx b/packages/ui/src/elements/Card/CardContent.tsx
index e49a6711f20..5e3061d2b72 100644
--- a/packages/ui/src/elements/Card/CardContent.tsx
+++ b/packages/ui/src/elements/Card/CardContent.tsx
@@ -71,7 +71,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
             zIndex: t.zIndices.$modal,
             position: 'absolute',
             top: t.space.$2,
-            right: t.space.$2,
+            insetInlineEnd: t.space.$2,
             padding: t.space.$3,
           })}
         />
diff --git a/packages/ui/src/elements/ClipboardInput.tsx b/packages/ui/src/elements/ClipboardInput.tsx
index 7d8a448b723..b6c042e58d0 100644
--- a/packages/ui/src/elements/ClipboardInput.tsx
+++ b/packages/ui/src/elements/ClipboardInput.tsx
@@ -24,7 +24,7 @@ export const ClipboardInput = (props: ClipboardInputProps) => {
         {...rest}
         value={value}
         isDisabled
-        sx={theme => ({ paddingRight: theme.space.$8 })}
+        sx={theme => ({ paddingInlineEnd: theme.space.$8 })}
       />
 
       <Button
@@ -33,7 +33,7 @@ export const ClipboardInput = (props: ClipboardInputProps) => {
         onClick={onCopy}
         sx={{
           position: 'absolute',
-          right: 0,
+          insetInlineEnd: 0,
         }}
       >
         <Icon
diff --git a/packages/ui/src/elements/Drawer.tsx b/packages/ui/src/elements/Drawer.tsx
index 317ce0ca0f3..b4de48fec6e 100644
--- a/packages/ui/src/elements/Drawer.tsx
+++ b/packages/ui/src/elements/Drawer.tsx
@@ -535,7 +535,9 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
               willChange: 'transform',
               position: 'absolute',
               bottom: 0,
+              // eslint-disable-next-line custom-rules/no-physical-css-properties -- Full-width overlay positioning
               left: 0,
+              // eslint-disable-next-line custom-rules/no-physical-css-properties -- Full-width overlay positioning
               right: 0,
               background: common.mergedColorsBackground(
                 colors.setAlpha(t.colors.$colorBackground, 1),
diff --git a/packages/ui/src/elements/FieldControl.tsx b/packages/ui/src/elements/FieldControl.tsx
index e3b6563540e..94995209229 100644
--- a/packages/ui/src/elements/FieldControl.tsx
+++ b/packages/ui/src/elements/FieldControl.tsx
@@ -98,13 +98,13 @@ const FieldLabelIcon = (props: { icon?: React.ComponentType }) => {
       as={'span'}
       title={t(localizationKeys('formFieldHintText__slug'))}
       sx={{
-        marginRight: 'auto',
+        marginInlineEnd: 'auto',
       }}
     >
       <IconCustomizable
         icon={props.icon}
         sx={theme => ({
-          marginLeft: theme.space.$0x5,
+          marginInlineStart: theme.space.$0x5,
           color: theme.colors.$neutralAlpha400,
           width: theme.sizes.$4,
           height: theme.sizes.$4,
diff --git a/packages/ui/src/elements/Header.tsx b/packages/ui/src/elements/Header.tsx
index 17aa0286bfd..a1a7cc6f808 100644
--- a/packages/ui/src/elements/Header.tsx
+++ b/packages/ui/src/elements/Header.tsx
@@ -93,7 +93,12 @@ const BackLink = React.memo((props: PropsOfComponent<typeof Link>): JSX.Element
     >
       <Icon
         icon={ArrowLeftIcon}
-        sx={t => ({ color: t.colors.$colorForeground })}
+        sx={t => ({
+          color: t.colors.$colorForeground,
+          '[dir="rtl"] &': {
+            transform: 'scaleX(-1)',
+          },
+        })}
       />
       {children}
     </Link>
diff --git a/packages/ui/src/elements/InputGroup.tsx b/packages/ui/src/elements/InputGroup.tsx
index 4bd63337fc3..6d8d9f6096c 100644
--- a/packages/ui/src/elements/InputGroup.tsx
+++ b/packages/ui/src/elements/InputGroup.tsx
@@ -16,18 +16,18 @@ export const InputGroup = forwardRef<
 
   const inputBorder = groupPrefix
     ? {
-        borderTopLeftRadius: '0',
-        borderBottomLeftRadius: '0',
+        borderStartStartRadius: '0',
+        borderEndStartRadius: '0',
       }
     : {
-        borderTopRightRadius: '0',
-        borderBottomRightRadius: '0',
+        borderStartEndRadius: '0',
+        borderEndEndRadius: '0',
       };
 
   const textProps: ThemableCssProp = t => ({
     paddingInline: t.space.$2,
-    borderTopRightRadius: '0',
-    borderBottomRightRadius: '0',
+    borderStartEndRadius: '0',
+    borderEndEndRadius: '0',
     width: 'fit-content',
     display: 'flex',
     alignItems: 'center',
diff --git a/packages/ui/src/elements/InputWithIcon.tsx b/packages/ui/src/elements/InputWithIcon.tsx
index 81242c2b78d..09e7d5329f1 100644
--- a/packages/ui/src/elements/InputWithIcon.tsx
+++ b/packages/ui/src/elements/InputWithIcon.tsx
@@ -20,7 +20,7 @@ export const InputWithIcon = React.forwardRef<HTMLInputElement, InputWithIcon>((
           sx={theme => [
             {
               position: 'absolute',
-              left: theme.space.$3x5,
+              insetInlineStart: theme.space.$3x5,
               width: theme.sizes.$3x5,
               height: theme.sizes.$3x5,
               pointerEvents: 'none',
@@ -42,7 +42,7 @@ export const InputWithIcon = React.forwardRef<HTMLInputElement, InputWithIcon>((
         sx={[
           theme => ({
             width: '100%',
-            paddingLeft: theme.space.$10,
+            paddingInlineStart: theme.space.$10,
           }),
           sx,
         ]}
diff --git a/packages/ui/src/elements/LegalConsentCheckbox.tsx b/packages/ui/src/elements/LegalConsentCheckbox.tsx
index fc72ff6ade8..fce2a7051e3 100644
--- a/packages/ui/src/elements/LegalConsentCheckbox.tsx
+++ b/packages/ui/src/elements/LegalConsentCheckbox.tsx
@@ -43,8 +43,8 @@ const LegalCheckboxLabel = (props: { termsUrl?: string; privacyPolicyUrl?: strin
       htmlFor={inputProps.id}
       isDisabled={inputProps.isDisabled}
       sx={t => ({
-        paddingLeft: t.space.$1x5,
-        textAlign: 'left',
+        paddingInlineStart: t.space.$1x5,
+        textAlign: 'start',
       })}
     >
       <Text
diff --git a/packages/ui/src/elements/Modal.tsx b/packages/ui/src/elements/Modal.tsx
index 588db619795..35ac4d9563a 100644
--- a/packages/ui/src/elements/Modal.tsx
+++ b/packages/ui/src/elements/Modal.tsx
@@ -81,6 +81,7 @@ export const Modal = withFloatingTree((props: ModalProps) => {
               width: '100vw',
               height: ['100vh', '-webkit-fill-available'],
               position: 'fixed',
+              // eslint-disable-next-line custom-rules/no-physical-css-properties -- Full-viewport centering (used with right: 0)
               left: 0,
               top: 0,
             }),
diff --git a/packages/ui/src/elements/Navbar.tsx b/packages/ui/src/elements/Navbar.tsx
index 6724678bc37..8b2a577c792 100644
--- a/packages/ui/src/elements/Navbar.tsx
+++ b/packages/ui/src/elements/Navbar.tsx
@@ -156,7 +156,7 @@ const NavbarContainer = (
         maxWidth: t.space.$57,
         background: common.mutedBackground(t),
         padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
-        marginRight: `calc(${t.space.$2} * -1)`,
+        marginInlineEnd: `calc(${t.space.$2} * -1)`,
         color: t.colors.$colorForeground,
         justifyContent: 'space-between',
       })}
@@ -239,13 +239,13 @@ const MobileNavbarContainer = withFloatingTree((props: React.PropsWithChildren<R
             bottom: 0,
             width: t.space.$60,
             backgroundColor: colors.makeSolid(t.colors.$colorBackground),
-            borderTopRightRadius: t.radii.$lg,
-            borderBottomRightRadius: t.radii.$lg,
+            borderStartEndRadius: t.radii.$lg,
+            borderEndEndRadius: t.radii.$lg,
             padding: `${t.space.$10} ${t.space.$6}`,
             animation: `${animations.navbarSlideIn} ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,
-            borderRightWidth: t.borderWidths.$normal,
-            borderRightStyle: t.borderStyles.$solid,
-            borderRightColor: t.colors.$borderAlpha150,
+            borderInlineEndWidth: t.borderWidths.$normal,
+            borderInlineEndStyle: t.borderStyles.$solid,
+            borderInlineEndColor: t.colors.$borderAlpha150,
             boxShadow: t.shadows.$cardContentShadow,
           })}
         >
diff --git a/packages/ui/src/elements/OrganizationPreview.tsx b/packages/ui/src/elements/OrganizationPreview.tsx
index e1727fb75ff..472b9095393 100644
--- a/packages/ui/src/elements/OrganizationPreview.tsx
+++ b/packages/ui/src/elements/OrganizationPreview.tsx
@@ -69,7 +69,7 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
           sx={avatarSx}
           rounded={rounded}
         />
-        {icon && <Flex sx={{ position: 'absolute', left: 0, bottom: 0 }}>{icon}</Flex>}
+        {icon && <Flex sx={{ position: 'absolute', insetInlineStart: 0, bottom: 0 }}>{icon}</Flex>}
       </Flex>
       <Flex
         elementDescriptor={descriptors.organizationPreviewTextContainer}
@@ -77,7 +77,7 @@ export const OrganizationPreview = (props: OrganizationPreviewProps) => {
         direction='col'
         justify='center'
         as='span'
-        sx={{ minWidth: '0px', textAlign: 'left' }}
+        sx={{ minWidth: '0px', textAlign: 'start' }}
       >
         <Text
           elementDescriptor={descriptors.organizationPreviewMainIdentifier}
diff --git a/packages/ui/src/elements/PasswordInput.tsx b/packages/ui/src/elements/PasswordInput.tsx
index fe981a75763..759450d01fa 100644
--- a/packages/ui/src/elements/PasswordInput.tsx
+++ b/packages/ui/src/elements/PasswordInput.tsx
@@ -102,7 +102,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
         //@ts-expect-error Type mismatch between ForwardRef and RefObject due to null
         ref={mergeRefs(ref, inputRef)}
         type={hidden ? 'password' : 'text'}
-        sx={theme => ({ paddingRight: theme.space.$10 })}
+        sx={theme => ({ paddingInlineEnd: theme.space.$10 })}
       />
       <IconButton
         elementDescriptor={descriptors.formFieldInputShowPasswordButton}
@@ -114,8 +114,8 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
         onClick={() => setHidden(s => !s)}
         sx={theme => ({
           position: 'absolute',
-          right: 0,
-          marginRight: theme.space.$1,
+          insetInlineEnd: 0,
+          marginInlineEnd: theme.space.$1,
           color: theme.colors.$neutralAlpha400,
         })}
         icon={hidden ? Eye : EyeSlash}
diff --git a/packages/ui/src/elements/PhoneInput/index.tsx b/packages/ui/src/elements/PhoneInput/index.tsx
index d945b88f8b2..7882e0623be 100644
--- a/packages/ui/src/elements/PhoneInput/index.tsx
+++ b/packages/ui/src/elements/PhoneInput/index.tsx
@@ -116,9 +116,9 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps & { feedback
           sx={t => ({
             borderWidth: '0',
             borderRadius: t.radii.$md, // needs to be specified as we can't use overflow: hidden on the parent, hides the popover
-            borderBottomRightRadius: '0',
-            borderTopRightRadius: '0',
-            paddingRight: t.space.$2,
+            borderEndEndRadius: '0',
+            borderStartEndRadius: '0',
+            paddingInlineEnd: t.space.$2,
             ':focus': {
               zIndex: 2,
               boxShadow: 'none',
@@ -164,7 +164,7 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps & { feedback
             display: 'flex',
             alignItems: 'center',
             pointerEvents: 'none',
-            paddingLeft: t.space.$0x5,
+            paddingInlineStart: t.space.$0x5,
             opacity: props.isDisabled ? t.opacity.$disabled : 1,
           })}
         >
@@ -188,9 +188,9 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps & { feedback
               '&[type=tel]': {
                 borderRadius: t.radii.$md,
                 borderWidth: 0,
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: 0,
-                paddingLeft: t.space.$1,
+                borderStartStartRadius: 0,
+                borderEndStartRadius: 0,
+                paddingInlineStart: t.space.$1,
                 '&:focus': {
                   borderColor: 'unset',
                   boxShadow: 'unset',
@@ -236,7 +236,7 @@ const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
       />
       <Text
         as='div'
-        sx={{ width: '100%', textAlign: 'left' }}
+        sx={{ width: '100%', textAlign: 'start' }}
       >
         {country.name}
       </Text>
diff --git a/packages/ui/src/elements/PreviewButton.tsx b/packages/ui/src/elements/PreviewButton.tsx
index 06a420ac938..8b3e0ccdaee 100644
--- a/packages/ui/src/elements/PreviewButton.tsx
+++ b/packages/ui/src/elements/PreviewButton.tsx
@@ -46,7 +46,7 @@ export const PreviewButton = (props: PreviewButtonProps) => {
           sx={[
             t => ({
               color: t.colors.$colorMutedForeground,
-              marginLeft: t.space.$2,
+              marginInlineStart: t.space.$2,
               visibility: showIconOnHover ? 'hidden' : 'initial',
             }),
             iconSx,
diff --git a/packages/ui/src/elements/ProfileCard/ProfileCardContent.tsx b/packages/ui/src/elements/ProfileCard/ProfileCardContent.tsx
index 5b3a83f0040..f9b075c43f0 100644
--- a/packages/ui/src/elements/ProfileCard/ProfileCardContent.tsx
+++ b/packages/ui/src/elements/ProfileCard/ProfileCardContent.tsx
@@ -55,8 +55,8 @@ export const ProfileCardContent = (props: ProfileCardContentProps) => {
           scrollbarGutter: 'stable',
           paddingTop: theme.space.$7,
           paddingBottom: theme.space.$7,
-          paddingLeft: theme.space.$8,
-          paddingRight: theme.space.$6, //smaller because of stable scrollbar gutter
+          paddingInlineStart: theme.space.$8,
+          paddingInlineEnd: theme.space.$6, //smaller because of stable scrollbar gutter
           [mqu.sm]: {
             padding: `${theme.space.$8} ${theme.space.$5}`,
           },
diff --git a/packages/ui/src/elements/ProfileCard/ProfileCardRoot.tsx b/packages/ui/src/elements/ProfileCard/ProfileCardRoot.tsx
index 2ff26582860..d700b46446f 100644
--- a/packages/ui/src/elements/ProfileCard/ProfileCardRoot.tsx
+++ b/packages/ui/src/elements/ProfileCard/ProfileCardRoot.tsx
@@ -39,12 +39,12 @@ export const ProfileCardRoot = React.forwardRef<HTMLDivElement, PropsOfComponent
             [mqu.md]: {
               padding: `${t.space.$1x5} ${t.space.$2}`,
               top: t.space.$none,
-              right: t.space.$none,
+              insetInlineEnd: t.space.$none,
             },
             zIndex: t.zIndices.$modal,
             position: 'absolute',
             top: t.space.$2,
-            right: t.space.$2,
+            insetInlineEnd: t.space.$2,
           })}
         >
           <IconButton
diff --git a/packages/ui/src/elements/Select.tsx b/packages/ui/src/elements/Select.tsx
index cd0d49d36bc..3a32ca5e9d5 100644
--- a/packages/ui/src/elements/Select.tsx
+++ b/packages/ui/src/elements/Select.tsx
@@ -332,6 +332,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
           }),
           sx,
         ]}
+        // eslint-disable-next-line custom-rules/no-physical-css-properties -- Floating UI library positioning
         style={{ ...styles, left: styles.left - 1 }}
       >
         {comparator && (
@@ -407,8 +408,8 @@ export const SelectButton = (
       sx={[
         theme => ({
           gap: theme.space.$2,
-          paddingLeft: theme.space.$3x5,
-          paddingRight: theme.space.$3x5,
+          paddingInlineStart: theme.space.$3x5,
+          paddingInlineEnd: theme.space.$3x5,
           alignItems: 'center',
           '> *': { pointerEvents: 'none' },
         }),
diff --git a/packages/ui/src/elements/SuccessPage.tsx b/packages/ui/src/elements/SuccessPage.tsx
index 46f3841db59..1640bbe204f 100644
--- a/packages/ui/src/elements/SuccessPage.tsx
+++ b/packages/ui/src/elements/SuccessPage.tsx
@@ -42,7 +42,7 @@ export const SuccessPage = (props: SuccessPageProps) => {
               sx={t => ({
                 display: 'inline',
                 ':not(:last-of-type)': {
-                  marginRight: t.sizes.$1,
+                  marginInlineEnd: t.sizes.$1,
                 },
               })}
             />
diff --git a/packages/ui/src/elements/Switch.tsx b/packages/ui/src/elements/Switch.tsx
index 155e4ebf7ee..f3219612cbe 100644
--- a/packages/ui/src/elements/Switch.tsx
+++ b/packages/ui/src/elements/Switch.tsx
@@ -79,6 +79,7 @@ export const Switch = forwardRef<HTMLDivElement, SwitchProps>(
             elementDescriptor={descriptors.switchThumb}
             sx={t => ({
               position: 'absolute',
+              // eslint-disable-next-line custom-rules/no-physical-css-properties -- Physical control - thumb uses translateX animation
               left: t.sizes.$0x5,
               width: t.sizes.$3,
               height: t.sizes.$3,
diff --git a/packages/ui/src/elements/TagInput.tsx b/packages/ui/src/elements/TagInput.tsx
index 674a98496ce..2323ca387ac 100644
--- a/packages/ui/src/elements/TagInput.tsx
+++ b/packages/ui/src/elements/TagInput.tsx
@@ -163,7 +163,7 @@ export const TagInput = (props: TagInputProps) => {
           width: 'initial',
           padding: 0,
           lineHeight: t.space.$5,
-          paddingLeft: t.space.$1,
+          paddingInlineStart: t.space.$1,
           '::placeholder': {
             color: t.colors.$colorMutedForeground,
           },
@@ -198,7 +198,7 @@ const TagPill = (props: TagPillProps) => {
         borderStyle: t.borderStyles.$solid,
         borderColor: t.colors.$borderAlpha100,
         display: 'inline-flex',
-        marginRight: '1px',
+        marginInlineEnd: '1px',
         cursor: 'pointer',
         ':hover': {
           backgroundColor: t.colors.$neutralAlpha100,
diff --git a/packages/ui/src/elements/UserPreview.tsx b/packages/ui/src/elements/UserPreview.tsx
index 95166b7f4a2..f84d004a33f 100644
--- a/packages/ui/src/elements/UserPreview.tsx
+++ b/packages/ui/src/elements/UserPreview.tsx
@@ -132,7 +132,7 @@ export const UserPreview = (props: UserPreviewProps) => {
             {icon && (
               <Flex
                 elementDescriptor={descriptors.userPreviewAvatarIcon}
-                sx={[{ position: 'absolute', left: 0, bottom: 0 }, iconSx]}
+                sx={[{ position: 'absolute', insetInlineStart: 0, bottom: 0 }, iconSx]}
                 as='span'
               >
                 {icon}
@@ -148,7 +148,7 @@ export const UserPreview = (props: UserPreviewProps) => {
         direction='col'
         justify='center'
         as='span'
-        sx={{ minWidth: '0px', textAlign: 'left' }}
+        sx={{ minWidth: '0px', textAlign: 'start' }}
       >
         <Text
           elementDescriptor={descriptors.userPreviewMainIdentifier}
diff --git a/packages/ui/src/primitives/AlertIcon.tsx b/packages/ui/src/primitives/AlertIcon.tsx
index eb0c9e0ccd3..673ad605e71 100644
--- a/packages/ui/src/primitives/AlertIcon.tsx
+++ b/packages/ui/src/primitives/AlertIcon.tsx
@@ -4,7 +4,7 @@ import { createVariants } from '../styledSystem';
 
 const { applyVariants, filterProps } = createVariants(theme => ({
   base: {
-    marginRight: theme.space.$2x5,
+    marginInlineEnd: theme.space.$2x5,
     width: theme.sizes.$4,
     height: theme.sizes.$4,
   },
diff --git a/packages/ui/src/primitives/Badge.tsx b/packages/ui/src/primitives/Badge.tsx
index 82216c5c04e..8bcfaff319b 100644
--- a/packages/ui/src/primitives/Badge.tsx
+++ b/packages/ui/src/primitives/Badge.tsx
@@ -16,7 +16,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
     borderRadius: theme.radii.$sm,
     padding: `${theme.space.$0x25} ${theme.space.$1x5}`,
     display: 'inline-flex',
-    marginRight: '1px',
+    marginInlineEnd: '1px',
   },
   variants: {
     textVariant: { ...common.textVariants(theme) },
diff --git a/packages/ui/src/primitives/Button.tsx b/packages/ui/src/primitives/Button.tsx
index 97e7e8a8923..28d1eb2ad68 100644
--- a/packages/ui/src/primitives/Button.tsx
+++ b/packages/ui/src/primitives/Button.tsx
@@ -180,10 +180,13 @@ const ButtonChildrenWithArrow = ({ children }: PropsWithChildren) => {
         elementDescriptor={descriptors.buttonArrowIcon}
         icon={ArrowRightButtonIcon}
         sx={t => ({
-          marginLeft: t.space.$2,
+          marginInlineStart: t.space.$2,
           width: t.sizes.$2x5,
           height: t.sizes.$2x5,
           opacity: t.opacity.$inactive,
+          '[dir="rtl"] &': {
+            transform: 'scaleX(-1)',
+          },
         })}
       />
     </Flex>
diff --git a/packages/ui/src/primitives/FormErrorText.tsx b/packages/ui/src/primitives/FormErrorText.tsx
index d00b7acdfdc..20f6502e82f 100644
--- a/packages/ui/src/primitives/FormErrorText.tsx
+++ b/packages/ui/src/primitives/FormErrorText.tsx
@@ -15,7 +15,7 @@ const { applyVariants } = createVariants(theme => ({
     gap: theme.sizes.$1,
     position: 'absolute',
     top: '0',
-    textAlign: 'left',
+    textAlign: 'start',
   },
   variants: {},
 }));
diff --git a/packages/ui/src/primitives/FormSuccessText.tsx b/packages/ui/src/primitives/FormSuccessText.tsx
index cb85a621e25..8cb20b9494e 100644
--- a/packages/ui/src/primitives/FormSuccessText.tsx
+++ b/packages/ui/src/primitives/FormSuccessText.tsx
@@ -14,7 +14,7 @@ export const { applyVariants } = createVariants(theme => ({
     gap: theme.sizes.$1,
     position: 'absolute',
     top: '0',
-    textAlign: 'left',
+    textAlign: 'start',
   },
   variants: {},
 }));
diff --git a/packages/ui/src/primitives/Spinner.tsx b/packages/ui/src/primitives/Spinner.tsx
index dff56a32194..a528596e348 100644
--- a/packages/ui/src/primitives/Spinner.tsx
+++ b/packages/ui/src/primitives/Spinner.tsx
@@ -9,12 +9,16 @@ const { applyVariants, filterProps } = createVariants(theme => {
       display: 'inline-block',
       borderRadius: '99999px',
       borderTop: `${thickness} solid currentColor`,
+      // eslint-disable-next-line custom-rules/no-physical-css-properties -- Decorative spinner visual effect
       borderRight: `${thickness} solid currentColor`,
       borderBottomWidth: thickness,
+      // eslint-disable-next-line custom-rules/no-physical-css-properties -- Decorative spinner visual effect
       borderLeftWidth: thickness,
       borderBottomStyle: 'solid',
+      // eslint-disable-next-line custom-rules/no-physical-css-properties -- Decorative spinner visual effect
       borderLeftStyle: 'solid',
       borderBottomColor: theme.colors.$transparent,
+      // eslint-disable-next-line custom-rules/no-physical-css-properties -- Decorative spinner visual effect
       borderLeftColor: theme.colors.$transparent,
       opacity: 1,
       animation: `${animations.spinning} ${speed} linear 0s infinite normal none running`,
@@ -25,9 +29,11 @@ const { applyVariants, filterProps } = createVariants(theme => {
     },
     variants: {
       colorScheme: {
+        // eslint-disable-next-line custom-rules/no-physical-css-properties -- Decorative spinner visual effect
         primary: { borderTopColor: theme.colors.$primary500, borderRightColor: theme.colors.$primary500, opacity: 1 },
         neutral: {
           borderTopColor: theme.colors.$borderAlpha700,
+          // eslint-disable-next-line custom-rules/no-physical-css-properties -- Decorative spinner visual effect
           borderRightColor: theme.colors.$borderAlpha700,
           opacity: 1,
         },
diff --git a/packages/ui/src/primitives/Table.tsx b/packages/ui/src/primitives/Table.tsx
index 9ef257912dd..e186f327c77 100644
--- a/packages/ui/src/primitives/Table.tsx
+++ b/packages/ui/src/primitives/Table.tsx
@@ -20,15 +20,15 @@ const { applyVariants, filterProps } = createVariants(theme => {
         borderBottomWidth: '0px',
         borderTopWidth: '1px',
         borderStyle: 'solid',
-        borderLeftWidth: '0px',
-        borderRightWidth: '0px',
+        borderInlineStartWidth: '0px',
+        borderInlineEndWidth: '0px',
         borderColor: theme.colors.$borderAlpha150,
       },
       'td:not(:first-of-type)': {
-        paddingLeft: theme.space.$2,
+        paddingInlineStart: theme.space.$2,
       },
       'th:not(:first-of-type)': {
-        paddingLeft: theme.space.$2,
+        paddingInlineStart: theme.space.$2,
       },
       'tr > td': {
         borderTopWidth: theme.borderWidths.$normal,
@@ -36,25 +36,25 @@ const { applyVariants, filterProps } = createVariants(theme => {
         borderTopColor: theme.colors.$borderAlpha150,
         paddingBottom: theme.space.$2,
         paddingTop: theme.space.$2,
-        paddingLeft: theme.space.$4,
-        paddingRight: theme.space.$4,
+        paddingInlineStart: theme.space.$4,
+        paddingInlineEnd: theme.space.$4,
       },
       'tbody > :not([hidden])~:not([hidden])': {
         borderBottomWidth: '0px',
         borderTopWidth: '1px',
         borderStyle: 'solid',
-        borderLeftWidth: '0px',
-        borderRightWidth: '0px',
+        borderInlineStartWidth: '0px',
+        borderInlineEndWidth: '0px',
         borderColor: theme.colors.$borderAlpha150,
       },
       'tr:hover td:first-of-type': {
-        borderBottomLeftRadius: theme.radii.$lg,
+        borderEndStartRadius: theme.radii.$lg,
       },
       'tr:hover td:last-of-type': {
-        borderBottomRightRadius: theme.radii.$lg,
+        borderEndEndRadius: theme.radii.$lg,
       },
       'tr > th:first-of-type': {
-        paddingLeft: theme.space.$5,
+        paddingInlineStart: theme.space.$5,
       },
       'thead::after': {
         content: '""',
diff --git a/packages/ui/src/primitives/Th.tsx b/packages/ui/src/primitives/Th.tsx
index f018c67c24c..a1d954f9e2a 100644
--- a/packages/ui/src/primitives/Th.tsx
+++ b/packages/ui/src/primitives/Th.tsx
@@ -8,7 +8,7 @@ import { Box } from './Box';
 
 const { applyVariants, filterProps } = createVariants(theme => ({
   base: {
-    textAlign: 'left',
+    textAlign: 'start',
     fontSize: theme.fontSizes.$sm,
     fontWeight: theme.fontWeights.$normal,
     color: colors.setAlpha(theme.colors.$colorForeground, 0.62),
diff --git a/packages/ui/src/primitives/gapPropertyCompat.ts b/packages/ui/src/primitives/gapPropertyCompat.ts
index 580555e8890..b50e0ca8216 100644
--- a/packages/ui/src/primitives/gapPropertyCompat.ts
+++ b/packages/ui/src/primitives/gapPropertyCompat.ts
@@ -4,7 +4,7 @@ export const createFlexGapPropertyIosCompat = (val: string, dir: 'col' | 'row')
   if (navigator?.userAgent?.match(/(iphone|ipad).+(os).*(\s13_).+safari/i)) {
     return {
       '& > *:not([hidden]):not([style*="visibility: hidden"]) + *:not([hidden]):not([style*="visibility: hidden"])': {
-        marginLeft: dir === 'row' ? val : undefined,
+        marginInlineStart: dir === 'row' ? val : undefined,
         marginTop: dir === 'col' ? val : undefined,
       },
     };