diff --git a/app/templates/cardTemplates.html b/app/templates/cardTemplates.html
index 7059c944..367bdf29 100755
--- a/app/templates/cardTemplates.html
+++ b/app/templates/cardTemplates.html
@@ -14,7 +14,7 @@
   <template id="filter-template">
     <div class="ui three fields">
       <div class="ui field">
-        <div data-value="filter-arguments" class="ui clearable selection dropdown">
+        <div class="ui clearable selection dropdown" data-value="filter-arguments">
           <input name="argument" type="hidden">
           <i class="dropdown icon"></i>
           <div class="default text">Select Argument</div>
@@ -22,7 +22,7 @@
         </div>
       </div>
       <div class="ui field">
-        <div data-value="filter-operators" class="ui clearable selection dropdown">
+        <div class="ui clearable selection dropdown" data-value="filter-operators">
           <input name="operation" type="hidden">
           <i class="dropdown icon"></i>
           <div class="default text">Select Operation</div>
@@ -40,7 +40,7 @@
   <template id="extra-template">
     <div class="field">
       <label>{label}</label>
-      <input type="text">
+      <input oninput="updateColorBubble(this);" onchange="updateLinkedFields(this);" type="text">
       <p class="help">{tooltip}</p>
     </div>
   </template>
@@ -48,18 +48,21 @@
   <template id="translation-template">
     <span class="ui text">
       Translate
-      <div data-value="language_code" class="ui inline scrolling clearable dropdown">
+      <div class="ui inline scrolling clearable dropdown" data-value="language_code">
         <input name="language_code" type="hidden">
-        <div class="text">{language}</div>
+        <div class="default text">Language</div>
         <i class="dropdown icon"></i>
         <div class="menu"><!-- Added asynchronously --></div>
       </div>
       titles into 
-      <div data-value="data_key" class="ui inline user-additions search clearable dropdown">
+      <div class="ui inline user-additions search clearable dropdown" data-value="data_key">
         <input name="data_key" type="hidden">
-        <div class="text"></div>
+        <div class="default text">Key</div>
         <i class="dropdown icon"></i>
-        <div class="menu"><!-- Added asynchronously --></div>
+        <div class="menu">
+          <div class="item" data-value="preferred_title" data-text="the title text">Title Text</div>
+          <div class="item" data-value="kanji" data-text="kanji">Kanji</div>
+        </div>
       </div>
     </span>
     <br>
@@ -69,7 +72,7 @@
     <div class="ui styled fluid accordion">
       <div class="title">
         <i class="dropdown icon"></i>
-        TEMPLATE NAME
+        Name
       </div>
       <div class="content">
         <div class="ui stackable grid">
@@ -115,7 +118,7 @@ <h3 class="ui header">Unwatched Content</h3>
 
               <h4 class="ui horizontal middle aligned divider header">Filters</h4>
 
-              <div>
+              <div data-label="filters">
                 <div class="ui floating visible info small message">
                   <span class="ui text">Filters restrict when a Template is active for a Series or Episode.</span>
                   <ul class="list">
@@ -126,7 +129,7 @@ <h4 class="ui horizontal middle aligned divider header">Filters</h4>
                   </ul>
                 </div>
                 <div data-value="conditions"></div>
-                <div data-add-field="condition" class="ui circular mini icon add-field button">
+                <div data-add-field="condition" class="ui circular mini icon add-field button" onclick="addBlankFilter(this);">
                   <i class="plus square outline icon"></i>
                   Add Condition
                 </div>
@@ -163,7 +166,18 @@ <h4 class="ui horizontal middle aligned divider header">Card Settings</h4>
                     <span class="default text">Server Default</span>
                     <input name="watched_style" type="hidden">
                     <i class="dropdown icon"></i>
-                    <div class="menu"><!-- Added asynchronously --></div>
+                    <div class="menu">
+                      <div class="header">Art</div>
+                      <div class="item" data-value="art">Art</div>
+                      <div class="item" data-value="art blur">Blurred Art</div>
+                      <div class="item" data-value="art grayscale">Grayscale Art</div>
+                      <div class="item" data-value="art blur grayscale">Blurred Grayscale Art</div>
+                      <div class="header">Unique</div>
+                      <div class="item" data-value="unique">Unique</div>
+                      <div class="item" data-value="blur unique">Blurred Unique</div>
+                      <div class="item" data-value="grayscale unique">Grayscale Uniue</div>
+                      <div class="item" data-value="blur grayscale unique">Blurred Grayscale Uniue</div>
+                    </div>
                   </div>
                 </div>
 
@@ -173,7 +187,18 @@ <h4 class="ui horizontal middle aligned divider header">Card Settings</h4>
                     <span class="default text">Server Default</span>
                     <input name="unwatched_style" type="hidden">
                     <i class="dropdown icon"></i>
-                    <div class="menu"><!-- Added asynchronously --></div>
+                    <div class="menu">
+                      <div class="header">Art</div>
+                      <div class="item" data-value="art">Art</div>
+                      <div class="item" data-value="art blur">Blurred Art</div>
+                      <div class="item" data-value="art grayscale">Grayscale Art</div>
+                      <div class="item" data-value="art blur grayscale">Blurred Grayscale Art</div>
+                      <div class="header">Unique</div>
+                      <div class="item" data-value="unique">Unique</div>
+                      <div class="item" data-value="blur unique">Blurred Unique</div>
+                      <div class="item" data-value="grayscale unique">Grayscale Uniue</div>
+                      <div class="item" data-value="blur grayscale unique">Blurred Grayscale Uniue</div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -206,7 +231,7 @@ <h4 class="ui horizontal middle aligned divider header">Season and Episode Text<
                     <label>Title</label>
                   </div>
                 </div>
-                <div data-value="add-title" class="ui circular mini icon add-field button">
+                <div data-value="add-title" class="ui circular mini icon add-field button" onclick="addBlankTitle(this);">
                   <i class="plus square outline icon"></i>
                   Add Title
                 </div>
@@ -279,7 +304,7 @@ <h4 class="ui horizontal middle aligned divider header">Translations and Extras<
                 <div data-value="translations" class="ui segment">
                   <!-- Added asynchrously -->
                 </div>
-                <div data-add-field="translation" class="ui circular mini icon add-field button">
+                <div data-add-field="translation" class="ui circular mini icon add-field button" onclick="addBlankTranslation(this);">
                   <i class="plus square outline icon"></i>
                   Add Translation
                 </div>
@@ -331,6 +356,7 @@ <h1 class="ui header">Templates</h1>
       </button>
 
       <!-- Templates -->
+      <div class="ui active centered inline blue elastic loader" id="loader"></div>
       <div id="templates"><!-- Elements added asynchronously --></div>
 
       <div class="ui compact floating info message">
diff --git a/app/templates/js/.types.js b/app/templates/js/.types.js
index fbad7781..b8540635 100755
--- a/app/templates/js/.types.js
+++ b/app/templates/js/.types.js
@@ -458,7 +458,7 @@
 /**
  * @typedef {Object} Translation
  * @property {string} language_code
- * @property {string} data_key
+ * @property {string} language
  */
 
 /**
diff --git a/app/templates/js/cardTemplates.js b/app/templates/js/cardTemplates.js
index e2495d52..a179d6f2 100755
--- a/app/templates/js/cardTemplates.js
+++ b/app/templates/js/cardTemplates.js
@@ -1,6 +1,7 @@
 {% if False %}
 import {
   AvailableFont,
+  EpisodeDataSourceToggle,
   PreviewTitleCard,
   SeriesPage,
   Style,
@@ -11,18 +12,6 @@ import {
 } from './.types.js';
 {% endif %}
 
-const artStyles = [
-  ['Art',                      'art',              ],
-  ['Blurred Art',              'art blur',         ],
-  ['Grayscale Art',            'art grayscale'     ],
-  ['Blurred Grayscale Art',    'blur grayscale art'],
-].map(style => ({name: style[0], value: style[1]}));
-const uniqueStyles = [
-  ['Blurred Unique',           'blur unique',         ],
-  ['Grayscale Unique',         'grayscale unique',    ],
-  ['Blurred Grayscale Unique', 'blur grayscale unique'],
-].map(style => ({name: style[0], value: style[1]}));
-
 /**
  * Parse some list value, converting empty lists to the fallback
  * @param {Array} value - List being parsed.
@@ -262,39 +251,67 @@ function addDropdownItem(element, args) {
  * Query all templates, adding their content to the page.
  */
 async function getAllTemplates() {
-  /** @type {AvailableFont[]} */
-  const allFonts = await fetch('/api/available/fonts').then(resp => resp.json());
+  // Start querying templates, but do not wait for results
+  const templatePromise = fetch('/api/templates/all').then(resp => resp.json());
+
+  // Query all "available" data used to populate dropdowns in the HTML template
+  /** @type {[AvailableFont[], EpisodeDataSourceToggle[], TemplateFilter[], Translation[]]} */
+  const [
+    allFonts,
+    allEpisodeDataSources,
+    allFilterOptions,
+    allTranslations,
+  ] = await Promise.all([
+    fetch('/api/available/fonts').then(resp => resp.json()),
+    fetch('/api/settings/episode-data-source').then(resp => resp.json()),
+    fetch('/api/available/template-filters').then(resp => resp.json()),
+    fetch('/api/available/translations').then(resp => resp.json()),
+  ]);
 
-  // ------------------------ Add selectable items to the HTML template dropdown
+  // ----------------------- Add selectable items to the HTML template dropdowns
   const htmlTemplate = document.querySelector('#template').content;
+  const filterTemplate = document.getElementById('filter-template').content;
+  const translationTemplate = document.getElementById('translation-template').content;
+  // Filters arguments
+  const argumentMenu = filterTemplate.querySelector('.dropdown[data-value="filter-arguments"] .menu');
+  allFilterOptions.arguments.forEach(argument => {
+    addDropdownItem(argumentMenu, {innerText: argument, value: argument});
+  });
+  // Filter operations
+  const operationMenu = filterTemplate.querySelector('.dropdown[data-value="filter-operators"] .menu');
+  allFilterOptions.operations.forEach(operation => {
+    addDropdownItem(operationMenu, {innerText: operation, value: operation});
+  });
   // Fonts
+  const fontMenu = htmlTemplate.querySelector('.dropdown[data-value="font_id"] .menu');
   allFonts.forEach(font => {
-    addDropdownItem(
-      htmlTemplate.querySelector('.dropdown[data-value="font_id"] .menu'),
-      {className: 'item', innerText: font.name, value: font.id},
-    );
+    addDropdownItem(fontMenu, {innerText: font.name, value: font.id});
   });
-  // Watched Style
-  htmlTemplate.querySelectorAll('.dropdown[data-value="watched_style"] .menu, .dropdown[data-value="unwatched_style"] .menu').forEach(selector => {
-    // Add art header
-    addDropdownItem(selector, {className: 'header', innerText: 'Art Variations'});
-    artStyles.forEach(style => {
-      addDropdownItem(selector, {className: 'item', innerText: style.name, value: style.value});
-    });
-    // Add unique header
-    addDropdownItem(selector, {className: 'header', innerText: 'Unique Variations'});
-    uniqueStyles.forEach(style => {
-      addDropdownItem(selector, {className: 'item', innerText: style.name, value: style.value});
-    });
+  // Data source IDs
+  const dataSourceIdMenu = htmlTemplate.querySelector('.dropdown[data-value="data_source_id"] .menu');
+  allEpisodeDataSources.forEach(source => {
+    addDropdownItem(dataSourceIdMenu, {innerText: source.name, value: source.interface_id});
+  });
+  // Translation languages
+  const translationMenu = translationTemplate.querySelector('.dropdown[data-value="language_code"] .menu');
+  allTranslations.forEach(translation => {
+    addDropdownItem(translationMenu, {innerText: translation.language, value: translation.language_code});
   });
   // ---------------------------------------------------------------------------
 
-  /** @type {TemplatePage} Query all Templates */
-  const allTemplates = await fetch('/api/templates/all').then(resp => resp.json());
+  // Populate extras
+  await populateExtraTemplate({
+    extraTemplateSection: htmlTemplate.querySelector('section[aria-label="extras"]'),
+    inputTemplateElement: document.getElementById('extra-template'),
+    groupAmount: 3,
+  })
+
+  /** @type {TemplatePage} Finish Template data query */
+  const allTemplates = await templatePromise;
 
   // Create elements to add to the page
   const elements = [],
-        hasManyTemplates = allTemplates.items.length > 10;
+    hasManyTemplates = allTemplates.items.length > 10;
   let currentHeader = '';
   allTemplates.items.forEach(templateObj => {
     // Add letter header for this Template if necessary
@@ -318,6 +335,21 @@ async function getAllTemplates() {
     nameElem.placeholder = templateObj.name;
     nameElem.value = templateObj.name;
     // Filters added later
+    if (templateObj.filters.length > 0) {
+      const conditionsDiv = base.querySelector('[data-value="conditions"]');
+      for (const condition of templateObj.filters) {
+        // Clone filter template
+        const newCondition = document.getElementById('filter-template').content.cloneNode(true);
+        // Populate filter
+        newCondition.querySelector('input[name="argument"]').value = condition.argument;
+        newCondition.querySelector('input[name="operation"]').value = condition.operation;
+        if (condition.reference !== null) {
+          newCondition.querySelector('input[name="reference"]').value = condition.reference;
+        }
+        // Add to page
+        conditionsDiv.appendChild(newCondition);
+      }
+    }
     // Card type set later
     // Font ID
     if (templateObj.font_id === null) {
@@ -365,14 +397,31 @@ async function getAllTemplates() {
       base.querySelector('.dropdown[data-value="skip_localized_images"] > input').value = value;
     }
     // Episode data source set later
+    if (templateObj.data_source_id !== null) {
+      base.querySelector('.dropdown[data-value="data_source_id"] > input').value = templateObj.data_source_id;
+    }
     // Sync specials
     if (templateObj.sync_specials !== null) {
       const value = templateObj.sync_specials ? 'True' : 'False';
       base.querySelector('.dropdown[data-value="sync_specials"] > input').value = value;
     }
     // Image source priority set later
-    // Translations added later
-    // Extras later
+    // Translations
+    if (templateObj.translations !== null && templateObj.translations.length > 0) {
+      const translationSegment = base.querySelector('[data-value="translations"]');
+      for (const translation of templateObj.translations) {
+        const newTranslation = document.getElementById('translation-template').content.cloneNode(true);
+        newTranslation.querySelector('input[name="language_code"]').value = translation.language_code;
+        newTranslation.querySelector('input[name="data_key"]').value = translation.data_key;
+        translationSegment.append(newTranslation);
+      }
+    }
+    // Extras
+    if (templateObj.extras !== null) {
+      for (const [identifier, value] of Object.entries(templateObj.extras)) {
+        base.querySelectorAll(`section[aria-label="extras"] input[name="${identifier}"]`).forEach(input => input.value = value);
+      }
+    }
     // Update card preview(s)
     const watchedCard = base.querySelector('.card[content-type="watched"]'),
         unwatchedCard = base.querySelector('.card[content-type="unwatched"]');
@@ -402,66 +451,22 @@ async function getAllTemplates() {
   // Add elements to the page, refresh theme, and then initialize accordions
   document.getElementById('templates').replaceChildren(...elements);
   refreshTheme();
-  $('.ui.accordion').accordion();
+  $('.ui.accordion').accordion({
+    /**
+     * Callback when a template accordion is opened. When the template is
+     * viewed, initialize the extra tabs. This is not done ahead of time
+     * because it can be very slow.
+     */
+    onOpen: function () {
+      // Get the card type of this template (or global) to determine which tab to open to
+      const cardIdentifier = $(this).find('input[name="card_type"]').val() || '{{ preferences.default_card_type }}';
+      $(this).find('section[aria-label="extras"] .item').tab('change tab', cardIdentifier);
+    },
+  });
 
-  // Query all "extra" content necessary for dropdowns and such
-  /** @type {TemplateFilter} */
-  const allFilterOptions = await fetch('/api/available/template-filters').then(resp => resp.json());
-  const allEpisodeDataSources = await fetch('/api/settings/episode-data-source').then(resp => resp.json());
-  /** @type {Translation[]} */
-  const allTranslations = await fetch('/api/available/translations').then(resp => resp.json());
-  await queryAvailableExtras();
+  // Fill in fancy values  
   await getAllCardTypes();
-
-  // Fill in fancy values
   allTemplates.items.forEach(templateObj => {
-    // Filters
-    if (templateObj.filters.length > 0) {
-      const conditionsDiv = $(`#template-id${templateObj.id} [data-value="conditions"]`);
-      for (const condition of templateObj.filters) {
-        // Create new filter, add to div
-        const newCondition = document.getElementById('filter-template').content.cloneNode(true);
-        conditionsDiv.append(newCondition);
-        // Initialize dropdowns
-        $(`#template-id${templateObj.id} .dropdown[data-value="filter-arguments"]`).last().dropdown({
-          placeholder: 'Select Argument',
-          values: allFilterOptions.arguments.map(argument => {
-            return {name: argument, value: argument, selected: argument === condition.argument};
-          })
-        });
-        $(`#template-id${templateObj.id} .dropdown[data-value="filter-operators"]`).last().dropdown({
-          placeholder: 'Select Operation',
-          values: allFilterOptions.operations.map(operation => {
-            return {
-              name: operation,
-              value: operation,
-              selected: operation === condition.operation
-            };
-          })
-        });
-        if (condition.reference !== null) {
-          $(`#template-id${templateObj.id} input[data-value="filter-reference"]`).last().val(condition.reference);
-        }
-      }
-    }
-    // Add new fields with add condition button
-    $(`#template-id${templateObj.id} .button[data-add-field="condition"]`).on('click', () => {
-      const newCondition = document.getElementById('filter-template').content.cloneNode(true);
-      $(`#template-id${templateObj.id} [data-value="conditions"]`).append(newCondition);
-      $(`#template-id${templateObj.id} [data-value="conditions"] .dropdown[data-value="filter-arguments"]`).last().dropdown({
-        placeholder: 'Select Argument',
-        values: allFilterOptions.arguments.map(argument => {
-          return {name: argument, value: argument, selected: false};
-        }),
-      });
-      $(`#template-id${templateObj.id} [data-value="conditions"] .dropdown[data-value="filter-operators"]`).last().dropdown({
-        placeholder: 'Select Operation',
-        values: allFilterOptions.operations.map(operation => {
-          return {name: operation, value: operation, selected: false};
-        }),
-      });
-      refreshTheme();
-    });
     // Card type
     loadCardTypes({
       element: `#template-id${templateObj.id} .dropdown[data-value="card_type"]`,
@@ -470,94 +475,11 @@ async function getAllTemplates() {
         placeholder: 'Global Default',
       }
     });
-    // Add new fields to add title button
-    $(`#template-id${templateObj.id} .button[data-value="add-title"]`).on('click', () => {
-      const newRange = document.createElement('input');
-      newRange.name = 'season_title_ranges'; newRange.type = 'text';
-      newRange.setAttribute('data-value', 'season-titles');
-      const newTitle = document.createElement('input');
-      newTitle.name = 'season_title_values'; newTitle.type = 'text';
-      $(`#template-id${templateObj.id} >* .field[data-value="season-title-range"]`).append(newRange);
-      $(`#template-id${templateObj.id} >* .field[data-value="season-title-value"]`).append(newTitle);
-      $('.field[data-value="season-titles"] label i').popup({
-        popup: '#season-title-popup',
-        position: 'right center',
-      });
-    });
-    // Episode data source
-    $(`#template-id${templateObj.id} .dropdown[data-value="data_source_id"]`).dropdown({
-      placeholder: 'Global Default',
-      values: allEpisodeDataSources.map(({name, interface_id}) => {
-        return {name, value: interface_id, selected: interface_id === templateObj.data_source_id};
-      }),
-    });
-    // Translations
-    if (templateObj.translations !== null && templateObj.translations.length > 0) {
-      const translationSegment = $(`#template-id${templateObj.id} [data-value="translations"]`);
-      for (const translation of templateObj.translations) {
-        // Create new translation entry, add to translation segment
-        const newTranslation = document.querySelector('#translation-template').content.cloneNode(true);
-        translationSegment.append(newTranslation);
-        // Initialize dropdowns
-        $(`#template-id${templateObj.id} .dropdown[data-value="language_code"]`).last().dropdown({
-          values: [
-            {name: 'Language', type: 'header'},
-            ...allTranslations.map(({language_code, language}) => {
-              return {name: language, value: language_code, selected: translation.language_code === language_code};
-            })
-          ],
-        });
-        let extraValue = [];
-        if (translation.data_key !== 'preferred_title' && translation.data_key !== 'kanji') {
-          extraValue.push({name: translation.data_key, value: translation.data_key, selected: true});
-        }
-        $(`#template-id${templateObj.id} .dropdown[data-value="data_key"]`).last().dropdown({
-          allowAdditions: true,
-          values: [
-            {name: 'Key', type: 'header'},
-            {name: 'Preferred title', text: 'the preferred title', value: 'preferred_title', selected: translation.data_key === 'preferred_title'},
-            {name: 'Kanji', text: 'kanji', value: 'kanji', selected: translation.data_key === 'kanji'},
-            ...extraValue,
-          ]
-        });
-      }
-    }
-    // Extras
-    initializeExtras(
-      templateObj.extras,
-      templateObj.card_type || '{{preferences.default_card_type}}',
-      `#template-id${templateObj.id} section[aria-label="extras"]`,
-      document.getElementById('extra-template'),
-    );
-    // Add new field with add translation button
-    $(`#template-id${templateObj.id} .button[data-add-field="translation"]`).on('click', () => {
-      const newTranslation = document.getElementById('translation-template').content.cloneNode(true);
-      $(`#template-id${templateObj.id} [data-value="translations"]`).append(newTranslation);
-      // Language code dropdown
-      $(`#template-id${templateObj.id} .dropdown[data-value="language_code"]`).last().dropdown({
-        values: [
-          {name: 'Language', type: 'header'},
-          ...allTranslations.map(({language_code, language}) => {
-            return {name: language, value: language_code};
-          })
-        ],
-      });
-      // Translation data key dropdown
-      $(`#template-id${templateObj.id} .dropdown[data-value="data_key"]`).last().dropdown({
-        allowAdditions: true,
-        values: [
-          {name: 'Key', type: 'header'},
-          {name: 'Preferred title', text: 'the preferred title', value: 'preferred_title'},
-          {name: 'Kanji', text: 'kanji', value: 'kanji'},
-        ]
-      });
-    });
   });
 
   // Enable accordion/dropdown/checkbox elements
-  $('.ui.accordion').accordion();
+  document.getElementById('loader')?.remove();
   $('.ui.checkbox').checkbox();
-  // $('.ui.dropdown[data-value="font_id"], .ui.dropdown[data-value="watched_style"], .ui.dropdown[data-value="unwatched_style"]').dropdown();
   $('.ui.dropdown').dropdown();
   $('.ui.clearable.dropdown').dropdown({clearable: true});
   $('.field[data-value="season-titles"] label i').popup({
@@ -572,3 +494,62 @@ async function getAllTemplates() {
 function initAll() {
   getAllTemplates();
 }
+
+/**
+ * Add a new blank filter set to the template containing the initiating button.
+ * @param {HTMLDivElement} addButton Initiating add button which was clicked.
+ */
+function addBlankFilter(addButton) {
+  // Get blank filter template
+  const newCondition = document.getElementById('filter-template').content.cloneNode(true);
+  // Add to condition list
+  addButton.closest('div[data-label="filters"]')
+    .querySelector('div[data-value="conditions"]')
+    .appendChild(newCondition);
+  // Initialize newly added dropdowns, refresh theme
+  $(addButton).parent('div[data-label="filters"]').find('.ui.dropdown').dropdown();
+  refreshTheme();
+}
+
+/**
+ * Add a new blank season title set to the template containing the initiating
+ * button.
+ * @param {HTMLDivElement} addButton Initiating add button which was clicked.
+ */
+function addBlankTitle(addButton) {
+  // Create range input
+  const newRange = document.createElement('input');
+  newRange.name = 'season_title_ranges'; newRange.type = 'text';
+  newRange.setAttribute('data-value', 'season-titles');
+  // Create title input
+  const newTitle = document.createElement('input');
+  newTitle.name = 'season_title_values'; newTitle.type = 'text';
+  // Add to page
+  addButton.closest('div.field')
+    .querySelector('.field[data-value="season-title-range"]')
+    .appendChild(newRange);
+    addButton.closest('div.field')
+    .querySelector('.field[data-value="season-title-value"]')
+    .appendChild(newTitle);
+
+  refreshTheme();
+}
+
+/**
+ * Add a new blank translation set to the template containing the initiating
+ * button.
+ * @param {HTMLDivElement} addButton Initiating add button which was clicked.
+ */
+function addBlankTranslation(addButton) {
+  // Get blank translation template
+  const newTranslation = document.getElementById('translation-template').content.cloneNode(true);
+  // Add to section
+  addButton.closest('div.field')
+    .querySelector('div[data-value="translations"]')
+    .appendChild(newTranslation);
+  // Initialize newly added dropdowns, refresh theme
+  $(addButton).parent('div.field').find('.ui.dropdown').dropdown({
+    allowAdditions: true,
+  });
+  refreshTheme();
+}
diff --git a/app/templates/js/helper.js b/app/templates/js/helper.js
index b2531106..e3abbd9b 100755
--- a/app/templates/js/helper.js
+++ b/app/templates/js/helper.js
@@ -451,7 +451,8 @@ async function initializeLibraryDropdowns({
     dropdownElements,
     clearable=true,
     useLabels=true,
-    onChange=() => {}}) {
+    onChange=() => {}
+}) {
   // Only re-query for libraries if not initialized
   if (_allLibraries === undefined || _allConnections === undefined) {
     await queryLibraries();
@@ -624,21 +625,133 @@ function timeDiffString(previousRun, addAgo=true, defaultText='Some time') {
  */
 const toTitleCase = (str) => str.replace(/(?:^|\s)\w/g, (match) => match.toUpperCase());
 
+/**
+ * Input element was modified, change the value of all extra inputs with the
+ * same name to match this value.
+ * @param {HTMLInputElement} inputElement The input which was modified. All
+ * inputs in the same extras section with the same name should also be changed
+ * to reflect this input's new value.
+ */
+function updateLinkedFields(inputElement) {
+  const value = inputElement.value;
+  inputElement.closest('section[aria-label="extras"]')
+    .querySelectorAll(`input[name="${inputElement.name}"]`).forEach(inp => inp.value = value);
+}
+
+/**
+ * Color input element was modified; change the `--color` property of this
+ * input's associated color bubble to reflect the current color.
+ * @param {HTMLInputElement} inputElement The input which was modified. The
+ * parent field's label color bubble will be modified.
+ */
+function updateColorBubble(inputElement) {
+  inputElement.closest('.field')
+    .querySelector('label > .color.circle')
+    .style.setProperty('--color', inputElement.value);
+}
+
+/**
+ * Populate the extras section of the given HTML Template. This does not
+ * populate the inputs themselves, but does add the required tabs, fields, etc.
+ * @param {HTMLTemplateElement} extraTemplateSection Element in the HTML
+ * template which is being populated.
+ * @param {HTMLTemplateElement} inputTemplateElement HTML Template of the extra
+ * input element to clone and populate.
+ * @param {number} groupAmount How many extras to combine in a single group
+ * field. Default 2.
+ */
+async function populateExtraTemplate({
+  extraTemplateSection,
+  inputTemplateElement,
+  groupAmount = 3,
+}) {
+  if (allExtras === undefined) {
+    await queryAvailableExtras();
+  }
+
+  /** @type {Object.<string, Extra[]>} */
+  const types = {};
+  // Create object of card type identifiers to array of extras
+  allExtras.forEach(extra => {
+    extra.card_type = extra.card_type || 'Variable Overrides';
+    if (types[extra.card_type] === undefined) {
+      types[extra.card_type] = [];
+    }
+    types[extra.card_type].push(extra);
+  });
+
+  // Create tabs for each card type
+  const extraMenu = extraTemplateSection.querySelector('.menu');
+  for (const [card_type, extras] of Object.entries(types)) {
+    // Create tab menu item
+    const newMenuItem = document.createElement('a');
+    newMenuItem.className = 'item';
+    newMenuItem.dataset.tab = card_type.replace('/', '_');
+    newMenuItem.innerText = toTitleCase(card_type);
+    extraMenu.appendChild(newMenuItem);
+
+    // Create tab itself
+    const newTab = document.createElement('div');
+    newTab.className = 'ui bottom attached tab segment';
+    newTab.dataset.tab = card_type.replace('/', '_'); // Cannot use / in tab identifiers
+    extraMenu.insertAdjacentElement('afterend', newTab);
+
+    // Add input field for each extra
+    extras.forEach((extra, index) => {
+      const newInput = inputTemplateElement.content.cloneNode(true);
+      const defaultText = extra.default === null ? 'Default' : extra.default;
+      // For color fields, add live color indicator
+      if (extra.name.endsWith('Color')) {
+        newInput.querySelector('label').innerHTML = `${extra.name}<span data-name="${extra.name}" class="inline color circle" style="--default-color: ${defaultText}"></span>`;
+      } else {
+        newInput.querySelector('label').innerText = extra.name;
+        newInput.querySelector('input').removeAttribute('oninput');
+      }
+
+      newInput.querySelector('.field').dataset.label = extra.name;
+      newInput.querySelector('input').name = extra.identifier;
+      newInput.querySelector('input').placeholder = defaultText;
+      newInput.querySelector('.help').innerHTML = `<b>${extra.description}</b><br>`
+        + (extra.tooltip
+          ? extra.tooltip
+              .replaceAll('<v>', '<span class="ui blue text inverted">')
+              .replaceAll('</v>', '</span>')
+              .replaceAll(
+                /<c>(.*?)<\/c>/g,
+                '<code class="color">$1<span style="--color: $1" class="color circle"></span></code>'
+              )
+          : ''
+        )
+      ;
+
+      // Group every (n) fields into a field group
+      if (index % groupAmount === 0) {
+        const newFields = document.createElement('div');
+        newFields.className = 'ui equal width fields';
+        newTab.appendChild(newFields);
+      }
+      newTab.lastChild.appendChild(newInput);
+    });
+  }
+}
+
 /**
  * 
- * @param {?Object.<string, string>} activeExtras - Object of active extras to
+ * @param {?Object.<string, string>} activeExtras Object of active extras to
  * initialize the extra input fields with.
- * @param {string} activeTab - Name of the tab to mark as active.
- * @param {string} sectionQuerySelector - Query selector to find the section
- * being populated.
- * @param {HTMLTemplateElement} inputTemplateElement - ID of the extra input
+ * @param {string} activeTab Name of the tab to mark as active.
+ * @param {string} sectionQuerySelector Query selector to find the section being
+ * populated.
+ * @param {HTMLTemplateElement} inputTemplateElement ID of the extra input
  * element to clone and populate.
- * @param {isGlobal} - Whether the extras being initialized are for global
- * extras, or not. Global extras are formatted under {card_type: {}}, while
+ * @param {boolean} isGlobal Whether the extras being initialized are for global
+ * extras or not. Global extras are formatted under {card_type: {}}, while
  * normal extras are not. If global, variable overrides are excluded, and inputs
  * of the same name are not linked.
- * @param {number} groupAmount - How many extras to combine in a single group
+ * @param {number} groupAmount How many extras to combine in a single group
  * field. Default 2.
+ * @param {boolean} initializeTabs Whether to initialize the Fomantic tabs
+ * after the fact.
  */
 async function initializeExtras(
   activeExtras,
@@ -647,6 +760,7 @@ async function initializeExtras(
   inputTemplateElement,
   isGlobal = false,
   groupAmount = 3,
+  initializeTabs = true,
 ) {
   if (allExtras === undefined) {
     await queryAvailableExtras();
@@ -714,14 +828,14 @@ async function initializeExtras(
       // Fill out input if part of active extras
       if ((isGlobal && activeExtras.hasOwnProperty(card_type) && activeExtras[card_type][extra.identifier])
           || (!isGlobal && activeExtras[extra.identifier])) {
-            const thisValue = isGlobal
-              ? activeExtras[card_type][extra.identifier]
-              : activeExtras[extra.identifier]
-            ;
-            newInput.querySelector('input').value = thisValue
-            if (extra.name.endsWith('Color')) {
-              newInput.querySelector('.field label > .color.circle').style.setProperty('--color', thisValue);
-            }
+        const thisValue = isGlobal
+          ? activeExtras[card_type][extra.identifier]
+          : activeExtras[extra.identifier]
+        ;
+        newInput.querySelector('input').value = thisValue
+        if (extra.name.endsWith('Color')) {
+          newInput.querySelector('.field label > .color.circle').style.setProperty('--color', thisValue);
+        }
       }
 
       // Group every (n) fields into a field group
@@ -742,7 +856,7 @@ async function initializeExtras(
   }
 
   // Initialize tabs
-  $(`${sectionQuerySelector} .item`).tab();
+  if (initializeTabs) { $(`${sectionQuerySelector} .item`).tab(); }
 }
 
 /**
diff --git a/app/templates/js/loadCardTypes.js b/app/templates/js/loadCardTypes.js
index 033dbfb6..1f2f319e 100755
--- a/app/templates/js/loadCardTypes.js
+++ b/app/templates/js/loadCardTypes.js
@@ -59,6 +59,7 @@ async function loadCardTypes(args) {
 
   // Initialize dropdown with values
   $(element).dropdown({
+    ...dropdownArgs,
     values: [
       {name: 'Built-in Cards', type: 'header'},
       ...builtinTypes,
@@ -66,7 +67,7 @@ async function loadCardTypes(args) {
       ...localTypes,
       {name: 'Remote Cards', type: 'header'},
       ...remoteTypes,
-    ], ...dropdownArgs,
+    ],
   });
 
   return allCardTypes;
diff --git a/modules/ref/version_webui b/modules/ref/version_webui
index fa43af36..149a8beb 100755
--- a/modules/ref/version_webui
+++ b/modules/ref/version_webui
@@ -1 +1 @@
-v2.0-alpha.13.0-webui101
\ No newline at end of file
+v2.0-alpha.13.0-webui102
\ No newline at end of file