diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html
index b61bc38e9..20652c1c6 100644
--- a/html/extra-networks-pane.html
+++ b/html/extra-networks-pane.html
@@ -140,13 +140,13 @@
         </div>
     </div>
     <div class="extra-network-content--container">
-        <div class="extra-network-content extra-network-content--dirs-view {dirs_view_hidden_cls}">
+        <div class="extra-network-content extra-network-content--dirs-view styled-scrollbar {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 {tree_view_hidden_cls}" style="{tree_view_style}">
                 <div id='{tabname}_{extra_networks_tabname}_tree_list_scroll_area'
-                    class='extra-network-tree clusterize-scroll'>
+                    class='extra-network-tree styled-scrollbar 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>
@@ -155,7 +155,7 @@
             </div>
             <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'>
+                    class='extra-network-cards styled-scrollbar clusterize-scroll'>
                     <div id='{tabname}_{extra_networks_tabname}_cards_list_content_area'
                         class='extra-network-cards-content clusterize-content'>
                         <div class="clusterize-no-data">Loading...</div>
@@ -164,4 +164,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/style.css b/style.css
index 82377c41b..bfc91ec08 100644
--- a/style.css
+++ b/style.css
@@ -1212,27 +1212,6 @@ body.resizing .resize-handle {
     color: var(--input-placeholder-color) !important;
 }
 
-/* Custom scrollbar style. Only works on chromium based browsers. */
-.clusterize-scroll::-webkit-scrollbar {
-    background: transparent;
-    width: var(--text-lg);
-}
-
-.clusterize-scroll::-webkit-scrollbar-track {
-    background: transparent;
-    background-clip: content-box;
-}
-
-.clusterize-scroll::-webkit-scrollbar-thumb {
-    background: var(--border-color-primary);
-    border-radius: var(--radius-xl);
-    border: calc(var(--button-border-width) * 4) solid var(--background-fill-primary);
-}
-
-.clusterize-scroll::-webkit-scrollbar-button {
-    display: none;
-}
-
 .extra-network-pane {
     display: flex;
     flex-direction: column;
@@ -1256,13 +1235,17 @@ body.resizing .resize-handle {
     width: 100%;
     height: 100%;
     flex-direction: column;
+    gap: var(--spacing-sm);
 }
 
 .extra-network-content--dirs-view {
-    flex: 0 1 0%;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex: 0 1 min-content;
+    flex-flow: row wrap;
+    max-height: 20%;
     gap: var(--spacing-sm);
+    overflow: clip auto;
+    border: 1px solid var(--block-border-color);
+    padding: var(--spacing-md);
 }
 
 .extra-network-content--cards {
@@ -1661,3 +1644,24 @@ body.resizing .resize-handle {
     background: var(--button-primary-background-fill);
     border-color: var(--button-primary-border-color);
 }
+
+/* Custom scrollbar style. Only works on chromium based browsers. */
+.styled-scrollbar::-webkit-scrollbar {
+    background: transparent;
+    width: var(--text-lg);
+}
+
+.styled-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+    background-clip: content-box;
+}
+
+.styled-scrollbar::-webkit-scrollbar-thumb {
+    background: var(--border-color-primary);
+    border-radius: var(--radius-xl);
+    border: calc(var(--button-border-width) * 4) solid var(--background-fill-primary);
+}
+
+.styled-scrollbar::-webkit-scrollbar-button {
+    display: none;
+}