diff --git a/src/optionsCommon.js b/src/options/optionsCommon.js
similarity index 79%
rename from src/optionsCommon.js
rename to src/options/optionsCommon.js
index 27db635..c552da2 100644
--- a/src/optionsCommon.js
+++ b/src/options/optionsCommon.js
@@ -1,5 +1,6 @@
-import {getExtVersion, isFirefox, isReleaseVersion} from './common/extUtils.js';
-import {cleanUpOptions, optionsPrototype, specialOptions} from './common/optionsUtils.js';
+import {getExtVersion, isFirefox, isReleaseVersion} from '../common/extUtils.js';
+import {cleanUpOptions, optionsPrototype, specialOptions} from '../common/optionsUtils.js';
+import optionsPage from './optionsPage.json5';
 
 var savedSuccessfullyTimeout = null;
 
@@ -94,8 +95,6 @@
 }
 
 window.addEventListener('load', function() {
-  i18n();
-
   if (window.CONTEXT == 'options') {
     if (!isReleaseVersion()) {
       var experimentsLink = document.querySelector('.experiments-link');
@@ -105,6 +104,52 @@
       }));
     }
 
+    // Add options to page
+    let optionsContainer = document.getElementById('options-container');
+    for (let section of optionsPage.sections) {
+      if (section?.name) {
+        let sectionHeader = document.createElement('h4');
+        sectionHeader.setAttribute('data-i18n', section.name);
+        optionsContainer.append(sectionHeader);
+      }
+
+      if (section?.options) {
+        for (let option of section.options) {
+          if (option?.customHTML) {
+            optionsContainer.insertAdjacentHTML('beforeend', option.customHTML);
+            continue;
+          }
+
+          let optionEl = document.createElement('div');
+          optionEl.classList.add('option');
+
+          let checkbox = document.createElement('input');
+          checkbox.setAttribute('type', 'checkbox');
+          checkbox.id = option.codename;
+
+          let label = document.createElement('label');
+          label.setAttribute('for', checkbox.id);
+          label.setAttribute('data-i18n', option.codename);
+
+          optionEl.append(checkbox, ' ', label);
+
+          if (option?.experimental) {
+            let experimental = document.createElement('span');
+            experimental.classList.add('experimental-label');
+            experimental.setAttribute('data-i18n', 'experimental_label');
+
+            optionEl.append(experimental);
+          }
+
+          optionsContainer.append(optionEl);
+        }
+      }
+
+      if (section?.footerHTML) {
+        optionsContainer.insertAdjacentHTML('beforeend', section.footerHTML);
+      }
+    }
+
     var featuresLink = document.querySelector('.features-link');
     featuresLink.href = getDocURL('features.md');
 
@@ -113,6 +158,8 @@
     profileIndicatorLink.href = getDocURL('op_indicator.md');
   }
 
+  i18n();
+
   chrome.storage.sync.get(null, function(items) {
     items = cleanUpOptions(items, false);
 
diff --git a/src/options/optionsPage.json5 b/src/options/optionsPage.json5
new file mode 100644
index 0000000..694c7dc
--- /dev/null
+++ b/src/options/optionsPage.json5
@@ -0,0 +1,40 @@
+// This file defines the sections of the options page, in which section each
+// option appears in, whether the "experimental" label should appear next to the
+// option label, and whether each option should use custom HTML.
+{
+  sections: [
+    {
+      name: null,
+      options: [
+        {codename: 'list'},
+        {codename: 'thread'},
+        {codename: 'threadall'},
+      ],
+    },
+    {
+      name: 'enhancements',
+      options: [
+        {codename: 'fixedtoolbar'},
+        {codename: 'redirect'},
+        {codename: 'history'},
+        {codename: 'loaddrafts', experimental: true},
+        {codename: 'increasecontrast'},
+        {codename: 'stickysidebarheaders'},
+        {codename: 'ccdarktheme'},
+        {codename: 'ccforcehidedrawer'},
+        {codename: 'ccdragndropfix', customHTML: '<div id="dragndrop-wrapper" class="option" hidden><input type="checkbox" id="ccdragndropfix"> <label for="ccdragndropfix" data-i18n="ccdragndropfix"></label></div>'},
+        {codename: 'batchlock'},
+        {codename: 'enhancedannouncementsdot'},
+        {codename: 'repositionexpandthread', experimental: true},
+      ],
+    },
+    {
+      name: 'profileindicator_header',
+      options: [
+        {codename: 'profileindicator'},
+        {codename: 'profileindicatoralt'},
+      ],
+      footerHTML: '<div class="option"><a id="profileIndicatorMoreInfo" target="_blank" rel="noreferrer noopener" data-i18n="profileindicator_moreinfo"></a></div>',
+    },
+  ],
+}
diff --git a/src/static/options/options.html b/src/static/options/options.html
index 91a8205..8dde2a4 100644
--- a/src/static/options/options.html
+++ b/src/static/options/options.html
@@ -40,26 +40,7 @@
       </div>
       <form>
         <div class="kill-switch-text" id="kill-switch-warning" hidden data-i18n="killswitchwarning"></div>
-        <div class="option"><input type="checkbox" id="list"> <label for="list" data-i18n="list"></label></div>
-        <div class="option"><input type="checkbox" id="thread"> <label for="thread" data-i18n="thread"></label></div>
-        <div class="option"><input type="checkbox" id="threadall"> <label for="threadall" data-i18n="threadall"></label></div>
-        <h4 data-i18n="enhancements"></h4>
-        <div class="option"><input type="checkbox" id="fixedtoolbar"> <label for="fixedtoolbar" data-i18n="fixedtoolbar"></label></div>
-        <div class="option"><input type="checkbox" id="redirect"> <label for="redirect" data-i18n="redirect"></label></div>
-        <div class="option"><input type="checkbox" id="history"> <label for="history" data-i18n="history"></label></div>
-        <div class="option"><input type="checkbox" id="loaddrafts"> <label for="loaddrafts" data-i18n="loaddrafts"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
-        <div class="option"><input type="checkbox" id="increasecontrast"> <label for="increasecontrast" data-i18n="increasecontrast"></label></div>
-        <div class="option"><input type="checkbox" id="stickysidebarheaders"> <label for="stickysidebarheaders" data-i18n="stickysidebarheaders"></label></div>
-        <div class="option"><input type="checkbox" id="ccdarktheme"> <label for="ccdarktheme" data-i18n="ccdarktheme"></label></div>
-        <div class="option"><input type="checkbox" id="ccforcehidedrawer"> <label for="ccforcehidedrawer" data-i18n="ccforcehidedrawer"></label></div>
-        <div id="dragndrop-wrapper" class="option" hidden><input type="checkbox" id="ccdragndropfix"> <label for="ccdragndropfix" data-i18n="ccdragndropfix"></label></div>
-        <div class="option"><input type="checkbox" id="batchlock"> <label for="batchlock" data-i18n="batchlock"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
-        <div class="option"><input type="checkbox" id="enhancedannouncementsdot"> <label for="enhancedannouncementsdot" data-i18n="enhancedannouncementsdot"></label></div>
-        <div class="option"><input type="checkbox" id="repositionexpandthread"> <label for="repositionexpandthread" data-i18n="repositionexpandthread"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
-        <h4 data-i18n="profileindicator_header"></h4>
-        <div class="option"><input type="checkbox" id="profileindicator"> <label for="profileindicator" data-i18n="profileindicator"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
-        <div class="option"><input type="checkbox" id="profileindicatoralt"> <label for="profileindicatoralt" data-i18n="profileindicatoralt"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
-        <div class="option"><a id="profileIndicatorMoreInfo" target="_blank" rel="noreferrer noopener" data-i18n="profileindicator_moreinfo"></a></div>
+        <div id="options-container"></div>
         <div class="actions"><button id="save" data-i18n="save"></button></div>
       </form>
       <div id="save-indicator"></div>