diff --git a/jsapp/js/actions.es6 b/jsapp/js/actions.es6
index 6d88030108..570e0dce5a 100644
--- a/jsapp/js/actions.es6
+++ b/jsapp/js/actions.es6
@@ -341,6 +341,9 @@ actions.resources.updateAsset.listen(function(uid, values, params={}) {
     })
     .fail(function(resp){
       actions.resources.updateAsset.failed(resp);
+      if (params.onFailed) {
+        params.onFailed(resp);
+      }
     });
 });
 
diff --git a/jsapp/js/bem.es6 b/jsapp/js/bem.es6
index c093ae06d7..0943a9af22 100644
--- a/jsapp/js/bem.es6
+++ b/jsapp/js/bem.es6
@@ -134,7 +134,7 @@ bem.FormView__tab = bem.FormView.__('tab', '<a>');
 bem.FormView__label = bem.FormView.__('label');
 bem.FormView__group = bem.FormView.__('group');
 bem.FormView__item = bem.FormView.__('item');
-bem.FormView__button = bem.FormView.__('button', '<button>');
+bem.FormView__iconButton = bem.FormView.__('icon-button', '<button>');
 
 bem.FormView__row = bem.FormView.__('row');
 bem.FormView__cell = bem.FormView.__('cell');
diff --git a/jsapp/js/components/assetrow.es6 b/jsapp/js/components/assetrow.es6
index 1b5119f9be..e3f82c550d 100644
--- a/jsapp/js/components/assetrow.es6
+++ b/jsapp/js/components/assetrow.es6
@@ -206,7 +206,6 @@ class AssetRow extends React.Component {
                 <span className='date date--created'>{formatTime(this.props.date_created)}</span>
               </bem.AssetRow__cell>
             }
-
             {/* "date modified" column */}
             <bem.AssetRow__cell
               m={'date-modified'}
@@ -356,6 +355,15 @@ class AssetRow extends React.Component {
                   {t('Replace project')}
                 </bem.PopoverMenu__link>
               }
+              { userCanEdit &&
+                <bem.PopoverMenu__link
+                  data-action={'translations'}
+                  data-asset-uid={this.props.uid}
+                >
+                  <i className='k-icon-language' />
+                  {t('Manage translations')}
+                </bem.PopoverMenu__link>
+              }
               {this.props.downloads.map((dl)=>{
                 return (
                     <bem.PopoverMenu__link m={`dl-${dl.format}`} href={dl.url}
diff --git a/jsapp/js/components/formEditors.es6 b/jsapp/js/components/formEditors.es6
index fb5b6204f1..9e437e0be0 100644
--- a/jsapp/js/components/formEditors.es6
+++ b/jsapp/js/components/formEditors.es6
@@ -6,832 +6,26 @@ import autoBind from 'react-autobind';
 import Reflux from 'reflux';
 import alertify from 'alertifyjs';
 import editableFormMixin from '../editorMixins/editableForm';
-import Select from 'react-select';
-import Dropzone from 'react-dropzone';
 import moment from 'moment';
-import TextBox from './textBox';
-import ui from '../ui';
 import bem from '../bem';
 import DocumentTitle from 'react-document-title';
-import TextareaAutosize from 'react-autosize-textarea';
-import stores from '../stores';
-import {hashHistory} from 'react-router';
-import {DebounceInput} from 'react-debounce-input';
-
-import {session} from '../stores';
 import mixins from '../mixins';
-
-const newFormMixins = [
-    Reflux.ListenerMixin,
-    editableFormMixin
-];
-import TemplatesList from './formEditors/templatesList';
-
 import actions from '../actions';
 import {dataInterface} from '../dataInterface';
 import {
   t,
   redirectTo,
-  assign,
   formatTime,
-  validFileTypes,
-  isAValidUrl,
-  escapeHtml
 } from '../utils';
-
 import {
   update_states,
-  PROJECT_SETTINGS_CONTEXTS,
   ASSET_TYPES
 } from '../constants';
 
-var formViaUrlHelpLink = 'http://help.kobotoolbox.org/creating-forms/importing-an-xlsform-via-url';
-
-/*
-This is used for multiple different purposes:
-
-1. When creating new project
-2. When replacing project with new one
-3. When editing project in /settings
-4. When editing or creating asset in Form Builder
-
-Identifying the purpose is done by checking `context` and `formAsset`.
-
-You can listen to field changes by `onProjectDetailsChange` prop function.
-*/
-export class ProjectSettings extends React.Component {
-  constructor(props){
-    super(props);
-
-    this.STEPS = {
-      FORM_SOURCE: 'form-source',
-      CHOOSE_TEMPLATE: 'choose-template',
-      UPLOAD_FILE: 'upload-file',
-      IMPORT_URL: 'import-url',
-      PROJECT_DETAILS: 'project-details'
-    }
-
-    const formAsset = this.props.formAsset;
-
-    this.state = {
-      isSessionLoaded: !!session.currentAccount,
-      isSubmitPending: false,
-      formAsset: formAsset,
-      // project details
-      name: formAsset ? formAsset.name : '',
-      description: formAsset ? formAsset.settings.description : '',
-      sector: formAsset ? formAsset.settings.sector : null,
-      country: formAsset ? formAsset.settings.country : null,
-      'share-metadata': formAsset ? formAsset.settings['share-metadata'] : false,
-      // steps
-      currentStep: null,
-      previousStep: null,
-      // importing url
-      isImportFromURLPending: false,
-      importUrl: '',
-      importUrlButtonEnabled: false,
-      importUrlButton: t('Import'),
-      // template
-      isApplyTemplatePending: false,
-      applyTemplateButton: t('Next'),
-      chosenTemplateUid: null,
-      // upload files
-      isUploadFilePending: false
-    };
-
-    autoBind(this);
-  }
-
-  /*
-   * setup
-   */
-
-  componentDidMount() {
-    this.setInitialStep();
-    this.listenTo(session, (session) => {
-      this.setState({
-        isSessionLoaded: true,
-      });
-    });
-  }
-
-  setInitialStep() {
-    switch (this.props.context) {
-      case PROJECT_SETTINGS_CONTEXTS.NEW:
-      case PROJECT_SETTINGS_CONTEXTS.REPLACE:
-        return this.displayStep(this.STEPS.FORM_SOURCE);
-      case PROJECT_SETTINGS_CONTEXTS.EXISTING:
-      case PROJECT_SETTINGS_CONTEXTS.BUILDER:
-        return this.displayStep(this.STEPS.PROJECT_DETAILS);
-      default:
-        throw new Error(`Unknown context: ${this.props.context}!`);
-    }
-  }
-
-  getBaseTitle() {
-    switch (this.props.context) {
-      case PROJECT_SETTINGS_CONTEXTS.NEW:
-        return t('Create project');
-      case PROJECT_SETTINGS_CONTEXTS.REPLACE:
-        return t('Replace project');
-      case PROJECT_SETTINGS_CONTEXTS.EXISTING:
-      case PROJECT_SETTINGS_CONTEXTS.BUILDER:
-      default:
-        return t('Project settings');
-    }
-  }
-
-  getStepTitle(step) {
-    switch (step) {
-      case this.STEPS.FORM_SOURCE: return t('Choose a source');
-      case this.STEPS.CHOOSE_TEMPLATE: return t('Choose template');
-      case this.STEPS.UPLOAD_FILE: return t('Upload XLSForm');
-      case this.STEPS.IMPORT_URL: return t('Import XLSForm');
-      case this.STEPS.PROJECT_DETAILS: return t('Project details');
-      default: return '';
-    }
-  }
-
-  getFilenameFromURI(url) {
-    return decodeURIComponent(new URL(url).pathname.split('/').pop().split('.')[0]);
-  }
-
-  /*
-   * handling user input
-   */
-
-  onAnyDataChange(fieldName, fieldValue) {
-    if (typeof this.props.onProjectDetailsChange === 'function') {
-      this.props.onProjectDetailsChange({fieldName, fieldValue});
-    }
-  }
-
-  onNameChange(evt) {
-    this.setState({name: evt.target.value});
-    this.onAnyDataChange('name', evt.target.value);
-  }
-
-  onDescriptionChange(evt) {
-    this.setState({description: evt.target.value});
-    this.onAnyDataChange('description', evt.target.value);
-  }
-
-  onCountryChange(val) {
-    this.setState({country: val});
-    this.onAnyDataChange('country', val);
-  }
-
-  onSectorChange(val) {
-    this.setState({sector: val});
-    this.onAnyDataChange('sector', val);
-  }
-
-  onShareMetadataChange(evt) {
-    this.setState({'share-metadata': evt.target.checked});
-    this.onAnyDataChange('share-metadata', evt.target.checked);
-  }
-
-  onImportUrlChange(value) {
-    this.setState({
-      importUrl: value,
-      importUrlButtonEnabled: isAValidUrl(value),
-      importUrlButton: t('Import')
-    });
-  }
-
-  onTemplateChange(templateUid) {
-    this.setState({
-      chosenTemplateUid: templateUid
-    });
-  }
-
-  resetApplyTemplateButton() {
-    this.setState({
-      isApplyTemplatePending: false,
-      applyTemplateButton: t('Choose')
-    });
-  }
-
-  resetImportUrlButton() {
-    this.setState({
-      isImportFromURLPending: false,
-      importUrlButtonEnabled: false,
-      importUrlButton: t('Import'),
-    });
-  }
-
-  /*
-   * routes navigation
-   */
-
-  goToFormBuilder(assetUid) {
-    stores.pageState.hideModal();
-    hashHistory.push(`/forms/${assetUid}/edit`);
-  }
-
-  goToFormLanding() {
-    stores.pageState.hideModal();
-    hashHistory.push(`/forms/${this.state.formAsset.uid}/landing`);
-  }
-
-  /*
-   * modal steps navigation
-   */
-
-  displayStep(targetStep) {
-    const currentStep = this.state.currentStep;
-    const previousStep = this.state.previousStep;
-
-    if (targetStep === currentStep) {
-      return;
-    } else if (targetStep === previousStep) {
-      this.setState({
-        currentStep: previousStep,
-        previousStep: null
-      });
-    } else {
-      this.setState({
-        currentStep: targetStep,
-        previousStep: currentStep
-      });
-    }
-
-    if (this.props.onSetModalTitle) {
-      const stepTitle = this.getStepTitle(targetStep);
-      const baseTitle = this.getBaseTitle();
-      this.props.onSetModalTitle(`${baseTitle}: ${stepTitle}`);
-    }
-  }
-
-  displayPreviousStep() {
-    if (this.state.previousStep) {
-      this.displayStep(this.state.previousStep);
-    }
-  }
-
-  /*
-   * handling asset creation
-   */
-
-  getOrCreateFormAsset() {
-    const assetPromise = new Promise((resolve, reject) => {
-      if (this.state.formAsset) {
-        resolve(this.state.formAsset);
-      } else {
-        dataInterface.createResource({
-          name: 'Untitled',
-          asset_type: 'survey',
-          settings: JSON.stringify({
-            description: '',
-            sector: null,
-            country: null,
-            'share-metadata': false
-          })
-        }).done((asset) => {
-          resolve(asset);
-        }).fail(function(r){
-          reject(t('Error: asset could not be created.') + ` (code: ${r.statusText})`);
-        });
-      }
-    });
-    return assetPromise;
-  }
-
-  createAssetAndOpenInBuilder() {
-    dataInterface.createResource({
-      name: this.state.name,
-      settings: JSON.stringify({
-        description: this.state.description,
-        sector: this.state.sector,
-        country: this.state.country,
-        'share-metadata': this.state['share-metadata']
-      }),
-      asset_type: 'survey',
-    }).done((asset) => {
-      this.goToFormBuilder(asset.uid);
-    }).fail(function(r){
-      alertify.error(t('Error: new project could not be created.') + ` (code: ${r.statusText})`);
-    });
-  }
-
-  updateAndOpenAsset() {
-    actions.resources.updateAsset(
-      this.state.formAsset.uid,
-      {
-        name: this.state.name,
-        settings: JSON.stringify({
-          description: this.state.description,
-          sector: this.state.sector,
-          country: this.state.country,
-          'share-metadata': this.state['share-metadata']
-        }),
-      }, {
-        onComplete: () => {
-          // no need to open asset from within asset's settings view
-          if (this.props.context !== PROJECT_SETTINGS_CONTEXTS.EXISTING) {
-            this.goToFormLanding();
-          }
-        }
-      }
-    );
-  }
-
-  applyTemplate(evt) {
-    evt.preventDefault();
-
-    this.setState({
-      isApplyTemplatePending: true,
-      applyTemplateButton: t('Please wait…')
-    });
-
-    actions.resources.cloneAsset({
-      uid: this.state.chosenTemplateUid,
-      new_asset_type: 'survey'
-    }, {
-      onComplete: (asset) => {
-        if (this.props.context === PROJECT_SETTINGS_CONTEXTS.REPLACE) {
-          // when replacing, we omit PROJECT_DETAILS step
-          this.handleReplaceDone();
-        } else {
-          this.setState({
-            formAsset: asset,
-            name: asset.name,
-            description: asset.settings.description,
-            sector: asset.settings.sector,
-            country: asset.settings.country,
-            'share-metadata': asset.settings['share-metadata'] || false,
-          });
-          this.resetApplyTemplateButton();
-          this.displayStep(this.STEPS.PROJECT_DETAILS);
-        }
-      },
-      onFailed: (asset) => {
-        this.resetApplyTemplateButton();
-        alertify.error(t('Could not create project!'));
-      }
-    });
-  }
-
-  importFromURL(evt) {
-    evt.preventDefault();
-
-    if (isAValidUrl(this.state.importUrl)) {
-      this.setState({
-        isImportFromURLPending: true,
-        importUrlButtonEnabled: false,
-        importUrlButton: t('Retrieving form, please wait...')
-      });
-
-      this.getOrCreateFormAsset().then(
-        (asset) => {
-          this.setState({formAsset: asset});
-          const importUrl = this.state.importUrl;
-
-          this.applyUrlToAsset(importUrl, asset).then(
-            (data) => {
-              dataInterface.getAsset({id: data.uid}).done((finalAsset) => {
-                if (this.props.context === PROJECT_SETTINGS_CONTEXTS.REPLACE) {
-                  // when replacing, we omit PROJECT_DETAILS step
-                  this.handleReplaceDone();
-                } else {
-                  this.setState({
-                    formAsset: finalAsset,
-                    // try proposing something more meaningful than "Untitled"
-                    name: this.getFilenameFromURI(importUrl),
-                    description: finalAsset.settings.description,
-                    sector: finalAsset.settings.sector,
-                    country: finalAsset.settings.country,
-                    'share-metadata': finalAsset.settings['share-metadata'],
-                    isImportFromURLPending: false
-                  });
-                  this.displayStep(this.STEPS.PROJECT_DETAILS);
-                }
-              }).fail(() => {
-                this.resetImportUrlButton();
-                alertify.error(t('Failed to reload project after import!'));
-              });
-            },
-            (response) => {
-              this.resetImportUrlButton();
-              const errLines = [];
-              errLines.push(t('Import Failed!'));
-              if (importUrl) {
-                errLines.push(`<code>Name: ${this.getFilenameFromURI(importUrl)}</code>`);
-              }
-              if (response.messages.error) {
-                errLines.push(`<code>${response.messages.error_type}: ${escapeHtml(response.messages.error)}</code>`);
-              }
-              alertify.error(errLines.join('<br/>'));
-            }
-          );
-        },
-        () => {
-          alertify.error(t('Could not initialize XLSForm import!'));
-        }
-      );
-    }
-  }
-
-  onFileDrop(files, rejectedFiles, evt) {
-    if (files.length >= 1) {
-      this.setState({isUploadFilePending: true});
-
-      this.getOrCreateFormAsset().then(
-        (asset) => {
-          this.applyFileToAsset(files[0], asset).then(
-            (data) => {
-              dataInterface.getAsset({id: data.uid}).done((finalAsset) => {
-                if (this.props.context === PROJECT_SETTINGS_CONTEXTS.REPLACE) {
-                  // when replacing, we omit PROJECT_DETAILS step
-                  this.handleReplaceDone();
-                } else {
-                  // try proposing something more meaningful than "Untitled"
-                  const newName = files[0].name.split('.')[0];
-                  this.setState({
-                    formAsset: finalAsset,
-                    name: newName,
-                    description: finalAsset.settings.description,
-                    sector: finalAsset.settings.sector,
-                    country: finalAsset.settings.country,
-                    'share-metadata': finalAsset.settings['share-metadata'],
-                    isUploadFilePending: false
-                  });
-                  this.displayStep(this.STEPS.PROJECT_DETAILS);
-                }
-              }).fail(() => {
-                this.setState({isUploadFilePending: false});
-                alertify.error(t('Failed to reload project after upload!'));
-              });
-            },
-            (response) => {
-              const errLines = [];
-              errLines.push(t('Import Failed!'));
-              if (files[0].name) {
-                errLines.push(`<code>Name: ${files[0].name}</code>`);
-              }
-              if (response.messages.error) {
-                errLines.push(`<code>${response.messages.error_type}: ${escapeHtml(response.messages.error)}</code>`);
-              }
-              alertify.error(errLines.join('<br/>'));
-            }
-          );
-        },
-        () => {
-          this.setState({isUploadFilePending: false});
-          alertify.error(t('Could not import XLSForm!'))
-        }
-      );
-    }
-  }
-
-  handleReplaceDone() {
-    this.updateAndOpenAsset();
-  }
-
-  handleSubmit(evt) {
-    evt.preventDefault();
-
-    // simple non-empty name validation
-    if (!this.state.name.trim()) {
-      alertify.error(t('Please enter a title for your project!'));
-      return
-    }
-
-    this.setState({isSubmitPending: true});
-
-    if (this.state.formAsset) {
-      this.updateAndOpenAsset();
-    } else {
-      this.createAssetAndOpenInBuilder();
-    }
-  }
-
-  /*
-   * rendering
-   */
-
-  renderStepFormSource() {
-    return (
-      <bem.FormModal__form className='project-settings project-settings--form-source'>
-        {this.props.context !== PROJECT_SETTINGS_CONTEXTS.REPLACE &&
-          <bem.Modal__subheader>
-            {t('Choose one of the options below to continue. You will be prompted to enter name and other details in further steps.')}
-          </bem.Modal__subheader>
-        }
-
-        <bem.FormModal__item m='form-source-buttons'>
-          {this.props.context === PROJECT_SETTINGS_CONTEXTS.NEW &&
-            <button onClick={this.displayStep.bind(this, this.STEPS.PROJECT_DETAILS)}>
-              <i className='k-icon-edit' />
-              {t('Build from scratch')}
-            </button>
-          }
-
-          {this.props.context !== PROJECT_SETTINGS_CONTEXTS.REPLACE &&
-            <button onClick={this.displayStep.bind(this, this.STEPS.CHOOSE_TEMPLATE)}>
-              <i className='k-icon-template' />
-              {t('Use a template')}
-            </button>
-          }
-
-          <button onClick={this.displayStep.bind(this, this.STEPS.UPLOAD_FILE)}>
-            <i className='k-icon-upload' />
-            {t('Upload an XLSForm')}
-          </button>
-
-          <button onClick={this.displayStep.bind(this, this.STEPS.IMPORT_URL)}>
-            <i className='k-icon-link' />
-            {t('Import an XLSForm via URL')}
-          </button>
-        </bem.FormModal__item>
-      </bem.FormModal__form>
-    );
-  }
-
-  renderStepChooseTemplate() {
-    return (
-      <bem.FormModal__form className='project-settings project-settings--choose-template'>
-        <TemplatesList onSelectTemplate={this.onTemplateChange}/>
-
-        <bem.Modal__footer>
-          {this.renderBackButton()}
-
-          <bem.Modal__footerButton
-            m='primary'
-            type='submit'
-            onClick={this.applyTemplate}
-            disabled={!this.state.chosenTemplateUid || this.state.isApplyTemplatePending}
-            className='mdl-js-button'
-          >
-            {this.state.applyTemplateButton}
-          </bem.Modal__footerButton>
-        </bem.Modal__footer>
-      </bem.FormModal__form>
-    );
-  }
-
-  renderStepUploadFile() {
-    return (
-      <bem.FormModal__form className='project-settings project-settings--upload-file'>
-        <bem.Modal__subheader>
-          {t('Import an XLSForm from your computer.')}
-        </bem.Modal__subheader>
-
-        {!this.state.isUploadFilePending &&
-          <Dropzone
-            onDrop={this.onFileDrop.bind(this)}
-            multiple={false}
-            className='dropzone'
-            activeClassName='dropzone-active'
-            rejectClassName='dropzone-reject'
-            accept={validFileTypes()}
-          >
-            <i className='k-icon-xls-file' />
-            {t(' Drag and drop the XLSForm file here or click to browse')}
-          </Dropzone>
-        }
-        {this.state.isUploadFilePending &&
-          <div className='dropzone'>
-            {this.renderLoading(t('Uploading file…'))}
-          </div>
-        }
-
-        <bem.Modal__footer>
-          {this.renderBackButton()}
-        </bem.Modal__footer>
-      </bem.FormModal__form>
-    );
-  }
-
-  renderStepImportUrl() {
-    return (
-      <bem.FormModal__form className='project-settings project-settings--import-url'>
-        <div className='intro'>
-          {t('Enter a valid XLSForm URL in the field below.')}<br/>
-          <a href={formViaUrlHelpLink} target='_blank'>
-            {t('Having issues? See this help article.')}
-          </a>
-        </div>
-
-        <bem.FormModal__item>
-          <TextBox
-            type='url'
-            label={t('URL')}
-            placeholder='https://'
-            value={this.state.importUrl}
-            onChange={this.onImportUrlChange}
-          />
-        </bem.FormModal__item>
-
-        <bem.Modal__footer>
-          {this.renderBackButton()}
-
-          <bem.Modal__footerButton
-            m='primary'
-            type='submit'
-            onClick={this.importFromURL}
-            disabled={!this.state.importUrlButtonEnabled}
-            className='mdl-js-button'
-          >
-            {this.state.importUrlButton}
-          </bem.Modal__footerButton>
-        </bem.Modal__footer>
-      </bem.FormModal__form>
-    );
-  }
-
-  renderStepProjectDetails() {
-    const sectors = session.currentAccount.available_sectors;
-    const countries = session.currentAccount.available_countries;
-
-    return (
-      <bem.FormModal__form
-        onSubmit={this.handleSubmit}
-        onChange={this.onProjectDetailsFormChange}
-        className={[
-          'project-settings',
-          'project-settings--project-details',
-          this.props.context === PROJECT_SETTINGS_CONTEXTS.BUILDER ? 'project-settings--narrow' : null
-        ].join(' ')}
-      >
-        {this.props.context === PROJECT_SETTINGS_CONTEXTS.EXISTING &&
-          <bem.Modal__footer>
-            <bem.Modal__footerButton
-              m='primary'
-              onClick={this.handleSubmit}
-              className='mdl-js-button'
-            >
-              {t('Save Changes')}
-            </bem.Modal__footerButton>
-          </bem.Modal__footer>
-        }
-
-        <bem.FormModal__item m='wrapper'>
-          {/* form builder displays name in different place */}
-          {this.props.context !== PROJECT_SETTINGS_CONTEXTS.BUILDER &&
-            <bem.FormModal__item>
-              <label htmlFor='name'>
-                {t('Project Name')}
-              </label>
-              <input type='text'
-                id='name'
-                placeholder={t('Enter title of project here')}
-                value={this.state.name}
-                onChange={this.onNameChange}
-              />
-            </bem.FormModal__item>
-          }
-
-          <bem.FormModal__item>
-            <label htmlFor='description'>
-              {t('Description')}
-            </label>
-            <TextareaAutosize
-              onChange={this.onDescriptionChange}
-              value={this.state.description}
-              placeholder={t('Enter short description here')}
-            />
-          </bem.FormModal__item>
-
-          <bem.FormModal__item>
-            <label className='long'>
-              {t('Please specify the country and the sector where this project will be deployed. ')}
-              {/*t('This information will be used to help you filter results on the project list page.')*/}
-            </label>
-          </bem.FormModal__item>
-
-          <bem.FormModal__item m='sector'>
-            <label htmlFor='sector'>
-              {t('Sector')}
-            </label>
-            <Select
-              id='sector'
-              value={this.state.sector}
-              onChange={this.onSectorChange}
-              options={sectors}
-              className='kobo-select'
-              classNamePrefix='kobo-select'
-              menuPlacement='auto'
-            />
-          </bem.FormModal__item>
-
-          <bem.FormModal__item  m='country'>
-            <label htmlFor='country'>
-              {t('Country')}
-            </label>
-            <Select
-              id='country'
-              value={this.state.country}
-              onChange={this.onCountryChange}
-              options={countries}
-              className='kobo-select'
-              classNamePrefix='kobo-select'
-              menuPlacement='auto'
-            />
-          </bem.FormModal__item>
-
-          <bem.FormModal__item m='metadata-share'>
-            <input
-              type='checkbox'
-              id='share-metadata'
-              checked={this.state['share-metadata']}
-              onChange={this.onShareMetadataChange}
-            />
-            <label htmlFor='share-metadata'>
-              {t('Help KoboToolbox improve this product by sharing the sector and country where this project will be deployed.')}
-              &nbsp;
-              {t('All the information is submitted anonymously, and will not include the project name or description listed above.')}
-            </label>
-          </bem.FormModal__item>
-
-          {(this.props.context === PROJECT_SETTINGS_CONTEXTS.NEW || this.props.context === PROJECT_SETTINGS_CONTEXTS.REPLACE) &&
-            <bem.Modal__footer>
-              {/* Don't allow going back if asset already exist */}
-              {!this.state.formAsset &&
-                this.renderBackButton()
-              }
-
-              <bem.Modal__footerButton
-                m='primary'
-                type='submit'
-                onClick={this.handleSubmit}
-                className='mdl-js-button'
-                disabled={this.state.isSubmitPending}
-              >
-                {this.state.isSubmitPending && t('Please wait…')}
-                {!this.state.isSubmitPending && this.props.context === PROJECT_SETTINGS_CONTEXTS.NEW && t('Create project')}
-                {!this.state.isSubmitPending && this.props.context === PROJECT_SETTINGS_CONTEXTS.REPLACE && t('Save')}
-              </bem.Modal__footerButton>
-            </bem.Modal__footer>
-          }
-
-          {this.props.context === PROJECT_SETTINGS_CONTEXTS.EXISTING && this.props.iframeUrl &&
-            <bem.FormView__cell m='iframe'>
-              <iframe src={this.props.iframeUrl} />
-            </bem.FormView__cell>
-          }
-        </bem.FormModal__item>
-      </bem.FormModal__form>
-    );
-  }
-
-  renderBackButton() {
-    if (this.state.previousStep) {
-      const isBackButtonDisabled = (
-        this.state.isSubmitPending ||
-        this.state.isApplyTemplatePending ||
-        this.state.isImportFromURLPending ||
-        this.state.isUploadFilePending
-      )
-      return (
-        <bem.Modal__footerButton
-          m='back'
-          type='button'
-          onClick={this.displayPreviousStep}
-          disabled={isBackButtonDisabled}
-        >
-          {t('Back')}
-        </bem.Modal__footerButton>
-      )
-    } else {
-      return false;
-    }
-  }
-
-  renderLoading(message = t('loading…')) {
-    return (
-      <bem.Loading>
-        <bem.Loading__inner>
-          <i />
-          {message}
-        </bem.Loading__inner>
-      </bem.Loading>
-    );
-  }
-
-  render() {
-    if (!this.state.isSessionLoaded || !this.state.currentStep) {
-      return this.renderLoading();
-    }
-
-    switch (this.state.currentStep) {
-      case this.STEPS.FORM_SOURCE: return this.renderStepFormSource();
-      case this.STEPS.CHOOSE_TEMPLATE: return this.renderStepChooseTemplate();
-      case this.STEPS.UPLOAD_FILE: return this.renderStepUploadFile();
-      case this.STEPS.IMPORT_URL: return this.renderStepImportUrl();
-      case this.STEPS.PROJECT_DETAILS: return this.renderStepProjectDetails();
-      default:
-        throw new Error(`Unknown step: ${this.state.currentStep}!`);
-    }
-  }
-};
-
-reactMixin(ProjectSettings.prototype, Reflux.ListenerMixin);
-reactMixin(ProjectSettings.prototype, mixins.droppable);
-
-ProjectSettings.contextTypes = {
-  router: PropTypes.object
-};
+const newFormMixins = [
+    Reflux.ListenerMixin,
+    editableFormMixin
+];
 
 export class ProjectDownloads extends React.Component {
   constructor(props){
diff --git a/jsapp/js/components/formLanding.es6 b/jsapp/js/components/formLanding.es6
index 3908f038e6..1bc52d040f 100644
--- a/jsapp/js/components/formLanding.es6
+++ b/jsapp/js/components/formLanding.es6
@@ -30,17 +30,10 @@ export class FormLanding extends React.Component {
   constructor(props){
     super(props);
     this.state = {
-      questionLanguageIndex: 0,
       selectedCollectMethod: 'offline_url'
     };
     autoBind(this);
   }
-  componentWillReceiveProps() {
-    this.setState({
-        questionLanguageIndex: 0
-      }
-    );
-  }
   enketoPreviewModal (evt) {
     evt.preventDefault();
     stores.pageState.showModal({
@@ -48,9 +41,7 @@ export class FormLanding extends React.Component {
       assetid: this.state.uid
     });
   }
-  renderFormInfo () {
-    const userCanEdit = this.userCan('change_asset', this.state);
-
+  renderFormInfo (userCanEdit) {
     var dvcount = this.state.deployed_versions.count;
     var undeployedVersion = undefined;
 
@@ -104,32 +95,7 @@ export class FormLanding extends React.Component {
         </bem.FormView__cell>
       );
   }
-  // renderFormLanguages () {
-  //   return (
-  //     <bem.FormView__cell m={['padding', 'bordertop', 'languages']}>
-  //       {t('Languages')}
-  //       {this.state.summary.languages.map((l, i)=>{
-  //         return (
-  //             <bem.FormView__cell key={`lang-${i}`} m='langButton'
-  //               className={this.state.questionLanguageIndex == i ? 'active' : ''}
-  //               onClick={this.updateQuestionListLanguage}
-  //               data-index={i}>
-  //               {l}
-  //             </bem.FormView__cell>
-  //           );
-  //       })}
-
-  //     </bem.FormView__cell>
-  //   );
-  // }
-  updateQuestionListLanguage (evt) {
-    let i = evt.currentTarget.dataset.index;
-    this.setState({
-        questionLanguageIndex: i
-      }
-    );
-  }
-  sharingModal (evt) {
+  showSharingModal (evt) {
     evt.preventDefault();
     stores.pageState.showModal({
       type: MODAL_TYPES.SHARING,
@@ -143,6 +109,13 @@ export class FormLanding extends React.Component {
       asset: this.state
     });
   }
+  showLanguagesModal (evt) {
+    evt.preventDefault();
+    stores.pageState.showModal({
+      type: MODAL_TYPES.FORM_LANGUAGES,
+      asset: this.state
+    });
+  }
   renderHistory () {
     var dvcount = this.state.deployed_versions.count;
     return (
@@ -337,8 +310,8 @@ export class FormLanding extends React.Component {
   setCollectMethod(evt) {
     this.setState({selectedCollectMethod: evt.currentTarget.dataset.method});
   }
-  renderButtons () {
-    const userCanEdit = this.userCan('change_asset', this.state);
+  renderButtons (userCanEdit) {
+    let translations = this.state.content.translations;
     var downloadable = false;
     var downloads = [];
     if (this.state.downloads) {
@@ -400,7 +373,7 @@ export class FormLanding extends React.Component {
           </bem.PopoverMenu__link>
 
           {userCanEdit &&
-            <bem.PopoverMenu__link onClick={this.sharingModal}>
+            <bem.PopoverMenu__link onClick={this.showSharingModal}>
               <i className='k-icon-share'/>
               {t('Share this project')}
             </bem.PopoverMenu__link>
@@ -419,12 +392,53 @@ export class FormLanding extends React.Component {
             <i className='k-icon-template'/>
             {t('Create template')}
           </bem.PopoverMenu__link>
+
+          {userCanEdit && this.state.content.survey.length > 0 &&
+            <bem.PopoverMenu__link onClick={this.showLanguagesModal}>
+              <i className='k-icon-language'/>
+              {t('Manage Translations')}
+            </bem.PopoverMenu__link>
+          }
         </ui.PopoverMenu>
       </bem.FormView__group>
     );
   }
+  renderLanguages (canEdit) {
+    let translations = this.state.content.translations;
+    if (!translations || translations.length < 2)
+      return false;
+
+    return (
+      <bem.FormView__cell m={['columns', 'padding', 'bordertop']}>
+        <bem.FormView__cell m='translation-list'>
+          <strong>{t('Languages:')}</strong>
+          &nbsp;
+          <ul>
+            {translations.map((langString, n)=>{
+              return (
+                <li key={n}>
+                  {langString || t('Unnamed language')}
+                </li>
+              );
+            })}
+          </ul>
+        </bem.FormView__cell>
+
+        {canEdit &&
+          <bem.FormView__cell>
+            <bem.FormView__link
+              data-tip={t('Manage Translations')}
+              onClick={this.showLanguagesModal}>
+              <i className='k-icon-language' />
+            </bem.FormView__link>
+          </bem.FormView__cell>
+        }
+      </bem.FormView__cell>
+    );
+  }
   render () {
     var docTitle = this.state.name || t('Untitled');
+    const userCanEdit = this.userCan('change_asset', this.state);
 
     if (this.state.uid == undefined) {
       return (
@@ -450,21 +464,19 @@ export class FormLanding extends React.Component {
                     t('Draft version')}
               </bem.FormView__cell>
               <bem.FormView__cell>
-                {this.renderButtons()}
+                {this.renderButtons(userCanEdit)}
               </bem.FormView__cell>
             </bem.FormView__cell>
             <bem.FormView__cell m='box'>
-              {this.userCan('change_asset', this.state) && this.state.deployed_versions.count > 0 &&
+              {userCanEdit && this.state.deployed_versions.count > 0 &&
                 this.state.deployed_version_id != this.state.version_id && this.state.deployment__active &&
                 <bem.FormView__cell m='warning'>
                   <i className='k-icon-alert' />
                   {t('If you want to make these changes public, you must deploy this form.')}
                 </bem.FormView__cell>
               }
-              {this.renderFormInfo()}
-              {/*this.state.summary && this.state.summary.languages && this.state.summary.languages[0] != null &&
-                this.renderFormLanguages() */
-              }
+              {this.renderFormInfo(userCanEdit)}
+              {this.renderLanguages(userCanEdit)}
             </bem.FormView__cell>
           </bem.FormView__row>
           {this.state.deployed_versions.count > 0 &&
diff --git a/jsapp/js/components/formSubScreens.es6 b/jsapp/js/components/formSubScreens.es6
index df345113b3..b46886d9db 100644
--- a/jsapp/js/components/formSubScreens.es6
+++ b/jsapp/js/components/formSubScreens.es6
@@ -4,8 +4,8 @@ import reactMixin from 'react-mixin';
 import autoBind from 'react-autobind';
 import Reflux from 'reflux';
 import _ from 'underscore';
-import {dataInterface} from '../dataInterface';
 
+import {dataInterface} from '../dataInterface';
 import actions from '../actions';
 import bem from '../bem';
 import stores from '../stores';
@@ -13,13 +13,11 @@ import Select from 'react-select';
 import ui from '../ui';
 import mixins from '../mixins';
 import DocumentTitle from 'react-document-title';
-import SharingForm from '../components/sharingForm';
+import SharingForm from '../components/modalForms/sharingForm';
+import ProjectSettings from '../components/modalForms/projectSettings';
 import DataTable from '../components/table';
 
-import {
-  ProjectSettings,
-  ProjectDownloads
-} from '../components/formEditors';
+import {ProjectDownloads} from '../components/formEditors';
 
 import {PROJECT_SETTINGS_CONTEXTS} from '../constants';
 
diff --git a/jsapp/js/components/modal.es6 b/jsapp/js/components/modal.es6
index d910727153..010c8548bc 100644
--- a/jsapp/js/components/modal.es6
+++ b/jsapp/js/components/modal.es6
@@ -2,29 +2,28 @@ import React from 'react';
 import reactMixin from 'react-mixin';
 import autoBind from 'react-autobind';
 import Reflux from 'reflux';
+import {hashHistory} from 'react-router';
+
 import {dataInterface} from '../dataInterface';
 import actions from '../actions';
 import bem from '../bem';
 import ui from '../ui';
 import stores from '../stores';
 import mixins from '../mixins';
-import {hashHistory} from 'react-router';
 
-import {
-  t,
-  assign,
-  notify
-} from '../utils';
+import {t, notify} from '../utils';
 
 import {
   PROJECT_SETTINGS_CONTEXTS,
   MODAL_TYPES
 } from '../constants';
 
-import {ProjectSettings} from '../components/formEditors';
-import SharingForm from '../components/sharingForm';
-import Submission from '../components/submission';
-import TableColumnFilter from '../components/tableColumnFilter';
+import ProjectSettings from '../components/modalForms/projectSettings';
+import SharingForm from '../components/modalForms/sharingForm';
+import Submission from '../components/modalForms/submission';
+import TableColumnFilter from '../components/modalForms/tableColumnFilter';
+import TranslationSettings from '../components/modalForms/translationSettings';
+import TranslationTable from '../components/modalForms/translationTable';
 
 class Modal extends React.Component {
   constructor(props) {
@@ -86,6 +85,17 @@ class Modal extends React.Component {
         this.setModalTitle(t('Table display options'));
         break;
 
+      case MODAL_TYPES.FORM_LANGUAGES:
+        this.setModalTitle(t('Manage languages'));
+        break;
+
+      case MODAL_TYPES.FORM_TRANSLATIONS_TABLE:
+        this.setState({
+          title: t('Translations table'),
+          modalClass: 'modal--large'
+        });
+        break;
+
       default:
         console.error(`Unknown modal type: "${type}"!`);
     }
@@ -213,10 +223,18 @@ class Modal extends React.Component {
                                  getColumnLabel={this.props.params.getColumnLabel}
                                  overrideLabelsAndGroups={this.props.params.overrideLabelsAndGroups} />
             }
-
-          </ui.Modal.Body>
-        </ui.Modal>
-      )
+            { this.props.params.type == MODAL_TYPES.FORM_LANGUAGES &&
+              <TranslationSettings
+                asset={this.props.params.asset}
+                assetUid={this.props.params.assetUid}
+              />
+            }
+            { this.props.params.type == MODAL_TYPES.FORM_TRANSLATIONS_TABLE &&
+              <TranslationTable asset={this.props.params.asset} langIndex={this.props.params.langIndex} />
+            }
+        </ui.Modal.Body>
+      </ui.Modal>
+    )
   }
 };
 
diff --git a/jsapp/js/components/sharingForm/copyTeamPermissions.es6 b/jsapp/js/components/modalForms/copyTeamPermissions.es6
similarity index 100%
rename from jsapp/js/components/sharingForm/copyTeamPermissions.es6
rename to jsapp/js/components/modalForms/copyTeamPermissions.es6
diff --git a/jsapp/js/components/modalForms/projectSettings.es6 b/jsapp/js/components/modalForms/projectSettings.es6
new file mode 100644
index 0000000000..944e588dac
--- /dev/null
+++ b/jsapp/js/components/modalForms/projectSettings.es6
@@ -0,0 +1,814 @@
+import $ from 'jquery';
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactMixin from 'react-mixin';
+import autoBind from 'react-autobind';
+import Reflux from 'reflux';
+import alertify from 'alertifyjs';
+import Select from 'react-select';
+import Dropzone from 'react-dropzone';
+import TextBox from 'js/components/textBox';
+import bem from 'js/bem';
+import TextareaAutosize from 'react-autosize-textarea';
+import stores from 'js/stores';
+import {session} from 'js/stores';
+import {hashHistory} from 'react-router';
+import mixins from 'js/mixins';
+import TemplatesList from 'js/components/templatesList';
+import actions from 'js/actions';
+import {dataInterface} from 'js/dataInterface';
+import {
+  t,
+  validFileTypes,
+  isAValidUrl,
+  escapeHtml
+} from 'js/utils';
+import {PROJECT_SETTINGS_CONTEXTS} from 'js/constants';
+
+const formViaUrlHelpLink = 'http://help.kobotoolbox.org/creating-forms/importing-an-xlsform-via-url';
+
+/*
+This is used for multiple different purposes:
+
+1. When creating new project
+2. When replacing project with new one
+3. When editing project in /settings
+4. When editing or creating asset in Form Builder
+
+Identifying the purpose is done by checking `context` and `formAsset`.
+
+You can listen to field changes by `onProjectDetailsChange` prop function.
+*/
+export class ProjectSettings extends React.Component {
+  constructor(props){
+    super(props);
+
+    this.STEPS = {
+      FORM_SOURCE: 'form-source',
+      CHOOSE_TEMPLATE: 'choose-template',
+      UPLOAD_FILE: 'upload-file',
+      IMPORT_URL: 'import-url',
+      PROJECT_DETAILS: 'project-details'
+    }
+
+    const formAsset = this.props.formAsset;
+
+    this.state = {
+      isSessionLoaded: !!session.currentAccount,
+      isSubmitPending: false,
+      formAsset: formAsset,
+      // project details
+      name: formAsset ? formAsset.name : '',
+      description: formAsset ? formAsset.settings.description : '',
+      sector: formAsset ? formAsset.settings.sector : null,
+      country: formAsset ? formAsset.settings.country : null,
+      'share-metadata': formAsset ? formAsset.settings['share-metadata'] : false,
+      // steps
+      currentStep: null,
+      previousStep: null,
+      // importing url
+      isImportFromURLPending: false,
+      importUrl: '',
+      importUrlButtonEnabled: false,
+      importUrlButton: t('Import'),
+      // template
+      isApplyTemplatePending: false,
+      applyTemplateButton: t('Next'),
+      chosenTemplateUid: null,
+      // upload files
+      isUploadFilePending: false
+    };
+
+    autoBind(this);
+  }
+
+  /*
+   * setup
+   */
+
+  componentDidMount() {
+    this.setInitialStep();
+    this.listenTo(session, (session) => {
+      this.setState({
+        isSessionLoaded: true,
+      });
+    });
+  }
+
+  setInitialStep() {
+    switch (this.props.context) {
+      case PROJECT_SETTINGS_CONTEXTS.NEW:
+      case PROJECT_SETTINGS_CONTEXTS.REPLACE:
+        return this.displayStep(this.STEPS.FORM_SOURCE);
+      case PROJECT_SETTINGS_CONTEXTS.EXISTING:
+      case PROJECT_SETTINGS_CONTEXTS.BUILDER:
+        return this.displayStep(this.STEPS.PROJECT_DETAILS);
+      default:
+        throw new Error(`Unknown context: ${this.props.context}!`);
+    }
+  }
+
+  getBaseTitle() {
+    switch (this.props.context) {
+      case PROJECT_SETTINGS_CONTEXTS.NEW:
+        return t('Create project');
+      case PROJECT_SETTINGS_CONTEXTS.REPLACE:
+        return t('Replace project');
+      case PROJECT_SETTINGS_CONTEXTS.EXISTING:
+      case PROJECT_SETTINGS_CONTEXTS.BUILDER:
+      default:
+        return t('Project settings');
+    }
+  }
+
+  getStepTitle(step) {
+    switch (step) {
+      case this.STEPS.FORM_SOURCE: return t('Choose a source');
+      case this.STEPS.CHOOSE_TEMPLATE: return t('Choose template');
+      case this.STEPS.UPLOAD_FILE: return t('Upload XLSForm');
+      case this.STEPS.IMPORT_URL: return t('Import XLSForm');
+      case this.STEPS.PROJECT_DETAILS: return t('Project details');
+      default: return '';
+    }
+  }
+
+  getFilenameFromURI(url) {
+    return decodeURIComponent(new URL(url).pathname.split('/').pop().split('.')[0]);
+  }
+
+  /*
+   * handling user input
+   */
+
+  onAnyDataChange(fieldName, fieldValue) {
+    if (typeof this.props.onProjectDetailsChange === 'function') {
+      this.props.onProjectDetailsChange({fieldName, fieldValue});
+    }
+  }
+
+  onNameChange(evt) {
+    this.setState({name: evt.target.value});
+    this.onAnyDataChange('name', evt.target.value);
+  }
+
+  onDescriptionChange(evt) {
+    this.setState({description: evt.target.value});
+    this.onAnyDataChange('description', evt.target.value);
+  }
+
+  onCountryChange(val) {
+    this.setState({country: val});
+    this.onAnyDataChange('country', val);
+  }
+
+  onSectorChange(val) {
+    this.setState({sector: val});
+    this.onAnyDataChange('sector', val);
+  }
+
+  onShareMetadataChange(evt) {
+    this.setState({'share-metadata': evt.target.checked});
+    this.onAnyDataChange('share-metadata', evt.target.checked);
+  }
+
+  onImportUrlChange(value) {
+    this.setState({
+      importUrl: value,
+      importUrlButtonEnabled: isAValidUrl(value),
+      importUrlButton: t('Import')
+    });
+  }
+
+  onTemplateChange(templateUid) {
+    this.setState({
+      chosenTemplateUid: templateUid
+    });
+  }
+
+  resetApplyTemplateButton() {
+    this.setState({
+      isApplyTemplatePending: false,
+      applyTemplateButton: t('Choose')
+    });
+  }
+
+  resetImportUrlButton() {
+    this.setState({
+      isImportFromURLPending: false,
+      importUrlButtonEnabled: false,
+      importUrlButton: t('Import'),
+    });
+  }
+
+  /*
+   * routes navigation
+   */
+
+  goToFormBuilder(assetUid) {
+    stores.pageState.hideModal();
+    hashHistory.push(`/forms/${assetUid}/edit`);
+  }
+
+  goToFormLanding() {
+    stores.pageState.hideModal();
+    hashHistory.push(`/forms/${this.state.formAsset.uid}/landing`);
+  }
+
+  /*
+   * modal steps navigation
+   */
+
+  displayStep(targetStep) {
+    const currentStep = this.state.currentStep;
+    const previousStep = this.state.previousStep;
+
+    if (targetStep === currentStep) {
+      return;
+    } else if (targetStep === previousStep) {
+      this.setState({
+        currentStep: previousStep,
+        previousStep: null
+      });
+    } else {
+      this.setState({
+        currentStep: targetStep,
+        previousStep: currentStep
+      });
+    }
+
+    if (this.props.onSetModalTitle) {
+      const stepTitle = this.getStepTitle(targetStep);
+      const baseTitle = this.getBaseTitle();
+      this.props.onSetModalTitle(`${baseTitle}: ${stepTitle}`);
+    }
+  }
+
+  displayPreviousStep() {
+    if (this.state.previousStep) {
+      this.displayStep(this.state.previousStep);
+    }
+  }
+
+  /*
+   * handling asset creation
+   */
+
+  getOrCreateFormAsset() {
+    const assetPromise = new Promise((resolve, reject) => {
+      if (this.state.formAsset) {
+        resolve(this.state.formAsset);
+      } else {
+        dataInterface.createResource({
+          name: 'Untitled',
+          asset_type: 'survey',
+          settings: JSON.stringify({
+            description: '',
+            sector: null,
+            country: null,
+            'share-metadata': false
+          })
+        }).done((asset) => {
+          resolve(asset);
+        }).fail(function(r){
+          reject(t('Error: asset could not be created.') + ` (code: ${r.statusText})`);
+        });
+      }
+    });
+    return assetPromise;
+  }
+
+  createAssetAndOpenInBuilder() {
+    dataInterface.createResource({
+      name: this.state.name,
+      settings: JSON.stringify({
+        description: this.state.description,
+        sector: this.state.sector,
+        country: this.state.country,
+        'share-metadata': this.state['share-metadata']
+      }),
+      asset_type: 'survey',
+    }).done((asset) => {
+      this.goToFormBuilder(asset.uid);
+    }).fail(function(r){
+      alertify.error(t('Error: new project could not be created.') + ` (code: ${r.statusText})`);
+    });
+  }
+
+  updateAndOpenAsset() {
+    actions.resources.updateAsset(
+      this.state.formAsset.uid,
+      {
+        name: this.state.name,
+        settings: JSON.stringify({
+          description: this.state.description,
+          sector: this.state.sector,
+          country: this.state.country,
+          'share-metadata': this.state['share-metadata']
+        }),
+      }, {
+        onComplete: () => {
+          // no need to open asset from within asset's settings view
+          if (this.props.context !== PROJECT_SETTINGS_CONTEXTS.EXISTING) {
+            this.goToFormLanding();
+          }
+        }
+      }
+    );
+  }
+
+  applyTemplate(evt) {
+    evt.preventDefault();
+
+    this.setState({
+      isApplyTemplatePending: true,
+      applyTemplateButton: t('Please wait…')
+    });
+
+    actions.resources.cloneAsset({
+      uid: this.state.chosenTemplateUid,
+      new_asset_type: 'survey'
+    }, {
+      onComplete: (asset) => {
+        if (this.props.context === PROJECT_SETTINGS_CONTEXTS.REPLACE) {
+          // when replacing, we omit PROJECT_DETAILS step
+          this.handleReplaceDone();
+        } else {
+          this.setState({
+            formAsset: asset,
+            name: asset.name,
+            description: asset.settings.description,
+            sector: asset.settings.sector,
+            country: asset.settings.country,
+            'share-metadata': asset.settings['share-metadata'] || false,
+          });
+          this.resetApplyTemplateButton();
+          this.displayStep(this.STEPS.PROJECT_DETAILS);
+        }
+      },
+      onFailed: (asset) => {
+        this.resetApplyTemplateButton();
+        alertify.error(t('Could not create project!'));
+      }
+    });
+  }
+
+  importFromURL(evt) {
+    evt.preventDefault();
+
+    if (isAValidUrl(this.state.importUrl)) {
+      this.setState({
+        isImportFromURLPending: true,
+        importUrlButtonEnabled: false,
+        importUrlButton: t('Retrieving form, please wait...')
+      });
+
+      this.getOrCreateFormAsset().then(
+        (asset) => {
+          this.setState({formAsset: asset});
+          const importUrl = this.state.importUrl;
+
+          this.applyUrlToAsset(importUrl, asset).then(
+            (data) => {
+              dataInterface.getAsset({id: data.uid}).done((finalAsset) => {
+                if (this.props.context === PROJECT_SETTINGS_CONTEXTS.REPLACE) {
+                  // when replacing, we omit PROJECT_DETAILS step
+                  this.handleReplaceDone();
+                } else {
+                  this.setState({
+                    formAsset: finalAsset,
+                    // try proposing something more meaningful than "Untitled"
+                    name: this.getFilenameFromURI(importUrl),
+                    description: finalAsset.settings.description,
+                    sector: finalAsset.settings.sector,
+                    country: finalAsset.settings.country,
+                    'share-metadata': finalAsset.settings['share-metadata'],
+                    isImportFromURLPending: false
+                  });
+                  this.displayStep(this.STEPS.PROJECT_DETAILS);
+                }
+              }).fail(() => {
+                this.resetImportUrlButton();
+                alertify.error(t('Failed to reload project after import!'));
+              });
+            },
+            (response) => {
+              this.resetImportUrlButton();
+              const errLines = [];
+              errLines.push(t('Import Failed!'));
+              if (importUrl) {
+                errLines.push(`<code>Name: ${this.getFilenameFromURI(importUrl)}</code>`);
+              }
+              if (response.messages.error) {
+                errLines.push(`<code>${response.messages.error_type}: ${escapeHtml(response.messages.error)}</code>`);
+              }
+              alertify.error(errLines.join('<br/>'));
+            }
+          );
+        },
+        () => {
+          alertify.error(t('Could not initialize XLSForm import!'));
+        }
+      );
+    }
+  }
+
+  onFileDrop(files, rejectedFiles, evt) {
+    if (files.length >= 1) {
+      this.setState({isUploadFilePending: true});
+
+      this.getOrCreateFormAsset().then(
+        (asset) => {
+          this.applyFileToAsset(files[0], asset).then(
+            (data) => {
+              dataInterface.getAsset({id: data.uid}).done((finalAsset) => {
+                if (this.props.context === PROJECT_SETTINGS_CONTEXTS.REPLACE) {
+                  // when replacing, we omit PROJECT_DETAILS step
+                  this.handleReplaceDone();
+                } else {
+                  // try proposing something more meaningful than "Untitled"
+                  const newName = files[0].name.split('.')[0];
+                  this.setState({
+                    formAsset: finalAsset,
+                    name: newName,
+                    description: finalAsset.settings.description,
+                    sector: finalAsset.settings.sector,
+                    country: finalAsset.settings.country,
+                    'share-metadata': finalAsset.settings['share-metadata'],
+                    isUploadFilePending: false
+                  });
+                  this.displayStep(this.STEPS.PROJECT_DETAILS);
+                }
+              }).fail(() => {
+                this.setState({isUploadFilePending: false});
+                alertify.error(t('Failed to reload project after upload!'));
+              });
+            },
+            (response) => {
+              const errLines = [];
+              errLines.push(t('Import Failed!'));
+              if (files[0].name) {
+                errLines.push(`<code>Name: ${files[0].name}</code>`);
+              }
+              if (response.messages.error) {
+                errLines.push(`<code>${response.messages.error_type}: ${escapeHtml(response.messages.error)}</code>`);
+              }
+              alertify.error(errLines.join('<br/>'));
+            }
+          );
+        },
+        () => {
+          this.setState({isUploadFilePending: false});
+          alertify.error(t('Could not import XLSForm!'))
+        }
+      );
+    }
+  }
+
+  handleReplaceDone() {
+    this.updateAndOpenAsset();
+  }
+
+  handleSubmit(evt) {
+    evt.preventDefault();
+
+    // simple non-empty name validation
+    if (!this.state.name.trim()) {
+      alertify.error(t('Please enter a title for your project!'));
+      return
+    }
+
+    this.setState({isSubmitPending: true});
+
+    if (this.state.formAsset) {
+      this.updateAndOpenAsset();
+    } else {
+      this.createAssetAndOpenInBuilder();
+    }
+  }
+
+  /*
+   * rendering
+   */
+
+  renderStepFormSource() {
+    return (
+      <bem.FormModal__form className='project-settings project-settings--form-source'>
+        {this.props.context !== PROJECT_SETTINGS_CONTEXTS.REPLACE &&
+          <bem.Modal__subheader>
+            {t('Choose one of the options below to continue. You will be prompted to enter name and other details in further steps.')}
+          </bem.Modal__subheader>
+        }
+
+        <bem.FormModal__item m='form-source-buttons'>
+          {this.props.context === PROJECT_SETTINGS_CONTEXTS.NEW &&
+            <button onClick={this.displayStep.bind(this, this.STEPS.PROJECT_DETAILS)}>
+              <i className='k-icon-edit' />
+              {t('Build from scratch')}
+            </button>
+          }
+
+          {this.props.context !== PROJECT_SETTINGS_CONTEXTS.REPLACE &&
+            <button onClick={this.displayStep.bind(this, this.STEPS.CHOOSE_TEMPLATE)}>
+              <i className='k-icon-template' />
+              {t('Use a template')}
+            </button>
+          }
+
+          <button onClick={this.displayStep.bind(this, this.STEPS.UPLOAD_FILE)}>
+            <i className='k-icon-upload' />
+            {t('Upload an XLSForm')}
+          </button>
+
+          <button onClick={this.displayStep.bind(this, this.STEPS.IMPORT_URL)}>
+            <i className='k-icon-link' />
+            {t('Import an XLSForm via URL')}
+          </button>
+        </bem.FormModal__item>
+      </bem.FormModal__form>
+    );
+  }
+
+  renderStepChooseTemplate() {
+    return (
+      <bem.FormModal__form className='project-settings project-settings--choose-template'>
+        <TemplatesList onSelectTemplate={this.onTemplateChange}/>
+
+        <bem.Modal__footer>
+          {this.renderBackButton()}
+
+          <bem.Modal__footerButton
+            m='primary'
+            type='submit'
+            onClick={this.applyTemplate}
+            disabled={!this.state.chosenTemplateUid || this.state.isApplyTemplatePending}
+            className='mdl-js-button'
+          >
+            {this.state.applyTemplateButton}
+          </bem.Modal__footerButton>
+        </bem.Modal__footer>
+      </bem.FormModal__form>
+    );
+  }
+
+  renderStepUploadFile() {
+    return (
+      <bem.FormModal__form className='project-settings project-settings--upload-file'>
+        <bem.Modal__subheader>
+          {t('Import an XLSForm from your computer.')}
+        </bem.Modal__subheader>
+
+        {!this.state.isUploadFilePending &&
+          <Dropzone
+            onDrop={this.onFileDrop.bind(this)}
+            multiple={false}
+            className='dropzone'
+            activeClassName='dropzone-active'
+            rejectClassName='dropzone-reject'
+            accept={validFileTypes()}
+          >
+            <i className='k-icon-xls-file' />
+            {t(' Drag and drop the XLSForm file here or click to browse')}
+          </Dropzone>
+        }
+        {this.state.isUploadFilePending &&
+          <div className='dropzone'>
+            {this.renderLoading(t('Uploading file…'))}
+          </div>
+        }
+
+        <bem.Modal__footer>
+          {this.renderBackButton()}
+        </bem.Modal__footer>
+      </bem.FormModal__form>
+    );
+  }
+
+  renderStepImportUrl() {
+    return (
+      <bem.FormModal__form className='project-settings project-settings--import-url'>
+        <div className='intro'>
+          {t('Enter a valid XLSForm URL in the field below.')}<br/>
+          <a href={formViaUrlHelpLink} target='_blank'>
+            {t('Having issues? See this help article.')}
+          </a>
+        </div>
+
+        <bem.FormModal__item>
+          <TextBox
+            type='url'
+            label={t('URL')}
+            placeholder='https://'
+            value={this.state.importUrl}
+            onChange={this.onImportUrlChange}
+          />
+        </bem.FormModal__item>
+
+        <bem.Modal__footer>
+          {this.renderBackButton()}
+
+          <bem.Modal__footerButton
+            m='primary'
+            type='submit'
+            onClick={this.importFromURL}
+            disabled={!this.state.importUrlButtonEnabled}
+            className='mdl-js-button'
+          >
+            {this.state.importUrlButton}
+          </bem.Modal__footerButton>
+        </bem.Modal__footer>
+      </bem.FormModal__form>
+    );
+  }
+
+  renderStepProjectDetails() {
+    const sectors = session.currentAccount.available_sectors;
+    const countries = session.currentAccount.available_countries;
+
+    return (
+      <bem.FormModal__form
+        onSubmit={this.handleSubmit}
+        onChange={this.onProjectDetailsFormChange}
+        className={[
+          'project-settings',
+          'project-settings--project-details',
+          this.props.context === PROJECT_SETTINGS_CONTEXTS.BUILDER ? 'project-settings--narrow' : null
+        ].join(' ')}
+      >
+        {this.props.context === PROJECT_SETTINGS_CONTEXTS.EXISTING &&
+          <bem.Modal__footer>
+            <bem.Modal__footerButton
+              m='primary'
+              onClick={this.handleSubmit}
+              className='mdl-js-button'
+            >
+              {t('Save Changes')}
+            </bem.Modal__footerButton>
+          </bem.Modal__footer>
+        }
+
+        <bem.FormModal__item m='wrapper'>
+          {/* form builder displays name in different place */}
+          {this.props.context !== PROJECT_SETTINGS_CONTEXTS.BUILDER &&
+            <bem.FormModal__item>
+              <label htmlFor='name'>
+                {t('Project Name')}
+              </label>
+              <input type='text'
+                id='name'
+                placeholder={t('Enter title of project here')}
+                value={this.state.name}
+                onChange={this.onNameChange}
+              />
+            </bem.FormModal__item>
+          }
+
+          <bem.FormModal__item>
+            <label htmlFor='description'>
+              {t('Description')}
+            </label>
+            <TextareaAutosize
+              onChange={this.onDescriptionChange}
+              value={this.state.description}
+              placeholder={t('Enter short description here')}
+            />
+          </bem.FormModal__item>
+
+          <bem.FormModal__item>
+            <label className='long'>
+              {t('Please specify the country and the sector where this project will be deployed. ')}
+              {/*t('This information will be used to help you filter results on the project list page.')*/}
+            </label>
+          </bem.FormModal__item>
+
+          <bem.FormModal__item m='sector'>
+            <label htmlFor='sector'>
+              {t('Sector')}
+            </label>
+            <Select
+              id='sector'
+              value={this.state.sector}
+              onChange={this.onSectorChange}
+              options={sectors}
+              className='kobo-select'
+              classNamePrefix='kobo-select'
+              menuPlacement='auto'
+            />
+          </bem.FormModal__item>
+
+          <bem.FormModal__item  m='country'>
+            <label htmlFor='country'>
+              {t('Country')}
+            </label>
+            <Select
+              id='country'
+              value={this.state.country}
+              onChange={this.onCountryChange}
+              options={countries}
+              className='kobo-select'
+              classNamePrefix='kobo-select'
+              menuPlacement='auto'
+            />
+          </bem.FormModal__item>
+
+          <bem.FormModal__item m='metadata-share'>
+            <input
+              type='checkbox'
+              id='share-metadata'
+              checked={this.state['share-metadata']}
+              onChange={this.onShareMetadataChange}
+            />
+            <label htmlFor='share-metadata'>
+              {t('Help KoboToolbox improve this product by sharing the sector and country where this project will be deployed.')}
+              &nbsp;
+              {t('All the information is submitted anonymously, and will not include the project name or description listed above.')}
+            </label>
+          </bem.FormModal__item>
+
+          {(this.props.context === PROJECT_SETTINGS_CONTEXTS.NEW || this.props.context === PROJECT_SETTINGS_CONTEXTS.REPLACE) &&
+            <bem.Modal__footer>
+              {/* Don't allow going back if asset already exist */}
+              {!this.state.formAsset &&
+                this.renderBackButton()
+              }
+
+              <bem.Modal__footerButton
+                m='primary'
+                type='submit'
+                onClick={this.handleSubmit}
+                className='mdl-js-button'
+                disabled={this.state.isSubmitPending}
+              >
+                {this.state.isSubmitPending && t('Please wait…')}
+                {!this.state.isSubmitPending && this.props.context === PROJECT_SETTINGS_CONTEXTS.NEW && t('Create project')}
+                {!this.state.isSubmitPending && this.props.context === PROJECT_SETTINGS_CONTEXTS.REPLACE && t('Save')}
+              </bem.Modal__footerButton>
+            </bem.Modal__footer>
+          }
+
+          {this.props.context === PROJECT_SETTINGS_CONTEXTS.EXISTING && this.props.iframeUrl &&
+            <bem.FormView__cell m='iframe'>
+              <iframe src={this.props.iframeUrl} />
+            </bem.FormView__cell>
+          }
+        </bem.FormModal__item>
+      </bem.FormModal__form>
+    );
+  }
+
+  renderBackButton() {
+    if (this.state.previousStep) {
+      const isBackButtonDisabled = (
+        this.state.isSubmitPending ||
+        this.state.isApplyTemplatePending ||
+        this.state.isImportFromURLPending ||
+        this.state.isUploadFilePending
+      )
+      return (
+        <bem.Modal__footerButton
+          m='back'
+          type='button'
+          onClick={this.displayPreviousStep}
+          disabled={isBackButtonDisabled}
+        >
+          {t('Back')}
+        </bem.Modal__footerButton>
+      )
+    } else {
+      return false;
+    }
+  }
+
+  renderLoading(message = t('loading…')) {
+    return (
+      <bem.Loading>
+        <bem.Loading__inner>
+          <i />
+          {message}
+        </bem.Loading__inner>
+      </bem.Loading>
+    );
+  }
+
+  render() {
+    if (!this.state.isSessionLoaded || !this.state.currentStep) {
+      return this.renderLoading();
+    }
+
+    switch (this.state.currentStep) {
+      case this.STEPS.FORM_SOURCE: return this.renderStepFormSource();
+      case this.STEPS.CHOOSE_TEMPLATE: return this.renderStepChooseTemplate();
+      case this.STEPS.UPLOAD_FILE: return this.renderStepUploadFile();
+      case this.STEPS.IMPORT_URL: return this.renderStepImportUrl();
+      case this.STEPS.PROJECT_DETAILS: return this.renderStepProjectDetails();
+      default:
+        throw new Error(`Unknown step: ${this.state.currentStep}!`);
+    }
+  }
+};
+
+reactMixin(ProjectSettings.prototype, Reflux.ListenerMixin);
+reactMixin(ProjectSettings.prototype, mixins.droppable);
+
+ProjectSettings.contextTypes = {
+  router: PropTypes.object
+};
diff --git a/jsapp/js/components/sharingForm.es6 b/jsapp/js/components/modalForms/sharingForm.es6
similarity index 98%
rename from jsapp/js/components/sharingForm.es6
rename to jsapp/js/components/modalForms/sharingForm.es6
index a7760cce28..cd8baa0d6e 100644
--- a/jsapp/js/components/sharingForm.es6
+++ b/jsapp/js/components/modalForms/sharingForm.es6
@@ -5,21 +5,22 @@ import reactMixin from 'react-mixin';
 import autoBind from 'react-autobind';
 import Reflux from 'reflux';
 import TagsInput from 'react-tagsinput';
-import stores from '../stores';
-import actions from '../actions';
-import mixins from '../mixins';
 import classNames from 'classnames';
 import Select from 'react-select';
-import bem from '../bem';
+
+import mixins from 'js/mixins';
+import stores from 'js/stores';
+import actions from 'js/actions';
+import bem from 'js/bem';
 import {
   t,
   parsePermissions,
   stringToColor,
   anonUsername
-} from '../utils';
+} from 'utils';
 
 // parts
-import CopyTeamPermissions from './sharingForm/copyTeamPermissions';
+import CopyTeamPermissions from './copyTeamPermissions';
 
 var availablePermissions = [
   {value: 'view', label: t('View Form')},
diff --git a/jsapp/js/components/submission.es6 b/jsapp/js/components/modalForms/submission.es6
similarity index 98%
rename from jsapp/js/components/submission.es6
rename to jsapp/js/components/modalForms/submission.es6
index 317e44a3d1..0794923ded 100644
--- a/jsapp/js/components/submission.es6
+++ b/jsapp/js/components/modalForms/submission.es6
@@ -2,23 +2,22 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import autoBind from 'react-autobind';
 import Reflux from 'reflux';
-import {dataInterface} from '../dataInterface';
-import actions from '../actions';
-import reactMixin from 'react-mixin';
-import mixins from '../mixins';
-import bem from '../bem';
-import {t, notify} from '../utils';
-import stores from '../stores';
-import ui from '../ui';
 import alertify from 'alertifyjs';
-import icons from '../../xlform/src/view.icons';
+import reactMixin from 'react-mixin';
 import Select from 'react-select';
 
+import {dataInterface} from 'js/dataInterface';
+import actions from 'js/actions';
+import mixins from 'js/mixins';
+import bem from 'js/bem';
+import {t, notify} from 'js/utils';
+import stores from 'js/stores';
+import ui from 'js/ui';
+import icons from '../../../xlform/src/view.icons';
 import {
   VALIDATION_STATUSES,
   MODAL_TYPES
-} from '../constants';
-
+} from 'js/constants';
 
 class Submission extends React.Component {
   constructor(props) {
diff --git a/jsapp/js/components/tableColumnFilter.es6 b/jsapp/js/components/modalForms/tableColumnFilter.es6
similarity index 97%
rename from jsapp/js/components/tableColumnFilter.es6
rename to jsapp/js/components/modalForms/tableColumnFilter.es6
index 104db676eb..e72e5cef38 100644
--- a/jsapp/js/components/tableColumnFilter.es6
+++ b/jsapp/js/components/modalForms/tableColumnFilter.es6
@@ -3,18 +3,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Reflux from 'reflux';
 import reactMixin from 'react-mixin';
-import bem from '../bem';
-import ui from '../ui';
-import actions from '../actions';
-import stores from '../stores';
-import mixins from '../mixins';
 import Select from 'react-select';
 import autoBind from 'react-autobind';
 
-import {
-  t,
-  notify
-} from '../utils';
+import bem from 'js/bem';
+import ui from 'js/ui';
+import actions from 'js/actions';
+import stores from 'js/stores';
+import mixins from 'js/mixins';
+import {t, notify} from 'js/utils';
 
 export class TableColumnFilter extends React.Component {
   constructor(props){
diff --git a/jsapp/js/components/modalForms/translationSettings.es6 b/jsapp/js/components/modalForms/translationSettings.es6
new file mode 100644
index 0000000000..ad4c399aa9
--- /dev/null
+++ b/jsapp/js/components/modalForms/translationSettings.es6
@@ -0,0 +1,544 @@
+import $ from 'jquery';
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactMixin from 'react-mixin';
+import autoBind from 'react-autobind';
+import Reflux from 'reflux';
+import alertify from 'alertifyjs';
+import classNames from 'classnames';
+
+import TextBox from 'js/components/textBox';
+
+import bem from 'js/bem';
+import stores from 'js/stores';
+import mixins from 'js/mixins';
+import ui from 'js/ui';
+import actions from 'js/actions';
+import {MODAL_TYPES} from 'js/constants'
+
+import {t, getLangAsObject, getLangString, notify} from 'utils';
+
+export class TranslationSettings extends React.Component {
+  constructor(props){
+    super(props);
+
+    let translations;
+    if (props.asset) {
+      translations = props.asset.content.translations;
+    }
+
+    this.state = {
+      assetUid: props.assetUid,
+      asset: props.asset,
+      translations: translations || [],
+      showAddLanguageForm: false,
+      isUpdatingDefaultLanguage: false,
+      renameLanguageIndex: -1
+    }
+    autoBind(this);
+  }
+  componentDidMount () {
+    this.listenTo(stores.asset, this.onAssetsChange);
+
+    if (!this.state.asset && this.state.assetUid) {
+      stores.allAssets.whenLoaded(this.props.assetUid, this.onAssetChange);
+    }
+  }
+  onAssetChange(asset) {
+    this.setState({
+      asset: asset,
+      translations: asset.content.translations || [],
+      showAddLanguageForm: false,
+      isUpdatingDefaultLanguage: false,
+      renameLanguageIndex: -1
+    })
+
+    stores.pageState.showModal({
+      type: MODAL_TYPES.FORM_LANGUAGES,
+      asset: asset
+    });
+  }
+  onAssetsChange(assetsList) {
+    let uid;
+    if (this.state.asset) {
+      uid = this.state.asset.uid;
+    } else if (this.state.assetUid) {
+      uid = this.state.assetUid;
+    }
+    this.onAssetChange(assetsList[uid]);
+  }
+  showAddLanguageForm() {
+    this.setState({
+      showAddLanguageForm: true
+    })
+  }
+  hideAddLanguageForm() {
+    this.setState({
+      showAddLanguageForm: false
+    })
+  }
+  toggleRenameLanguageForm(evt) {
+    const index = parseInt(evt.currentTarget.dataset.index);
+    if (this.state.renameLanguageIndex === index) {
+      this.setState({
+        renameLanguageIndex: -1
+      });
+    } else {
+      this.setState({
+        renameLanguageIndex: index
+      });
+    }
+  }
+  launchTranslationTableModal(evt) {
+    const index = evt.currentTarget.dataset.index;
+    stores.pageState.switchModal({
+      type: MODAL_TYPES.FORM_TRANSLATIONS_TABLE,
+      asset: this.state.asset,
+      langIndex: index
+    });
+  }
+  onLanguageChange(lang, index) {
+    let content = this.state.asset.content;
+    const langString = getLangString(lang);
+
+    if (index > -1) {
+      content.translations[index] = langString;
+    } else {
+      content.translations.push(langString);
+      content = this.prepareTranslations(content);
+    }
+
+    if (index === 0) {
+      content.settings.default_language = langString;
+    }
+
+    this.updateAsset(content);
+  }
+  canAddLanguages() {
+    return !(this.state.translations.length === 1 && this.state.translations[0] === null);
+  }
+  getAllLanguages(thisLanguage) {
+    return this.state.translations;
+  }
+  deleteLanguage(evt) {
+    const index = evt.currentTarget.dataset.index;
+    const content = this.deleteTranslations(this.state.asset.content, index);
+    if (content) {
+      content.translations.splice(index, 1);
+      const dialog = alertify.dialog('confirm');
+      const opts = {
+        title: t('Delete language?'),
+        message: t('Are you sure you want to delete this language? This action is not reversible.'),
+        labels: {ok: t('Delete'), cancel: t('Cancel')},
+        onok: () => {
+          this.updateAsset(content);
+          dialog.destroy();
+        },
+        oncancel: () => {dialog.destroy()}
+      };
+      dialog.set(opts).show();
+    } else {
+      notify('Error: translation index mismatch. Cannot delete language.');
+    }
+  }
+  prepareTranslations(content) {
+    let translated = content.translated,
+        translationsLength = content.translations.length,
+        survey = content.survey,
+        choices = content.choices;
+
+    // append null values to translations for each survey row
+    for (var i = 0, len = survey.length; i < len; i++) {
+      let row = survey[i];
+      for (var j = 0, len2 = translated.length; j < len2; j++) {
+        var property = translated[j];
+        if (row[property] && row[property].length < translationsLength) {
+          row[property].push(null);
+        }
+      }
+    }
+
+    // append null values to translations for choices
+    if (content.choices && content.choices.length) {
+      for (var i = 0, len = choices.length; i < len; i++) {
+        if (choices[i].label.length < translationsLength) {
+          choices[i].label.push(null);
+        }
+      }
+    }
+    return content;
+  }
+  deleteTranslations(content, langIndex) {
+    let translated = content.translated,
+        translationsLength = content.translations.length,
+        survey = content.survey,
+        choices = content.choices;
+
+    for (var i = 0, len = survey.length; i < len; i++) {
+      let row = survey[i];
+      for (var j = 0, len2 = translated.length; j < len2; j++) {
+        var property = translated[j];
+        if (row[property]) {
+          if (row[property].length === translationsLength) {
+            row[property].splice(langIndex, 1);
+          } else {
+            console.error('Translations index mismatch');
+            return false;
+          }
+        }
+      }
+    }
+
+    if (content.choices && content.choices.length) {
+      for (var i = 0, len = choices.length; i < len; i++) {
+        if (choices[i].label) {
+          if (choices[i].label.length === translationsLength) {
+            choices[i].label.splice(langIndex, 1);
+          } else {
+            console.error('Translations index mismatch');
+            return false;
+          }
+        }
+      }
+    }
+    return content;
+  }
+  changeDefaultLanguage(evt) {
+    const index = evt.currentTarget.dataset.index;
+    const langString = this.state.translations[index];
+
+    const dialog = alertify.dialog('confirm');
+    const opts = {
+      title: t('Change default language?'),
+      message: t('Are you sure you would like to set ##lang## as the default language for this form?').replace('##lang##', 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);
+        dialog.destroy();
+      },
+      oncancel: () => {dialog.destroy()}
+    };
+    dialog.set(opts).show();
+  }
+  updateAsset (content) {
+    actions.resources.updateAsset(
+      this.state.asset.uid,
+      {content: JSON.stringify(content)},
+      // reload asset on failure
+      {onFailed: () => {
+        actions.resources.loadAsset({id: this.state.asset.uid});
+        alertify.error('failed to update translations');
+      }}
+    );
+  }
+  renderEmptyMessage() {
+    return (
+      <bem.FormModal m='translation-settings'>
+        <bem.FormModal__item>
+          <bem.FormView__cell>
+            {t('There is nothing to translate in this form.')}
+          </bem.FormView__cell>
+        </bem.FormModal__item>
+      </bem.FormModal>
+    );
+  }
+  renderLoadingMessage() {
+    return (
+      <bem.Loading>
+        <bem.Loading__inner>
+          <i />
+          {t('loading...')}
+        </bem.Loading__inner>
+      </bem.Loading>
+    );
+  }
+  renderTranslationsSettings(translations) {
+    return (
+      <bem.FormModal m='translation-settings'>
+        <bem.FormModal__item>
+          {(translations && translations[0] === null) ?
+            <bem.FormView__cell m='translation-note'>
+              {t('Here you can add more languages to your project, and translate the strings in each of them.')}
+              <br/>
+              <strong>{t('Please name your default language before adding languages and translations.')}</strong>
+            </bem.FormView__cell>
+            :
+            <bem.FormView__cell m='label'>
+              {t('Current languages')}
+            </bem.FormView__cell>
+          }
+          {translations.map((l, i)=> {
+            return (
+              <React.Fragment key={`lang-${i}`}>
+                <bem.FormView__cell m='translation'>
+                  <bem.FormView__cell m='translation-name'>
+                    {l ? l : t('Unnamed language')}
+
+                    {i === 0 &&
+                      <bem.FormView__label m='default-language'>
+                        {t('default')}
+                      </bem.FormView__label>
+                    }
+
+                    {i !== 0 &&
+                      <bem.FormView__iconButton
+                        data-index={i}
+                        onClick={this.changeDefaultLanguage}
+                        disabled={this.state.isUpdatingDefaultLanguage}
+                        data-tip={t('Make default')}
+                      >
+                        <i className='k-icon-language-default' />
+                      </bem.FormView__iconButton>
+                    }
+                  </bem.FormView__cell>
+
+                  <bem.FormView__cell m='translation-actions'>
+                    <bem.FormView__iconButton
+                      data-index={i}
+                      onClick={this.toggleRenameLanguageForm}
+                      disabled={this.state.isUpdatingDefaultLanguage}
+                      data-tip={t('Edit language')}
+                      className='right-tooltip'
+                    >
+                      {this.state.renameLanguageIndex === i &&
+                        <i className='k-icon-close' />
+                      }
+                      {this.state.renameLanguageIndex !== i &&
+                        <i className='k-icon-edit' />
+                      }
+                    </bem.FormView__iconButton>
+
+                    {i !== 0 &&
+                      <React.Fragment>
+                        <bem.FormView__iconButton
+                          data-index={i}
+                          onClick={this.launchTranslationTableModal}
+                          disabled={this.state.isUpdatingDefaultLanguage}
+                          data-tip={t('Update translations')}
+                          className='right-tooltip'
+                        >
+                          <i className='k-icon-globe-alt' />
+                        </bem.FormView__iconButton>
+
+                        <bem.FormView__iconButton
+                          data-index={i}
+                          onClick={this.deleteLanguage}
+                          disabled={this.state.isUpdatingDefaultLanguage}
+                          data-tip={t('Delete language')}
+                          className='right-tooltip'
+                        >
+                          <i className='k-icon-trash' />
+                        </bem.FormView__iconButton>
+                      </React.Fragment>
+                    }
+                  </bem.FormView__cell>
+                </bem.FormView__cell>
+
+                {this.state.renameLanguageIndex === i &&
+                  <bem.FormView__cell m='update-language-form'>
+                    <LanguageForm
+                      langString={l}
+                      langIndex={i}
+                      onLanguageChange={this.onLanguageChange}
+                      existingLanguages={this.getAllLanguages(l)}
+                    />
+                  </bem.FormView__cell>
+                }
+              </React.Fragment>
+            );
+          })}
+          {!this.state.showAddLanguageForm &&
+            <bem.FormView__cell m='add-language'>
+              <button
+                className='mdl-button mdl-js-button mdl-button--raised mdl-button--colored'
+                onClick={this.showAddLanguageForm}
+                disabled={!this.canAddLanguages()}
+              >
+                {t('Add language')}
+              </button>
+            </bem.FormView__cell>
+          }
+          {this.state.showAddLanguageForm &&
+            <bem.FormView__cell m='add-language-form'>
+              <bem.FormView__link m='close' onClick={this.hideAddLanguageForm}>
+                <i className='k-icon-close' />
+              </bem.FormView__link>
+              <bem.FormView__cell m='label'>
+                {t('Add a new language')}
+              </bem.FormView__cell>
+              <LanguageForm
+                onLanguageChange={this.onLanguageChange}
+                existingLanguages={this.getAllLanguages()}
+              />
+            </bem.FormView__cell>
+          }
+        </bem.FormModal__item>
+      </bem.FormModal>
+    );
+  }
+  render () {
+    if (!this.state.asset) {
+      return this.renderLoadingMessage();
+    }
+
+    let translations = this.state.translations;
+    if (translations.length === 0) {
+      return this.renderEmptyMessage();
+    } else {
+      return this.renderTranslationsSettings(translations);
+    }
+  }
+};
+
+reactMixin(TranslationSettings.prototype, Reflux.ListenerMixin);
+
+export default TranslationSettings;
+
+/*
+Properties:
+- langString <string>: follows pattern "NAME (CODE)"
+- langIndex <string>
+- onLanguageChange <function>: required
+- existingLanguages <langString[]>: for validation purposes
+*/
+class LanguageForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: '',
+      nameError: null,
+      code: '',
+      codeError: null
+    }
+
+    if (this.props.langString) {
+      const lang = getLangAsObject(this.props.langString);
+
+      if (lang) {
+        this.state = {
+          name: lang.name || '',
+          code: lang.code || ''
+        }
+      } else {
+        // if language isn't in "English (en)" format, assume it is a simple language name string
+        this.state = {
+          name: this.props.langString,
+          code: ''
+        }
+      }
+    }
+    autoBind(this);
+  }
+  isLanguageNameValid() {
+    if (this.props.existingLanguages) {
+      let isNameUnique = true;
+      this.props.existingLanguages.forEach((langString) => {
+        if (this.props.langString && langString === this.props.langString) {
+          // skip comparing to itself (editing language context)
+        } else if (langString !== null) {
+          const langObj = getLangAsObject(langString);
+          if (langObj && langObj.name === this.state.name) {
+            isNameUnique = false;
+          }
+        }
+      });
+      return isNameUnique;
+    } else {
+      return true;
+    }
+  }
+  isLanguageCodeValid() {
+    if (this.props.existingLanguages) {
+      let isCodeUnique = true;
+      this.props.existingLanguages.forEach((langString) => {
+        if (this.props.langString && langString === this.props.langString) {
+          // skip comparing to itself (editing language context)
+        } else if (langString !== null) {
+          const langObj = getLangAsObject(langString);
+          if (langObj && langObj.code === this.state.code) {
+            isCodeUnique = false;
+          }
+        }
+      });
+      return isCodeUnique;
+    } else {
+      return true;
+    }
+  }
+  onSubmit(evt) {
+    evt.preventDefault();
+
+    const isNameValid = this.isLanguageNameValid();
+    if (!isNameValid) {
+      this.setState({nameError: t('Name must be unique!')});
+    } else {
+      this.setState({nameError: null});
+    }
+
+    const isCodeValid = this.isLanguageCodeValid();
+    if (!isCodeValid) {
+      this.setState({codeError: t('Code must be unique!')});
+    } else {
+      this.setState({codeError: null});
+    }
+
+    if (isNameValid && isCodeValid) {
+      let langIndex = -1;
+      if (this.props.langIndex !== undefined) {
+        langIndex = this.props.langIndex;
+      }
+      this.props.onLanguageChange({
+        name: this.state.name,
+        code: this.state.code
+      }, langIndex);
+    }
+  }
+  onNameChange (newName) {
+    this.setState({name: newName.trim()});
+  }
+  onCodeChange (newCode) {
+    this.setState({code: newCode.trim()});
+  }
+  render () {
+    let isAnyFieldEmpty = this.state.name.length === 0 || this.state.code.length === 0;
+
+    return (
+      <bem.FormView__form m='add-language-fields'>
+        <bem.FormView__cell m='lang-name'>
+          <bem.FormModal__item>
+            <label>{t('Language name')}</label>
+            <TextBox
+              value={this.state.name}
+              onChange={this.onNameChange}
+              errors={this.state.nameError}
+            />
+          </bem.FormModal__item>
+        </bem.FormView__cell>
+
+        <bem.FormView__cell m='lang-code'>
+          <bem.FormModal__item>
+            <label>{t('Language code')}</label>
+            <TextBox
+              value={this.state.code}
+              onChange={this.onCodeChange}
+              errors={this.state.codeError}
+            />
+          </bem.FormModal__item>
+        </bem.FormView__cell>
+
+        <bem.FormView__cell m='submit-button'>
+          <button
+            className='mdl-button mdl-js-button mdl-button--raised mdl-button--colored'
+            onClick={this.onSubmit} type='submit'
+            disabled={isAnyFieldEmpty}
+          >
+            {this.props.langIndex !== undefined ? t('Update') : t('Add')}
+          </button>
+        </bem.FormView__cell>
+      </bem.FormView__form>
+      );
+  }
+};
diff --git a/jsapp/js/components/modalForms/translationTable.es6 b/jsapp/js/components/modalForms/translationTable.es6
new file mode 100644
index 0000000000..84db79622c
--- /dev/null
+++ b/jsapp/js/components/modalForms/translationTable.es6
@@ -0,0 +1,167 @@
+import React from 'react'
+import ReactTable from 'react-table'
+import TextareaAutosize from 'react-autosize-textarea'
+
+import bem from 'js/bem'
+import actions from 'js/actions'
+import stores from 'js/stores'
+
+import {MODAL_TYPES} from 'js/constants'
+import {t} from 'utils'
+
+const SAVE_CHANGES_BUTTON_TEXT_DEFAULT = t('Save Changes');
+
+export class TranslationTable extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      saveChangesButtonText: SAVE_CHANGES_BUTTON_TEXT_DEFAULT,
+      isSaveChangesButtonPending: false,
+      tableData: []
+    };
+    const {translated, survey, choices, translations} = props.asset.content;
+    const langIndex = props.langIndex;
+
+    // add each translatable property for survey items to translation table
+    survey.forEach(row => {
+      translated.forEach(property => {
+        if (row[property] && row[property][0]) {
+          this.state.tableData.push({
+            original: row[property][0],
+            value: row[property][langIndex],
+            name: row.name || row.$autoname,
+            itemProp: property,
+            contentProp: 'survey'
+          });
+        }
+      });
+    });
+
+    // add choice options to translation table
+    if (choices && choices.length) {
+      choices.forEach(choice => {
+        if (choice.label && choice.label[0]) {
+          this.state.tableData.push({
+            original: choice.label[0],
+            value: choice.label[langIndex],
+            name: choice.name || choice.$autovalue,
+            itemProp: 'label',
+            contentProp: 'choices'
+          });
+        }
+      });
+    }
+
+    this.columns = [
+      {
+        Header: t('Original string'),
+        accessor: 'original',
+        minWidth: 130,
+        Cell: cellInfo => cellInfo.original.original
+      },{
+        Header: `${translations[langIndex]} ${t('Translation')}`,
+        accessor: 'translation',
+        className: 'translation',
+        Cell: cellInfo => (
+          <TextareaAutosize
+            onChange={e => {
+              const data = [...this.state.tableData];
+              data[cellInfo.index].value = e.target.value;
+              this.setState({ data });
+            }}
+            value={this.state.tableData[cellInfo.index].value || ''}/>
+        )
+      }
+    ];
+  }
+
+  markSaveButtonPending() {
+    this.setState({
+      saveChangesButtonText: t('Saving…'),
+      isSaveChangesButtonPending: true,
+    })
+  }
+
+  markSaveButtonIdle() {
+    this.setState({
+      saveChangesButtonText: SAVE_CHANGES_BUTTON_TEXT_DEFAULT,
+      isSaveChangesButtonPending: false,
+    })
+  }
+
+  saveChanges() {
+    let content = this.props.asset.content,
+        rows = this.state.tableData,
+        langIndex = this.props.langIndex;
+    for (var i = 0, len = rows.length; i < len; i++) {
+      let contentProp = rows[i].contentProp,
+          item = content[rows[i].contentProp].find(o => o.name === rows[i].name || o.$autoname === rows[i].name || o.$autovalue === rows[i].name),
+          itemProp = rows[i].itemProp;
+
+      if (item[itemProp][langIndex] !== rows[i].value) {
+        item[itemProp][langIndex] = rows[i].value;
+      }
+    }
+
+    this.markSaveButtonPending();
+    actions.resources.updateAsset(
+      this.props.asset.uid,
+      {content: JSON.stringify(content)},
+      {
+        onComplete: () => {
+          this.markSaveButtonIdle();
+        },
+        onFailed: () => {
+          this.markSaveButtonIdle();
+        }
+      }
+    );
+  }
+
+  showManageLanguagesModal() {
+    stores.pageState.switchModal({
+      type: MODAL_TYPES.FORM_LANGUAGES,
+      asset: this.props.asset
+    });
+  }
+
+  render () {
+    return (
+      <bem.FormModal m='translation-table'>
+        <div className='translation-table-container'>
+          <ReactTable
+            data={this.state.tableData}
+            columns={this.columns}
+            defaultPageSize={30}
+            showPageSizeOptions={false}
+            previousText={t('Prev')}
+            nextText={t('Next')}
+            minRows={1}
+            loadingText={
+              <span>
+                <i className='fa k-spin fa-circle-o-notch' />
+                {t('Loading...')}
+              </span>
+            }
+          />
+        </div>
+
+        <bem.Modal__footer>
+          <bem.Modal__footerButton m='back' onClick={this.showManageLanguagesModal.bind(this)}>
+            {t('Back')}
+          </bem.Modal__footerButton>
+
+          <bem.Modal__footerButton
+            m='primary'
+            onClick={this.saveChanges.bind(this)}
+            disabled={this.state.isSaveChangesButtonPending}
+          >
+            {this.state.saveChangesButtonText}
+          </bem.Modal__footerButton>
+        </bem.Modal__footer>
+      </bem.FormModal>
+    );
+  }
+};
+
+export default TranslationTable;
diff --git a/jsapp/js/components/reports.es6 b/jsapp/js/components/reports.es6
index fb11496626..e342c3c327 100644
--- a/jsapp/js/components/reports.es6
+++ b/jsapp/js/components/reports.es6
@@ -299,7 +299,6 @@ class CustomReportForm extends React.Component {
               {t('Delete')}
             </bem.Modal__footerButton>
           }
-
           <bem.Modal__footerButton
             m='primary'
             onClick={this.saveCustomReport}
@@ -718,7 +717,6 @@ class ReportStyleSettings extends React.Component {
               </div>
             }
           </div>
-
           <ui.Modal.Footer>
             <bem.Modal__footerButton m='primary' onClick={this.saveReportStyles}>
               {t('Save')}
diff --git a/jsapp/js/components/formEditors/templatesList.es6 b/jsapp/js/components/templatesList.es6
similarity index 95%
rename from jsapp/js/components/formEditors/templatesList.es6
rename to jsapp/js/components/templatesList.es6
index 87e588c8bf..ed4f1bb38c 100644
--- a/jsapp/js/components/formEditors/templatesList.es6
+++ b/jsapp/js/components/templatesList.es6
@@ -8,19 +8,19 @@ import React from 'react';
 import Reflux from 'reflux';
 import reactMixin from 'react-mixin';
 import autoBind from 'react-autobind';
-import bem from '../../bem';
+import bem from '../bem';
 import classNames from 'classnames';
 import Select from 'react-select';
 import alertify from 'alertifyjs';
-import stores from '../../stores';
-import actions from '../../actions';
-import mixins from '../../mixins';
-import {dataInterface} from '../../dataInterface';
+import stores from '../stores';
+import actions from '../actions';
+import mixins from '../mixins';
+import {dataInterface} from '../dataInterface';
 import {
   t,
   formatTime,
   notify
-} from '../../utils';
+} from '../utils';
 
 class TemplatesList extends React.Component {
   constructor(props) {
diff --git a/jsapp/js/components/textBox.es6 b/jsapp/js/components/textBox.es6
index 6b5ca90d67..1638b5bc72 100644
--- a/jsapp/js/components/textBox.es6
+++ b/jsapp/js/components/textBox.es6
@@ -67,7 +67,7 @@ class TextBox extends React.Component {
 
         <bem.TextBox__input
           type={type}
-          value={this.state.value}
+          value={this.props.value}
           placeholder={this.props.placeholder}
           onChange={this.onChange}
         />
diff --git a/jsapp/js/constants.es6 b/jsapp/js/constants.es6
index 5886241f7b..560fab4892 100644
--- a/jsapp/js/constants.es6
+++ b/jsapp/js/constants.es6
@@ -7,7 +7,9 @@ const MODAL_TYPES = {
   ENKETO_PREVIEW: 'enketo-preview',
   SUBMISSION: 'submission',
   REPLACE_PROJECT: 'replace-project',
-  TABLE_COLUMNS: 'table-columns'
+  TABLE_COLUMNS: 'table-columns',
+  FORM_LANGUAGES: 'form-languages',
+  FORM_TRANSLATIONS_TABLE: 'form-translation-table'
 }
 
 const PROJECT_SETTINGS_CONTEXTS = {
diff --git a/jsapp/js/editorMixins/cascadeMixin.es6 b/jsapp/js/editorMixins/cascadeMixin.es6
index 25704fce3a..5dd1fcfc1c 100644
--- a/jsapp/js/editorMixins/cascadeMixin.es6
+++ b/jsapp/js/editorMixins/cascadeMixin.es6
@@ -12,12 +12,7 @@ var CascadePopup = bem.create('cascade-popup'),
 
 var choiceListHelpUrl = 'http://support.kobotoolbox.org/customer/en/portal/articles/1682856';
 
-import {
-  surveyToValidJson,
-  notify,
-  assign,
-  t,
-} from '../utils';
+import {t} from '../utils';
 
 export default {
   toggleCascade () {
diff --git a/jsapp/js/editorMixins/editableForm.es6 b/jsapp/js/editorMixins/editableForm.es6
index 0a161352a3..c5b5d9573d 100644
--- a/jsapp/js/editorMixins/editableForm.es6
+++ b/jsapp/js/editorMixins/editableForm.es6
@@ -11,9 +11,10 @@ import cascadeMixin from './cascadeMixin';
 import AssetNavigator from './assetNavigator';
 import {Link, hashHistory} from 'react-router';
 import alertify from 'alertifyjs';
-import {ProjectSettings} from '../components/formEditors';
+import ProjectSettings from '../components/modalForms/projectSettings';
 import {
   surveyToValidJson,
+  unnullifyTranslations,
   notify,
   assign,
   t,
@@ -180,16 +181,8 @@ export default assign({
       stores.allAssets.whenLoaded(uid, (asset) => {
         this.setState({asset: asset});
 
-        let translations = (
-          asset.content &&
-          asset.content.translations &&
-          // slice makes shallow copy
-          asset.content.translations.slice(0)
-        ) || [];
-
         this.launchAppForSurveyContent(asset.content, {
           name: asset.name,
-          translations: translations,
           settings__style: asset.settings__style,
           asset_uid: asset.uid,
           asset_type: asset.asset_type,
@@ -316,9 +309,11 @@ export default assign({
     if (this.state.name)
       this.app.survey.settings.set('title', this.state.name);
 
-    var params = {
-      source: surveyToValidJson(this.app.survey),
-    };
+    let surveyJSON = surveyToValidJson(this.app.survey)
+    if (this.state.asset) {
+      surveyJSON = unnullifyTranslations(surveyJSON, this.state.asset.content);
+    }
+    let params = {content: surveyJSON};
 
     params = koboMatrixParser(params);
 
@@ -352,9 +347,11 @@ export default assign({
       this.app.survey.settings.set('style', this.state.settings__style);
     }
 
-    let params = {
-      content: surveyToValidJson(this.app.survey),
-    };
+    let surveyJSON = surveyToValidJson(this.app.survey)
+    if (this.state.asset) {
+      surveyJSON = unnullifyTranslations(surveyJSON, this.state.asset.content);
+    }
+    let params = {content: surveyJSON};
 
     if (this.state.name) {
       params.name = this.state.name;
@@ -612,12 +609,6 @@ export default assign({
       saveButtonText,
     } = this.buttonStates();
 
-    let translations = this.state.translations || [];
-    // HACK FIX: filter out weird case of single `null` item array
-    if (translations.length === 1 && translations[0] === null) {
-      translations = [];
-    }
-
     let nameFieldLabel;
     switch (this.state.asset_type) {
       case ASSET_TYPES.template.id:
@@ -754,17 +745,6 @@ export default assign({
             }
           </bem.FormBuilderHeader__cell>
 
-          { translations.length > 0 &&
-            <bem.FormBuilderHeader__cell m='translations'>
-              <p>
-                {translations[0]}
-                {translations.length > 1 &&
-                  <small>{translations[1]}</small>
-                }
-              </p>
-            </bem.FormBuilderHeader__cell>
-          }
-
           <bem.FormBuilderHeader__cell m='verticalRule'/>
 
           <bem.FormBuilderHeader__cell m='spacer'/>
diff --git a/jsapp/js/mixins.es6 b/jsapp/js/mixins.es6
index 0d7f64c518..096e4458cd 100644
--- a/jsapp/js/mixins.es6
+++ b/jsapp/js/mixins.es6
@@ -601,6 +601,12 @@ mixins.clickAssets = {
           type: MODAL_TYPES.REPLACE_PROJECT,
           asset: stores.selectedAsset.asset
         });
+      },
+      translations: function(uid) {
+        stores.pageState.showModal({
+          type: MODAL_TYPES.FORM_LANGUAGES,
+          assetUid: uid
+        });
       }
 
     }
diff --git a/jsapp/js/stores.es6 b/jsapp/js/stores.es6
index c6d2d856bf..900f4c90f3 100644
--- a/jsapp/js/stores.es6
+++ b/jsapp/js/stores.es6
@@ -110,6 +110,19 @@ var pageStateStore = Reflux.createStore({
     this.setState({
       modal: false
     });
+  },
+  // use it when you have one modal opened and want to display different one
+  // because just calling showModal has weird outcome
+  switchModal (params) {
+    this.setState({
+      modal: false
+    });
+    // HACK switch to setState callback after updating to React 16+
+    window.setTimeout(() => {
+      this.setState({
+        modal: params
+      });
+    }, 0);
   }
 });
 
@@ -270,7 +283,7 @@ var surveyCompanionStore = Reflux.createStore({
   },
   addItemAtPosition ({position, survey, uid}) {
     stores.allAssets.whenLoaded(uid, function(asset){
-      var _s = dkobo_xlform.model.Survey.loadDict(asset.content)
+      var _s = dkobo_xlform.model.Survey.loadDict(asset.content, survey)
       survey.insertSurvey(_s, position);
     });
   }
diff --git a/jsapp/js/utils.es6 b/jsapp/js/utils.es6
index 00cb993d54..0124021418 100644
--- a/jsapp/js/utils.es6
+++ b/jsapp/js/utils.es6
@@ -1,3 +1,4 @@
+import clonedeep from 'lodash.clonedeep';
 import moment from 'moment';
 import alertify from 'alertifyjs';
 import $ from 'jquery';
@@ -49,6 +50,124 @@ export function surveyToValidJson(survey) {
   return JSON.stringify(survey.toFlatJSON());
 }
 
+// TRANSLATIONS HACK (Part 2/2):
+// this function reverses nullifying default language - use it just before saving
+export function unnullifyTranslations(surveyDataJSON, assetContent) {
+  let surveyData = JSON.parse(surveyDataJSON);
+
+  let translatedProps = [];
+  if (assetContent.translated) {
+     translatedProps = assetContent.translated;
+  }
+
+  // set default_language
+  let defaultLang = assetContent.translations_0;
+  if (!defaultLang) {
+    defaultLang = null;
+  }
+  if (!surveyData.settings[0].default_language && defaultLang !== null) {
+    surveyData.settings[0].default_language = defaultLang;
+  }
+
+  if (defaultLang !== null) {
+    // replace every "translatedProp" with "translatedProp::defaultLang"
+    if (surveyData.choices) {
+      surveyData.choices.forEach((choice) => {
+        translatedProps.forEach((translatedProp) => {
+          if (typeof choice[translatedProp] !== 'undefined') {
+            choice[`${translatedProp}::${defaultLang}`] = choice[translatedProp]
+            delete choice[translatedProp];
+          }
+        });
+      });
+    }
+    if (surveyData.survey) {
+      surveyData.survey.forEach((surveyRow) => {
+        translatedProps.forEach((translatedProp) => {
+          if (typeof surveyRow[translatedProp] !== 'undefined') {
+            surveyRow[`${translatedProp}::${defaultLang}`] = surveyRow[translatedProp]
+            delete surveyRow[translatedProp];
+          }
+        });
+      });
+    }
+  }
+
+  return JSON.stringify(surveyData);
+}
+
+export function nullifyTranslations(translations, translatedProps, survey, baseSurvey) {
+  const data = {
+    survey: clonedeep(survey),
+    translations: clonedeep(translations)
+  };
+
+  if (typeof translations === 'undefined') {
+    data.translations = [null];
+    return data;
+  }
+
+  if (data.translations.length > 1 && data.translations.indexOf(null) !== -1) {
+    throw new Error('There is an unnamed translation in your form definition.\nPlease give a name to all translations in your form.\nUse "Manage Translations" option from form landing page.');
+  }
+
+  /*
+  TRANSLATIONS HACK (Part 1/2):
+  all the coffee code assumes first language to be null, and we don't want
+  to introduce potential code-breaking refactor in old code, so we store
+  first language, then replace with null and reverse this just before saving
+  NOTE: when importing assets from Library into form, we need to make sure
+  the default language is the same (or force baseSurvey default language)
+  */
+  if (baseSurvey) {
+    const formDefaultLang = baseSurvey._initialParams.translations_0 || null;
+    if (data.translations[0] === formDefaultLang) {
+      // case 1: nothing to do - same default language in both
+    } else if (data.translations.includes(formDefaultLang)) {
+      // case 2: imported asset has form default language but not as first, so
+      // we need to reorder things
+      const defaultLangIndex = data.translations.indexOf(formDefaultLang);
+      data.translations.unshift(data.translations.pop(defaultLangIndex));
+      data.survey.forEach((row) => {
+        translatedProps.forEach((translatedProp) => {
+          const transletedPropArr = row[translatedProp];
+          if (transletedPropArr) {
+            transletedPropArr.unshift(transletedPropArr.pop(defaultLangIndex));
+          }
+        });
+      });
+    }
+
+    if (!data.translations.includes(formDefaultLang)) {
+      // case 3: imported asset doesn't have form default language, so we
+      // force it onto the asset as the first language and try setting some
+      // meaningful property value
+      data.translations.unshift(formDefaultLang);
+      data.survey.forEach((row) => {
+        translatedProps.forEach((translatedProp) => {
+          if (row[translatedProp]) {
+            let propVal = null
+            if (row.name) {
+              propVal = row.name;
+            } else if (row.$autoname) {
+              propVal = row.$autoname;
+            }
+            row[translatedProp].unshift(propVal);
+          }
+        });
+      });
+    }
+  }
+
+  // no need to nullify null
+  if (data.translations[0] !== null) {
+    data.translations_0 = data.translations[0]
+    data.translations[0] = null
+  }
+
+  return data;
+}
+
 export function redirectTo(href) {
   window.location.href = href;
 }
@@ -131,6 +250,38 @@ export function currentLang() {
   return cookie.load(LANGUAGE_COOKIE_NAME) || 'en';
 }
 
+// langString contains name and code e.g. "English (en)"
+export function getLangAsObject(langString) {
+  const openingIndex = langString.indexOf('(');
+  const closingIndex = langString.indexOf(')');
+
+  const langCode = langString.substring(openingIndex + 1, closingIndex);
+
+  const langName = langString.substring(0, openingIndex).trim();
+
+  if (
+    langCode &&
+    langName &&
+    // make sure langString contains just name and bracket-wrapped code
+    langName.length + langCode.length + 3 === langString.length
+  ) {
+    return {
+      code: langCode,
+      name: langName
+    };
+  } else {
+    return undefined;
+  }
+}
+
+export function getLangString(obj) {
+  if (typeof obj === 'object' && obj.name && obj.code) {
+    return `${obj.name} (${obj.code})`;
+  } else {
+    return undefined;
+  }
+}
+
 log.t = function () {
   let _t = {};
   __strings.forEach(function(str){ _t[str] = str; })
diff --git a/jsapp/js/utils.tests.es6 b/jsapp/js/utils.tests.es6
new file mode 100644
index 0000000000..aa4f0529c4
--- /dev/null
+++ b/jsapp/js/utils.tests.es6
@@ -0,0 +1,362 @@
+import {
+  getLangAsObject,
+  getLangString,
+  nullifyTranslations,
+  unnullifyTranslations
+} from 'utils';
+
+describe('utils', () => {
+  describe('getLangAsObject', () => {
+    it('should return object for valid langString', () => {
+      const langObj = getLangAsObject('English (en)');
+      chai.expect(langObj.name).to.equal('English');
+      chai.expect(langObj.code).to.equal('en');
+    });
+
+    it('should return undefined for invalid langString', () => {
+      chai.expect(getLangAsObject('English')).to.equal(undefined);
+      chai.expect(getLangAsObject('(en)')).to.equal(undefined);
+      chai.expect(getLangAsObject('English [en]')).to.equal(undefined);
+      chai.expect(getLangAsObject('English, en')).to.equal(undefined);
+      chai.expect(getLangAsObject('English: en')).to.equal(undefined);
+      chai.expect(getLangAsObject('(en) English')).to.equal(undefined);
+      chai.expect(getLangAsObject('English (en) (fr) (de)')).to.equal(undefined);
+      chai.expect(getLangAsObject('Pizza time!')).to.equal(undefined);
+    });
+
+    it('should work properly with getLangString', () => {
+      const langObj = getLangAsObject(getLangString({
+        name: 'English',
+        code: 'en'
+      }));
+      chai.expect(langObj.name).to.equal('English');
+      chai.expect(langObj.code).to.equal('en');
+    });
+  });
+
+  describe('getLangString', () => {
+    it('should return valid langString from langObj', () => {
+      const langString = getLangString({
+        name: 'English',
+        code: 'en'
+      });
+      chai.expect(langString).to.equal('English (en)');
+    });
+
+    it('should return nothing for invalid object', () => {
+      const langString = getLangString({
+        pizzaType: 2,
+        delivery: false
+      });
+      chai.expect(langString).to.equal(undefined);
+    });
+
+    it('should work properly with getLangAsObject', () => {
+      const langString = getLangString(getLangAsObject('English (en)'));
+      chai.expect(langString).to.equal('English (en)');
+    });
+  });
+});
+
+//  TRANSLATIONS HACK tests
+
+describe('translations hack', () => {
+  describe('nullifyTranslations', () => {
+    it('should return array with null for no translations', () => {
+      const test = {
+        survey: [{
+          'label': ['Hello']
+        }]
+      };
+      const target = {
+        survey: [{'label': ['Hello']}],
+        translations: [null]
+      }
+      expect(
+        nullifyTranslations(test.translations, test.translated, test.survey, test.baseSurvey)
+      ).to.deep.equal(target);
+    });
+
+    it('should throw if there are unnamed translations', () => {
+      const test = {
+        survey: [{
+          'label': ['Hello']}
+        ],
+        translations: [
+          null,
+          'English (en)'
+        ]
+      };
+      expect(() => {
+        nullifyTranslations(test.translations, test.translated, test.survey, test.baseSurvey);
+      }).to.throw();
+    });
+
+    it('should not reorder anything if survey has same default language as base survey', () => {
+      const test = {
+        baseSurvey: {_initialParams: {translations_0: 'English (en)'}},
+        survey: [{
+          'label': [
+            'Hello',
+            'Cześć'
+          ]
+        }],
+        translations: [
+          'English (en)',
+          'Polski (pl)'
+        ],
+        translated: [
+          'label'
+        ]
+      };
+      const target = {
+        survey: [{
+          'label': [
+            'Hello',
+            'Cześć'
+          ]
+        }],
+        translations: [
+          null,
+          'Polski (pl)'
+        ],
+        translations_0: 'English (en)'
+      }
+      expect(
+        nullifyTranslations(test.translations, test.translated, test.survey, test.baseSurvey)
+      ).to.deep.equal(target);
+    });
+
+    it('should reorder translated props if survey has same default language as base survey but in different order', () => {
+      const test = {
+        baseSurvey: {_initialParams: {translations_0: 'English (en)'}},
+        survey: [{
+          'label': [
+            'Allo',
+            'Cześć',
+            'Hello'
+          ]
+        }],
+        translations: [
+          'Francais (fr)',
+          'Polski (pl)',
+          'English (en)'
+        ],
+        translated: [
+          'label'
+        ]
+      };
+      const target = {
+        survey: [{
+          'label': [
+            'Hello' ,
+            'Allo',
+            'Cześć'
+          ]
+        }],
+        translations: [
+          null,
+          'Francais (fr)',
+          'Polski (pl)'
+        ],
+        translations_0: 'English (en)'
+      }
+      expect(
+        nullifyTranslations(test.translations, test.translated, test.survey, test.baseSurvey)
+      ).to.deep.equal(target);
+    });
+
+    it('should add base survey\'s default language if survey doesn\'t have it', () => {
+      const test = {
+        baseSurvey: {_initialParams: {translations_0: 'English (en)'}},
+        survey: [{
+          'label': [
+            'Allo',
+            'Cześć'
+          ],
+          name: 'welcome_message'
+        }],
+        translations: [
+          'Francais (fr)',
+          'Polski (pl)'
+        ],
+        translated: [
+          'label'
+        ]
+      };
+      const target = {
+        survey: [{
+          'label': [
+            'welcome_message',
+            'Allo',
+            'Cześć'
+          ],
+          name: 'welcome_message'
+        }],
+        translations: [
+          null,
+          'Francais (fr)',
+          'Polski (pl)'
+        ],
+        translations_0: 'English (en)'
+      }
+      expect(
+        nullifyTranslations(test.translations, test.translated, test.survey, test.baseSurvey)
+      ).to.deep.equal(target);
+    });
+
+    it('should add null language if base survey has no translations but survey does', () => {
+      const test = {
+        baseSurvey: {_initialParams: {}},
+        survey: [{
+          'label': [
+            'Allo',
+            'Cześć'
+          ],
+          name: 'welcome_message'
+        }],
+        translations: [
+          'Francais (fr)',
+          'Polski (pl)'
+        ],
+        translated: [
+          'label'
+        ]
+      };
+      const target = {
+        survey: [{
+          'label': [
+            'welcome_message',
+            'Allo',
+            'Cześć'
+          ],
+          name: 'welcome_message'
+        }],
+        translations: [
+          null,
+          'Francais (fr)',
+          'Polski (pl)'
+        ]
+      }
+      expect(
+        nullifyTranslations(test.translations, test.translated, test.survey, test.baseSurvey)
+      ).to.deep.equal(target);
+    });
+
+    it('should do nothing if neither base survey nor survey have translations', () => {
+      const test = {
+        baseSurvey: {_initialParams: {}},
+        survey: [{
+          'label': ['Hello']
+        }],
+        translations: [
+          null
+        ],
+        translated: []
+      };
+      const target = {
+        survey: [{
+          'label': ['Hello']
+        }],
+        translations: [
+          null
+        ]
+      }
+      expect(
+        nullifyTranslations(test.translations, test.translated, test.survey, test.baseSurvey)
+      ).to.deep.equal(target);
+    });
+  });
+
+  describe('unnullifyTranslations', () => {
+    it('should set default language if it\'s not set already', () => {
+      const test = {
+        surveyDataJSON: JSON.stringify({
+          survey: [
+            {
+              label: 'Cheese?'
+            }
+          ],
+          settings: [
+            {}
+          ]
+        }),
+        assetContent: {
+          translated: ['label'],
+          translations_0: 'English (en)'
+        },
+      };
+      const target = JSON.stringify({
+        survey: [
+          {
+            'label::English (en)': 'Cheese?'
+          }
+        ],
+        settings: [
+          {
+            default_language: 'English (en)'
+          }
+        ]
+      });
+      expect(
+        unnullifyTranslations(test.surveyDataJSON, test.assetContent)
+      ).to.deep.equal(target);
+    });
+
+    it('should replace nullified props with translated ones', () => {
+      const test = {
+        surveyDataJSON: JSON.stringify({
+          survey: [
+            {
+              label: 'Cheese?',
+              'label::Polski (pl)': 'Ser?'
+            }
+          ],
+          choices: [
+            {
+              label: 'Yes'
+            },
+            {
+              label: 'No',
+              'label::Polski (pl)': 'Nie'
+            }
+          ],
+          settings: [
+            {
+              default_language: 'English (en)'
+            }
+          ]
+        }),
+        assetContent: {
+          translated: ['label'],
+          translations_0: 'English (en)'
+        },
+      };
+      const target = JSON.stringify({
+        survey: [
+          {
+            'label::Polski (pl)': 'Ser?',
+            'label::English (en)': 'Cheese?'
+          }
+        ],
+        choices: [
+          {
+            'label::English (en)': 'Yes'
+          },
+          {
+            'label::Polski (pl)': 'Nie',
+            'label::English (en)': 'No'
+          }
+        ],
+        settings: [
+          {
+            default_language: 'English (en)'
+          }
+        ]
+      });
+      expect(
+        unnullifyTranslations(test.surveyDataJSON, test.assetContent)
+      ).to.deep.equal(target);
+    });
+  });
+});
diff --git a/jsapp/scss/components/_kobo.form-view.scss b/jsapp/scss/components/_kobo.form-view.scss
index bccfe56d70..f81cef0d42 100644
--- a/jsapp/scss/components/_kobo.form-view.scss
+++ b/jsapp/scss/components/_kobo.form-view.scss
@@ -235,24 +235,19 @@ $z-form-view-fullscreen: 101;
     margin-left: 6px;
   }
 
-  &--languages {
-    span:first-child {
-      font-weight: bold;
+  &--translation-list {
+    ul {
+      list-style: none;
+      display: inline;
+      li {
+        display: inline;
+        &:not(:last-child)::after {
+          content: ', ';
+        }
+      }
     }
   }
 
-  &--langButton {
-    margin-left: 15px;
-    display: inline-block;
-    padding: 6px;
-    border-radius: 6px;
-    cursor: pointer;
-  }
-
-  &--langButton.active {
-    background: #E6E6E8;
-  }
-
   &--thin-label {
     color: $cool-gray;
     opacity: 0.6;
@@ -261,44 +256,6 @@ $z-form-view-fullscreen: 101;
     margin-bottom: 10px;
   }
 
-  &--questions {
-    align-items: flex-start;
-
-    .question-count {
-      font-size: 36px;
-      padding-top: 15px;
-    }
-  }
-
-  &--question-list {
-    margin-left: 40px;
-    max-height: 260px;
-    padding: 10px 0px;
-    overflow: auto;
-    flex-grow: 2;
-
-    > div {
-      margin-bottom: 15px;
-      font-size: 14px;
-    }
-
-    > div > i {
-      margin-right: 25px;
-      opacity: 0.3;
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    > div > span {
-      vertical-align: middle;
-      display: inline-block;
-      width: calc(100% - 60px);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
   &--centered {
     text-align: center;
 
@@ -382,6 +339,12 @@ $z-form-view-fullscreen: 101;
   }
 }
 
+.form-view__icon-button {
+  @extend .mdl-button, .mdl-button--icon;
+  overflow: visible;
+  padding: 0;
+}
+
 // buttons in forms
 .form-view__link {
   font-size: 36px;
diff --git a/jsapp/scss/components/_kobo.modal.scss b/jsapp/scss/components/_kobo.modal.scss
index da1f2d2212..6ef69550d8 100644
--- a/jsapp/scss/components/_kobo.modal.scss
+++ b/jsapp/scss/components/_kobo.modal.scss
@@ -140,9 +140,15 @@ $z-modal-x: 10;
 .modal__footer {
   padding: 0 30px 30px;
   margin-top: 20px;
-  overflow: hidden; // clearfix
   text-align: right;
 
+  &::before,
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+
   &:first-child {
     margin-top: 0;
     margin-bottom: 20px;
@@ -504,6 +510,139 @@ $z-modal-x: 10;
   }
 }
 
+.form-modal--translation-settings {
+  @media (min-width: 600px) {
+    min-width: 500px;
+  }
+
+  .form-view__cell--translation-note {
+    padding-bottom: 20px;
+  }
+  .form-view__cell--translation {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid $divider-color;
+    padding: 6px 0px;
+
+    .form-view__cell--translation-name .form-view__icon-button {
+      opacity: 0;
+      visibility: hidden;
+      transition: 250ms;
+    }
+
+    &:hover .form-view__cell--translation-name .form-view__icon-button {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .form-view__cell--translation-actions {
+    white-space: nowrap;
+  }
+
+  .form-view__label--default-language {
+    display: inline;
+    font-weight: 700;
+    margin-left: 6px;
+  }
+
+  .form-view__cell--add-language {
+    padding-top: 20px;
+    text-align: right;
+    border-top: 1px solid $divider-color;
+  }
+
+  .form-view__cell--add-language-form,
+  .form-view__cell--update-language-form {
+    background: #F8F8F8;
+    padding: 15px;
+    position: relative;
+
+    .form-view__link--close {
+      position: absolute;
+      right: 0px;
+      top: 6px;
+
+      i {
+        font-size: 24px;
+      }
+    }
+  }
+
+  .form-view__cell--add-language-form {
+    margin-top: 20px;
+  }
+
+  .form-view__form--add-language-fields {
+    display: flex;
+    justify-content: space-between;
+
+    .form-view__cell {
+      &:not(:first-child) {margin-left: 10px;}
+      &.form-view__cell--lang-name {flex: 3;}
+      &.form-view__cell--lang-code {flex: 2;}
+      &.form-view__cell--submit-button {padding-top: 10px;}
+    }
+  }
+}
+
+.form-modal--translation-table {
+  // assumption: parent is display flex
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 0;
+
+  .translation-table-container {
+    flex: 1;
+    overflow-y: auto;
+    border: 1px solid $divider-color;
+  }
+
+  .ReactTable {
+    width: 100%;
+
+    .rt-thead.-header {
+      box-shadow: none;
+      border-bottom: 2px solid $divider-color;
+    }
+
+    .rt-thead > .rt-tr,
+    .rt-tr-group > .rt-tr {
+      .rt-td {
+        white-space: normal;
+      }
+      > .rt-th:first-child,
+      > .rt-td:first-child {
+        min-width: 30%;
+        color: lighten($cool-gray, 10%);
+      }
+
+      > .rt-th:last-child,
+      > .rt-td:last-child {
+        min-width: 70%;
+      }
+      .translation {
+        background: lighten($cool-green, 41%);
+        color: lighten($black, 15%);
+        padding: 0px;
+        textarea {
+          padding: 8px;
+          border: none;
+          background: transparent;
+          width: 100%;
+          &:focus {
+            background: lighten($cool-green, 35%);
+          }
+        }
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 767px) {
   .modal.modal--open {
     min-width: 90%;
diff --git a/jsapp/svg-icons/filter-alt.svg b/jsapp/svg-icons/filter-alt.svg
new file mode 100644
index 0000000000..e6691efcdc
--- /dev/null
+++ b/jsapp/svg-icons/filter-alt.svg
@@ -0,0 +1 @@
+<svg height="1200" viewBox="0 0 1200 1200" width="1200" xmlns="http://www.w3.org/2000/svg"><path d="m650 300c27.575 0 50 22.45 50 50v75c0 6.4-2.45 12.8-7.325 17.675l-117.675 117.675v114.65c0 6.625-2.625 13-7.325 17.675l-100 100c-4.775 4.775-11.175 7.325-17.675 7.325-3.225 0-6.475-.625-9.575-1.9-9.325-3.875-15.425-13-15.425-23.1v-214.65l-117.675-117.675c-4.875-4.875-7.325-11.275-7.325-17.675v-75c0-27.55 22.425-50 50-50zm-117.675 232.325 117.675-117.675v-64.65h-300v64.65l117.675 117.675c4.7 4.675 7.325 11.05 7.325 17.675v164.65l50-50v-114.65c0-6.625 2.65-13 7.325-17.675zm342.675 367.675h-250c-13.8 0-25-11.2-25-25v-300c0-13.8 11.2-25 25-25h250c13.8 0 25 11.2 25 25v300c0 13.8-11.2 25-25 25zm-225-50h200v-250h-200zm175-100h-150v-50h150zm0-75h-100v-50h100zm0 150h-150v-50h150z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/jsapp/svg-icons/globe-alt.svg b/jsapp/svg-icons/globe-alt.svg
new file mode 100644
index 0000000000..96329f56d3
--- /dev/null
+++ b/jsapp/svg-icons/globe-alt.svg
@@ -0,0 +1 @@
+<svg height="1200" viewBox="0 0 1200 1200" width="1200" xmlns="http://www.w3.org/2000/svg"><path d="m600 900c-165.42 0-300-134.55-300-300 0-165.42 134.58-300 300-300s300 134.58 300 300c0 165.45-134.58 300-300 300zm224.177878-385.722228c-14.891032 5.024372-35.320069 14.473079-27.370723 26.666471 3.34205 5.126325 17.324192 7.172197 14.409696 12.490962l1.835756 4.346171c-6.468277 11.804187-20.353103 12.002763-31.267068 19.865763-12.99128 9.359609-13.249088 19.581718-12.652898 33.640044.82627 19.483674 15.673072 39.679773 28.849003 54.113245 7.578142 8.301419 16.213261 15.86376 25.091708 23.146497 10.919816-27.410647 16.926648-57.290904 16.926648-88.546925 0-30.185651-5.602465-59.088152-15.822122-85.722228zm-124.421386-132.549969c.119694 3.70783.318136 7.410461.699553 11.101011 1.242893 12.026107 3.460294 35.783046 15.87235 44.718942 13.369357 9.625093 34.629115-3.575097 43.330839-16.587284-17.795308-15.886287-37.964949-29.165908-59.902742-39.232669zm-61.020819-18.603656c-12.612385-2.055401-25.55164-3.124147-38.735673-3.124147-64.803315 0-123.692772 25.820969-166.919662 67.714195 5.526215 8.685041 11.825002 17.283794 12.871064 26.997168 3.03138 28.148352-5.601917 25.816832-13.446306 50.869618-4.813409 15.372683 9.713206 56.415095 19.995038 70.303299 1.577053 2.130208 33.956682 43.987359 37.223118 46.145408 4.288024 2.832985 9.992535 3.075909 14.42148 5.698194 5.823164 3.447773 10.315764 8.719094 16.030915 12.332029 10.609615 6.707059 48.913826 18.744959 53.269888 24.710072 1.282328 1.755996.49328 4.353469 0 6.449774-3.552775 15.098339-34.012758 17.012515-24.00673 45.531874 7.864839 22.416506 52.892347 11.728148 52.128221 45.807964-.255956 11.415571-15.535062 24.345276-16.387686 43.085408-.114823 2.523729-1.227624 22.034907 5.502203 24.510674 4.049999 1.489912 8.54258-1.681704 12.550415-3.274737 1.048306-.41668 1.16615-1.988996 2.132698-2.561503 38.181962-22.616004 17.009369-7.215873 57.448074-56.644504 13.429691-16.415245 30.55598-26.436273 46.66566-39.565259.368981-.30071 30.32209-27.14809 20.66101-34.764356-10.391176-8.191834-55.96295-21.983313-62.585578-24.840448-12.532484-5.406766-21.650533-14.259973-35.661253-17.654434-11.622697-2.815901-3.920568 9.6381-29.508934 3.121353-7.181788-1.82903-25.016716-19.511099-29.033239-22.439997-10.027991-7.312536-38.537661-10.783423-41.068317-19.564058-9.085587-31.524335 40.319102-25.564071 54.926892-28.138192 3.307792-.582884 6.047833-2.98385 8.59422-5.107668 12.832915-10.703319-.86701-23.631504 18.282536-40.178792 17.469383-15.095445 71.733543-33.512531 78.949479-54.313076 1.526035-4.398924.639974-9.402825-.491551-13.911878-6.02573-24.012146-30.883952-45.682615-56.663178-40.669619-2.27601.44259-3.55746 3.046791-4.61424 5.046315-3.911428 7.400779-5.284644 16.073732-10.164012 22.915486-18.307386 25.670258-45.006045-14.198019-52.17579-26.374283-6.919049-11.750508-4.407195-19.837124 9.08577-26.343605 19.245919-9.28063 63.610771-13.989644 60.723468-41.768275z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/jsapp/svg-icons/language-default.svg b/jsapp/svg-icons/language-default.svg
new file mode 100644
index 0000000000..3306121284
--- /dev/null
+++ b/jsapp/svg-icons/language-default.svg
@@ -0,0 +1 @@
+<svg height="1200" viewBox="0 0 1200 1200" width="1200" xmlns="http://www.w3.org/2000/svg"><path d="m900 600h-60c0-20.76-2.91-40.8-7.86-60h-112.14v60h-60v-60h-120v120h60v60h-60v112.14c19.2 4.95 39.24 7.86 60 7.86v60c-165.69 0-300-134.31-300-300s134.31-300 300-300 300 134.31 300 300zm-507.63 120c21.06 36.36 51.3 66.57 87.63 87.63v-87.63zm-24.51-180c-4.95 19.2-7.86 39.24-7.86 60s2.91 40.8 7.86 60h112.14v-120zm112.14-147.63c-36.33 21.06-66.57 51.3-87.63 87.63h87.63zm180-24.51c-19.2-4.95-39.24-7.86-60-7.86s-40.8 2.91-60 7.86v112.14h120zm147.63 112.14c-21.06-36.33-51.3-66.57-87.63-87.63v87.63zm2.37 150 51.42 128.58h128.58l-111.24 93.9 59.79 137.52-128.55-85.02-128.58 85.02 59.82-137.52-111.24-93.9h128.55z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/jsapp/svg-icons/replace-all.svg b/jsapp/svg-icons/replace-all.svg
new file mode 100644
index 0000000000..ce6e142ec9
--- /dev/null
+++ b/jsapp/svg-icons/replace-all.svg
@@ -0,0 +1 @@
+<svg height="1200" viewBox="0 0 1200 1200" width="1200" xmlns="http://www.w3.org/2000/svg"><path d="m480 392.107727v147.892273h-60v-98.749464c-37.341805 42.307992-60 97.882676-60 158.749464 0 88.833855 48.263806 166.395095 119.999933 207.892234l.000067 67.145145c-105.954291-46.293403-180-152.01824-180-275.037379 0-67.536355 22.316689-129.860368 59.978029-180h-59.978029v-60h119.970753 60.029247zm60-24.546678v-61.559962c19.386596-3.935271 39.45205-6.001087 60-6.001087 145.137475 0 266.202693 103.065581 293.998913 240h-61.559962c-26.642568-103.513633-120.608585-180-232.438951-180-20.717974 0-40.822805 2.62518-60 7.561049zm60 292.438951h-60v-60h60zm0 120h-60v-60h60zm0 120h-60v-60h60zm300-240h-240v-60h240zm0 120h-240v-60h240zm0 120h-240v-60h240z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/jsapp/xlform/src/model.base.coffee b/jsapp/xlform/src/model.base.coffee
index 737ddd1f6e..91599731f8 100644
--- a/jsapp/xlform/src/model.base.coffee
+++ b/jsapp/xlform/src/model.base.coffee
@@ -163,7 +163,7 @@ module.exports = do ->
       # when attributes change, register changes with parent survey
       if @key in ["name", "label", "hint", "required",
                   "calculation", "default", "appearance",
-                  "constraint_message", "tags"]
+                  "constraint_message", "tags"] or @key.match(/^.+::.+/)
         @on "change", (changes)=>
           @getSurvey().trigger "change", changes
 
diff --git a/jsapp/xlform/src/model.inputParser.coffee b/jsapp/xlform/src/model.inputParser.coffee
index 52b77b10d8..e44d5dc2fe 100644
--- a/jsapp/xlform/src/model.inputParser.coffee
+++ b/jsapp/xlform/src/model.inputParser.coffee
@@ -1,5 +1,6 @@
 _ = require 'underscore'
 $aliases = require './model.aliases'
+utils = require '../../js/utils'
 
 module.exports = do ->
   inputParser = {}
@@ -39,7 +40,7 @@ module.exports = do ->
             lang_str = key
           item[lang_str] = _translated_val
         )
-    item
+    return item
 
   parseArr = (type='survey', sArr, translations=false)->
     counts = {
@@ -94,42 +95,29 @@ module.exports = do ->
     _curGrp().export().__rows
 
   inputParser.parseArr = parseArr
-  inputParser.parse = (o)->
+
+  # pass baseSurvey whenever you import other asset into existing form
+  inputParser.parse = (o, baseSurvey)->
     translations = o.translations
-    if o['#active_translation_name']
-      _existing_active_translation_name = o['#active_translation_name']
-      delete o['#active_translation_name']
-
-    if translations
-      if translations.indexOf(null) is -1 # there is no unnamed translation
-        if _existing_active_translation_name
-          throw new Error('active translation set, but cannot be found')
-        o._active_translation_name = translations[0]
-        translations[0] = null
-      else if translations.indexOf(null) > 0
-        throw new Error("""
-                        There is an unnamed translation in your form definition.
-                        Please give a name to all translations in your form.
-                        """)
-      else if _existing_active_translation_name # there is already an active null translation
-        o._active_translation_name = _existing_active_translation_name
-    else
-      translations = [null]
+
+    nullified = utils.nullifyTranslations(o.translations, o.translated, o.survey, baseSurvey)
+
+    o.survey = nullified.survey;
+    o.translations = nullified.translations
+    o.translations_0 = nullified.translations_0
 
     # sorts groups and repeats into groups and repeats (recreates the structure)
     if o.survey
-      o.survey = parseArr('survey', o.survey, translations)
+      o.survey = parseArr('survey', o.survey, o.translations)
 
     if o.choices
-      o.choices = parseArr('choices', o.choices, translations)
+      o.choices = parseArr('choices', o.choices, o.translations)
 
     # settings is sometimes packaged as an array length=1
     if o.settings and _.isArray(o.settings) and o.settings.length is 1
       o.settings = o.settings[0]
 
-    o.translations = translations
-
-    o
+    return o
 
   inputParser.loadChoiceLists = (passedChoices, choices)->
     tmp = {}
diff --git a/jsapp/xlform/src/model.row.coffee b/jsapp/xlform/src/model.row.coffee
index a3c061114e..95b8f0c4f9 100644
--- a/jsapp/xlform/src/model.row.coffee
+++ b/jsapp/xlform/src/model.row.coffee
@@ -400,23 +400,6 @@ module.exports = do ->
 
       return newRow
 
-    getTranslatedColumnKey: (col, whichone="primary")->
-      if whichone is "_2"
-        _t = @getSurvey()._translation_2
-      else
-        _t = @getSurvey()._translation_1
-      _key = "#{col}"
-      if _t isnt null
-        _key += "::#{_t}"
-      _key
-
-    getLabel: (whichone="primary")->
-      _col = @getTranslatedColumnKey("label", whichone)
-      if _col of @attributes
-        @getValue _col
-      else
-        null
-
     finalize: ->
       existing_name = @getValue("name")
       unless existing_name
diff --git a/jsapp/xlform/src/model.survey.coffee b/jsapp/xlform/src/model.survey.coffee
index 4392a80e09..fc9a4a09a7 100644
--- a/jsapp/xlform/src/model.survey.coffee
+++ b/jsapp/xlform/src/model.survey.coffee
@@ -32,17 +32,6 @@ module.exports = do ->
       @choices = new $choices.ChoiceLists([], _parent: @)
       $inputParser.loadChoiceLists(options.choices || [], @choices)
 
-      if options.translations
-        @translations = options.translations
-      else
-        @translations = [null]
-
-      if options['_active_translation_name']
-        @active_translation_name = options['_active_translation_name']
-
-      @_translation_1 = @translations[0]
-      @_translation_2 = @translations[1]
-
       if options.survey
         if !$inputParser.hasBeenParsed(options)
           options.survey = $inputParser.parseArr(options.survey)
@@ -63,6 +52,7 @@ module.exports = do ->
 
     @create: (options={}, addlOpts) ->
       return new Survey(options, addlOpts)
+
     linkUpChoiceLists: ->
       # In case of cascading selects, this will ensure choiceLists are connected to
       # sub choice lists through a private "__cascadeList" property
@@ -73,7 +63,7 @@ module.exports = do ->
           throw new Error("cascading choices can only reference one choice list")
         else if overlapping_choice_keys.length is 1
           choiceList.__cascadedList = @choices.get(overlapping_choice_keys[0])
-      null
+      return
 
     insert_row: (row, index) ->
       if row._isCloned
@@ -141,11 +131,6 @@ module.exports = do ->
       addlSheets =
         choices: new $choices.ChoiceLists()
 
-      if @active_translation_name
-        obj['#active_translation_name'] = @active_translation_name
-
-      obj.translations = [].concat(@translations)
-
       obj.survey = do =>
         out = []
         fn = (r)->
@@ -311,8 +296,8 @@ module.exports = do ->
   Survey.load.md = (md)->
     sObj = $markdownTable.mdSurveyStructureToObject(md)
     new Survey(sObj)
-  Survey.loadDict = (obj)->
-    _parsed = $inputParser.parse obj
+  Survey.loadDict = (obj, baseSurvey)->
+    _parsed = $inputParser.parse(obj, baseSurvey)
     new Survey(_parsed)
 
   _is_csv = (csv_repr)->
diff --git a/jsapp/xlform/src/view.choices.coffee b/jsapp/xlform/src/view.choices.coffee
index b23dd2288e..da166bc3c6 100644
--- a/jsapp/xlform/src/view.choices.coffee
+++ b/jsapp/xlform/src/view.choices.coffee
@@ -21,10 +21,9 @@ module.exports = do ->
       if cardText.find('.card__buttons__multioptions.js-expand-multioptions').length is 0
         cardText.prepend $.parseHTML($viewTemplates.row.expandChoiceList())
       @$el.html (@ul = $("<ul>", class: @ulClasses))
-      _ts = @model.getSurvey().translations
       if @row.get("type").get("rowType").specifyChoice
         for option, i in @model.options.models
-          new OptionView(model: option, cl: @model, translations: _ts).render().$el.appendTo @ul
+          new OptionView(model: option, cl: @model).render().$el.appendTo @ul
         if i == 0
           while i < 2
             @addEmptyOption("Option #{++i}")
@@ -60,8 +59,7 @@ module.exports = do ->
     addEmptyOption: (label)->
       emptyOpt = new $choices.Option(label: label)
       @model.options.add(emptyOpt)
-      _translations = @model.getSurvey().translations
-      new OptionView(model: emptyOpt, cl: @model, translations: _translations).render().$el.appendTo @ul
+      new OptionView(model: emptyOpt, cl: @model).render().$el.appendTo @ul
       lis = @ul.find('li')
       if lis.length == 2
         lis.find('.js-remove-option').removeClass('hidden')
@@ -136,18 +134,6 @@ module.exports = do ->
       @d.append(@t)
       @d.append(@c)
       @$el.html(@d)
-
-      _translation_2 = @options.translations[1]
-      if _translation_2 isnt undefined
-        _t_opt = @model.get("label::#{_translation_2}")
-        if !_t_opt
-          _no_t = _t("No translation")
-          _klss = ["card__option-translation", "card__option-translation--empty"].join(" ")
-          _t_opt = """<span class="#{_klss}">#{_no_t}</span>"""
-        $("<small>", {className: 'secondary-translation'}).html("""
-            <span>+&nbsp;</span>
-            <span class="translated-text">#{_t_opt}</span>
-          """).appendTo(@$el)
       @
     keyupinput: (evt)->
       ifield = @$("input.inplace_field")
diff --git a/jsapp/xlform/src/view.row.coffee b/jsapp/xlform/src/view.row.coffee
index 5d55b0fd82..0732c74e4b 100644
--- a/jsapp/xlform/src/view.row.coffee
+++ b/jsapp/xlform/src/view.row.coffee
@@ -25,7 +25,7 @@ module.exports = do ->
       @ngScope = opts.ngScope
       @surveyView = @options.surveyView
       @model.on "detail-change", (key, value, ctxt)=>
-        customEventName = "row-detail-change-#{key}"
+        customEventName = $viewUtils.normalizeEventName("row-detail-change-#{key}")
         @$(".on-#{customEventName}").trigger(customEventName, key, value, ctxt)
 
     drop: (evt, index)->
@@ -66,7 +66,6 @@ module.exports = do ->
     _renderRow: ->
       @$el.html $viewTemplates.$$render('row.xlfRowView', @surveyView)
       @$label = @$('.card__header-title')
-      @$sub_label = @$('.card__header-subtitle')
       @$card = @$('.card')
       @$header = @$('.card__header')
       context = {warnings: []}
@@ -77,13 +76,6 @@ module.exports = do ->
         @listView = new $viewChoices.ListView(model: cl, rowView: @).render()
 
       @cardSettingsWrap = @$('.card__settings').eq(0)
-      _second_translation = @surveyView.survey._translation_2
-      if _second_translation isnt undefined
-        _second_val = @model.getLabel('_2')
-        if !_second_val
-          _no_t = _t("No translation")
-          _second_val = """<span class="card__header-subtitle-empty-value">#{_no_t}</span>"""
-        @$sub_label.html(_second_val).show()
       @defaultRowDetailParent = @cardSettingsWrap.find('.card__settings__fields--question-options').eq(0)
       for [key, val] in @model.attributesArray() when key is 'label' or key is 'type'
         view = new $viewRowDetail.DetailView(model: val, rowView: @)
@@ -175,7 +167,7 @@ module.exports = do ->
       @cardSettingsWrap = @$('.card__settings').eq(0)
       @defaultRowDetailParent = @cardSettingsWrap.find('.card__settings__fields--active').eq(0)
       for [key, val] in @model.attributesArray()
-        if key in ["name", "_isRepeat", "appearance", "relevant"] or key.match(/^label::/)
+        if key in ["name", "_isRepeat", "appearance", "relevant"] or key.match(/^.+::.+/)
           new $viewRowDetail.DetailView(model: val, rowView: @).render().insertInDOM(@)
 
       @model.on 'add', (row) =>
diff --git a/jsapp/xlform/src/view.row.templates.coffee b/jsapp/xlform/src/view.row.templates.coffee
index 2ec0b7f1ee..e3fc36d240 100644
--- a/jsapp/xlform/src/view.row.templates.coffee
+++ b/jsapp/xlform/src/view.row.templates.coffee
@@ -63,7 +63,6 @@ module.exports = do ->
           </div>
           <div class="card__text">
             <span class="card__header-title js-cancel-select-row js-cancel-sort"></span>
-            <p class="card__header-subtitle js-cancel-select-row js-cancel-sort" style="display:none"></p>
           </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="fa fa-cog"></i></span>
@@ -107,7 +106,6 @@ module.exports = do ->
           </div>
           <div class="card__text">
             <span class="card__header-title js-cancel-select-row js-cancel-sort"></span>
-            <p class="card__header-subtitle js-cancel-select-row js-cancel-sort" style="display:none"></p>
           </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="fa fa-cog"></i></span>
diff --git a/jsapp/xlform/src/view.surveyApp.coffee b/jsapp/xlform/src/view.surveyApp.coffee
index 93cde7622c..86624f84ab 100644
--- a/jsapp/xlform/src/view.surveyApp.coffee
+++ b/jsapp/xlform/src/view.surveyApp.coffee
@@ -138,7 +138,7 @@ module.exports = do ->
       @survey.on "row-detail-change", (row, key, val, ctxt)=>
         if key.match(/^\$/)
           return
-        evtCode = "row-detail-change-#{key}"
+        evtCode = $viewUtils.normalizeEventName("row-detail-change-#{key}")
         @$(".on-#{evtCode}").trigger(evtCode, row, key, val, ctxt)
       @$el.on "choice-list-update", (evt, clId) =>
         $(".on-choice-list-update[data-choice-list-cid='#{clId}']").trigger("rebuild-choice-list")
diff --git a/jsapp/xlform/src/view.surveyApp.templates.coffee b/jsapp/xlform/src/view.surveyApp.templates.coffee
index 144f41ab7e..d5c300407e 100644
--- a/jsapp/xlform/src/view.surveyApp.templates.coffee
+++ b/jsapp/xlform/src/view.surveyApp.templates.coffee
@@ -23,15 +23,6 @@ module.exports = do ->
         for warning in surveyApp.warnings
           warnings_html += """<p class="survey-warnings__warning">#{warning}</p>"""
         warnings_html += """<button class="survey-warnings__close-button js-close-warning">x</button></div>"""
-      if survey.translations
-        t0 = survey._translation_1
-        t1 = survey._translation_2
-        print_translation = (tx)-> if tx is null then "Unnamed translation" else tx
-        translations_content = "#{print_translation(t0)}"
-        if t1
-          translations_content += " [<small>#{print_translation(t1)}</small>]"
-      else
-        translations_content = ""
 
       """
         #{warnings_html}
diff --git a/jsapp/xlform/src/view.utils.coffee b/jsapp/xlform/src/view.utils.coffee
index a70ef09b5f..15a0a11e72 100644
--- a/jsapp/xlform/src/view.utils.coffee
+++ b/jsapp/xlform/src/view.utils.coffee
@@ -6,6 +6,12 @@ module.exports = do ->
   viewUtils = {}
   viewUtils.Validator = Validator
 
+  # replaces characters that jQuery can't handle in event name
+  viewUtils.normalizeEventName = (eventName) ->
+    regex = new RegExp('[: ()]', 'g')
+    eventName = eventName.replace(regex, '-');
+    return eventName
+
   viewUtils.makeEditable = (that, model, selector, {property, transformFunction, options, edit_callback}) ->
     if !(selector instanceof jQuery)
       selector =that.$el.find(selector)
diff --git a/package.json b/package.json
index 5221734f61..33f4fdb82e 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "leaflet.heat": "^0.2.0",
     "leaflet.markercluster": "^1.3.0",
     "lodash._bindcallback": "^3.0.1",
+    "lodash.clonedeep": "^4.5.0",
     "lodash.isarguments": "^3.0.4",
     "lodash.isarray": "^3.0.4",
     "lodash.merge": "^3.3.2",
@@ -49,7 +50,7 @@
     "mocha-chrome": "^1.1.0",
     "moment": "^2.10.3",
     "ms": "^0.7.1",
-    "node-sass": "^4.5.1",
+    "node-sass": "^4.9.3",
     "object-assign": "^4.1.1",
     "opn-cli": "^3.1.0",
     "postcss": "^6.0.22",
@@ -87,7 +88,7 @@
     "webpack-bundle-tracker": "0.4.0-beta",
     "webpack-cli": "^2.1.4",
     "webpack-dev-middleware": "3.0.0",
-    "webpack-dev-server": "^3.1.4",
+    "webpack-dev-server": "^3.1.8",
     "webpack-hot-middleware": "2.21.2"
   },
   "scripts": {
diff --git a/test/index.js b/test/index.js
index a9a1eb2dcb..fa3fb653c7 100644
--- a/test/index.js
+++ b/test/index.js
@@ -15,3 +15,5 @@ require('./xlform/translations.tests')
 require('./xlform/model.tests')
 require('./xlform/survey.tests')
 require('./xlform/utils.tests')
+
+require('../jsapp/js/utils.tests')
diff --git a/test/xlform/survey.tests.coffee b/test/xlform/survey.tests.coffee
index ceb66058bd..5ab1929c0f 100644
--- a/test/xlform/survey.tests.coffee
+++ b/test/xlform/survey.tests.coffee
@@ -136,10 +136,7 @@ do ->
                 'name': 'no'
               }
             ]
-          },
-          'translations': [
-            null
-          ],
+          }
         })
     describe 'survey row reordering', ->
       beforeEach ->
diff --git a/test/xlform/translations.tests.coffee b/test/xlform/translations.tests.coffee
index da196ba3cf..3c8a41b371 100644
--- a/test/xlform/translations.tests.coffee
+++ b/test/xlform/translations.tests.coffee
@@ -3,131 +3,25 @@
 $inputParser = require("../../jsapp/xlform/src/model.inputParser")
 $survey = require("../../jsapp/xlform/src/model.survey")
 
-describe " translations set proper values ", ->
-  process = (src)->
+describe("translations", ->
+  process = (src) ->
     parsed = $inputParser.parse(src)
     new $survey.Survey(parsed)
 
-  it 'example 0', ->
-    survey1 = process(
-        survey: [
-            type: "text"
-            label: "VAL1",
-            name: "val1",
-          ]
-      )
-    survey2 = process(
-        survey: [
-            type: "text"
-            label: ["VAL1"],
-            name: "val1",
-          ]
-        translations: [null]
-      )
-
-    expect(survey1._translation_1).toEqual(null)
-    expect(survey1._translation_2).toEqual(undefined)
-
-    expect(survey2._translation_1).toEqual(null)
-    expect(survey2._translation_2).toEqual(undefined)
-
-  it 'does not have active_translation_name value when none set', ->
-    survey_json = process(
-        survey: [type: "text", label: ["VAL1"], name: "val1"]
-        translations: [null]
-      ).toJSON()
-    expect(survey_json['#active_translation_name']).toBeUndefined()
-
-  it 'passes thru active_translation_name', ->
-    survey = process(
-        survey: [
-            type: "text"
-            label: ["VAL1_NULL", "VAL2_L2"],
-            name: "val1",
-          ]
-        translations: [null, "L2"]
-        '#active_translation_name': 'XYZ'
-      )
-    expect(survey.active_translation_name).toEqual('XYZ')
-    _json = survey.toJSON()
-    expect(_json['#active_translation_name']).toEqual('XYZ')
-
-  it 'fails with invalid active_translation_name', ->
-    run = ->
-      survey = process(
-          survey: [
-              type: "text"
-              label: ["VAL1_NULL", "VAL2_L2"],
-              name: "val1",
-            ]
-          translations: ["L1", "L2"]
-          '#active_translation_name': 'XYZ'
-        )
-    # "#active_translation_name" is set, but refers to a value in "translations"
-    # but in this case there is no null in the translations list so it should
-    # throw an error
-    expect(run).toThrow()
-
-  it 'example 1', ->
-    survey = process(
-        survey: [
-            type: "text"
-            label: ["VAL1_NULL", "VAL2_L2"],
-            name: "val1",
-          ]
-        translations: [null, "L2"]
-      )
-    expect(survey._translation_1).toEqual(null)
-    expect(survey._translation_2).toEqual("L2")
-    r0 = survey.rows.at(0)
-    expect(r0.getLabel('_1')).toEqual('VAL1_NULL')
-    expect(r0.getLabel('_2')).toEqual('VAL2_L2')
-
-    rj0 = survey.toJSON().survey[0]
-    expect(rj0['label']).toBeDefined()
-    expect(rj0['label::L2']).toBeDefined()
-
-  it 'example 2', ->
-    survey = process(
-        survey: [
-            type: "text"
-            label: ["VAL1_L1", "VAL2_L2"],
-            name: "val1",
-          ]
-        translations: ["L1", "L2"]
-      )
-    src = $inputParser.parse(
-        survey: [
-            type: "text"
-            label: ["VAL1_L1", "VAL2_L2"],
-            name: "val1",
-          ]
-        translations: ["L1", "L2"]
-      )
-    expect(src['_active_translation_name']).toEqual("L1")
-    expect(src.translations[0]).toEqual(null)
-
-    expect(survey._translation_2).toEqual("L2")
-    _sjson = survey.toJSON()
-
-    r0 = survey.rows.at(0)
-    expect(r0.getLabel('_1')).toEqual('VAL1_L1')
-    expect(r0.getLabel('_2')).toEqual('VAL2_L2')
-
-    rj0 = _sjson.survey[0]
-    expect(rj0['label']).toBeDefined()
-    expect(rj0['label::L2']).toBeDefined()
-    expect(_sjson['#active_translation_name']).toEqual('L1')
-
-  it 'example 3', ->
+  it('should not allow editing form with unnamed translation', ->
     run = ->
       survey = process(
         survey: [
-            type: "text"
-            label: ["VAL1_L2", "VAL2_NULL"],
-            name: "val1",
-          ]
-        translations: ["L2", null]
+          type: "text"
+          label: ["Ciasto?", "Pizza?"],
+          name: "Pizza survey",
+        ]
+        translations: ["polski (pl)", null]
       )
-    # run()
-    expect(run).toThrow('There is an unnamed translation in your form definition')
+    expect(run).toThrow("""
+      There is an unnamed translation in your form definition.
+      Please give a name to all translations in your form.
+      Use "Manage Translations" option from form landing page.
+    """)
+  )
+)
diff --git a/webpack/test.config.js b/webpack/test.config.js
index 0e4000ce0f..32328e3206 100644
--- a/webpack/test.config.js
+++ b/webpack/test.config.js
@@ -1,14 +1,13 @@
-
 const path = require('path');
 const webpack = require('webpack');
 const WebpackCommon = require('./webpack.common');
 
 module.exports = WebpackCommon({
-  mode: "development",
+  mode: 'development',
   entry: path.resolve(__dirname, '../test/index.js'),
   output: {
     library: 'tests',
     path: path.resolve(__dirname, '../test/compiled/'),
-    filename: "app.js"
+    filename: 'app.js'
   }
 });