diff --git a/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateEditGroupDialog.styled.ts b/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateEditGroupDialog.styled.ts
index 01a1f54ed4..795b0eaac0 100644
--- a/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateEditGroupDialog.styled.ts
+++ b/packages/client/src/components/dialogs/CreateEditGroupDialog/CreateEditGroupDialog.styled.ts
@@ -29,4 +29,8 @@ import { ModalDialog } from "@docspace/shared/components/modal-dialog";
 
 export const StyledModal = styled(ModalDialog)`
   user-select: none;
+
+  .modal-body {
+    padding-top: 20px;
+  }
 `;
diff --git a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerModalDialog.js b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerModalDialog.js
index 8c7b1b26ac..ae113aebbc 100644
--- a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerModalDialog.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerModalDialog.js
@@ -279,7 +279,7 @@ class ConsumerModalDialog extends React.Component {
       >
         <ModalDialog.Header>{selectedConsumer.title}</ModalDialog.Header>
         <ModalDialog.Body>
-          <Box paddingProp="0 0 16px">{consumerInstruction}</Box>
+          <Box paddingProp="16px 0 16px">{consumerInstruction}</Box>
           <React.Fragment>
             {selectedConsumer.props.map((prop, i) =>
               this.inputsRender(prop, i),
diff --git a/packages/doceditor/src/hooks/useTheme.ts b/packages/doceditor/src/hooks/useTheme.ts
index 2437bbb181..33330b3c79 100644
--- a/packages/doceditor/src/hooks/useTheme.ts
+++ b/packages/doceditor/src/hooks/useTheme.ts
@@ -46,9 +46,16 @@ export interface UseThemeProps {
   i18n?: i18n;
   systemTheme?: ThemeKeys;
   colorTheme?: TGetColorTheme;
+  lang?: string;
 }
 
-const useTheme = ({ user, i18n, systemTheme, colorTheme }: UseThemeProps) => {
+const useTheme = ({
+  user,
+  i18n,
+  systemTheme,
+  colorTheme,
+  lang,
+}: UseThemeProps) => {
   const [currentColorTheme, setCurrentColorTheme] =
     React.useState<TColorScheme>(() => {
       if (!colorTheme) return {} as TColorScheme;
@@ -60,7 +67,7 @@ const useTheme = ({ user, i18n, systemTheme, colorTheme }: UseThemeProps) => {
     });
 
   const [theme, setTheme] = React.useState<TTheme>(() => {
-    const interfaceDirection = i18n?.dir ? i18n.dir() : "ltr";
+    const interfaceDirection = i18n?.dir ? i18n.dir(lang) : "ltr";
 
     const newTheme = match<MatchType>([user?.theme, systemTheme])
       .returnType<TTheme>()
@@ -99,7 +106,7 @@ const useTheme = ({ user, i18n, systemTheme, colorTheme }: UseThemeProps) => {
     const SYSTEM_THEME = getSystemTheme();
 
     let theme = user?.theme ?? SYSTEM_THEME;
-    const interfaceDirection = i18n?.dir ? i18n.dir() : "ltr";
+    const interfaceDirection = i18n?.dir ? i18n.dir(lang) : "ltr";
 
     if (user?.theme === ThemeKeys.SystemStr) theme = SYSTEM_THEME;
 
@@ -116,7 +123,7 @@ const useTheme = ({ user, i18n, systemTheme, colorTheme }: UseThemeProps) => {
     });
 
     setCookie(SYSTEM_THEME_KEY, themeCookie);
-  }, [user?.theme, i18n, currentColorTheme]);
+  }, [user?.theme, i18n, currentColorTheme, lang]);
 
   React.useEffect(() => {
     getCurrentColorTheme();
diff --git a/packages/doceditor/src/providers/ThemeProvider.tsx b/packages/doceditor/src/providers/ThemeProvider.tsx
index 09f79e25e5..205f7eb720 100644
--- a/packages/doceditor/src/providers/ThemeProvider.tsx
+++ b/packages/doceditor/src/providers/ThemeProvider.tsx
@@ -56,11 +56,14 @@ const ThemeProvider = ({
 }: TThemeProvider) => {
   const { i18n } = useI18N({ settings, user });
 
+  const lang = user?.cultureName ?? settings?.culture;
+
   const { theme, currentColorTheme } = useTheme({
     user,
     i18n,
     systemTheme,
     colorTheme,
+    lang,
   });
 
   return (