diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html
index 17631949b..1abded7ee 100644
--- a/html/extra-networks-pane.html
+++ b/html/extra-networks-pane.html
@@ -20,9 +20,11 @@
         <div class="extra-network-controls--container">
             <div class="extra-network-controls--header">Sort Mode</div>
             <div class="extra-network-controls--buttons">
-                <button class="extra-network-control extra-network-control--sort-mode {sort_path_active}"
-                    data-sort-mode="path" title="Sort by path"
-                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                <button class="extra-network-control extra-network-control--sort-mode"
+                    title="Sort by path"
+                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
+                    data-sort-mode="path"
+                    {btn_sort_mode_path_data_attributes}>
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                         stroke-width="1">
@@ -32,18 +34,22 @@
                         <line x1="9" y1="10" x2="10.5" y2="11.5" />
                     </svg>
                 </button>
-                <button class="extra-network-control extra-network-control--sort-mode {sort_name_active}"
-                    data-sort-mode="name" title="Sort by name"
-                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                <button class="extra-network-control extra-network-control--sort-mode"
+                    title="Sort by name"
+                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
+                    data-sort-mode="name"
+                    {btn_sort_mode_name_data_attributes}>
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                         <path stroke-width="1" d="M 2 12 L 6 3 L 10 12 M 3.5 9 L 8.5 9" />
                         <path stroke-width="1" d="M 8 3 L 15 3 M 9.5 6 L 15 6 M 11 9 L 15 9 M 12.5 12 L 15 12">
                     </svg>
                 </button>
-                <button class="extra-network-control extra-network-control--sort-mode {sort_date_created_active}"
-                    data-sort-mode="date_created" title="Sort by date created"
-                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                <button class="extra-network-control extra-network-control--sort-mode"
+                    title="Sort by date created"
+                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
+                    data-sort-mode="date_created"
+                    {btn_sort_mode_date_created_data_attributes}>
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
                         <rect x="1" y="2" width="14" height="12" rx="2" fill="none" />
@@ -55,9 +61,11 @@
                         <line x1="12" y1="1" x2="12" y2="3" />
                     </svg>
                 </button>
-                <button class="extra-network-control extra-network-control--sort-mode {sort_date_modified_active}"
-                    data-sort-mode="date_modified" title="Sort by date modified"
-                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                <button class="extra-network-control extra-network-control--sort-mode"
+                    title="Sort by date modified"
+                    onclick="extraNetworksControlSortModeOnClick(event, '{tabname}_{extra_networks_tabname}');"
+                    data-sort-mode="date_modified"
+                    {btn_sort_mode_date_modified_data_attributes}>
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="none" stroke="currentColor" stroke-width="1">
                         <g stroke-linecap="round" stroke-linejoin="round">
@@ -77,9 +85,10 @@
         <div class="extra-network-controls--container">
             <div class="extra-network-controls--header">Sort Order</div>
             <div class="extra-network-controls--buttons">
-                <button class="extra-network-control extra-network-control--sort-dir" data-sort-dir="ascending"
-                    title="Sort ascending"
-                    onclick="extraNetworksControlSortDirOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                <button class="extra-network-control extra-network-control--sort-dir"
+                    title="Sort {data_sort_dir}"
+                    onclick="extraNetworksControlSortDirOnClick(event, '{tabname}_{extra_networks_tabname}');"
+                    data-sort-dir="{data_sort_dir}">
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                         <path id="extra-network-control--sort-dir-icon-ascending" d="M 8 1 L 3 7 L 13 7 Z" />
@@ -92,9 +101,10 @@
             <div class="extra-network-controls--header">View Mode</div>
             <div class="extra-network-controls--buttons">
                 <button id="{tabname}_{extra_networks_tabname}_extra_dirs_view"
-                    class="extra-network-control extra-network-control--dirs-view {btn_dirs_view_enabled_class}"
+                    class="extra-network-control extra-network-control--dirs-view"
                     title="Enable Directory View"
-                    onclick="extraNetworksControlDirsViewOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                    onclick="extraNetworksControlDirsViewOnClick(event, '{tabname}_{extra_networks_tabname}');"
+                    {btn_dirs_view_data_attributes}>
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="currentColor" stroke="none">
                         <rect x="0" y="6" width="4" height="4" rx="1" />
@@ -103,9 +113,10 @@
                     </svg>
                 </button>
                 <button id="{tabname}_{extra_networks_tabname}_extra_tree_view"
-                    class="extra-network-control extra-network-control--tree-view {btn_tree_view_enabled_class}"
+                    class="extra-network-control extra-network-control--tree-view"
                     title="Enable Tree View"
-                    onclick="extraNetworksControlTreeViewOnClick(event, '{tabname}_{extra_networks_tabname}');">
+                    onclick="extraNetworksControlTreeViewOnClick(event, '{tabname}_{extra_networks_tabname}');"
+                    {btn_tree_view_data_attributes}>
                     <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                         fill="currentColor" stroke="none">
                         <rect x="3" y="0" width="4" height="4" rx="1" />
@@ -135,21 +146,20 @@
     <div id="{tabname}_{extra_networks_tabname}_pane_content"
         class="extra-network-content--container">
         <div id='{tabname}_{extra_networks_tabname}_dirs'
-            class="extra-network-content extra-network-content--dirs {dirs_default_display_class}">
+            class="extra-network-content extra-network-content--dirs {dirs_view_hidden_cls}">
             {dirs_html}
         </div>
         <div class="extra-network-content extra-network-content--cards resize-handle-row">
-            <div class="extra-network-content resize-handle-col"
-                style='flex-basis: {extra_networks_tree_view_default_width}px;'>
+            <div class="extra-network-content resize-handle-col {tree_view_hidden_cls}" style="{tree_view_style}">
                 <div id='{tabname}_{extra_networks_tabname}_tree_list_scroll_area'
-                    class='extra-network-tree clusterize-scroll {tree_default_display_class}'>
+                    class='extra-network-tree clusterize-scroll'>
                     <div id='{tabname}_{extra_networks_tabname}_tree_list_content_area'
                         class='extra-network-tree-content clusterize-content'>
                         <div class="clusterize-no-data">Loading...</div>
                     </div>
                 </div>
             </div>
-            <div class="extra-network-content resize-handle-col" style='flex-grow: 1;'>
+            <div class="extra-network-content resize-handle-col" style="{cards_view_style}">
                 <div id='{tabname}_{extra_networks_tabname}_cards_list_scroll_area'
                     class='extra-network-cards clusterize-scroll'>
                     <div id='{tabname}_{extra_networks_tabname}_cards_list_content_area'
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 06f76192f..ff6130a7d 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -191,11 +191,11 @@ function extraNetworksRefreshTab(tabname_full) {
     let btn_tree_view = gradioApp().querySelector(`#${tabname_full}_extra_tree_view`);
 
     let div_dirs = gradioApp().querySelector(`#${tabname_full}_dirs`);
-    let div_tree = gradioApp().querySelector(`#${tabname_full}_tree_list_scroll_area`);
+    let div_tree = gradioApp().querySelector(`.extra-network-content.resize-handle-col:has(> #${tabname_full}_tree_list_scroll_area)`);
 
     // Remove "hidden" class if button is enabled, otherwise add it.
-    div_dirs.classList.toggle("hidden", !btn_dirs_view.classList.contains("extra-network-control--enabled"));
-    div_tree.classList.toggle("hidden", !btn_tree_view.classList.contains("extra-network-control--enabled"));
+    div_dirs.classList.toggle("hidden", !("selected" in btn_dirs_view.dataset));
+    div_tree.classList.toggle("hidden", !("selected" in btn_tree_view.dataset));
 
     waitForKeyInObject({ k: tabname_full, obj: clusterizers })
         .then(() => extraNetworkClusterizersOnTabLoad(tabname_full));
@@ -615,11 +615,11 @@ function extraNetworksControlSearchClearOnClick(event, tabname_full) {
 
 function extraNetworksControlSortModeOnClick(event, tabname_full) {
     /** Handles `onclick` events for Sort Mode buttons. */
-    event.currentTarget.parentElement.querySelectorAll('.extra-network-control--sort-mode').forEach(function (x) {
-        x.classList.remove('extra-network-control--enabled');
+    event.currentTarget.parentElement.querySelectorAll('.extra-network-control--sort-mode').forEach(elem => {
+        delete elem.dataset.selected;
     });
 
-    event.currentTarget.classList.add('extra-network-control--enabled');
+    event.currentTarget.dataset.selected = "";
 
     if (tabname_full in clusterizers) {
         clusterizers[tabname_full].cards_list.setSortMode(
@@ -654,9 +654,14 @@ function extraNetworksControlTreeViewOnClick(event, tabname_full) {
      *
      * Toggles the tree view in the extra networks pane.
      */
-    var button = event.currentTarget;
-    button.classList.toggle("extra-network-control--enabled");
-    var show = button.classList.contains("extra-network-control--enabled");
+    let show;
+    if ("selected" in event.currentTarget.dataset) {
+        delete event.currentTarget.dataset.selected;
+        show = false;
+    } else {
+        event.currentTarget.dataset.selected = "";
+        show = true;
+    }
 
     gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`).parentElement.classList.toggle("hidden", !show);
     clusterizers[tabname_full].tree_list.enable(show);
@@ -667,9 +672,14 @@ function extraNetworksControlDirsViewOnClick(event, tabname_full) {
      *
      * Toggles the directory view in the extra networks pane.
      */
-    var button = event.currentTarget;
-    button.classList.toggle("extra-network-control--enabled");
-    var show = button.classList.contains("extra-network-control--enabled");
+    let show;
+    if ("selected" in event.currentTarget.dataset) {
+        delete event.currentTarget.dataset.selected;
+        show = false;
+    } else {
+        event.currentTarget.dataset.selected = "";
+        show = true;
+    }
 
     gradioApp().getElementById(`${tabname_full}_dirs`).classList.toggle("hidden", !show);
 }
diff --git a/javascript/extraNetworksClusterizeList.js b/javascript/extraNetworksClusterizeList.js
index 5431c298b..57510e8d8 100644
--- a/javascript/extraNetworksClusterizeList.js
+++ b/javascript/extraNetworksClusterizeList.js
@@ -222,16 +222,19 @@ class ExtraNetworksClusterize {
                         this.data_obj = {};
                         this.data_obj_keys_sorted = [];
                         this.clear();
+                        this.content_elem.innerHTML = "<div class='clusterize-no-data'>Loading...</div>";
                     }
                     return v;
                 })
                 .then(v => decompress(v))
                 .then(v => JSON.parse(v))
                 .then(v => this.updateJson(v))
-                .then(() => this.encoded_str = encoded_str)
-                .then(() => this.rebuild())
-                .then(() => this.applyFilter())
-                .then(() => { return resolve(); });
+                .then(() => {
+                    this.encoded_str = encoded_str;
+                    this.rebuild();
+                    this.applyFilter();
+                    return resolve(); 
+                });
         });
     }
 
@@ -454,6 +457,7 @@ class ExtraNetworksClusterize {
                 scrollId: this.scroll_id,
                 contentId: this.content_id,
                 rows_in_block: this.rows_in_block,
+                tag: "div",
                 blocks_in_cluster: this.blocks_in_cluster,
                 show_no_data_row: this.show_no_data_row,
                 no_data_text: this.no_data_text,
@@ -822,6 +826,7 @@ class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize {
     updateJson(json) {
         /** Processes JSON object and adds each entry to our data object. */
         return new Promise(resolve => {
+            this.data_obj = {};
             for (const [i, [k, v]] of Object.entries(Object.entries(json))) {
                 let div_id = k;
                 let parsed_html = htmlStringToElement(v);
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 2482ca696..caf7d9d16 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -315,7 +315,7 @@ class ExtraNetworksPage:
                     div_id=div_id,
                     parent_id=parent_id,
                     tabname=tabname,
-                    label=k,
+                    label=os.path.basename(k),
                     data_depth=depth,
                     data_path=k,
                     btn_type="dir",
@@ -601,6 +601,10 @@ class ExtraNetworksPage:
         Args:
             tabname: The name of the active tab.
             empty: create an empty HTML page with no items
+            controls_state: Dictonary specifying controls on the page and
+                its `enabled` status. If a control is not specified then the default
+                setting will be used. Useful when refreshing a page so we can
+                retain the previous settings.
 
         Returns:
             HTML formatted string.
@@ -620,28 +624,29 @@ class ExtraNetworksPage:
             if "user_metadata" not in item:
                 self.read_user_metadata(item)
 
-        show_tree = shared.opts.extra_networks_tree_view_default_enabled
-
         cards_data_div = self.generate_cards_view_data_div(tabname, none_message="Loading..." if empty else None)
         tree_data_div = self.generate_tree_view_data_div(tabname)
         dirs_html = self.create_dirs_view_html(tabname)
 
-        show_dirs = shared.opts.extra_networks_dirs_view_default_enabled
-        show_tree = shared.opts.extra_networks_tree_view_default_enabled
+        sort_mode = shared.opts.extra_networks_card_order_field.lower().strip().replace(" ", "_")
+        sort_dir = shared.opts.extra_networks_card_order.lower().strip()
+        dirs_view_en = shared.opts.extra_networks_dirs_view_default_enabled
+        tree_view_en = shared.opts.extra_networks_tree_view_default_enabled
+
         return self.pane_tpl.format(**{
             "tabname": tabname,
             "extra_networks_tabname": self.extra_networks_tabname,
-            "data_sort_dir": shared.opts.extra_networks_card_order.lower().strip(),
-            "data_sort_mode": shared.opts.extra_networks_card_order_field.lower().strip(),
-            "sort_path_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Path' else '',
-            "sort_name_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Name' else '',
-            "sort_date_created_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Created' else '',
-            "sort_date_modified_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Modified' else '',
-            "btn_dirs_view_enabled_class": "extra-network-control--enabled" if show_dirs else "",
-            "btn_tree_view_enabled_class": "extra-network-control--enabled" if show_tree else "",
-            "extra_networks_tree_view_default_width": shared.opts.extra_networks_tree_view_default_width,
-            "dirs_default_display_class": "" if show_dirs else "hidden",
-            "tree_default_display_class": "" if show_tree else "hidden",
+            "data_sort_dir": sort_dir,
+            "btn_sort_mode_path_data_attributes": "data-selected" if sort_mode == "path" else "",
+            "btn_sort_mode_name_data_attributes": "data-selected" if sort_mode == "name" else "",
+            "btn_sort_mode_date_created_data_attributes": "data-selected" if sort_mode == "date_created" else "",
+            "btn_sort_mode_date_modified_data_attributes": "data-selected" if sort_mode == "date_modified" else "",
+            "btn_dirs_view_data_attributes": "data-selected" if dirs_view_en else "",
+            "btn_tree_view_data_attributes": "data-selected" if tree_view_en else "",
+            "dirs_view_hidden_cls": "" if dirs_view_en else "hidden",
+            "tree_view_hidden_cls": "" if tree_view_en else "hidden",
+            "tree_view_style": f"flex-basis: {shared.opts.extra_networks_tree_view_default_width}px;",
+            "cards_view_style": "flex-grow: 1;",
             "dirs_html": dirs_html,
             "cards_data_div": cards_data_div,
             "tree_data_div": tree_data_div,
diff --git a/style.css b/style.css
index d3ab364d1..57d938ec4 100644
--- a/style.css
+++ b/style.css
@@ -1353,11 +1353,11 @@ body.resizing .resize-handle {
     color: var(--button-secondary-text-color-hover);
 }
 
-.extra-network-control--enabled {
+.extra-network-control[data-selected] {
     background: var(--button-secondary-background-fill);
 }
 
-.extra-network-control--enabled .extra-network-control--icon {
+.extra-network-control[data-selected] .extra-network-control--icon {
     color: var(--button-secondary-text-color);
 }