diff --git a/browser/components/syncedtabs/SyncedTabsDeckComponent.js b/browser/components/syncedtabs/SyncedTabsDeckComponent.js
index c8c54c3d950b..70e793ba5d56 100644
--- a/browser/components/syncedtabs/SyncedTabsDeckComponent.js
+++ b/browser/components/syncedtabs/SyncedTabsDeckComponent.js
@@ -79,6 +79,11 @@ SyncedTabsDeckComponent.prototype = {
     // if this engine is disabled and refresh the UI one last time.
     Services.obs.addObserver(this, "weave:service:ready");
 
+    // Add app locale change support for HTML sidebar
+    Services.obs.addObserver(this, "intl:app-locales-changed");
+    Services.prefs.addObserver("intl.uidirection", this);
+    this.updateDir();
+
     // Go ahead and trigger sync
     this._SyncedTabs.syncTabs()
                     .catch(Cu.reportError);
@@ -101,6 +106,8 @@ SyncedTabsDeckComponent.prototype = {
     Services.obs.removeObserver(this, FxAccountsCommon.ONLOGIN_NOTIFICATION);
     Services.obs.removeObserver(this, "weave:service:login:change");
     Services.obs.removeObserver(this, "weave:service:ready");
+    Services.obs.removeObserver(this, "intl:app-locales-changed");
+    Services.prefs.removeObserver("intl.uidirection", this);
     this._deckView.destroy();
   },
 
@@ -117,6 +124,14 @@ SyncedTabsDeckComponent.prototype = {
       case "weave:service:login:change":
         this.updatePanel();
         break;
+      case "intl:app-locales-changed":
+        this.updateDir();
+        break;
+      case "nsPref:changed":
+        if (data == "intl.uidirection") {
+          this.updateDir();
+        }
+        break;
       default:
         break;
     }
@@ -158,6 +173,17 @@ SyncedTabsDeckComponent.prototype = {
     });
   },
 
+  updateDir() {
+    // If the HTML document doesn't exist, we can't update the window
+    if (!this._window.document) return;
+
+    if (Services.locale.isAppLocaleRTL) {
+      this._window.document.body.dir = "rtl";
+    } else {
+      this._window.document.body.dir = "ltr";
+    }
+  },
+
   updatePanel() {
     // return promise for tests
     return this.getPanelStatus()
diff --git a/browser/components/syncedtabs/test/xpcshell/test_SyncedTabsDeckComponent.js b/browser/components/syncedtabs/test/xpcshell/test_SyncedTabsDeckComponent.js
index 49f7145b6e00..0dfb487e60cd 100644
--- a/browser/components/syncedtabs/test/xpcshell/test_SyncedTabsDeckComponent.js
+++ b/browser/components/syncedtabs/test/xpcshell/test_SyncedTabsDeckComponent.js
@@ -94,7 +94,7 @@ add_task(async function testObserver() {
   sinon.stub(listStore, "getData");
 
   let component = new SyncedTabsDeckComponent({
-    mockWindow,
+    window: mockWindow,
     deckStore,
     listStore,
     listComponent,
@@ -104,10 +104,12 @@ add_task(async function testObserver() {
 
   sinon.spy(component, "observe");
   sinon.stub(component, "updatePanel");
+  sinon.stub(component, "updateDir");
 
   component.init();
   SyncedTabs.syncTabs.restore();
   Assert.ok(component.updatePanel.called, "triggers panel update during init");
+  Assert.ok(component.updateDir.called, "triggers UI direction update during init");
 
   Services.obs.notifyObservers(null, SyncedTabs.TOPIC_TABS_CHANGED);
 
@@ -128,6 +130,15 @@ add_task(async function testObserver() {
   Assert.ok(component.observe.calledWith(null, "weave:service:login:change"),
     "component is notified of login change");
   Assert.equal(component.updatePanel.callCount, 4, "triggers panel update again");
+
+  Services.locale.setAvailableLocales(["ab-CD"]);
+  Services.locale.setRequestedLocales(["ab-CD"]);
+
+  Assert.ok(component.updateDir.calledTwice, "locale change triggers UI direction update");
+
+  Services.prefs.setIntPref("intl.uidirection", 1);
+
+  Assert.equal(component.updateDir.callCount, 3, "pref change triggers UI direction update");
 });
 
 add_task(async function testPanelStatus() {