diff --git a/src/options/elements/credits-dialog/credits-dialog.js b/src/options/elements/credits-dialog/credits-dialog.js
new file mode 100644
index 0000000..abec000
--- /dev/null
+++ b/src/options/elements/credits-dialog/credits-dialog.js
@@ -0,0 +1,146 @@
+import {css, html, LitElement} from 'lit';
+import {map} from 'lit/directives/map.js';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+
+import {msg} from '../../../common/i18n.js';
+import credits from '../../credits.json5';
+import i18nCredits from '../../i18n-credits.json5';
+import {DIALOG_STYLES} from '../../shared/dialog-styles.js';
+import {SHARED_STYLES} from '../../shared/shared-styles.js';
+
+export class CreditsDialog extends LitElement {
+  static get styles() {
+    return [
+      SHARED_STYLES,
+      DIALOG_STYLES,
+      css`
+        dialog {
+          max-height: 430px;
+          width: 400px;
+        }
+
+        dialog[open] {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .content_area h4 {
+          margin-bottom: 0;
+        }
+
+        .entry {
+          position: relative;
+        }
+
+        .entry a.homepage {
+          position: absolute;
+          inset-inline-end: 16px;
+          font-size: 14px;
+        }
+
+        p,
+        span {
+          font-size: 14px;
+        }
+
+        p.author {
+          margin-top: 7px;
+        }
+
+        #translators .name {
+          font-weight: bold;
+        }
+
+        .createdby {
+          font-style: italic;
+        }
+      `,
+    ];
+  }
+
+  constructor() {
+    super();
+    this.addEventListener('show-credits-dialog', this.showDialog);
+  }
+
+  render() {
+    let translators = map(i18nCredits, contributor => {
+      let languagesArray =
+          contributor?.languages?.map?.(lang => lang?.name ?? 'undefined');
+      let languages =
+          languagesArray.length > 0 ? ': ' + languagesArray.join(', ') : '';
+      return html`
+        <li>
+          <span class="name">${contributor?.name}</span>${languages}
+        </li>
+      `;
+    });
+
+    let homepageMsg = msg('options_credits_homepage');
+    let creditsByMsg = msg('options_credits_by');
+
+    let otherCredits = map(credits, c => {
+      let url = c.url ? html`
+            <a href=${c?.url} target="_blank" class="homepage">
+              ${homepageMsg}
+            </a>` :
+                        undefined;
+      let license = c.license ? ' - ' + c.license : '';
+      let author = c.author ? html`
+        <p class="author">
+          ${creditsByMsg} ${c.author}${license}
+        </p>
+      ` :
+                              undefined;
+
+      return html`
+        <div class="entry">
+          ${url}
+          <h4>${c?.name}</h4>
+          ${author}
+        </div>
+      `;
+    });
+
+    return html`
+      <dialog>
+        <div class="scrollable">
+          <h3>${msg('options_credits')}</h3>
+          <div class="entry createdby">
+            <div>${unsafeHTML(msg('options_credits_createdby'))}</div>
+          </div>
+          <div class="entry">
+            <a href="https://gtranslate.avm99963.com/" class="homepage" target="_blank">
+              ${msg('options_credits_homepage')}
+            </a>
+            <h4>${msg('options_credits_translations')}</h4>
+            <div>${msg('options_credits_translations_paragraph')}</div>
+            <ul id="translators">
+              ${translators}
+            </ul>
+          </div>
+          <div class="content_area">
+            ${otherCredits}
+          </div>
+        </div>
+        <div class="action_buttons">
+          <button id="credits_ok" @click="${this.closeDialog}">
+            ${msg('options_ok')}
+          </button>
+        </div>
+      </dialog>
+    `;
+  }
+
+  showDialog() {
+    let dialog = this.renderRoot.querySelector('dialog');
+    dialog.showModal();
+    dialog.querySelector('.scrollable').scrollTo(0, 0);
+    dialog.querySelector('#credits_ok').focus();
+  }
+
+  closeDialog() {
+    this.renderRoot.querySelector('dialog').close();
+  }
+}
+customElements.define('credits-dialog', CreditsDialog);
diff --git a/src/options/elements/options-editor/add-language-dialog.js b/src/options/elements/options-editor/add-language-dialog.js
new file mode 100644
index 0000000..7b85618
--- /dev/null
+++ b/src/options/elements/options-editor/add-language-dialog.js
@@ -0,0 +1,112 @@
+import {css, html, LitElement} from 'lit';
+
+import {isoLangs} from '../../../common/consts.js';
+import {msg} from '../../../common/i18n.js';
+import {DIALOG_STYLES} from '../../shared/dialog-styles.js';
+import {SHARED_STYLES} from '../../shared/shared-styles.js';
+
+const ALL_LANGUAGES =
+    Object.entries(isoLangs)
+        .map(entry => {
+          let lang = entry[1];
+          lang.code = entry[0];
+          return lang;
+        })
+        .sort((a, b) => a.name < b.name ? -1 : (a.name > b.name ? 1 : 0));
+
+export class AddLanguageDialog extends LitElement {
+  static properties = {
+    languages: {type: Object},
+  };
+
+  static get styles() {
+    return [
+      SHARED_STYLES,
+      DIALOG_STYLES,
+      css`
+        dialog {
+          max-height: 430px;
+          width: 430px;
+        }
+
+        #language_label {
+          font-size: 12px;
+        }
+
+        select {
+          width: 100%;
+        }
+
+        .action_buttons {
+          border-top: none;
+          padding-top: 0;
+        }
+      `,
+    ];
+  }
+
+  constructor() {
+    super();
+    this.addEventListener('show-add-language-dialog', this.showDialog);
+  }
+
+  render() {
+    let languageCodes = Object.values(this.languages ?? {});
+    let languages = ALL_LANGUAGES
+                        .filter(lang => {
+                          return !languageCodes.includes(lang.code);
+                        })
+                        .map(lang => {
+                          return html`
+          <option value=${lang.code}>
+            ${lang?.name} (${lang?.nativeName})
+          </option>
+        `;
+                        });
+
+    return html`
+      <dialog>
+        <div class="scrollable">
+          <h3>${msg('options_addlanguage')}</h3>
+          <div class="content_area">
+            <label id="language_label" for="select_language">
+              ${msg('options_language_label')}
+            </label>
+            <select id="select_language">${languages}</select>
+          </div>
+        </div>
+        <div class="action_buttons">
+          <button @click=${this.closeDialog}>
+            ${msg('options_cancel')}
+          </button>
+          <button @click=${this.addLanguage}>
+            ${msg('options_addlanguage_addbutton')}
+          </button>
+        </div>
+      </dialog>
+    `;
+  }
+
+  showDialog() {
+    let dialog = this.renderRoot.querySelector('dialog');
+    dialog.showModal();
+  }
+
+  closeDialog() {
+    this.renderRoot.querySelector('dialog').close();
+  }
+
+  addLanguage() {
+    let languageCodes = Object.values(this.languages ?? {});
+    let select = this.renderRoot.querySelector('#select_language');
+
+    let newLang = select.value;
+    languageCodes.push(newLang);
+    let translateinto = Object.assign({}, languageCodes);
+    chrome.storage.sync.set({translateinto}, () => {
+      select.selectedIndex = 0;
+      this.closeDialog();
+    });
+  }
+}
+customElements.define('add-language-dialog', AddLanguageDialog);
diff --git a/src/options/elements/options-editor/languages-editor.js b/src/options/elements/options-editor/languages-editor.js
new file mode 100644
index 0000000..7845a65
--- /dev/null
+++ b/src/options/elements/options-editor/languages-editor.js
@@ -0,0 +1,188 @@
+import {css, html, LitElement} from 'lit';
+import {map} from 'lit/directives/map.js';
+
+import {isoLangs} from '../../../common/consts.js';
+import {msg} from '../../../common/i18n.js';
+import {SHARED_STYLES} from '../../shared/shared-styles.js';
+
+import AddLanguageDialog from './add-language-dialog.js';
+
+export class LanguagesEditor extends LitElement {
+  static properties = {
+    languages: {type: Object},
+  };
+
+  static get styles() {
+    return [
+      SHARED_STYLES,
+      css`
+        #languages_container {
+          width: 300px;
+          height: 250px;
+          border: 1px solid #ccc;
+          background-color: #E3F2FD;
+          overflow: auto;
+        }
+
+        #languages {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+
+        #languages li {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          padding: 15px;
+          border-bottom: 1px dashed #ddd;
+          background-color: #EEF7FD;
+          -webkit-user-select: none;
+        }
+
+        #languages li .label {
+          flex-grow: 1;
+        }
+
+        #languages li .delete {
+          font-size: 18px;
+          color: red;
+          padding-left: 2px;
+          margin-left: 2px;
+        }
+
+        #languages li .movebtn {
+          font-size: 16px;
+          color: blue;
+          padding: 0 2px;
+          margin: 0 2px;
+        }
+
+        #languages li :is(.delete, .movebtn) {
+          cursor: pointer;
+          text-align: center;
+        }
+
+        #languages li .movebtn--disabled {
+          color: gray;
+          cursor: not-allowed;
+        }
+
+        #languages_footer {
+          width: 300px;
+          height: 35px;
+          background-color: #fff;
+          border: 1px solid #ccc;
+          border-top: 0;
+        }
+
+        #languages_add {
+          margin-inline-start: 4px;
+          margin-top: 4px;
+        }
+      `,
+    ];
+  }
+
+  constructor() {
+    super();
+    this.addEventListener('show-credits-dialog', this.showDialog);
+    this.sortable = undefined;
+  }
+
+  render() {
+    let languageCodes = Object.values(this.languages ?? {});
+    let languageList = map(languageCodes, (lang, i) => {
+      let moveBtns = [];
+      if (i != 0) {
+        moveBtns.push(html`
+          <button
+              class="notbtn movebtn"
+              @click=${() => this.swapLanguages(i, i - 1)}>
+            ↑
+          </button>
+        `);
+      } else {
+        moveBtns.push(html`
+          <button class="notbtn movebtn movebtn--disabled">
+            ↑
+          </button>
+        `);
+      }
+      if (i != languageCodes.length - 1) {
+        moveBtns.push(html`
+          <button
+              class="notbtn movebtn"
+              @click=${() => this.swapLanguages(i, i + 1)}>
+            ↓
+          </button>
+        `);
+      } else {
+        moveBtns.push(html`
+          <button class="notbtn movebtn movebtn--disabled">
+            ↓
+          </button>
+        `);
+      }
+
+      return html`
+        <li data-id=${lang}>
+          <span class="label">
+            ${isoLangs?.[lang]?.['name']} (${isoLangs?.[lang]?.nativeName})
+          </span>
+          ${moveBtns}
+          <button
+              class="notbtn delete"
+              @click=${() => this.deleteLanguage(lang)}>
+            ×
+          </button>
+        </li>
+      `;
+    });
+
+    return html`
+      <div id="languages_container">
+        <ul id="languages">${languageList}</ul>
+      </div>
+      <div id="languages_footer">
+        <button @click=${this.showAddLanguageDialog} id="languages_add">
+          ${msg('options_addlanguage_addbutton')}
+        </button>
+      </div>
+
+      <add-language-dialog .languages=${this.languages}></add-language-dialog>
+    `;
+  }
+
+  showAddLanguageDialog() {
+    const e = new CustomEvent(
+        'show-add-language-dialog', {bubbles: true, composed: true});
+    this.renderRoot.querySelector('add-language-dialog').dispatchEvent(e);
+  }
+
+  save(languageCodes) {
+    let translateinto = Object.assign({}, languageCodes);
+    chrome.storage.sync.set({translateinto});
+  }
+
+  deleteLanguage(deleteLang) {
+    let languageCodes =
+        Object.values(this.languages ?? {}).filter(lang => lang != deleteLang);
+    this.save(languageCodes);
+  }
+
+  swapLanguages(i, j) {
+    let languageCodes = Object.values(this.languages ?? {});
+    if (i >= languageCodes.length || j >= languageCodes.length || i < 0 ||
+        j < 0) {
+      console.error(
+          'Can\'t swap languages because the indexes are out of the range.');
+      return;
+    }
+    let tmp = languageCodes[j];
+    languageCodes[j] = languageCodes[i];
+    languageCodes[i] = tmp;
+    this.save(languageCodes);
+  }
+}
+customElements.define('languages-editor', LanguagesEditor);
diff --git a/src/options/elements/options-editor/options-editor.js b/src/options/elements/options-editor/options-editor.js
new file mode 100644
index 0000000..9e32dfa
--- /dev/null
+++ b/src/options/elements/options-editor/options-editor.js
@@ -0,0 +1,88 @@
+import {css, html, LitElement} from 'lit';
+import {map} from 'lit/directives/map.js';
+
+import {msg} from '../../../common/i18n.js';
+import {SHARED_STYLES} from '../../shared/shared-styles.js';
+
+import LanguagesEditor from './languages-editor.js';
+
+const TAB_OPTIONS = [
+  // Open in new tab for each translation
+  {
+    value: '',
+    labelMsg: 'options_tabsoption_1',
+    deprecatedValues: [],
+  },
+  // Open in a unique tab
+  {
+    value: 'yep',
+    labelMsg: 'options_tabsoption_2',
+    deprecatedValues: [],
+  },
+  // Open in a popup
+  {
+    value: 'popup',
+    labelMsg: 'options_tabsoption_3',
+    deprecatedValues: ['panel'],
+  },
+];
+
+export class OptionsEditor extends LitElement {
+  static properties = {
+    storageData: {type: Object},
+  };
+
+  static get styles() {
+    return [
+      SHARED_STYLES,
+      css`
+        #otheroptions p {
+          margin-top: 0;
+          margin-bottom: 8px;
+        }
+      `,
+    ];
+  }
+
+  constructor() {
+    super();
+    this.addEventListener('show-credits-dialog', this.showDialog);
+  }
+
+  render() {
+    let currentTabOption = this.storageData?.uniquetab;
+
+    let otherOptions = map(TAB_OPTIONS, (option, i) => {
+      let checked = option.value == currentTabOption ||
+          option.deprecatedValues.includes(currentTabOption);
+      return html`
+            <p>
+              <input type="radio" name="uniquetab" id="uniquetab_${i}"
+                  value="${option?.value}" ?checked="${checked}"
+                  @change="${() => this.changeTabOption(option.value)}">
+              <label for="uniquetab_${i}">${msg(option.labelMsg)}</label></p>
+          `;
+    });
+
+    return html`
+      <languages-editor .languages="${this.storageData?.translateinto}">
+      </languages-editor>
+
+      <h2 id="otheroptionsheader">${msg('options_otheroptionsheader')}</h2>
+
+      <div id="otheroptions">
+        ${otherOptions}
+      </div>
+    `;
+  }
+
+  changeTabOption(value) {
+    chrome.storage.sync.set({uniquetab: value}, function() {
+      var background = chrome.extension.getBackgroundPage();
+
+      background.translator_tab = false;
+      background.translator_window = false;
+    });
+  }
+}
+customElements.define('options-editor', OptionsEditor);