diff --git a/package-lock.json b/package-lock.json
index b011d24b..2c74b25f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16470,6 +16470,14 @@
         "jss": "10.5.1"
       }
     },
+    "jss-rtl": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/jss-rtl/-/jss-rtl-0.3.0.tgz",
+      "integrity": "sha512-rg9jJmP1bAyhNOAp+BDZgOP/lMm4+oQ76qGueupDQ68Wq+G+6SGvCZvhIEg8OHSONRWOwFT6skCI+APGi8DgmA==",
+      "requires": {
+        "rtl-css-js": "^1.13.1"
+      }
+    },
     "jsx-ast-utils": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz",
@@ -21566,6 +21574,14 @@
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
       "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA=="
     },
+    "rtl-css-js": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.14.1.tgz",
+      "integrity": "sha512-G9N1s/6329FpJr8k9e1U/Lg0IDWThv99sb7k0IrXHjSnubxe01h52/ajsPRafJK1/2Vqrhz3VKLe3E1dx6jS9Q==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
diff --git a/package.json b/package.json
index ef8f34d4..78821f8f 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "html-to-image": "^1.6.2",
     "i18next": "^20.3.2",
     "i18next-http-backend": "^1.2.6",
+    "jss-rtl": "^0.3.0",
     "leaflet": "^1.7.1",
     "leaflet.heat": "^0.2.0",
     "mobx": "^6.3.2",
diff --git a/src/App.tsx b/src/App.tsx
index 5641e99f..7a2bfdc9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -30,15 +30,15 @@ const App: FC = () => {
   const theme = useTheme();
 
   const appDir = i18n.dir();
+
   useEffect(() => {
     // https://material-ui.com/guides/right-to-left/
     document.body.dir = appDir;
-    theme.direction = appDir;
-  }, [i18n, theme, theme.direction, appDir]);
+  }, [i18n, theme, appDir]);
 
   return (
     <StoreContext.Provider value={store}>
-      <ThemeProvider theme={store.settingsStore.theme}>
+      <ThemeProvider theme={appDir === 'rtl' ? store.settingsStore.rtlTheme : store.settingsStore.theme}>
         <Router>
           <Box>
             <Box height={headerHeight} display="flex">
diff --git a/src/index.tsx b/src/index.tsx
index ceb0e1f9..7da803f3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,7 @@
 import React, { Suspense } from 'react';
+import { create } from 'jss';
+import rtl from 'jss-rtl';
+import { StylesProvider, jssPreset } from '@material-ui/core/styles';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
@@ -6,9 +9,13 @@ import './services/i18n.service';
 import * as serviceWorker from './serviceWorker';
 import OverlayLoader from './components/molecules/OverlayLoader';
 
+const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
+
 ReactDOM.render(
   <Suspense fallback={<OverlayLoader show />}>
-    <App />
+    <StylesProvider jss={jss}>
+      <App />
+    </StylesProvider>
   </Suspense>,
   document.getElementById('root'),
 );
diff --git a/src/store/settings.store.ts b/src/store/settings.store.ts
index 65b478d5..6691e235 100644
--- a/src/store/settings.store.ts
+++ b/src/store/settings.store.ts
@@ -6,9 +6,14 @@ import RootStore from './root.store';
 export default class SettingsStore {
   private _theme: Theme = createMuiTheme(defaultThemeOptions);
 
+  private _themeRtl: Theme = createMuiTheme({ ...defaultThemeOptions, direction: 'rtl' });
+
   constructor(private rootStore: RootStore) {
     makeAutoObservable(this);
   }
+  get rtlTheme(): Theme {
+    return this._themeRtl;
+  }
 
   get theme(): Theme {
     return this._theme;
diff --git a/src/style/theme.ts b/src/style/theme.ts
index 4f00873e..30ebadd0 100644
--- a/src/style/theme.ts
+++ b/src/style/theme.ts
@@ -2,6 +2,7 @@ import { ThemeOptions } from '@material-ui/core';
 import { fontFamilyString, darkGrey } from './';
 
 const defaultThemeOptions: ThemeOptions = {
+  direction: 'ltr',
   palette: {},
   overrides: {
     MuiCardContent: {