diff --git a/jsapp/js/account/plans/plan.module.scss b/jsapp/js/account/plans/plan.module.scss
index d6be546530..0259b714e2 100644
--- a/jsapp/js/account/plans/plan.module.scss
+++ b/jsapp/js/account/plans/plan.module.scss
@@ -122,13 +122,8 @@ $plan-badge-height: 38px;
   padding: 0 0 sizes.$x12 0;
 }
 
-.priceName {
-  text-align: left;
-}
-
 .priceTitle {
   color: colors.$kobo-dark-blue;
-  text-align: left;
   font-size: sizes.$x20;
   padding-bottom: sizes.$x16;
   font-weight: 700;
diff --git a/jsapp/js/account/usage/usageProjectBreakdown.module.scss b/jsapp/js/account/usage/usageProjectBreakdown.module.scss
index bac00c40e3..e490e1f12d 100644
--- a/jsapp/js/account/usage/usageProjectBreakdown.module.scss
+++ b/jsapp/js/account/usage/usageProjectBreakdown.module.scss
@@ -50,7 +50,7 @@
   font-weight: 700;
   font-size: sizes.$x13;
   color: colors.$kobo-gray-40;
-  text-align: left;
+  text-align: initial;
   padding-block: 1.5%;
 }
 
diff --git a/jsapp/js/account/usage/usageProjectBreakdown.tsx b/jsapp/js/account/usage/usageProjectBreakdown.tsx
index bd86aeb7f9..bf5fc9b202 100644
--- a/jsapp/js/account/usage/usageProjectBreakdown.tsx
+++ b/jsapp/js/account/usage/usageProjectBreakdown.tsx
@@ -143,7 +143,7 @@ const ProjectBreakdown = () => {
 
     return (
       <tr key={project.asset}>
-        <td>
+        <td dir='auto'>
           <Link
             className={styles.link}
             to={ROUTES.FORM_SUMMARY.replace(':uid', project.uid)}
diff --git a/jsapp/js/components/assetsTable/assetsTableRow.tsx b/jsapp/js/components/assetsTable/assetsTableRow.tsx
index d7fc92f7aa..6b9eddf9d1 100644
--- a/jsapp/js/components/assetsTable/assetsTableRow.tsx
+++ b/jsapp/js/components/assetsTable/assetsTableRow.tsx
@@ -42,7 +42,7 @@ class AssetsTableRow extends React.Component<AssetsTableRowProps> {
           <Icon name={assetUtils.getAssetIcon(this.props.asset)} size='l' />
         </bem.AssetsTableRow__column>
 
-        <bem.AssetsTableRow__column m='name'>
+        <bem.AssetsTableRow__column m='name' dir='auto'>
           <AssetName asset={this.props.asset}/>
 
           {this.props.asset.settings && this.props.asset.tag_string && this.props.asset.tag_string.length > 0 &&
diff --git a/jsapp/js/components/common/button.scss b/jsapp/js/components/common/button.scss
index 53d6dee635..ecea31c3b3 100644
--- a/jsapp/js/components/common/button.scss
+++ b/jsapp/js/components/common/button.scss
@@ -155,7 +155,7 @@ $button-border-radius: sizes.$x6;
   position: relative; // Needed for tooltips, pending state etc.
   font-weight: 500;
   text-decoration: none;
-  text-align: left;
+  text-align: initial;
   padding: 0;
   margin: 0;
   border-width: $button-border-width;
diff --git a/jsapp/js/components/common/checkbox.scss b/jsapp/js/components/common/checkbox.scss
index 81db7c690f..0733c89b32 100644
--- a/jsapp/js/components/common/checkbox.scss
+++ b/jsapp/js/components/common/checkbox.scss
@@ -62,7 +62,7 @@
   }
 
   .checkbox__input + .checkbox__label {
-    margin-left: sizes.$x6;
+    margin-inline-start: sizes.$x6;
   }
 
   .checkbox__input {
diff --git a/jsapp/js/components/common/inlineMessage.scss b/jsapp/js/components/common/inlineMessage.scss
index 1d922ad531..669cfa6ac3 100644
--- a/jsapp/js/components/common/inlineMessage.scss
+++ b/jsapp/js/components/common/inlineMessage.scss
@@ -54,7 +54,7 @@
 // We need a bit stronger specificity here
 .k-inline-message p.k-inline-message__message {
   margin: 0;
-  text-align: left;
+  text-align: initial;
   font-size: sizes.$x14;
   line-height: inherit;
 }
diff --git a/jsapp/js/components/common/koboSelect.scss b/jsapp/js/components/common/koboSelect.scss
index 95ae44e9b6..b7f198eb71 100644
--- a/jsapp/js/components/common/koboSelect.scss
+++ b/jsapp/js/components/common/koboSelect.scss
@@ -29,7 +29,7 @@ $k-select-menu-padding: sizes.$x6;
   @include mixins.centerRowFlex;
   justify-content: space-between;
   font-weight: 400;
-  text-align: left;
+  text-align: initial;
   border-width: button.$button-border-width;
   border-style: solid;
   border-color: transparent;
@@ -117,7 +117,7 @@ $k-select-menu-padding: sizes.$x6;
   height: $k-select-option-height;
   color: colors.$kobo-gray-40;
   padding: 0 #{sizes.$x16 - sizes.$x2};
-  text-align: left;
+  text-align: initial;
 }
 
 .k-select__menu-message {
diff --git a/jsapp/js/components/common/koboSelect.tsx b/jsapp/js/components/common/koboSelect.tsx
index a66b1b87d0..83d5a2dbe4 100644
--- a/jsapp/js/components/common/koboSelect.tsx
+++ b/jsapp/js/components/common/koboSelect.tsx
@@ -11,6 +11,7 @@ import {ButtonToIconMap} from 'js/components/common/button';
 import KoboDropdown from 'js/components/common/koboDropdown';
 import koboDropdownActions from 'js/components/common/koboDropdownActions';
 import './koboSelect.scss';
+import type {KoboDropdownPlacement} from 'js/components/common/koboDropdown';
 
 // We can't use "kobo-select" as it is already being used for custom styling of `react-select`.
 bem.KoboSelect = makeBem(null, 'k-select');
@@ -57,6 +58,7 @@ interface KoboSelectProps {
    * Sizes are generally the same as in button component so we use same type.
    */
   size: ButtonSize;
+  placement?: KoboDropdownPlacement;
   /** Without this option select always need the `selectedOption`. */
   isClearable?: boolean;
   /** This option displays a text box filtering options when opened. */
@@ -190,7 +192,7 @@ class KoboSelect extends React.Component<KoboSelectProps, KoboSelectState> {
     if (foundSelectedOption) {
       return (
         <bem.KoboSelect__trigger>
-          <bem.KoboSelect__triggerSelectedOption>
+          <bem.KoboSelect__triggerSelectedOption dir='auto'>
             {foundSelectedOption.icon &&
               <Icon
                 name={foundSelectedOption.icon}
@@ -296,6 +298,7 @@ class KoboSelect extends React.Component<KoboSelectProps, KoboSelectState> {
                 this.props.selectedOption === option.value
               ),
             }}
+            dir='auto'
           >
             {option.icon && <Icon name={option.icon}/>}
             <label>{option.label}</label>
@@ -348,7 +351,7 @@ class KoboSelect extends React.Component<KoboSelectProps, KoboSelectState> {
 
         <KoboDropdown
           name={this.props.name}
-          placement={'down-center'}
+          placement={this.props.placement || 'down-center'}
           isRequired={this.props.isRequired}
           isDisabled={Boolean(this.props.isDisabled)}
           hideOnMenuClick
diff --git a/jsapp/js/components/common/koboTagsInput.scss b/jsapp/js/components/common/koboTagsInput.scss
index a3ea4d1d97..70606153d0 100644
--- a/jsapp/js/components/common/koboTagsInput.scss
+++ b/jsapp/js/components/common/koboTagsInput.scss
@@ -42,7 +42,7 @@ placese. As soon as these are removed, we can simplify this file.
   cursor: pointer;
   color: inherit !important;
   opacity: 0.6;
-  margin-left: sizes.$x6;
+  margin-inline-start: sizes.$x6;
   vertical-align: middle;
   font-size: sizes.$x20;
 
diff --git a/jsapp/js/components/common/koboTagsInput.tsx b/jsapp/js/components/common/koboTagsInput.tsx
index c2e8b1f15d..ba8607619e 100644
--- a/jsapp/js/components/common/koboTagsInput.tsx
+++ b/jsapp/js/components/common/koboTagsInput.tsx
@@ -23,6 +23,7 @@ interface InnerInputProps {
   placeholder: string;
   'data-cy'?: string;
   id?: string;
+  dir: string;
 }
 
 /**
@@ -54,6 +55,7 @@ class KoboTagsInput extends React.Component<KoboTagsInputProps> {
     const inputProps: InnerInputProps = {
       placeholder: this.props.placeholder || DEFAULT_PLACEHOLDER,
       'data-cy': this.props['data-cy'],
+      dir: 'auto',
     };
 
     if (this.props.label) {
diff --git a/jsapp/js/components/common/loadingSpinner.module.scss b/jsapp/js/components/common/loadingSpinner.module.scss
index da81c1ef41..33ce58f262 100644
--- a/jsapp/js/components/common/loadingSpinner.module.scss
+++ b/jsapp/js/components/common/loadingSpinner.module.scss
@@ -50,7 +50,7 @@
     max-height: 300px;
     overflow: auto;
     word-wrap: break-word;
-    text-align: left;
+    text-align: initial;
   }
 }
 
diff --git a/jsapp/js/components/common/modal.scss b/jsapp/js/components/common/modal.scss
index 8a7db2e317..c3e09d6d0f 100644
--- a/jsapp/js/components/common/modal.scss
+++ b/jsapp/js/components/common/modal.scss
@@ -353,7 +353,7 @@ $modal-custom-header-height: sizes.$x60;
 
   .intro {
     margin-bottom: 20px;
-    text-align: left;
+    text-align: initial;
   }
 
   .form-modal__item[disabled] {
diff --git a/jsapp/js/components/common/multiCheckbox.scss b/jsapp/js/components/common/multiCheckbox.scss
index 509b5e00ce..0306bd7bbb 100644
--- a/jsapp/js/components/common/multiCheckbox.scss
+++ b/jsapp/js/components/common/multiCheckbox.scss
@@ -6,6 +6,8 @@
   height: auto;
   width: 100%;
   overflow: hidden auto;
+  text-align: initial;
+  padding: 0;
 }
 
 .multi-checkbox__item:not(:last-child) {
diff --git a/jsapp/js/components/common/multiCheckbox.tsx b/jsapp/js/components/common/multiCheckbox.tsx
index fb3fe6d7a4..67c6ea16c8 100644
--- a/jsapp/js/components/common/multiCheckbox.tsx
+++ b/jsapp/js/components/common/multiCheckbox.tsx
@@ -43,6 +43,7 @@ export default function MultiCheckbox (props: MultiCheckboxProps) {
     <bem.MultiCheckbox
       m={`type-${props.type}`}
       className={props.className}
+      dir='auto'
     >
       {props.items.map((item, itemIndex) => (
         <bem.MultiCheckbox__item key={itemIndex}>
diff --git a/jsapp/js/components/common/radio.scss b/jsapp/js/components/common/radio.scss
index b51cb9891c..02ea3fbeab 100644
--- a/jsapp/js/components/common/radio.scss
+++ b/jsapp/js/components/common/radio.scss
@@ -30,7 +30,7 @@
   }
 
   .radio__input + .radio__label {
-    margin-left: sizes.$x6;
+    margin-inline-start: sizes.$x6;
   }
 
   .radio__input {
diff --git a/jsapp/js/components/common/textBox.tsx b/jsapp/js/components/common/textBox.tsx
index 41f98456ec..6a22e451b8 100644
--- a/jsapp/js/components/common/textBox.tsx
+++ b/jsapp/js/components/common/textBox.tsx
@@ -182,6 +182,8 @@ export default function TextBox(props: TextBoxProps) {
     // For `number` type we allow only positive integers
     step: props.type === 'number' ? 1 : undefined,
     min: props.type === 'number' ? 0 : undefined,
+    // All textboxes handles text direction of user content with browser
+    // built-in functionality
     dir: 'auto',
   };
 
diff --git a/jsapp/js/components/common/toggleSwitch.scss b/jsapp/js/components/common/toggleSwitch.scss
index 418e8d8727..f13934b127 100644
--- a/jsapp/js/components/common/toggleSwitch.scss
+++ b/jsapp/js/components/common/toggleSwitch.scss
@@ -47,7 +47,8 @@
   }
 
   .toggle-switch__slider + .toggle-switch__label {
-    margin-left: 6px;
+    // For RTL content
+    margin-inline-start: 6px;
   }
 
   input:checked + .toggle-switch__slider {
diff --git a/jsapp/js/components/formSummary.scss b/jsapp/js/components/formSummary.scss
index c7c8527433..131fb9821f 100644
--- a/jsapp/js/components/formSummary.scss
+++ b/jsapp/js/components/formSummary.scss
@@ -86,7 +86,7 @@
     color: colors.$kobo-gray-40;
     border-bottom: 1px solid colors.$kobo-gray-92;
     position: relative;
-    text-align: left;
+    text-align: initial;
 
     &:last-child {
       border-bottom: none;
diff --git a/jsapp/js/components/formSummaryProjectInfo.tsx b/jsapp/js/components/formSummaryProjectInfo.tsx
index 1fbaa3e04f..2c77e2f298 100644
--- a/jsapp/js/components/formSummaryProjectInfo.tsx
+++ b/jsapp/js/components/formSummaryProjectInfo.tsx
@@ -69,11 +69,13 @@ export default function FormSummaryProjectInfo(
         {metadata.description && (
           <bem.FormView__group m='items'>
             {/* description - takes whole row */}
-            <bem.FormView__cell m='padding'>
+            <bem.FormView__cell m={['padding', 'full-width']}>
               <bem.FormView__label>
                 {metadata.description?.label ?? t('Description')}
               </bem.FormView__label>
-              {props.asset.settings.description || '-'}
+              <div dir='auto'>
+                {props.asset.settings.description || '-'}
+              </div>
             </bem.FormView__cell>
           </bem.FormView__group>
         )}
diff --git a/jsapp/js/components/header/headerTitleEditor.tsx b/jsapp/js/components/header/headerTitleEditor.tsx
index 9d0f852762..68c50d65bf 100644
--- a/jsapp/js/components/header/headerTitleEditor.tsx
+++ b/jsapp/js/components/header/headerTitleEditor.tsx
@@ -121,6 +121,7 @@ class HeaderTitleEditor extends React.Component<
     return (
       <bem.MainHeader__title m={modifiers}>
         <input
+          dir='auto'
           type='text'
           name='title'
           maxLength={NAME_MAX_LENGTH}
diff --git a/jsapp/js/components/languages/languageSelector.scss b/jsapp/js/components/languages/languageSelector.scss
index a39e43edd1..408c6ef987 100644
--- a/jsapp/js/components/languages/languageSelector.scss
+++ b/jsapp/js/components/languages/languageSelector.scss
@@ -185,7 +185,7 @@
 
 .language-selector__not-found-message {
   padding: sizes.$x6 sizes.$x8;
-  text-align: left;
+  text-align: initial;
   font-style: italic;
 }
 
diff --git a/jsapp/js/components/library/assetContentSummary.tsx b/jsapp/js/components/library/assetContentSummary.tsx
index a13a43da37..6c0096f8b7 100644
--- a/jsapp/js/components/library/assetContentSummary.tsx
+++ b/jsapp/js/components/library/assetContentSummary.tsx
@@ -91,7 +91,7 @@ export default class AssetContentSummary extends React.Component<
 
     return (
       <React.Fragment>
-        <bem.FormView__cell m={['box', 'bordered']}>
+        <bem.FormView__cell m={['box', 'bordered']} dir='auto'>
           {items.map(this.renderQuestion.bind(this))}
         </bem.FormView__cell>
 
diff --git a/jsapp/js/components/library/assetInfoBox.tsx b/jsapp/js/components/library/assetInfoBox.tsx
index e0c85ccf95..74c4001238 100644
--- a/jsapp/js/components/library/assetInfoBox.tsx
+++ b/jsapp/js/components/library/assetInfoBox.tsx
@@ -96,7 +96,9 @@ export default class AssetInfoBox extends React.Component<
           {this.state.areDetailsVisible &&
           <bem.AssetInfoBox__cell>
             <label>{t('Description')}</label>
-            {this.props.asset.settings.description || '-'}
+            <div dir='auto'>
+              {this.props.asset.settings.description || '-'}
+            </div>
           </bem.AssetInfoBox__cell>
           }
 
diff --git a/jsapp/js/components/map.scss b/jsapp/js/components/map.scss
index 035653ae65..2595fc7e05 100644
--- a/jsapp/js/components/map.scss
+++ b/jsapp/js/components/map.scss
@@ -114,7 +114,6 @@
 
     border-radius: 6px;
     padding: 12px;
-    text-align: left;
     color: colors.$kobo-gray-40;
   }
 
diff --git a/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6 b/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
index 192e79f5ed..db8832fdeb 100644
--- a/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
+++ b/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
@@ -238,7 +238,7 @@ class BulkEditSubmissionsForm extends React.Component {
           {renderQuestionTypeIcon(question.type)}
         </bem.SimpleTable__cell>
 
-        <bem.SimpleTable__cell>
+        <bem.SimpleTable__cell dir='auto'>
           {question.parents.length > 0 &&
             <small>{question.parents.join(' / ') + ' /'}</small>
           }
@@ -556,7 +556,7 @@ class BulkEditRowForm extends React.Component {
 
     return (
       <React.Fragment>
-        <bem.FormView__cell m={['columns', 'columns-top']}>
+        <bem.FormView__cell m={['columns', 'columns-top']} dir='auto'>
           <bem.FormView__cell m='column-icon'>
             {renderQuestionTypeIcon(this.props.question.type)}
           </bem.FormView__cell>
diff --git a/jsapp/js/components/modalForms/languageForm.es6 b/jsapp/js/components/modalForms/languageForm.es6
index 858b9b8e68..a4fc3c8344 100644
--- a/jsapp/js/components/modalForms/languageForm.es6
+++ b/jsapp/js/components/modalForms/languageForm.es6
@@ -13,6 +13,7 @@ Properties:
 - onLanguageChange <function>: required
 - existingLanguages <langString[]>: for validation purposes
 - isDefault <boolean>: for default language only
+- isPending <boolean>: marks the submit button as pending
 */
 class LanguageForm extends React.Component {
   constructor(props) {
@@ -43,6 +44,7 @@ class LanguageForm extends React.Component {
 
     autoBind(this);
   }
+
   isLanguageNameValid() {
     if (this.props.existingLanguages) {
       let isNameUnique = true;
@@ -61,6 +63,7 @@ class LanguageForm extends React.Component {
       return true;
     }
   }
+
   isLanguageCodeValid() {
     if (this.props.existingLanguages) {
       let isCodeUnique = true;
@@ -79,14 +82,13 @@ class LanguageForm extends React.Component {
       return true;
     }
   }
+
   onSubmit(evt) {
     evt.preventDefault();
-    evt.currentTarget.disabled = true;
 
     const isNameValid = this.isLanguageNameValid();
     if (!isNameValid) {
       this.setState({nameError: t('Name must be unique!')});
-      evt.currentTarget.disabled = false;
     } else {
       this.setState({nameError: null});
     }
@@ -94,7 +96,6 @@ class LanguageForm extends React.Component {
     const isCodeValid = this.isLanguageCodeValid();
     if (!isCodeValid) {
       this.setState({codeError: t('Code must be unique!')});
-      evt.currentTarget.disabled = false;
     } else {
       this.setState({codeError: null});
     }
@@ -110,14 +111,24 @@ class LanguageForm extends React.Component {
       }, langIndex);
     }
   }
+
   onNameChange(newName) {
-    this.setState({name: toTitleCase(newName.trim().toLowerCase())});
+    this.setState({
+      name: toTitleCase(newName.trim().toLowerCase()),
+      nameError: null,
+    });
   }
+
   onCodeChange(newCode) {
-    this.setState({code: newCode.trim().toLowerCase()});
+    this.setState({
+      code: newCode.trim().toLowerCase(),
+      codeError: null,
+    });
   }
+
   render() {
-    let isAnyFieldEmpty = this.state.name.length === 0 || this.state.code.length === 0;
+    const isAnyFieldEmpty = this.state.name.length === 0 || this.state.code.length === 0;
+    const hasErrors = this.state.nameError !== null || this.state.codeError !== null;
 
     return (
       <bem.FormView__form m='add-language-fields'>
@@ -126,7 +137,7 @@ class LanguageForm extends React.Component {
             <label>{(this.props.isDefault) ? t('Default language name') : t('Language name')}</label>
             <TextBox
               value={this.state.name}
-              onChange={this.onNameChange}
+              onChange={this.onNameChange.bind(this)}
               errors={this.state.nameError}
             />
           </bem.FormModal__item>
@@ -137,7 +148,7 @@ class LanguageForm extends React.Component {
             <label>{(this.props.isDefault) ? t('Default language code') : t('Language code')}</label>
             <TextBox
               value={this.state.code}
-              onChange={this.onCodeChange}
+              onChange={this.onCodeChange.bind(this)}
               errors={this.state.codeError}
             />
           </bem.FormModal__item>
@@ -148,10 +159,11 @@ class LanguageForm extends React.Component {
             type='full'
             color='blue'
             size='l'
-            onClick={this.onSubmit.bind(this)}
+            label={this.props.langIndex !== undefined ? t('Update') : (this.props.isDefault) ? t('Set') : t('Add')}
             isSubmit
+            isPending={this.props.isPending}
             isDisabled={isAnyFieldEmpty}
-            label={this.props.langIndex !== undefined ? t('Update') : (this.props.isDefault) ? t('Set') : t('Add')}
+            onClick={this.onSubmit.bind(this)}
           />
         </bem.FormView__cell>
       </bem.FormView__form>
diff --git a/jsapp/js/components/modalForms/translationSettings.es6 b/jsapp/js/components/modalForms/translationSettings.es6
index 48cfb4e11b..2ff927e230 100644
--- a/jsapp/js/components/modalForms/translationSettings.es6
+++ b/jsapp/js/components/modalForms/translationSettings.es6
@@ -42,7 +42,7 @@ export class TranslationSettings extends React.Component {
       asset: props.asset,
       translations: translations,
       showAddLanguageForm: false,
-      isUpdatingDefaultLanguage: false,
+      isUpdatingAsset: false,
       renameLanguageIndex: -1,
     };
     autoBind(this);
@@ -68,7 +68,7 @@ export class TranslationSettings extends React.Component {
       asset: asset,
       translations: asset.content.translations || [],
       showAddLanguageForm: false,
-      isUpdatingDefaultLanguage: false,
+      isUpdatingAsset: false,
       renameLanguageIndex: -1,
     });
 
@@ -233,7 +233,6 @@ export class TranslationSettings extends React.Component {
       ).replace('##lang##', escapeHtml(langString)),
       labels: {ok: t('Confirm'), cancel: t('Cancel')},
       onok: () => {
-        this.setState({isUpdatingDefaultLanguage: true});
         const content = this.state.asset.content;
         content.settings.default_language = langString;
         this.updateAsset(content);
@@ -244,6 +243,8 @@ export class TranslationSettings extends React.Component {
     dialog.set(opts).show();
   }
   updateAsset(content) {
+    this.setState({isUpdatingAsset: true});
+
     actions.resources.updateAsset(
       this.state.asset.uid,
       {content: JSON.stringify(content)},
@@ -321,7 +322,8 @@ export class TranslationSettings extends React.Component {
           </bem.FormView__cell>
           <bem.FormView__cell m='update-language-form'>
             <LanguageForm
-              onLanguageChange={this.onLanguageChange}
+              isPending={this.state.isUpdatingAsset}
+              onLanguageChange={this.onLanguageChange.bind(this)}
               existingLanguages={this.getAllLanguages()}
               isDefault
             />
@@ -364,7 +366,7 @@ export class TranslationSettings extends React.Component {
                         size='m'
                         onClick={() => {this.changeDefaultLanguage(i);}}
                         isDisabled={
-                          this.state.isUpdatingDefaultLanguage ||
+                          this.state.isUpdatingAsset ||
                           !this.canEditLanguages()
                         }
                         tooltip={t('Make default')}
@@ -380,7 +382,7 @@ export class TranslationSettings extends React.Component {
                       size='m'
                       onClick={() => {this.toggleRenameLanguageForm(i);}}
                       isDisabled={
-                        this.state.isUpdatingDefaultLanguage ||
+                        this.state.isUpdatingAsset ||
                         !this.canEditLanguages()
                       }
                       startIcon={this.state.renameLanguageIndex === i ? 'close': 'edit'}
@@ -398,7 +400,7 @@ export class TranslationSettings extends React.Component {
                           this.state.translations[i]
                         );
                       }}
-                      isDisabled={this.state.isUpdatingDefaultLanguage}
+                      isDisabled={this.state.isUpdatingAsset}
                       startIcon='language-settings'
                       tooltip={t('Update translations')}
                       tooltipPosition='right'
@@ -411,7 +413,7 @@ export class TranslationSettings extends React.Component {
                         size='m'
                         onClick={() => {this.deleteLanguage(i);}}
                         isDisabled={
-                          this.state.isUpdatingDefaultLanguage ||
+                          this.state.isUpdatingAsset ||
                           !this.canEditLanguages()
                         }
                         startIcon='trash'
@@ -425,9 +427,10 @@ export class TranslationSettings extends React.Component {
                 {this.state.renameLanguageIndex === i && (
                   <bem.FormView__cell m='update-language-form'>
                     <LanguageForm
+                      isPending={this.state.isUpdatingAsset}
                       langString={l}
                       langIndex={i}
-                      onLanguageChange={this.onLanguageChange}
+                      onLanguageChange={this.onLanguageChange.bind(this)}
                       existingLanguages={this.getAllLanguages(l)}
                     />
                   </bem.FormView__cell>
@@ -463,7 +466,8 @@ export class TranslationSettings extends React.Component {
               </bem.FormView__cell>
 
               <LanguageForm
-                onLanguageChange={this.onLanguageChange}
+                isPending={this.state.isUpdatingAsset}
+                onLanguageChange={this.onLanguageChange.bind(this)}
                 existingLanguages={this.getAllLanguages()}
               />
             </bem.FormView__cell>
diff --git a/jsapp/js/components/modalForms/translationTable.es6 b/jsapp/js/components/modalForms/translationTable.es6
index 4ac7aeceb6..e8186a8ec3 100644
--- a/jsapp/js/components/modalForms/translationTable.es6
+++ b/jsapp/js/components/modalForms/translationTable.es6
@@ -142,6 +142,7 @@ export class TranslationTable extends React.Component {
               }}
               value={this.state.tableData[cellInfo.index].value || ''}
               disabled={cellInfo.original.isLabelLocked}
+              dir='auto'
             />
           );
         },
@@ -334,6 +335,8 @@ export class TranslationTable extends React.Component {
             nextText={t('Next')}
             minRows={1}
             loadingText={<LoadingSpinner />}
+            // Enables RTL support in table cells
+            getTdProps={() => ({dir: 'auto'})}
           />
         </div>
 
diff --git a/jsapp/js/components/modals/koboModal.scss b/jsapp/js/components/modals/koboModal.scss
index f622c061b3..e3ab12c87e 100644
--- a/jsapp/js/components/modals/koboModal.scss
+++ b/jsapp/js/components/modals/koboModal.scss
@@ -79,11 +79,13 @@ $kobo-modal-header-icon-margin: sizes.$x10;
   h1 {
     @include mixins.centerRowFlex;
 
+    flex: 1;
     color: colors.$kobo-gray-24;
     font-size: sizes.$x18;
     font-weight: 700;
     margin: 0;
     line-height: 1;
+    margin-inline-end: 10px;
 
     // If there is close button, we need to limit the width (for a long content)
     &:not(:only-child) {
diff --git a/jsapp/js/components/permissions/copyTeamPermissions.component.tsx b/jsapp/js/components/permissions/copyTeamPermissions.component.tsx
index ae4ad4aa34..9062827bab 100644
--- a/jsapp/js/components/permissions/copyTeamPermissions.component.tsx
+++ b/jsapp/js/components/permissions/copyTeamPermissions.component.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import bem from 'js/bem';
 import classNames from 'classnames';
-import Select from 'react-select';
 import type {SingleValue} from 'react-select';
 import alertify from 'alertifyjs';
 import {stores} from '../../stores';
@@ -10,11 +9,8 @@ import type {AssetStoreData} from 'js/assetStore';
 import {actions} from '../../actions';
 import {notify, escapeHtml} from 'js/utils';
 import Button from 'js/components/common/button';
-
-interface ReactSelectOption {
-  value: string;
-  label: string | null;
-}
+import KoboSelect from 'js/components/common/koboSelect';
+import type {KoboSelectOption} from 'js/components/common/koboSelect';
 
 interface CopyTeamPermissionsProps {
   assetUid: string;
@@ -69,24 +65,11 @@ export default class CopyTeamPermissions extends React.Component<
     this.setState({isCopyFormVisible: !this.state.isCopyFormVisible});
   }
 
-  getSelectedProjectOption() {
-    if (this.state.sourceUid) {
-      return {
-        value: this.state.sourceUid,
-        label: this.state.sourceName,
-      };
-    } else {
-      return false;
-    }
-  }
-
-  onSelectedProjectChange(
-    option: SingleValue<boolean | {value: string; label: string | null}>
-  ) {
-    if (option !== null && typeof option !== 'boolean') {
+  onSelectedProjectChange(newSelectedOption: string | null) {
+    if (newSelectedOption !== null) {
       this.setState({
-        sourceUid: option.value,
-        sourceName: stores.allAssets.byUid[option.value].name,
+        sourceUid: newSelectedOption,
+        sourceName: stores.allAssets.byUid[newSelectedOption].name,
       });
     }
   }
@@ -132,7 +115,7 @@ export default class CopyTeamPermissions extends React.Component<
     const isImportButtonEnabled =
       this.state.sourceUid !== null && !this.state.isAwaitingAssetChange;
 
-    const availableOptions: ReactSelectOption[] = [];
+    const availableOptions: KoboSelectOption[] = [];
     for (const assetUid in stores.allAssets.byUid) {
       if (stores.allAssets.byUid.hasOwnProperty(assetUid)) {
         // because choosing itself doesn't make sense
@@ -172,16 +155,16 @@ export default class CopyTeamPermissions extends React.Component<
             <bem.FormModal__item
               m={['gray-row', 'flexed-row', 'copy-team-permissions']}
             >
-              <Select
-                id='teamPermissions'
-                value={this.getSelectedProjectOption()}
-                isClearable={false}
-                placeholder={t('Select source project…')}
+              <KoboSelect
+                name='copy-team-permissions'
+                type='outline'
+                size='l'
+                isSearchable
                 options={availableOptions}
+                selectedOption={this.state.sourceUid}
                 onChange={this.onSelectedProjectChange.bind(this)}
-                className='kobo-select'
-                classNamePrefix='kobo-select'
-                menuPlacement='auto'
+                placeholder={t('Select source project…')}
+                placement='up-center'
               />
 
               <Button
diff --git a/jsapp/js/components/permissions/sharingForm.component.tsx b/jsapp/js/components/permissions/sharingForm.component.tsx
index 0142431498..0d884e8336 100644
--- a/jsapp/js/components/permissions/sharingForm.component.tsx
+++ b/jsapp/js/components/permissions/sharingForm.component.tsx
@@ -29,6 +29,7 @@ import type {
   AssignablePermissionPartialLabel,
 } from 'js/dataInterface';
 import {ACCOUNT_ROUTES} from 'js/account/routes.constants';
+import AssetName from 'js/components/common/assetName';
 
 interface SharingFormProps {
   assetUid: string;
@@ -215,7 +216,9 @@ export default class SharingForm extends React.Component<
 
     return (
       <bem.FormModal m='sharing-form'>
-        <bem.Modal__subheader>{this.state.asset.name}</bem.Modal__subheader>
+        <bem.Modal__subheader dir='auto'>
+          <AssetName asset={this.state.asset} />
+        </bem.Modal__subheader>
 
         {isRequireAuthWarningVisible && (
           <bem.FormModal__item>
diff --git a/jsapp/js/components/processing/analysis/analysisHeader.module.scss b/jsapp/js/components/processing/analysis/analysisHeader.module.scss
index 96b30f0a5a..fee6be47ef 100644
--- a/jsapp/js/components/processing/analysis/analysisHeader.module.scss
+++ b/jsapp/js/components/processing/analysis/analysisHeader.module.scss
@@ -44,7 +44,7 @@ $menu-padding: koboSelect.$k-select-menu-padding;
   height: $option-height;
   color: colors.$kobo-gray-40;
   padding: 0 #{sizes.$x16 - sizes.$x2};
-  text-align: left;
+  text-align: initial;
   font-weight: 500;
 
   &:hover {
@@ -73,7 +73,7 @@ $menu-padding: koboSelect.$k-select-menu-padding;
 }
 
 .addQuestionMenu :global h2 {
-  text-align: left;
+  text-align: initial;
   border-top: sizes.$x1 solid colors.$kobo-gray-92;
   font-size: sizes.$x12;
   line-height: $option-height;
diff --git a/jsapp/js/components/reports/reportStyleSettings.es6 b/jsapp/js/components/reports/reportStyleSettings.es6
index 463ababde0..f79965f772 100644
--- a/jsapp/js/components/reports/reportStyleSettings.es6
+++ b/jsapp/js/components/reports/reportStyleSettings.es6
@@ -162,7 +162,7 @@ export default class ReportStyleSettings extends React.Component {
             )}
             {tabs[this.state.activeModalTab] === t('Group By') &&
               groupByOptions.length > 1 && (
-                <div className='graph-tab__groupby' id='graph-labels'>
+                <div className='graph-tab__groupby' id='graph-labels' dir='auto'>
                   <Radio
                     name='reports-groupby'
                     options={groupByOptions}
diff --git a/jsapp/js/components/reports/reportTable.component.tsx b/jsapp/js/components/reports/reportTable.component.tsx
index 7b22b67d5f..559e3e7be5 100644
--- a/jsapp/js/components/reports/reportTable.component.tsx
+++ b/jsapp/js/components/reports/reportTable.component.tsx
@@ -131,7 +131,7 @@ export default class ReportTable extends React.Component<ReportTableProps> {
                 // Note: See TODO above. ReportTableProps probably deserves a
                 // second look, and TypeScript is trying to tell us something
                 // about the value of 'r' here.
-                <td key={i}>{r as React.ReactNode}</td>
+                <td key={i} dir='auto'>{r as React.ReactNode}</td>
               ))}
             </tr>
           ))}
diff --git a/jsapp/js/components/reports/reportViewItem.component.tsx b/jsapp/js/components/reports/reportViewItem.component.tsx
index f4e4c4b0f6..5c49e59713 100644
--- a/jsapp/js/components/reports/reportViewItem.component.tsx
+++ b/jsapp/js/components/reports/reportViewItem.component.tsx
@@ -282,7 +282,7 @@ class ReportViewItem extends React.Component<ReportViewItemProps> {
     return (
       <div>
         <bem.ReportView__itemHeading>
-          <h2>{this.props.label}</h2>
+          <h2 dir='auto'>{this.props.label}</h2>
           <bem.ReportView__headingMeta>
             <span className='type'>{t('Type: ') + rowType + t('. ')}</span>
             <span className='respondents'>
diff --git a/jsapp/js/components/reports/reports.scss b/jsapp/js/components/reports/reports.scss
index 2be51058ca..147bca830e 100644
--- a/jsapp/js/components/reports/reports.scss
+++ b/jsapp/js/components/reports/reports.scss
@@ -76,7 +76,7 @@
       font-size: variables.$base-font-size;
 
       &:first-child {
-        text-align: left;
+        text-align: initial;
       }
     }
 
@@ -86,7 +86,7 @@
       text-align: right;
 
       &:first-child {
-        text-align: left;
+        text-align: initial;
       }
     }
   }
diff --git a/jsapp/js/components/submissions/columnsHideDropdown.scss b/jsapp/js/components/submissions/columnsHideDropdown.scss
index 17bcf48126..2908611026 100644
--- a/jsapp/js/components/submissions/columnsHideDropdown.scss
+++ b/jsapp/js/components/submissions/columnsHideDropdown.scss
@@ -13,7 +13,7 @@
     background-color: colors.$kobo-white;
     @include mdl.box-shadow;
     padding: 9px 0;
-    text-align: left;
+    text-align: initial;
     line-height: 20px;
     min-width: 150px;
   }
@@ -42,6 +42,7 @@
     max-height: 200px;
     margin: 10px 0;
     overflow-y: auto;
+    padding: 0;
 
     .columns-hide-form__list-item {
       &:not(:first-child) {
diff --git a/jsapp/js/components/submissions/columnsHideForm.tsx b/jsapp/js/components/submissions/columnsHideForm.tsx
index 12c25124ba..99735f75c1 100644
--- a/jsapp/js/components/submissions/columnsHideForm.tsx
+++ b/jsapp/js/components/submissions/columnsHideForm.tsx
@@ -153,7 +153,7 @@ class ColumnsHideForm extends React.Component<
         />
 
         {filteredFieldsList.length !== 0 && (
-          <bem.ColumnsHideForm__list>
+          <bem.ColumnsHideForm__list dir='auto'>
             {filteredFieldsList.map((fieldObj) => {
               return (
                 <bem.ColumnsHideForm__listItem key={fieldObj.fieldId}>
diff --git a/jsapp/js/components/submissions/submissionDataList.scss b/jsapp/js/components/submissions/submissionDataList.scss
index ed66858a7b..509f4ba243 100644
--- a/jsapp/js/components/submissions/submissionDataList.scss
+++ b/jsapp/js/components/submissions/submissionDataList.scss
@@ -4,6 +4,7 @@
   list-style: none;
   overflow-x: hidden;
   overflow-y: auto;
+  padding: 0;
 }
 
 .submission-data-list-question:not(:first-of-type) {
diff --git a/jsapp/js/components/submissions/submissionDataList.tsx b/jsapp/js/components/submissions/submissionDataList.tsx
index dc7269e298..bb4562c44d 100644
--- a/jsapp/js/components/submissions/submissionDataList.tsx
+++ b/jsapp/js/components/submissions/submissionDataList.tsx
@@ -105,7 +105,7 @@ export default class SubmissionDataList extends React.Component<
     );
 
     return (
-      <bem.SubmissionDataList>
+      <bem.SubmissionDataList dir='auto'>
         {items.map(this.renderQuestion.bind(this))}
       </bem.SubmissionDataList>
     );
diff --git a/jsapp/js/components/submissions/submissionDataTable.scss b/jsapp/js/components/submissions/submissionDataTable.scss
index 1227b455ec..abda158586 100644
--- a/jsapp/js/components/submissions/submissionDataTable.scss
+++ b/jsapp/js/components/submissions/submissionDataTable.scss
@@ -87,7 +87,6 @@ $submission-data-table-space: sizes.$x12;
 .submission-data-table__row--response .submission-data-table__column.submission-data-table__column--data {
   @include mixins.centerRowFlex;
   gap: 10px;
-
   flex: 1;
 
   .audio-player:first-child {
diff --git a/jsapp/js/components/submissions/submissionDataTable.tsx b/jsapp/js/components/submissions/submissionDataTable.tsx
index 0ac81b4388..1cc22d4b78 100644
--- a/jsapp/js/components/submissions/submissionDataTable.tsx
+++ b/jsapp/js/components/submissions/submissionDataTable.tsx
@@ -66,11 +66,11 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
   }
 
   renderGroup(item: DisplayGroup, itemIndex?: number) {
-
     return (
       <bem.SubmissionDataTable__row
         m={['group', `type-${item.type}`]}
         key={`${item.name}__${itemIndex}`}
+        dir='auto'
       >
         {item.name !== null &&
           <bem.SubmissionDataTable__row m='group-label'>
@@ -117,6 +117,7 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
       <bem.SubmissionDataTable__row
         m={['columns', 'response', `type-${item.type}`]}
         key={`${item.name}__${itemIndex}`}
+        dir='auto'
       >
         <bem.SubmissionDataTable__column m='type'>
           {item.type !== null && renderQuestionTypeIcon(item.type)}
@@ -324,7 +325,10 @@ class SubmissionDataTable extends React.Component<SubmissionDataTableProps> {
 
   renderMetaResponse(dataName: MetaQuestionTypeName | string, label: string) {
     return (
-      <bem.SubmissionDataTable__row m={['columns', 'response', 'metadata']}>
+      <bem.SubmissionDataTable__row
+        m={['columns', 'response', 'metadata']}
+        dir='auto'
+      >
         <bem.SubmissionDataTable__column m='type'>
           {typeof dataName !== 'string' && renderQuestionTypeIcon(dataName)}
         </bem.SubmissionDataTable__column>
diff --git a/jsapp/js/components/submissions/table.scss b/jsapp/js/components/submissions/table.scss
index 50abd7dd4e..7b3ed7d661 100644
--- a/jsapp/js/components/submissions/table.scss
+++ b/jsapp/js/components/submissions/table.scss
@@ -92,7 +92,8 @@ $s-data-table-font: 13px;
         color: colors.$kobo-gray-55;
         vertical-align: top;
         display: inline-block;
-        margin-right: 3px;
+        // Needed for the RTL content to look nice
+        margin-inline-end: 3px;
       }
     }
 
@@ -108,7 +109,7 @@ $s-data-table-font: 13px;
         .table-header-results {
           line-height: 15px;
           padding-top: 1px;
-          text-align: left;
+          text-align: initial;
         }
       }
     }
diff --git a/jsapp/js/components/submissions/table.tsx b/jsapp/js/components/submissions/table.tsx
index 82d9558caa..13b1da15ef 100644
--- a/jsapp/js/components/submissions/table.tsx
+++ b/jsapp/js/components/submissions/table.tsx
@@ -1595,6 +1595,8 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
             };
           }}
           filterable
+          // Enables RTL support in table cells
+          getTdProps={() => ({dir: 'auto'})}
         />
       </bem.FormView>
     );
diff --git a/jsapp/js/components/submissions/tableColumnSortDropdown.scss b/jsapp/js/components/submissions/tableColumnSortDropdown.scss
index fa3fb49fb3..da73781b87 100644
--- a/jsapp/js/components/submissions/tableColumnSortDropdown.scss
+++ b/jsapp/js/components/submissions/tableColumnSortDropdown.scss
@@ -14,7 +14,7 @@
     background-color: colors.$kobo-gray-40;
     @include mdl.box-shadow;
     padding: sizes.$x8 0;
-    text-align: left;
+    text-align: initial;
     line-height: sizes.$x20;
     min-width: sizes.$x150;
 
@@ -45,19 +45,14 @@
   .table-column-sort-dropdown-trigger {
     @include mixins.centerRowFlex;
     align-items: flex-start;
-    text-align: left;
+    // We need to override the default "center" from react-table, but it also
+    // needs to work with `dir="auto"`
+    text-align: initial;
     line-height: sizes.$x20;
+    gap: 5px;
 
     .column-header-title {
       flex: 1;
-
-      &:not(:last-child) {
-        margin-right: sizes.$x5;
-      }
-
-      &:not(:first-child) {
-        margin-left: sizes.$x5;
-      }
     }
 
     .k-icon.k-icon-sort-ascending,
@@ -91,7 +86,7 @@
   display: block;
   width: 100%;
   padding: sizes.$x5 sizes.$x10;
-  text-align: left;
+  text-align: initial;
   font-size: sizes.$x12;
   line-height: inherit;
 
diff --git a/jsapp/js/components/submissions/tableColumnSortDropdown.tsx b/jsapp/js/components/submissions/tableColumnSortDropdown.tsx
index 7c93aa7f30..694f8c64db 100644
--- a/jsapp/js/components/submissions/tableColumnSortDropdown.tsx
+++ b/jsapp/js/components/submissions/tableColumnSortDropdown.tsx
@@ -42,7 +42,7 @@ export default function TableColumnSortDropdown(
     }
 
     return (
-      <div className='table-column-sort-dropdown-trigger'>
+      <div className='table-column-sort-dropdown-trigger' dir='auto'>
         {props.additionalTriggerContent}
         {props.sortValue && <i className={sortIcon.join(' ')} />}
         <i className='k-icon k-icon-caret-up' />
diff --git a/jsapp/js/components/submissions/textModalCell.component.tsx b/jsapp/js/components/submissions/textModalCell.component.tsx
index c865904e89..99f9e4699a 100644
--- a/jsapp/js/components/submissions/textModalCell.component.tsx
+++ b/jsapp/js/components/submissions/textModalCell.component.tsx
@@ -69,7 +69,7 @@ export default function TextModalCell(
                 .replace('##submissionTotal##', String(props.submissionTotal))}
             </span>
 
-            <span>{props.columnName}</span>
+            <span dir='auto'>{props.columnName}</span>
           </div>
         </KoboModalHeader>
 
diff --git a/jsapp/js/components/submissions/textModalCell.module.scss b/jsapp/js/components/submissions/textModalCell.module.scss
index eecc268552..acbba12f0d 100644
--- a/jsapp/js/components/submissions/textModalCell.module.scss
+++ b/jsapp/js/components/submissions/textModalCell.module.scss
@@ -25,4 +25,5 @@
   font-size: 14px;
   line-height: 20px;
   max-width: 100%;
+  flex: 1;
 }
diff --git a/jsapp/js/components/submissions/validationStatusDropdown.scss b/jsapp/js/components/submissions/validationStatusDropdown.scss
index 959a3af8c2..e85fd8a5fc 100644
--- a/jsapp/js/components/submissions/validationStatusDropdown.scss
+++ b/jsapp/js/components/submissions/validationStatusDropdown.scss
@@ -8,7 +8,7 @@
   }
 
   .kobo-select__menu-list {
-    text-align: left;
+    text-align: initial;
     line-height: 20px;
 
     // override padding for first and last item so it looks like the menu has
@@ -86,7 +86,7 @@
   .kobo-select__option-badge {
     // Needed for react-select v5.
     grid-area: 1 / 1 / 2 / 3;
-    text-align: left;
+    text-align: initial;
     font-weight: 500;
     line-height: 1;
     font-size: 12px;
diff --git a/jsapp/js/editorMixins/assetNavigator.es6 b/jsapp/js/editorMixins/assetNavigator.es6
index b5a9a9d662..3d13f00138 100644
--- a/jsapp/js/editorMixins/assetNavigator.es6
+++ b/jsapp/js/editorMixins/assetNavigator.es6
@@ -116,7 +116,7 @@ class AssetNavigatorListView extends React.Component {
             return (
               <bem.LibList__item m={modifiers} key={item.uid} data-uid={item.uid}>
                 <bem.LibList__dragbox />
-                <bem.LibList__label m={'name'}>
+                <bem.LibList__label m={'name'} dir='auto'>
                   <AssetName asset={item} />
                 </bem.LibList__label>
 
diff --git a/jsapp/js/editorMixins/editableForm.es6 b/jsapp/js/editorMixins/editableForm.es6
index 0ba0a9947a..796ea8acf1 100644
--- a/jsapp/js/editorMixins/editableForm.es6
+++ b/jsapp/js/editorMixins/editableForm.es6
@@ -612,6 +612,7 @@ export default Object.assign({
                 value={this.state.name}
                 title={this.state.name}
                 id='nameField'
+                dir='auto'
               />
             </bem.FormModal__item>
           </bem.FormBuilderHeader__cell>
diff --git a/jsapp/js/formbuild/containers/KoboMatrix.es6 b/jsapp/js/formbuild/containers/KoboMatrix.es6
index c438cb51df..87df8b1964 100644
--- a/jsapp/js/formbuild/containers/KoboMatrix.es6
+++ b/jsapp/js/formbuild/containers/KoboMatrix.es6
@@ -511,6 +511,7 @@ class KoboMatrix extends React.Component {
                   onChange={this.onColumnChange.bind(this, 'label')}
                   onBlur={this.onColumnBlur.bind(this, 'label')}
                   className='js-cancel-sort'
+                  dir='auto'
                 />
               </label>
               <label>
@@ -546,7 +547,7 @@ class KoboMatrix extends React.Component {
                             <span>
                               <input type='text' value={_this.getChoiceField(ch, 'label')}
                                 onChange={_this.choiceChange} className='js-cancel-sort'
-                                data-type='label' data-kuid={ch} />
+                                data-type='label' data-kuid={ch} dir="auto" />
                             </span>
                             <span className='matrix-options__value'>
                               <input type='text' value={_this.getChoiceField(ch, 'name')}
@@ -619,6 +620,7 @@ class KoboMatrix extends React.Component {
                         value={item.label}
                         onChange={_this.onRowChange.bind(this, 'label')}
                         className='js-cancel-sort'
+                        dir='auto'
                       />
                     </label>
                     <label>
diff --git a/jsapp/js/popoverMenu.scss b/jsapp/js/popoverMenu.scss
index 40accc0771..0e51370c83 100644
--- a/jsapp/js/popoverMenu.scss
+++ b/jsapp/js/popoverMenu.scss
@@ -32,7 +32,7 @@
   position: absolute;
   min-width: 160px;
   max-width: 300px;
-  text-align: left;
+  text-align: initial;
   background: colors.$kobo-white;
   z-index: z-indexes.$z-dropdown;
   right: -10px;
@@ -116,7 +116,7 @@
 .popover-menu__item--move-coll-item {
   background-color: colors.$kobo-gray-96;
   position: relative;
-  text-align: left;
+  text-align: initial;
   padding: 3px 8px 3px 5px;
 
   span {
diff --git a/jsapp/js/projects/projectViews/projectsFilter.tsx b/jsapp/js/projects/projectViews/projectsFilter.tsx
index 2de4ce89a0..85ade5bda9 100644
--- a/jsapp/js/projects/projectViews/projectsFilter.tsx
+++ b/jsapp/js/projects/projectViews/projectsFilter.tsx
@@ -25,6 +25,11 @@ interface ProjectsFilterProps {
   excludedFields?: ProjectFieldName[];
 }
 
+/**
+ * This module displays a button for opening a modal with a list of filters.
+ * Each filter is being rendered and modified by a separate
+ * `ProjectsFilterEditor` component.
+ */
 export default function ProjectsFilter(props: ProjectsFilterProps) {
   const getInitialFilters = () => {
     if (props.filters.length === 0) {
diff --git a/jsapp/js/projects/projectViews/projectsFilterEditor.tsx b/jsapp/js/projects/projectViews/projectsFilterEditor.tsx
index 584aefd3dc..e28721324b 100644
--- a/jsapp/js/projects/projectViews/projectsFilterEditor.tsx
+++ b/jsapp/js/projects/projectViews/projectsFilterEditor.tsx
@@ -11,7 +11,6 @@ import type {
 import {FILTER_CONDITIONS, PROJECT_FIELDS} from './constants';
 import {isFilterConditionValueRequired} from './utils';
 import envStore from 'js/envStore';
-import WrappedSelect from 'js/components/common/wrappedSelect';
 import styles from './projectsFilterEditor.module.scss';
 
 interface ProjectsFilterEditorProps {
@@ -26,6 +25,10 @@ interface ProjectsFilterEditorProps {
 
 const COUNTRIES = envStore.data.country_choices;
 
+/**
+ * This component renders a single (editable) filter row. It has few dropdowns,
+ * and textboxes, and a delete button.
+ */
 export default function ProjectsFilterEditor(props: ProjectsFilterEditorProps) {
   const onFilterValueChange = (newValue: string) => {
     props.onFilterChange({
@@ -152,6 +155,7 @@ export default function ProjectsFilterEditor(props: ProjectsFilterEditorProps) {
               placeholder={t('Enter value')}
               // Requires field to be selected first
               disabled={!props.filter.fieldName}
+              size='m'
             />
           )}
         {isFilterConditionValueRequired(props.filter.condition) &&
diff --git a/jsapp/js/projects/projectViews/viewSwitcher.module.scss b/jsapp/js/projects/projectViews/viewSwitcher.module.scss
index 484c8128cb..985c2d6c87 100644
--- a/jsapp/js/projects/projectViews/viewSwitcher.module.scss
+++ b/jsapp/js/projects/projectViews/viewSwitcher.module.scss
@@ -63,7 +63,7 @@
   font-weight: 500;
   padding: sizes.$x10 sizes.$x30;
   width: 100%;
-  text-align: left;
+  text-align: initial;
 
   &:hover {
     color: colors.$kobo-blue;
diff --git a/jsapp/js/projects/projectsTable/projectQuickActions.tsx b/jsapp/js/projects/projectsTable/projectQuickActions.tsx
index 8579de53b5..23377eeff7 100644
--- a/jsapp/js/projects/projectsTable/projectQuickActions.tsx
+++ b/jsapp/js/projects/projectsTable/projectQuickActions.tsx
@@ -106,7 +106,7 @@ const ProjectQuickActions = ({asset}: ProjectQuickActionsProps) => {
 
       {/* Delete */}
       <Button
-        isDisabled={!isChangingPossible}
+        isDisabled={!isManagingPossible}
         type='bare'
         color='dark-red'
         size='s'
@@ -121,7 +121,7 @@ const ProjectQuickActions = ({asset}: ProjectQuickActionsProps) => {
           )
         }
         tooltip={
-          isChangingPossible ? t('Delete 1 project') : t('Delete project')
+          isManagingPossible ? t('Delete 1 project') : t('Delete project')
         }
         tooltipPosition='right'
       />
diff --git a/jsapp/js/projects/projectsTable/projectsTableRow.tsx b/jsapp/js/projects/projectsTable/projectsTableRow.tsx
index a720485c96..3facc2f74d 100644
--- a/jsapp/js/projects/projectsTable/projectsTableRow.tsx
+++ b/jsapp/js/projects/projectsTable/projectsTableRow.tsx
@@ -123,6 +123,14 @@ export default function ProjectsTableRow(props: ProjectsTableRowProps) {
           return null;
         }
 
+        // All the columns that could have user content
+        const isUserContent = (
+          field.name === 'name' ||
+          field.name === 'description' ||
+          field.name === 'ownerFullName' ||
+          field.name === 'ownerOrganization'
+        );
+
         return (
           <div
             className={classNames({
@@ -136,6 +144,7 @@ export default function ProjectsTableRow(props: ProjectsTableRowProps) {
             // This attribute is being used for styling and for ColumnResizer
             data-field={field.name}
             key={field.name}
+            dir={isUserContent ? 'auto' : undefined}
           >
             {renderColumnContent(field)}
           </div>
diff --git a/jsapp/scss/components/_kobo.background-audio-player.scss b/jsapp/scss/components/_kobo.background-audio-player.scss
index 0edeaa542e..f259ba6946 100644
--- a/jsapp/scss/components/_kobo.background-audio-player.scss
+++ b/jsapp/scss/components/_kobo.background-audio-player.scss
@@ -1,7 +1,7 @@
 @use 'scss/colors';
 
 .background-audio-player {
-  text-align: left;
+  text-align: initial;
   .background-audio-player__label {
     display: block;
     margin-bottom: 6px;
diff --git a/jsapp/scss/components/_kobo.bem.ui.scss b/jsapp/scss/components/_kobo.bem.ui.scss
index 7ff9b12624..b90ab41af1 100644
--- a/jsapp/scss/components/_kobo.bem.ui.scss
+++ b/jsapp/scss/components/_kobo.bem.ui.scss
@@ -43,8 +43,6 @@
   opacity: 0.75;
 }
 
-
-
 // iframe default styles
 iframe {
   border: none;
diff --git a/jsapp/scss/components/_kobo.form-builder.scss b/jsapp/scss/components/_kobo.form-builder.scss
index ad866c5721..d9a2f0e007 100644
--- a/jsapp/scss/components/_kobo.form-builder.scss
+++ b/jsapp/scss/components/_kobo.form-builder.scss
@@ -390,7 +390,7 @@ $s-form-builder-content-width: 1024px;
 
   .card__settings__fields__field {
     > label {
-      text-align: left;
+      text-align: initial;
       margin-right: 1%;
     }
 
diff --git a/jsapp/scss/components/_kobo.form-view.scss b/jsapp/scss/components/_kobo.form-view.scss
index 67da7d09b5..a33c7aa8e3 100644
--- a/jsapp/scss/components/_kobo.form-view.scss
+++ b/jsapp/scss/components/_kobo.form-view.scss
@@ -261,7 +261,7 @@ $side-tabs-width-mobile: 70px;
 
   &.form-view__cell--column-icon {
     width: 30px;
-    margin-right: 10px;
+    margin-inline-end: 10px;
     text-align: center;
     color: colors.$kobo-gray-40;
 
@@ -313,6 +313,10 @@ $side-tabs-width-mobile: 70px;
     padding: 10px 20px;
   }
 
+  &.form-view__cell--full-width {
+    width: 100%;
+  }
+
   // preferably with or inside .form-view__cell--first
   &.form-view__cell--label {
     font-size: variables.$base-font-size;
@@ -475,7 +479,7 @@ $side-tabs-width-mobile: 70px;
 
       &--version {
         width: 39%;
-        text-align: left;
+        text-align: initial;
       }
     }
 
diff --git a/jsapp/scss/components/_kobo.lib-list.scss b/jsapp/scss/components/_kobo.lib-list.scss
index adea4305ee..01ddc582bb 100644
--- a/jsapp/scss/components/_kobo.lib-list.scss
+++ b/jsapp/scss/components/_kobo.lib-list.scss
@@ -86,6 +86,7 @@
 .lib-list__label {
   padding: 5px;
   line-height: 1.4em;
+  text-align: initial;
 
   .asset-name {
     font-weight: 600;
diff --git a/jsapp/scss/formbuild/_kobomatrix.scss b/jsapp/scss/formbuild/_kobomatrix.scss
index dd4735283e..f2347a559a 100644
--- a/jsapp/scss/formbuild/_kobomatrix.scss
+++ b/jsapp/scss/formbuild/_kobomatrix.scss
@@ -98,7 +98,7 @@
 }
 
 .matrix-cols__settings_inner {
-  text-align: left;
+  text-align: initial;
   width: 500px;
   margin: 0 auto;
   padding: 0px 20px;
diff --git a/jsapp/scss/libs/react-tagsinput.scss b/jsapp/scss/libs/react-tagsinput.scss
index cb0ded32dd..14493b66ae 100644
--- a/jsapp/scss/libs/react-tagsinput.scss
+++ b/jsapp/scss/libs/react-tagsinput.scss
@@ -36,68 +36,7 @@
   cursor: pointer;
   color: colors.$kobo-white !important;
   opacity: 0.6;
-  margin-left: 3px;
-  vertical-align: middle;
-
-  &:hover {
-    opacity: 0.9;
-  }
-}
-
-.react-tagsinput-input {
-  background: transparent;
-  border: 0 none;
-  color: colors.$kobo-gray-40;
-  font-size: 13px;
-  font-weight: 400;
-  margin-bottom: 2px;
-  margin-top: 1px;
-  padding: 5px;
-  min-width: 90px;
-}
-
-.react-tags-save-button {
-  float: left;
-}
-@use 'scss/colors';
-
-.react-tagsinput {
-  &.react-tagsinput-invalid {
-    .react-tagsinput-input {
-      color: colors.$kobo-red;
-      border-bottom-color: colors.$kobo-red;
-    }
-  }
-
-  &.react-tagsinput-validating {
-    .react-tagsinput-input {
-      color: colors.$kobo-teal;
-      border-bottom-color: colors.$kobo-teal;
-    }
-  }
-}
-
-.react-tagsinput-tag {
-  background-color: colors.$kobo-gray-40;
-  color: colors.$kobo-white;
-  font-weight: 400;
-  margin-bottom: 4px;
-  margin-right: 4px;
-  padding: 4px 8px;
-  padding-right: 6px;
-  display: inline-block;
-  font-size: 13px;
-  border-radius: 2px;
-}
-
-/* a.k-tagsinput-remove */
-.react-tagsinput-remove {
-  @extend .k-icon, .k-icon-close;
-
-  cursor: pointer;
-  color: colors.$kobo-white !important;
-  opacity: 0.6;
-  margin-left: 3px;
+  margin-inline-start: 3px;
   vertical-align: middle;
 
   &:hover {
diff --git a/jsapp/scss/stylesheets/partials/_registration.scss b/jsapp/scss/stylesheets/partials/_registration.scss
index da90657e37..7219dbb6d5 100644
--- a/jsapp/scss/stylesheets/partials/_registration.scss
+++ b/jsapp/scss/stylesheets/partials/_registration.scss
@@ -454,7 +454,7 @@ form.registration--login > p > span.helptext{
       }
 
       .registration--logo {
-        text-align: left;
+        text-align: initial;
         margin: 0;
         margin-left: -5px;
         width: 48%;
diff --git a/jsapp/scss/stylesheets/partials/form_builder/_card_multichoice.scss b/jsapp/scss/stylesheets/partials/form_builder/_card_multichoice.scss
index 2843921033..36a8a52bf0 100644
--- a/jsapp/scss/stylesheets/partials/form_builder/_card_multichoice.scss
+++ b/jsapp/scss/stylesheets/partials/form_builder/_card_multichoice.scss
@@ -93,7 +93,7 @@
     padding: 2px;
     margin: 2px;
     width: 25%;
-    text-align: left;
+    text-align: initial;
     display: inline-block;
     margin-left: 2%;
     overflow: hidden;
diff --git a/jsapp/xlform/src/view.choices.coffee b/jsapp/xlform/src/view.choices.coffee
index 6ed2837596..a1e787676c 100644
--- a/jsapp/xlform/src/view.choices.coffee
+++ b/jsapp/xlform/src/view.choices.coffee
@@ -95,7 +95,7 @@ module.exports = do ->
     render: ->
       @t = $("<i class=\"k-icon k-icon-trash js-remove-option\">")
       @pw = $("<div class=\"editable-wrapper js-option-label-input js-cancel-select-row\">")
-      @p = $("<input placeholder=\"#{t("No value")}\" class=\"js-cancel-select-row option-view-input\"  data-cy=\"option\">")
+      @p = $("<input placeholder=\"#{t("No value")}\" class=\"js-cancel-select-row option-view-input\" dir=\"auto\" data-cy=\"option\">")
       @c = $("<code><input type=\"text\" class=\"js-option-name-input js-cancel-select-row\"></input></code>")
       @d = $('<div>')
       if @model
diff --git a/jsapp/xlform/src/view.row.templates.coffee b/jsapp/xlform/src/view.row.templates.coffee
index cb561d7c44..4985d5b053 100644
--- a/jsapp/xlform/src/view.row.templates.coffee
+++ b/jsapp/xlform/src/view.row.templates.coffee
@@ -106,9 +106,9 @@ module.exports = do ->
             <div class="noop card__indicator__icon"><i class="card__header-icon"></i></div>
           </div>
           <div class="card__text">
-            <input type="text" placeholder="#{t("Question label is required")}" class="card__header-title js-card-label js-cancel-select-row js-cancel-sort">
+            <input type="text" placeholder="#{t("Question label is required")}" class="card__header-title js-card-label js-cancel-select-row js-cancel-sort" dir="auto">
             <br />
-            <input type="text" placeholder="#{t("Question hint")}" class="card__header-hint js-card-hint js-cancel-select-row js-cancel-sort">
+            <input type="text" placeholder="#{t("Question hint")}" class="card__header-hint js-card-hint js-cancel-select-row js-cancel-sort" dir="auto">
           </div>
           <div class="card__buttons">
             <span class="card__buttons__button card__buttons__button--settings card__buttons__button--gray js-toggle-card-settings" data-button-name="settings"><i class="k-icon k-icon-settings"></i></span>
@@ -134,7 +134,7 @@ module.exports = do ->
           <i class="k-icon"></i>
         </div>
         <i class="group__caret js-toggle-group-expansion k-icon k-icon-caret-down"></i>
-        <input type="text" class="card__header-title js-card-label js-cancel-select-row js-cancel-sort">
+        <input type="text" class="card__header-title js-card-label js-cancel-select-row js-cancel-sort" dir="auto">
         <div class="card__buttons">
           <span class="card__buttons__button card__buttons__button--settings card__buttons__button--gray js-toggle-card-settings">
             <i class="k-icon k-icon-settings"></i>
@@ -163,7 +163,7 @@ module.exports = do ->
             <div class="noop card__indicator__icon"><i class="card__header-icon k-icon k-icon-matrix"></i></div>
           </div>
           <div class="card__text">
-            <input type="text" placeholder="#{t("Question label is required")}" class="card__header-title js-card-label js-cancel-select-row js-cancel-sort">
+            <input type="text" placeholder="#{t("Question label is required")}" class="card__header-title js-card-label js-cancel-select-row js-cancel-sort" dir="auto">
           </div>
           <div class="card__buttons">
             <span class="card__buttons__button card__buttons__button--settings card__buttons__button--gray js-toggle-card-settings" data-button-name="settings"><i class="k-icon k-icon-settings"></i></span>
diff --git a/jsapp/xlform/src/view.rowDetail.coffee b/jsapp/xlform/src/view.rowDetail.coffee
index bfb47b4acd..d51a126d49 100644
--- a/jsapp/xlform/src/view.rowDetail.coffee
+++ b/jsapp/xlform/src/view.rowDetail.coffee
@@ -115,7 +115,7 @@ module.exports = do ->
 
   viewRowDetail.Templates = {
     textbox: (cid, key, key_label = key, input_class = '') ->
-      @field """<input type="text" name="#{key}" id="#{cid}" class="#{input_class}" />""", cid, key_label
+      @field """<input type="text" name="#{key}" id="#{cid}" class="#{input_class}" dir="auto" />""", cid, key_label
 
     checkbox: (cid, key, key_label = key, input_label = t("Yes")) ->
       input_label = input_label
diff --git a/jsapp/xlform/src/view.rowSelector.templates.coffee b/jsapp/xlform/src/view.rowSelector.templates.coffee
index e49973589b..e0f5846379 100644
--- a/jsapp/xlform/src/view.rowSelector.templates.coffee
+++ b/jsapp/xlform/src/view.rowSelector.templates.coffee
@@ -10,7 +10,7 @@ module.exports = do ->
       """
           <div class="row__questiontypes row-fluid clearfix">
             #{closeRowSelectorButton}
-            <input type="text" value="#{name}" class="row__questiontypes__new-question-name js-cancel-sort" />
+            <input type="text" value="#{name}" class="row__questiontypes__new-question-name js-cancel-sort" dir="auto" />
             <div class="row__questiontypes__list clearfix"></div>
           </div>
       """
@@ -28,7 +28,7 @@ module.exports = do ->
       <div class="row__questiontypes row__questiontypes--namer">
         #{closeRowSelectorButton}
         <form class="row__questiontypes__form" action="javascript:void(0);" >
-          <input type="text" class="js-cancel-sort mdl-textfield__input" data-cy="textfield_input" />
+          <input type="text" class="js-cancel-sort mdl-textfield__input" data-cy="textfield_input" dir="auto" />
           <button class="kobo-button kobo-button--storm" data-cy="add_question" >+ #{t("Add Question")}</button>
         </form>
       </div>