diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html
index 57c51b37b..a759b2d6a 100644
--- a/html/extra-networks-pane.html
+++ b/html/extra-networks-pane.html
@@ -105,6 +105,16 @@
                             d="M 5 5 V 14 H 8 M 5 8 H 8" />
                     </svg>
                 </button>
+                <button class="extra-network-control extra-network-control--cards-view" title="Enable Card View"
+                    {btn_card_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="3" width="4" height="4" rx="1" />
+                        <rect x="3" y="9" width="4" height="4" rx="1" />
+                        <rect x="9" y="3" width="4" height="4" rx="1" />
+                        <rect x="9" y="9" width="4" height="4" rx="1" />
+                    </svg>
+                </button>
             </div>
         </div>
         <div class="extra-network-controls--container">
@@ -127,11 +137,9 @@
         <div class="extra-network-content extra-network-content--cards resize-handle-row">
             <div class="extra-network-content resize-handle-col" style="{tree_view_style}">
                 <div id='{tabname}_{extra_networks_tabname}_tree_list_loading_splash'
-                    class='extra-network-tree extra-network-list-splash'
-                    >{tree_list_loading_splash_content}</div>
+                    class='extra-network-tree extra-network-list-splash'>{tree_list_loading_splash_content}</div>
                 <div id='{tabname}_{extra_networks_tabname}_tree_list_no_data_splash'
-                    class='extra-network-tree extra-network-list-splash hidden'
-                    >{tree_list_no_data_splash_content}</div>
+                    class='extra-network-tree extra-network-list-splash hidden'>{tree_list_no_data_splash_content}</div>
                 <div id='{tabname}_{extra_networks_tabname}_tree_list_scroll_area'
                     class='extra-network-tree styled-scrollbar clusterize-scroll'>
                     <div id='{tabname}_{extra_networks_tabname}_tree_list_content_area'
@@ -140,11 +148,10 @@
             </div>
             <div class="extra-network-content resize-handle-col" style="{cards_view_style}">
                 <div id='{tabname}_{extra_networks_tabname}_cards_list_loading_splash'
-                    class='extra-network-cards extra-network-list-splash'
-                    >{cards_list_loading_splash_content}</div>
+                    class='extra-network-cards extra-network-list-splash'>{cards_list_loading_splash_content}</div>
                 <div id='{tabname}_{extra_networks_tabname}_cards_list_no_data_splash'
-                    class='extra-network-cards extra-network-list-splash hidden'
-                    >{cards_list_no_data_splash_content}</div>
+                    class='extra-network-cards extra-network-list-splash hidden'>{cards_list_no_data_splash_content}
+                </div>
                 <div id='{tabname}_{extra_networks_tabname}_cards_list_scroll_area'
                     class='extra-network-cards styled-scrollbar clusterize-scroll'>
                     <div id='{tabname}_{extra_networks_tabname}_cards_list_content_area'
@@ -153,4 +160,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 7fac84fd2..06bb6339e 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -109,6 +109,7 @@ class ExtraNetworksTab {
     refresh_in_progress = false;
     dirs_view_en = false;
     tree_view_en = false;
+    cards_view_en = false;
     cards_list_splash_state = null;
     tree_list_splash_state = null;
     directory_filters = {};
@@ -144,6 +145,9 @@ class ExtraNetworksTab {
         this.tree_view_en = "selected" in this.controls_elem.querySelector(
             ".extra-network-control--tree-view"
         ).dataset;
+        this.cards_view_en = "selected" in this.controls_elem.querySelector(
+            ".extra-network-control--cards-view"
+        ).dataset;
 
         // determine whether compact prompt mode is enabled.
         // cannot await this since it may not exist on page depending on user setting.
@@ -166,20 +170,24 @@ class ExtraNetworksTab {
 
         const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view");
         const btn_tree_view = this.controls_elem.querySelector(".extra-network-control--tree-view");
+        const btn_cards_view = this.controls_elem.querySelector(".extra-network-control--cards-view");
         const div_dirs = this.container_elem.querySelector(".extra-network-content--dirs-view");
         // We actually want to select the tree view's column in the resize-handle-row.
         // This is what we actually show/hide, not the inner elements.
         const div_tree = this.tree_list.scroll_elem.closest(".resize-handle-col");
+        const div_cards = this.cards_list.scroll_elem.closest(".resize-handle-col");
 
         this.dirs_view_en = "selected" in btn_dirs_view.dataset;
         this.tree_view_en = "selected" in btn_tree_view.dataset;
+        this.cards_view_en = "selected" in btn_cards_view.dataset;
         // Remove "hidden" class if button is enabled, otherwise add it.
         div_dirs.classList.toggle("hidden", !this.dirs_view_en);
         div_tree.classList.toggle("hidden", !this.tree_view_en);
+        div_cards.classList.toggle("hidden", !this.cards_view_en);
 
         // Apply the current resize handle classes.
         const resize_handle_row = this.tree_list.scroll_elem.closest(".resize-handle-row");
-        resize_handle_row.classList.toggle("resize-handle-hidden", div_tree.classList.contains("hidden"));
+        resize_handle_row.classList.toggle("resize-handle-hidden", !this.tree_view_en || !this.cards_view_en);
 
         const sort_mode_elem = this.controls_elem.querySelector(".extra-network-control--sort-mode[data-selected]");
         isElementThrowError(sort_mode_elem);
@@ -219,6 +227,7 @@ class ExtraNetworksTab {
         this.refresh_in_progress = false;
         this.tree_view_en = false;
         this.dirs_view_en = false;
+        this.cards_view_en = false;
         this.directory_filters = {};
         this.list_button_states = {};
     }
@@ -383,20 +392,28 @@ class ExtraNetworksTab {
         // We actually want to select the tree view's column in the resize-handle-row.
         // This is what we actually show/hide, not the inner elements.
         const div_tree = this.tree_list.scroll_elem.closest(".resize-handle-col");
+        const div_cards = this.cards_list.scroll_elem.closest(".resize-handle-col");
 
         this.dirs_view_en = "selected" in btn_dirs_view.dataset;
         this.tree_view_en = "selected" in btn_tree_view.dataset;
+        this.cards_view_en = "selected" in btn_tree_view.dataset;
         // Remove "hidden" class if button is enabled, otherwise add it.
         div_dirs.classList.toggle("hidden", !this.dirs_view_en);
         div_tree.classList.toggle("hidden", !this.tree_view_en);
+        div_cards.classList.toggle("hidden", !this.cards_view_en);
 
         // Apply the current resize handle classes.
         const resize_handle_row = this.tree_list.scroll_elem.closest(".resize-handle-row");
         resize_handle_row.classList.toggle("resize-handle-hidden", div_tree.classList.contains("hidden"));
+        if (this.tree_view_en && !this.cards_view_en) {
+            this.tree_list.scroll_elem.parentElement.style.flexGrow = 1;
+        } else {
+            this.tree_list.scroll_elem.parentElement.style.flexGrow = null;
+        }
 
         await Promise.all([this.setupTreeList(), this.setupCardsList()]);
         this.tree_list.enable(this.tree_view_en);
-        this.cards_list.enable(true);
+        this.cards_list.enable(this.cards_view_en);
         await Promise.all([this.tree_list.load(true), this.cards_list.load(true)]);
 
         // apply the previous sort/filter options
@@ -424,7 +441,7 @@ class ExtraNetworksTab {
         });
         this.showControls();
         this.tree_list.enable(this.tree_view_en);
-        this.cards_list.enable(true);
+        this.cards_list.enable(this.cards_view_en);
         await Promise.all([this.tree_list.load(), this.cards_list.load()]);
     }
 
@@ -1137,7 +1154,13 @@ async function extraNetworksControlTreeViewOnClick(event) {
     // this is only recently supported in firefox. So for now we just add a class
     // to the resize-handle-row instead.
     const resize_handle_row = tab.tree_list.scroll_elem.closest(".resize-handle-row");
-    resize_handle_row.classList.toggle("resize-handle-hidden", !tab.tree_view_en);
+    resize_handle_row.classList.toggle("resize-handle-hidden", !tab.cards_view_en || !tab.tree_view_en);
+
+    if (tab.tree_view_en && !tab.cards_view_en) {
+        tab.tree_list.scroll_elem.parentElement.style.flexGrow = 1;
+    } else {
+        tab.tree_list.scroll_elem.parentElement.style.flexGrow = null;
+    }
 
     // If the tree list hasn't loaded yet, we need to force it to load.
     // This can happen if tree view is disabled by default or before refresh.
@@ -1167,6 +1190,41 @@ function extraNetworksControlDirsViewOnClick(event) {
     tab.applyListButtonStates();
 }
 
+async function extraNetworksControlCardsViewOnClick(event) {
+    /** Handles `onclick` events for the Card View button.
+     *
+     * Toggles the card view in the extra networks pane.
+     */
+    const btn = event.target.closest(".extra-network-control--cards-view");
+    const controls = btn.closest(".extra-network-controls");
+    const tab = extra_networks_tabs[controls.dataset.tabnameFull];
+    btn.toggleAttribute("data-selected");
+    tab.cards_view_en = "selected" in btn.dataset;
+
+    tab.cards_list.scroll_elem.parentElement.classList.toggle("hidden", !tab.cards_view_en);
+    tab.cards_list.enable(tab.cards_view_en);
+
+    // Apply the resize-handle-hidden class to the resize-handle-row.
+    // NOTE: This can be simplified using only css with the ":has" selector however
+    // this is only recently supported in firefox. So for now we just add a class
+    // to the resize-handle-row instead.
+    const resize_handle_row = tab.cards_list.scroll_elem.closest(".resize-handle-row");
+    resize_handle_row.classList.toggle("resize-handle-hidden", !tab.cards_view_en || !tab.tree_view_en);
+
+    if (tab.tree_view_en && !tab.cards_view_en) {
+        tab.tree_list.scroll_elem.parentElement.style.flexGrow = 1;
+    } else {
+        tab.tree_list.scroll_elem.parentElement.style.flexGrow = null;
+    }
+
+    // If the tree list hasn't loaded yet, we need to force it to load.
+    // This can happen if tree view is disabled by default or before refresh.
+    // Then after refresh, enabling the tree view will require a load.
+    if (tab.cards_view_en && !tab.cards_list.initial_load) {
+        await tab.cards_list.load();
+    }
+}
+
 function extraNetworksControlRefreshOnClick(event) {
     /** Handles `onclick` events for the Refresh Page button.
      *
@@ -1483,6 +1541,7 @@ function extraNetworksSetupEventDelegators() {
         ".extra-network-control--sort-dir": extraNetworksControlSortDirOnClick,
         ".extra-network-control--dirs-view": extraNetworksControlDirsViewOnClick,
         ".extra-network-control--tree-view": extraNetworksControlTreeViewOnClick,
+        ".extra-network-control--cards-view": extraNetworksControlCardsViewOnClick,
         ".extra-network-control--refresh": extraNetworksControlRefreshOnClick,
     };
 
diff --git a/modules/shared_options.py b/modules/shared_options.py
index 4eb148ee9..efcbe49b5 100644
--- a/modules/shared_options.py
+++ b/modules/shared_options.py
@@ -264,6 +264,7 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s
     "extra_networks_card_order": OptionInfo("Ascending", "Default order for Extra Networks cards", gr.Dropdown, {"choices": ['Ascending', 'Descending']}).needs_reload_ui(),
     "extra_networks_dirs_view_default_enabled": OptionInfo(True, "Show the Extra Networks directory view by default.").needs_reload_ui(),
     "extra_networks_tree_view_default_enabled": OptionInfo(False, "Show the Extra Networks tree view by default").needs_reload_ui(),
+    "extra_networks_card_view_default_enabled": OptionInfo(True, "Show the Extra Networks card view by default").needs_reload_ui(),
     "extra_networks_tree_view_show_files": OptionInfo(True, "Show files in tree view.").info("Disabling this option will remove file entries from the tree view and only show directories.").needs_reload_ui(),
     "extra_networks_tree_view_default_width": OptionInfo(180, "Default width for the Extra Networks directory tree view", gr.Number).needs_reload_ui(),
     "extra_networks_add_text_separator": OptionInfo(" ", "Extra networks separator").info("extra text to add before <...> when adding extra network to prompt"),
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index f66bb07f4..109544199 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -840,6 +840,7 @@ class ExtraNetworksPage:
         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
+        card_view_en = shared.opts.extra_networks_card_view_default_enabled
 
         return self.pane_tpl.format(
             **{
@@ -852,6 +853,7 @@ class ExtraNetworksPage:
                 "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 "",
+                "btn_card_view_data_attributes": "data-selected" if card_view_en else "",
                 "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,