diff --git a/src/common-elements/headers.ts b/src/common-elements/headers.ts
index e5be16498c..e7096f3c07 100644
--- a/src/common-elements/headers.ts
+++ b/src/common-elements/headers.ts
@@ -20,17 +20,19 @@ export const H1 = styled.h1`
   ${extensionsHook('H1')};
 `;
 
-export const H2 = styled.h2`
+export const H2 = styled.h2.attrs({ dir: 'auto' })`
   ${headerCommonMixin(2)};
   color: ${({ theme }) => theme.colors.text.primary};
   margin: 0 0 20px;
+  text-align: justify;
 
   ${extensionsHook('H2')};
 `;
 
-export const H3 = styled.h2`
+export const H3 = styled.h2.attrs({ dir: 'auto' })`
   ${headerCommonMixin(3)};
   color: ${({ theme }) => theme.colors.text.primary};
+  text-align: justify;
 
   ${extensionsHook('H3')};
 `;
diff --git a/src/components/ApiInfo/ApiInfo.tsx b/src/components/ApiInfo/ApiInfo.tsx
index 75e004387a..14bf509f08 100644
--- a/src/components/ApiInfo/ApiInfo.tsx
+++ b/src/components/ApiInfo/ApiInfo.tsx
@@ -77,7 +77,7 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
               {info.title} {version}
             </ApiHeader>
             {!hideDownloadButtons && (
-              <p>
+              <p dir="auto">
                 {l('downloadSpecification')}:
                 {downloadUrls?.map(({ title, url }) => {
                   return (
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index e3e03bdc3c..b953f7d4f7 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -26,7 +26,7 @@ export class ErrorBoundary extends React.Component<
         <ErrorWrapper>
           <h1>Something went wrong...</h1>
           <small> {this.state.error.message} </small>
-          <p>
+          <p dir="auto">
             <details>
               <summary>Stack trace</summary>
               <pre>{this.state.error.stack}</pre>
diff --git a/src/components/Markdown/SanitizedMdBlock.tsx b/src/components/Markdown/SanitizedMdBlock.tsx
index 13bfec49fd..e8d49e9bba 100644
--- a/src/components/Markdown/SanitizedMdBlock.tsx
+++ b/src/components/Markdown/SanitizedMdBlock.tsx
@@ -9,6 +9,13 @@ import styled from 'styled-components';
 // Workaround for DOMPurify type issues (https://github.com/cure53/DOMPurify/issues/1034)
 const dompurify = DOMPurify['default'] as DOMPurify.DOMPurify;
 
+// Add dir="auto" to p and h2 elements for RTL support
+dompurify.addHook('afterSanitizeAttributes', (node) => {
+  if (node.tagName === 'P' || node.tagName === 'H2') {
+    node.setAttribute('dir', 'auto');
+  }
+});
+
 const StyledMarkdownSpan = styled(StyledMarkdownBlock)`
   display: inline;
 `;
diff --git a/src/components/Markdown/styled.elements.tsx b/src/components/Markdown/styled.elements.tsx
index b04a026148..f6d92f55bb 100644
--- a/src/components/Markdown/styled.elements.tsx
+++ b/src/components/Markdown/styled.elements.tsx
@@ -32,6 +32,8 @@ export const StyledMarkdownBlock = styled(
   line-height: ${props => props.theme.typography.lineHeight};
 
   p {
+    text-align: justify;
+
     &:last-child {
       margin-bottom: 0;
     }
@@ -63,6 +65,7 @@ export const StyledMarkdownBlock = styled(
   h2 {
     ${headerCommonMixin(2)};
     color: ${props => props.theme.colors.text.primary};
+    text-align: justify;
   }
 
   code {
diff --git a/src/components/SearchBox/styled.elements.tsx b/src/components/SearchBox/styled.elements.tsx
index 6cb70fed29..ec63594ad1 100644
--- a/src/components/SearchBox/styled.elements.tsx
+++ b/src/components/SearchBox/styled.elements.tsx
@@ -10,6 +10,7 @@ export const SearchWrap = styled.div`
 
 export const SearchInput = styled.input.attrs(() => ({
   className: 'search-input',
+  dir: 'auto',
 }))`
   width: calc(100% - ${props => props.theme.spacing.unit * 8}px);
   box-sizing: border-box;