diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js
index f192a52..6f1059c 100644
--- a/res/popup/js/popup.js
+++ b/res/popup/js/popup.js
@@ -36,14 +36,26 @@ var selectedSubitemLoaded = false;
 
 //#region build ui
 var tablist = {
-  'extensionSettings': new MenuItem('_menu_item_settings_ext', 'Extension settings', '', () => showMenu('extensionSettings')),
-  'siteSettings': new MenuItem('_menu_item_settings_site', 'Site settings', 'Settings for current site', () => showMenu('siteSettings')),
-  'videoSettings': new MenuItem('_menu_item_settings_video', 'Video settings', 'Crop & stretch options for videos on current page', () => showMenu('videoSettings')),
-  'about': new MenuItem('_menu_item_about', 'About Ultrawidify', '', () => showMenu('about'))
+  'extensionSettings': {
+    tab: new MenuItem('_menu_item_settings_ext', 'Extension settings', '', () => showMenu('extensionSettings')),
+    container: GlobalPanel.container,
+  },
+  'siteSettings': {
+    tab: new MenuItem('_menu_item_settings_site', 'Site settings', 'Settings for current site', () => showMenu('siteSettings')),
+    container: SitePanel.container
+  },
+  'videoSettings': {
+    tab: new MenuItem('_menu_item_settings_video', 'Video settings', 'Crop & stretch options for videos on current page', () => showMenu('videoSettings')),
+    container: VideoPanel.container
+  },
+  'about': {
+    tab: new MenuItem('_menu_item_about', 'About Ultrawidify', '', () => showMenu('about')),
+    container: AboutPanel.container
+  }
 };
 
 for (let t in tablist) {
-  tablist[t].appendTo(document.getElementById('tablist'));
+  tablist[t].tab.appendTo(document.getElementById('tablist'));
 }
 
 
@@ -60,7 +72,7 @@ function loadFrames(videoTab) {
   }
 
   function onTabitemClick(item) {
-    tablist[selectedMenu].selectSubitem(item);
+    tablist[selectedMenu].tab.selectSubitem(item);
     selectedSubitem[selectedMenu] = item;
     port.postMessage({cmd: 'popup-set-selected-tab', selectedMenu: selectedMenu, selectedSubitem: item});
   }
@@ -75,8 +87,8 @@ function loadFrames(videoTab) {
       () => onTabitemClick(id)
     );
 
-    tablist['siteSettings'].insertSubitem(newItem);
-    tablist['videoSettings'].insertSubitem(newItem);
+    tablist['siteSettings'].tab.insertSubitem(newItem);
+    tablist['videoSettings'].tab.insertSubitem(newItem);
   }
 
 
@@ -90,28 +102,26 @@ function loadFrames(videoTab) {
       (click) => onTabitemClick(nid)
     );
     
-    tablist['siteSettings'].insertSubitem(newItem);
-    tablist['videoSettings'].insertSubitem(newItem);
+    tablist['siteSettings'].tab.insertSubitem(newItem);
+    tablist['videoSettings'].tab.insertSubitem(newItem);
   }
 
   console.log("TIME TO SELECT SUBITEM", selectedSubitem, "\nexists subitem in site settings/video settings?", selectedSubitem && tablist['siteSettings'].existsSubitem(selectedSubitem.siteSettings), selectedSubitem && tablist['videoSettings'].existsSubitem(selectedSubitem.videoSettings))
 
-  if (! selectedSubitem.siteSettings || !tablist['siteSettings'].existsSubitem(selectedSubitem.siteSettings)) {
-    selectedSubitem['siteSettings'] = tablist['siteSettings'].selectFirstSubitem();
+  if (! selectedSubitem.siteSettings || !tablist['siteSettings'].tab.existsSubitem(selectedSubitem.siteSettings)) {
+    selectedSubitem['siteSettings'] = tablist['siteSettings'].tab.selectFirstSubitem();
     console.log("selected first subitem!")
   } else {
-    tablist['siteSettings'].selectSubitem(selectedSubitem.siteSettings)
+    tablist['siteSettings'].tab.selectSubitem(selectedSubitem.siteSettings)
   }
-  if (! selectedSubitem.videoSettings || !tablist['videoSettings'].existsSubitem(selectedSubitem.videoSettings)) {
-    selectedSubitem['videoSettings'] = tablist['videoSettings'].selectFirstSubitem();
+  if (! selectedSubitem.videoSettings || !tablist['videoSettings'].tab.existsSubitem(selectedSubitem.videoSettings)) {
+    selectedSubitem['videoSettings'] = tablist['videoSettings'].tab.selectFirstSubitem();
     console.log("selected first subitem (vs)!")
   } else {
-    tablist['videoSettings'].selectSubitem(selectedSubitem.videoSettings);
+    tablist['videoSettings'].tab.selectSubitem(selectedSubitem.videoSettings);
   }
 }
 
-//#endregion
-
 async function processReceivedMessage(message, port){
   if (Debug.debug) {
     console.log("[popup.js] received message", message)
@@ -445,19 +455,25 @@ function openMenu(menu){
 }
 
 function showMenu(tab) {
+  if(Debug.debug) {
+    console.log("[popup.js::showMenu] opening menu", tab, "tablist?", tablist)
+  }
   if (!tablist) {
     // todo: fix & remove this
     return;
   }
   for (const i in tablist) {
-    tablist[i].unselect();
-    tablist[i].hideSubitems();
+    tablist[i].tab.unselect();
+    tablist[i].tab.hideSubitems();
+    tablist[i].container.hide();
   }
-  tablist[tab].select();
-  tablist[tab].showSubitems();
+  tablist[tab].tab.select();
+  tablist[tab].tab.showSubitems();
+  tablist[tab].container.show();
 
   // todo: display the correct tab 
 
+
   selectedMenu = tab;
 }
 
diff --git a/res/popup/js/popupvars.js b/res/popup/js/popupvars.js
index d533de3..f24e703 100644
--- a/res/popup/js/popupvars.js
+++ b/res/popup/js/popupvars.js
@@ -1,5 +1,6 @@
 //#region GlobalPanel
 var GlobalPanel = {};
+GlobalPanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_global'))
 GlobalPanel.elements = {};
 GlobalPanel.elements.extensionSettings = {
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_global_status')),
@@ -21,20 +22,21 @@ GlobalPanel.elements.alignmentSettings = {
 
 //#region SitePanel
 var SitePanel = {};
-GlobalPanel.elements = {};
-GlobalPanel.elements.extensionSettings = {
+SitePanel.elements = {};
+SitePanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_site'))
+SitePanel.elements.extensionSettings = {
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_status')),
   buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_status_buttons'))
 }
-GlobalPanel.elements.autoarSettings = {
+SitePanel.elements.autoarSettings = {
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_autoar')),
   buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_autoar_buttons'))
 }
-GlobalPanel.elements.stretchSettings = {
+SitePanel.elements.stretchSettings = {
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_crop')),
   buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_crop_buttons'))
 };
-GlobalPanel.elements.alignmentSettings = {
+SitePanel.elements.alignmentSettings = {
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_site_alignment')),
   buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_site_alignment_buttons'))
 };
@@ -45,6 +47,7 @@ GlobalPanel.elements.alignmentSettings = {
 //#region VideoPanel
 var VideoPanel = {};
 VideoPanel.elements = {};
+VideoPanel.container = BaseElement.fromExisting(document.getElementById('_menu_settings_video'))
 VideoPanel.elements.cropSettings = {
   container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop')),
   buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop_buttons'))
@@ -79,4 +82,12 @@ VideoPanel.labels.zoomLevel        = document.getElementById("_label_zoom_level"
 // misc stuff
 VideoPanel.misc = {};
 VideoPanel.misc.zoomShortcuts      = document.getElementById("_zoom_shortcuts");
-//#endregion
\ No newline at end of file
+//#endregion
+
+
+//#region about
+var AboutPanel = {};
+AboutPanel.container = BaseElement.fromExisting(document.getElementById('_menu_about'))
+
+//#endregion
+
diff --git a/res/popup/popup.html b/res/popup/popup.html
index 8fa7cc1..b45aded 100644
--- a/res/popup/popup.html
+++ b/res/popup/popup.html
@@ -24,17 +24,16 @@
       <!-- <div id="script-not-running-warning" class="warning">If you see this line, then your browser didn't start the popup script yet. This is a problem caused by the browser. Please wait a few seconds.</div> -->
 
       <!-- EXTENSION SETTINGS -->
-      <div id="_menu_settings_ext" class="suboption hidden">
+      <div id="_menu_settings_global" class="suboption hidden">
         <p>These settings can be overriden on per-site basis.</p>
         <div class="row">
-
-          <div id="_menu_settings_site_status" class="row">
+          <div id="_menu_settings_global_status" class="row">
             <span class="label experimental">Extension status</span>
             <div id="_menu_settings_global_status_buttons" class="button-row">
             </div>
           </div>
     
-          <div id="_menu_settings_site_autoar" class="row">
+          <div id="_menu_settings_global_autoar" class="row">
             <span class="label experimental">Automatic detection</span>
             <div id="_menu_settings_global_autoar_buttons" class="button-row">
             </div>