diff --git a/frontend/web-editor/public/bundle.js b/frontend/web-editor/public/bundle.js
index a7dda70..9b5e8e5 100644
--- a/frontend/web-editor/public/bundle.js
+++ b/frontend/web-editor/public/bundle.js
@@ -50543,7 +50543,7 @@ module.exports = function store(state, emitter) {
     // console.log('setting language to', lang)
     i18next.changeLanguage(lang, (err, t) => {
       // console.log(err, t)
-      selectedLanguage = lang
+      state.translation.selectedLanguage = lang
       emitter.emit('render')
     })
   })
@@ -51437,9 +51437,11 @@ const toolbar = require('./toolbar.js')
 const link = (url) => `href=${url} target=_blank`
 module.exports = function mainView(state, emit) {
   const { t, languages } = state.translation
+  const textDirection = state.translation.selectedLanguage  === 'ar' && state.showInfo === true ? 'rtl': 'ltr'
+
   const langArray = Object.entries(languages)
   return html`
-<div id="info-container" class="${state.showInfo ? "" : "hidden"}">
+<div id="info-container" class="${state.showInfo ? "" : "hidden"}" style="direction:${textDirection}">
   <div id="modal">
     <div id="modal-header" style="opacity:${state.showUI === true? 1: 0}">
       ${state.showInfo && langArray.length > 1 ? html`<div style="display:flex">${langArray.map(([key, val]) => html`
diff --git a/frontend/web-editor/public/css/modal.css b/frontend/web-editor/public/css/modal.css
index 5153818..e5753e3 100644
--- a/frontend/web-editor/public/css/modal.css
+++ b/frontend/web-editor/public/css/modal.css
@@ -108,6 +108,8 @@ transition: width 1s;
 
 .language-select {
   margin: 8px;
+  text-align: center;
+  width: 3.8em;
   font-weight: 200;
   cursor: pointer;
   pointer-events: auto;
diff --git a/frontend/web-editor/src/stores/language-store.js b/frontend/web-editor/src/stores/language-store.js
index 22bce84..79b234e 100644
--- a/frontend/web-editor/src/stores/language-store.js
+++ b/frontend/web-editor/src/stores/language-store.js
@@ -47,7 +47,7 @@ module.exports = function store(state, emitter) {
     // console.log('setting language to', lang)
     i18next.changeLanguage(lang, (err, t) => {
       // console.log(err, t)
-      selectedLanguage = lang
+      state.translation.selectedLanguage = lang
       emitter.emit('render')
     })
   })
diff --git a/frontend/web-editor/src/views/info.js b/frontend/web-editor/src/views/info.js
index 7dcec68..106a72d 100644
--- a/frontend/web-editor/src/views/info.js
+++ b/frontend/web-editor/src/views/info.js
@@ -5,9 +5,11 @@ const toolbar = require('./toolbar.js')
 const link = (url) => `href=${url} target=_blank`
 module.exports = function mainView(state, emit) {
   const { t, languages } = state.translation
+  const textDirection = state.translation.selectedLanguage  === 'ar' && state.showInfo === true ? 'rtl': 'ltr'
+
   const langArray = Object.entries(languages)
   return html`
-<div id="info-container" class="${state.showInfo ? "" : "hidden"}">
+<div id="info-container" class="${state.showInfo ? "" : "hidden"}" style="direction:${textDirection}">
   <div id="modal">
     <div id="modal-header" style="opacity:${state.showUI === true? 1: 0}">
       ${state.showInfo && langArray.length > 1 ? html`<div style="display:flex">${langArray.map(([key, val]) => html`