diff --git a/elements/nuxeo-app.js b/elements/nuxeo-app.js
index 320050a355..cafbec5a74 100644
--- a/elements/nuxeo-app.js
+++ b/elements/nuxeo-app.js
@@ -129,6 +129,13 @@ Polymer({
         height: calc(100% - (var(--nuxeo-app-top, 0) + var(--nuxeo-app-bottom, 0)));
       }
 
+      :host([dir='rtl']) paper-header-panel,
+      :host([dir='rtl']) iron-pages paper-header-panel {
+        right: var(--nuxeo-sidebar-width);
+        width: 100%;
+        margin-right: var(--dynamic-drawer-margin, 0);
+      }
+
       paper-drawer-panel[narrow] {
         --paper-drawer-panel-left-drawer-container: {
           z-index: 100;
@@ -151,12 +158,16 @@ Polymer({
         background-color: var(--nuxeo-sidebar-background);
       }
 
+      :host([dir='rtl']) #logo {
+        right: 0px;
+        left: auto;
+      }
+
       #logo img {
         width: var(--nuxeo-sidebar-width);
         height: 53px;
       }
 
-      /* menu */
       #menu {
         @apply --nuxeo-sidebar;
         position: fixed;
@@ -211,6 +222,11 @@ Polymer({
         cursor: pointer;
       }
 
+      :host([dir='rtl']) #drawer .toggle {
+        left: -16px;
+        right: auto;
+      }
+
       #drawer .toggle iron-icon {
         visibility: hidden;
         color: var(--nuxeo-drawer-background);
@@ -294,6 +310,17 @@ Polymer({
         color: white;
         --mdc-typography-body2-font-size: 14px;
       }
+
+      [dir='rtl'] paper-drawer-panel {
+        --paper-drawer-panel-left-drawer-container: {
+          left: auto;
+          right: 0;
+        }
+        --paper-drawer-panel-main-container: {
+          left: 0;
+          right: auto;
+        }
+      }
     </style>
 
     <nuxeo-offline-banner message="[[i18n('app.offlineBanner.message')]]"></nuxeo-offline-banner>
@@ -394,7 +421,7 @@ Polymer({
           </iron-pages>
 
           <div class="toggle" on-tap="_closeDrawer" hidden$="[[!drawerOpened]]">
-            <iron-icon icon="icons:chevron-left"></iron-icon>
+            <iron-icon icon="[[toggleChevronIcon]]"></iron-icon>
           </div>
         </div>
       </div>
@@ -597,6 +624,12 @@ Polymer({
     _routedSearch: {
       type: Object,
     },
+
+    _isRtl: {
+      type: Boolean,
+      value: false,
+      observer: '_onRtlChange',
+    },
   },
 
   listeners: {
@@ -642,6 +675,7 @@ Polymer({
 
   ready() {
     this.$.drawerPanel.closeDrawer();
+    this._checkRtl();
     this.drawerWidth = this.sidebarWidth = getComputedStyle(this).getPropertyValue('--nuxeo-sidebar-width');
     this.$.drawerPanel.$.drawer.addEventListener('transitionend', () => {
       this.$.drawerPanel.notifyResize();
@@ -675,11 +709,30 @@ Polymer({
     });
   },
 
+  _checkRtl() {
+    const dir = getComputedStyle(this).direction;
+    this._isRtl = dir === 'rtl';
+  },
+
+  _onRtlChange() {
+    this.toggleChevronIcon = this._isRtl ? 'icons:chevron-right' : 'icons:chevron-left';
+  },
+
   _resetTaskSelection() {
     this.currentTask = null;
     this.currentTaskId = null;
   },
 
+  _updateDrawerAlignment() {
+    const { drawerPanel } = this.$;
+    const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
+    if (isRTL) {
+      drawerPanel.setAttribute('drawer-align', 'end');
+    } else {
+      drawerPanel.setAttribute('drawer-align', 'start');
+    }
+  },
+
   refresh() {
     if (this.page === 'search') {
       this._refreshSearch();
@@ -1007,6 +1060,10 @@ Polymer({
   _openDrawer() {
     const pixelsSuffix = 'px';
     this.drawerWidth = 298 + Math.round(this.sidebarWidth.substring(0, this.sidebarWidth.length - 2)) + pixelsSuffix;
+    const drawerMarginRight = 297 + pixelsSuffix;
+    this.updateStyles({
+      '--dynamic-drawer-margin': drawerMarginRight,
+    });
     this.drawerOpened = true;
     const { drawerPanel } = this.$;
     if (drawerPanel.narrow) {
@@ -1026,6 +1083,9 @@ Polymer({
     this.drawerOpened = false;
     this.$.drawerPanel.closeDrawer();
     this.selectedTab = '';
+    this.updateStyles({
+      '--dynamic-drawer-margin': '0px',
+    });
   },
 
   _fetchTaskCount() {
diff --git a/elements/nuxeo-app/nuxeo-page.js b/elements/nuxeo-app/nuxeo-page.js
index f33c2c16ca..0cd3783deb 100644
--- a/elements/nuxeo-app/nuxeo-page.js
+++ b/elements/nuxeo-app/nuxeo-page.js
@@ -81,6 +81,12 @@ Polymer({
         padding-left: 16px;
       }
 
+      :host([dir="rtl"]) #header::slotted(*), /* Chrome, Safari */
+      :host([dir="rtl"]) #toolbar::slotted(*) {
+        padding-right: 16px;
+        padding-left: 64px;
+      }
+
       @media (max-width: 720px) {
         #header::slotted(*), /* chrome, safari */
         #toolbar::slotted(*) {
@@ -105,4 +111,9 @@ Polymer({
   `,
 
   is: 'nuxeo-page',
+  ready() {
+    if (!this.hasAttribute('dir')) {
+      this.setAttribute('dir', getComputedStyle(this).direction);
+    }
+  },
 });
diff --git a/elements/nuxeo-browser/nuxeo-breadcrumb.js b/elements/nuxeo-browser/nuxeo-breadcrumb.js
index 8c7bbbba91..6805e4e855 100644
--- a/elements/nuxeo-browser/nuxeo-breadcrumb.js
+++ b/elements/nuxeo-browser/nuxeo-breadcrumb.js
@@ -74,6 +74,10 @@ import { microTask } from '@polymer/polymer/lib/utils/async.js';
             border-radius: 2px;
           }
 
+          :host([dir='rtl']) .current-icon iron-icon {
+            margin: 0.3rem 0 0 0.5rem;
+          }
+
           #ancestors {
             max-width: 100%;
             list-style-type: none;
@@ -158,6 +162,9 @@ import { microTask } from '@polymer/polymer/lib/utils/async.js';
     connectedCallback() {
       super.connectedCallback();
       this.addEventListener('iron-resize', this._resize);
+      if (!this.hasAttribute('dir')) {
+        this.setAttribute('dir', getComputedStyle(this).direction);
+      }
     }
 
     disconnectedCallback() {
diff --git a/elements/nuxeo-home.html b/elements/nuxeo-home.html
index 23a7f1aec9..78e4b8149c 100644
--- a/elements/nuxeo-home.html
+++ b/elements/nuxeo-home.html
@@ -287,6 +287,12 @@
         },
       },
 
+      ready() {
+        if (!this.hasAttribute('dir')) {
+          this.setAttribute('dir', getComputedStyle(this).direction);
+        }
+      },
+
       observers: ['_processTask(_selection)'],
 
       _processTask() {
diff --git a/elements/nuxeo-suggester/nuxeo-suggester.js b/elements/nuxeo-suggester/nuxeo-suggester.js
index f8a3afb12e..6fa9ac0b9a 100644
--- a/elements/nuxeo-suggester/nuxeo-suggester.js
+++ b/elements/nuxeo-suggester/nuxeo-suggester.js
@@ -113,6 +113,12 @@ Polymer({
         @apply --nuxeo-suggester-button;
       }
 
+      :host([dir='rtl']) #searchButton {
+        right: auto;
+        left: 0;
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+      }
+
       #searchButton:hover {
         background-color: var(--nuxeo-button-primary);
         color: var(--nuxeo-button-primary-text);
@@ -245,12 +251,6 @@ Polymer({
           width: 100%;
           padding: 1em;
         }
-
-        :host([dir='rtl']) #searchButton {
-          right: auto;
-          left: 0;
-          border-right: 1px solid rgba(0, 0, 0, 0.1);
-        }
       }
     </style>
 
diff --git a/index.css b/index.css
index 0395f31227..6f4ad28aab 100644
--- a/index.css
+++ b/index.css
@@ -28,6 +28,14 @@ nuxeo-app[unresolved] {
   animation: glow 1s infinite alternate;
 }
 
+:host([dir="rtl"]) [unresolved] #sidebar {
+  float: right;
+}
+
+:host([dir="rtl"]) #sidebar {
+  float: right;
+}
+
 [unresolved] #container {
   background-color: var(--nuxeo-page-background);
   float: left;
diff --git a/index.js b/index.js
index 49f2788e2b..3f88dc3880 100644
--- a/index.js
+++ b/index.js
@@ -47,6 +47,7 @@ const setupApp = async () =>
       if (!Nuxeo.UI.app) {
         console.error('could not find nuxeo-app');
       }
+      Nuxeo.UI.app.setAttribute('dir', window.nuxeo.I18n.direction);
       setFallbackNotificationTarget(Nuxeo.UI.app);
     } else {
       console.error('could not find nuxeo-app');
diff --git a/themes/base.js b/themes/base.js
index 5c2ed1c9d2..9fbb35a1e8 100644
--- a/themes/base.js
+++ b/themes/base.js
@@ -560,6 +560,13 @@ const template = html`
           top: var(--nuxeo-app-top);
         }
 
+        :host([dir='rtl']) {
+          --nuxeo-suggester-button: {
+            left: 0;
+            right: auto;
+          }
+        }
+
         --nuxeo-suggester-width: 65%;
 
         --nuxeo-suggester-media-width: calc(100% - 90px);