diff --git a/packages/client/src/components/Article/MainButton/index.js b/packages/client/src/components/Article/MainButton/index.js
index 3081d3a415..0888675722 100644
--- a/packages/client/src/components/Article/MainButton/index.js
+++ b/packages/client/src/components/Article/MainButton/index.js
@@ -32,6 +32,7 @@ import styled, { css } from "styled-components";
 import Button from "@docspace/components/button";
 
 import { resendInvitesAgain } from "@docspace/common/api/people";
+import { getCorrectFourValuesStyle } from "@docspace/components/utils/rtlUtils";
 
 const StyledButton = styled(Button)`
   font-weight: 700;
@@ -75,7 +76,8 @@ const StyledButton = styled(Button)`
     justify-content: space-between;
     vertical-align: middle;
     box-sizing: border-box;
-    padding: 5px 14px 5px 12px;
+    padding: ${({ theme }) =>
+      getCorrectFourValuesStyle("5px 14px 5px 12px", theme.interfaceDirection)};
     line-height: 22px;
     border-radius: 3px;
 
diff --git a/packages/client/src/components/BreakpointWarning/sub-components/StyledBreakpointWarning.js b/packages/client/src/components/BreakpointWarning/sub-components/StyledBreakpointWarning.js
index 947165ab0b..33b8350495 100644
--- a/packages/client/src/components/BreakpointWarning/sub-components/StyledBreakpointWarning.js
+++ b/packages/client/src/components/BreakpointWarning/sub-components/StyledBreakpointWarning.js
@@ -1,7 +1,9 @@
 import styled from "styled-components";
+import { getCorrectFourValuesStyle } from "@docspace/components/utils/rtlUtils";
 
 const StyledBreakpointWarning = styled.div`
-  padding: 24px 44px 0 24px;
+  padding: ${({ theme }) =>
+    getCorrectFourValuesStyle("24px 44px 0 24px", theme.interfaceDirection)};
   display: flex;
   flex-direction: column;
 
@@ -34,10 +36,12 @@ const StyledBreakpointWarning = styled.div`
   @media (min-width: 600px) {
     flex-direction: row;
 
-    padding: 65px 0 0 104px;
+    padding: ${({ theme }) =>
+      getCorrectFourValuesStyle("65px 0 0 104px", theme.interfaceDirection)};
 
     .description {
-      padding: 0 0 0 32px;
+      padding: ${({ theme }) =>
+        getCorrectFourValuesStyle("0 0 0 32px", theme.interfaceDirection)};
     }
 
     img {
diff --git a/packages/client/src/components/BreakpointWarning/sub-components/loader.js b/packages/client/src/components/BreakpointWarning/sub-components/loader.js
index 9714f848b3..6a83721bf3 100644
--- a/packages/client/src/components/BreakpointWarning/sub-components/loader.js
+++ b/packages/client/src/components/BreakpointWarning/sub-components/loader.js
@@ -2,10 +2,15 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import Loaders from "@docspace/common/components/Loaders";
 import { isMobileOnly } from "react-device-detect";
+import { getCorrectFourValuesStyle } from "@docspace/components/utils/rtlUtils";
 
 const StyledLoader = styled.div`
   padding-top: 25px;
-  padding-left: 32px;
+
+  ${({ theme }) =>
+    theme.interfaceDirection === "rtl"
+      ? `padding-right: 32px;`
+      : `padding-left: 32px;`}
   display: flex;
   flex-direction: column;
 
@@ -28,11 +33,12 @@ const StyledLoader = styled.div`
 
   @media (min-width: 600px) {
     flex-direction: row;
-
-    padding: 65px 0 0 104px;
+    padding: ${({ theme }) =>
+      getCorrectFourValuesStyle("65px 0 0 104px", theme.interfaceDirection)};
 
     .loader-description {
-      padding: 0 0 0 32px;
+      padding: ${({ theme }) =>
+        getCorrectFourValuesStyle("0 0 0 32px", theme.interfaceDirection)};
     }
   }
 `;
diff --git a/packages/client/src/pages/Wizard/StyledWizard.js b/packages/client/src/pages/Wizard/StyledWizard.js
index 317f857e74..54f3f89567 100644
--- a/packages/client/src/pages/Wizard/StyledWizard.js
+++ b/packages/client/src/pages/Wizard/StyledWizard.js
@@ -137,11 +137,18 @@ export const StyledInfo = styled.div`
     padding-bottom: 4px;
     padding-top: 4px;
     padding-left: 8px;
+    ${({ theme }) =>
+      theme.interfaceDirection === "rtl"
+        ? `padding-right: 8px;`
+        : `padding-left: 8px;`}
     line-height: 20px;
   }
 
   .combo-button {
-    padding-left: 8px;
+    ${({ theme }) =>
+      theme.interfaceDirection === "rtl"
+        ? `padding-right: 8px;`
+        : `padding-left: 8px;`}
   }
 
   .combo-button-label {
@@ -166,6 +173,9 @@ export const StyledAcceptTerms = styled.div`
   padding-bottom: 24px;
 
   .wizard-checkbox svg {
-    margin-right: 8px;
+    ${({ theme }) =>
+      theme.interfaceDirection === "rtl"
+        ? `margin-left: 8px;`
+        : `margin-right: 8px;`}
   }
 `;