diff --git a/.eslintrc.yml b/.eslintrc.yml
index 7432fe0..4ba28d4 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -15,6 +15,7 @@ parserOptions:
 globals:
   pageContent: writable
   module: writable
+  process: writable
 
 
 rules: 
diff --git a/src/PageState.js b/src/PageState.js
index 5e6f4e2..f106717 100644
--- a/src/PageState.js
+++ b/src/PageState.js
@@ -35,6 +35,13 @@ export class PageState extends Page {
     localStorage.setItem('token', value);
   }
 
+  get pageDirection() {
+    return localStorage.getItem('pageDirection') || "ltr";
+  }
+  set pageDirection(value) {
+    localStorage.setItem('pageDirection', value);
+  }
+
   get language() {
     return localStorage.getItem('language') || "";
   }
diff --git a/src/main.js b/src/main.js
index 4d1ad7b..27fb526 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,7 +33,7 @@ function ListItem(children) {
   });
 }
 
-function onLoad() {
+async function onLoad() {
   document.body.innerHTML = "";
   document.body.appendChild(makeElement({
     tag: "nav",
@@ -103,6 +103,11 @@ function onLoad() {
   }));
 
   window.pageContent = document.querySelector("#pageContent");
+
+  if (process.env.NODE_ENV == "development") {
+    await (await import("./playground.js")).playground();
+  }
+
   renderPage();
 
   setInterval(async () => {
@@ -117,7 +122,7 @@ function onLoad() {
   }, 5000);
 }
 
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', async function () {
   i18next.init({
     lng: pageState.language,
     fallbackLng: 'en',
@@ -129,7 +134,7 @@ document.addEventListener('DOMContentLoaded', function () {
         return value;
       }
     }
-  }).then(function (_) {
-    onLoad();
+  }).then(async function (_) {
+    await onLoad();
   });
 }, false);
diff --git a/src/pageUtils.js b/src/pageUtils.js
index e63cc07..f756aac 100644
--- a/src/pageUtils.js
+++ b/src/pageUtils.js
@@ -82,6 +82,7 @@ export function changePage(page, shouldSwitch = true) {
 }
 
 export function renderPage() {
+  document.documentElement.dir = pageState.pageDirection;
   console.log("Rendering Page: ", pageState.currentPage.name);
   document.querySelector("#pageContent").innerHTML = "";
   setPageTitle(pageState.currentPage.name);
diff --git a/src/pages/SetLanguage.js b/src/pages/SetLanguage.js
index d5c4013..e773235 100644
--- a/src/pages/SetLanguage.js
+++ b/src/pages/SetLanguage.js
@@ -54,8 +54,9 @@ export class SetLanguagePage extends Page {
       let language = formData.get("language");
       pageState.language = language;
       console.log(pageState.language);
-      i18next.changeLanguage(language).then((_) => {
+      i18next.changeLanguage(language).then((t) => {
         changePage("HOME", false);
+        pageState.pageDirection = t("language_direction");
         location.reload();
       });
     });
diff --git a/src/playground.js b/src/playground.js
new file mode 100644
index 0000000..d9ac79e
--- /dev/null
+++ b/src/playground.js
@@ -0,0 +1,14 @@
+import { pageState } from "./globalPageState.js";
+import i18next from 'i18next';
+
+// Playground is a way to debug and test things.
+// Anything you put in here is gonna be run on page initial load
+// before rendering.
+// Also it only runs when process.env.NODE_ENV == "development"
+
+// Please empty this function before committing.
+export async function playground() {
+  console.log("Welcome to Playground!");
+  window.pageState = pageState;
+  window.i18next = i18next;
+}
diff --git a/src/translations/de.js b/src/translations/de.js
index cb14450..89541a5 100644
--- a/src/translations/de.js
+++ b/src/translations/de.js
@@ -1,6 +1,8 @@
 module.exports = {
   // The localised name for the language
   "language_name": "Deutsche",
+  // Internal: The direction of text (ltr or rtl)
+  "language_direction": "ltr",
 
   // These are the buttons on the top bar.
   "home_btn": "Startseite",
diff --git a/src/translations/en.js b/src/translations/en.js
index 5cdd379..8d6b52a 100644
--- a/src/translations/en.js
+++ b/src/translations/en.js
@@ -1,6 +1,8 @@
 module.exports = {
   // The localised name for the language
   "language_name": "English",
+  // Internal: The direction of text (ltr or rtl)
+  "language_direction": "ltr",
 
   // These are the buttons on the top bar.
   "home_btn": "Home",
diff --git a/src/translations/fr.js b/src/translations/fr.js
index e03f38a..1c5191c 100644
--- a/src/translations/fr.js
+++ b/src/translations/fr.js
@@ -1,6 +1,8 @@
 module.exports = {
   // The localised name for the language
   "language_name": "Français",
+  // Internal: The direction of text (ltr or rtl)
+  "language_direction": "ltr",
 
   // These are the buttons on the top bar.
   "home_btn": "Accueil",
diff --git a/src/translations/nl.js b/src/translations/nl.js
index 78a1411..65d320c 100644
--- a/src/translations/nl.js
+++ b/src/translations/nl.js
@@ -1,6 +1,8 @@
 module.exports = {
   // The localised name for the language
   "language_name": "Nederlands",
+  // Internal: The direction of text (ltr or rtl)
+  "language_direction": "ltr",
 
   // These are the buttons on the top bar.
   "home_btn": "Homepagina",
diff --git a/src/translations/ru.js b/src/translations/ru.js
index 6ee5c23..d87e9f2 100644
--- a/src/translations/ru.js
+++ b/src/translations/ru.js
@@ -1,7 +1,9 @@
 module.exports = {
   // The localised name for the language
   "language_name": "русский",
-  
+  // Internal: The direction of text (ltr or rtl)
+  "language_direction": "ltr",
+
   // These are the buttons on the top bar.
   "home_btn": "Главная страница",
   "back_btn": "Назад",