diff --git a/__tests__/src/components/CompanionArea.test.js b/__tests__/src/components/CompanionArea.test.js
index 97d49996ba37820b643dfde0132a67ed86f18d35..3c32d1b38b04fc2814f942a5672906cac4be098b 100644
--- a/__tests__/src/components/CompanionArea.test.js
+++ b/__tests__/src/components/CompanionArea.test.js
@@ -10,6 +10,7 @@ function createWrapper(props) {
   return shallow(
     <CompanionArea
       classes={{ horizontal: 'horizontal' }}
+      direction="ltr"
       windowId="abc123"
       position="right"
       companionAreaOpen
diff --git a/__tests__/src/components/CompanionWindow.test.js b/__tests__/src/components/CompanionWindow.test.js
index c185b93206e5def44dc0b51ed3f2639c30c55017..6c306cf8c0ea97cfbca8849d14a3c80e89b24f23 100644
--- a/__tests__/src/components/CompanionWindow.test.js
+++ b/__tests__/src/components/CompanionWindow.test.js
@@ -9,6 +9,7 @@ function createWrapper(props) {
   return shallow(
     <CompanionWindow
       id="abc123"
+      direction="ltr"
       windowId="x"
       classes={{ horizontal: 'horizontal', small: 'small', vertical: 'vertical' }}
       companionWindow={{}}
diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js
index 6a2afb58cbc06af254298443b1d40f52202554d7..6aedbadee696d091c32f02c9ff70e30c8bbd2ef8 100644
--- a/src/components/CompanionArea.js
+++ b/src/components/CompanionArea.js
@@ -18,6 +18,19 @@ export class CompanionArea extends Component {
     return (position === 'bottom' || position === 'far-bottom') ? classes.horizontal : null;
   }
 
+  /** */
+  collapseIcon() {
+    const { companionAreaOpen, direction } = this.props;
+    if (companionAreaOpen) {
+      if (direction === 'ltr') {
+        return <ArrowLeftIcon />;
+      }
+      return <ArrowRightIcon />;
+    }
+    if (direction === 'rtl') return <ArrowLeftIcon />;
+    return <ArrowRightIcon />;
+  }
+
   /** @private */
   slideDirection() {
     const { direction, position } = this.props;
@@ -56,7 +69,7 @@ export class CompanionArea extends Component {
                 onClick={() => { setCompanionAreaOpen(windowId, !companionAreaOpen); }}
                 TooltipProps={{ placement: 'right' }}
               >
-                {companionAreaOpen ? <ArrowLeftIcon /> : <ArrowRightIcon />}
+                {this.collapseIcon()}
               </MiradorMenuButton>
             </div>
           )
diff --git a/src/components/CompanionWindow.js b/src/components/CompanionWindow.js
index 4f567e9f6c22da8d244f78497e4d391051bcdb48..d20037bf17f0f4ae51395b218a4d571dbe42f19b 100644
--- a/src/components/CompanionWindow.js
+++ b/src/components/CompanionWindow.js
@@ -14,9 +14,28 @@ import ns from '../config/css-ns';
  * CompanionWindow
  */
 export class CompanionWindow extends Component {
+  /** */
+  openInNewStyle() {
+    const { direction } = this.props;
+    if (direction === 'rtl') return { transform: 'scale(-1, 1)' };
+    return {};
+  }
+
+
   /** */
   resizeHandles() {
-    const { position } = this.props;
+    const { direction, position } = this.props;
+    const positions = {
+      ltr: {
+        default: 'left',
+        opposite: 'right',
+      },
+      rtl: {
+        default: 'right',
+        opposite: 'left',
+      },
+    };
+
 
     const base = {
       bottom: false,
@@ -30,11 +49,11 @@ export class CompanionWindow extends Component {
     };
 
     if (position === 'right' || position === 'far-right') {
-      return { ...base, left: true };
+      return { ...base, [positions[direction].default]: true };
     }
 
     if (position === 'left') {
-      return { ...base, right: true };
+      return { ...base, [positions[direction].opposite]: true };
     }
 
     if (position === 'bottom' || position === 'far-bottom') {
@@ -100,7 +119,7 @@ export class CompanionWindow extends Component {
                       aria-label={t('openInCompanionWindow')}
                       onClick={() => { updateCompanionWindow(windowId, id, { position: 'right' }); }}
                     >
-                      <OpenInNewIcon />
+                      <OpenInNewIcon style={this.openInNewStyle()} />
                     </MiradorMenuButton>
                   )
                 : (
@@ -156,6 +175,7 @@ CompanionWindow.propTypes = {
   children: PropTypes.node,
   classes: PropTypes.objectOf(PropTypes.string).isRequired,
   defaultSidebarPanelWidth: PropTypes.number,
+  direction: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   isDisplayed: PropTypes.bool,
   onCloseClick: PropTypes.func,
diff --git a/src/containers/CompanionWindow.js b/src/containers/CompanionWindow.js
index 7056c46ed7ad3e6120a931b616bcd4fe3e8965e2..20e47029ee70721cf8b621c22e7e4f2597d0ce60 100644
--- a/src/containers/CompanionWindow.js
+++ b/src/containers/CompanionWindow.js
@@ -5,7 +5,7 @@ import { withStyles } from '@material-ui/core';
 import { withSize } from 'react-sizeme';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
-import { getCompanionWindow } from '../state/selectors';
+import { getCompanionWindow, getThemeDirection } from '../state/selectors';
 import { CompanionWindow } from '../components/CompanionWindow';
 
 /**
@@ -20,6 +20,7 @@ const mapStateToProps = (state, { id, windowId }) => {
   return {
     ...companionWindow,
     defaultSidebarPanelWidth,
+    direction: getThemeDirection(state),
     isDisplayed: (companionWindow
                   && companionWindow.content
                   && companionWindow.content.length > 0),
diff --git a/src/containers/WindowSideBar.js b/src/containers/WindowSideBar.js
index 90598c5fad317350b3c847a92c0f9ba3621a3418..012b2fd5d5cf273865948294150c6bb72c6d8043 100644
--- a/src/containers/WindowSideBar.js
+++ b/src/containers/WindowSideBar.js
@@ -36,6 +36,7 @@ const styles = theme => ({
     flexGrow: 1,
   },
   paper: {
+    borderInlineEnd: `1px solid ${theme.palette.divider}`,
     overflowX: 'hidden',
     width: 48,
   },