diff --git a/ui/index.html b/ui/index.html
index 3d580072..3e82b10e 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/png" href="/media/favicon-16x16.png" sizes="16x16">
     <link rel="icon" type="image/png" href="/media/favicon-32x32.png" sizes="32x32">
-    <link rel="stylesheet" href="/media/main.css?v=1">
+    <link rel="stylesheet" href="/media/main.css?v=2">
     <link rel="stylesheet" href="/media/modifier-thumbnails.css?v=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
     <link rel="stylesheet" href="/media/drawingboard.min.css">
@@ -210,7 +210,7 @@
 </div>
 </body>
 
-<script src="media/main.js?v=1"></script>
+<script src="media/main.js?v=2"></script>
 <script>
 async function init() {
     await loadModifiers()
diff --git a/ui/media/main.js b/ui/media/main.js
index b1af73ac..4dafe1fd 100644
--- a/ui/media/main.js
+++ b/ui/media/main.js
@@ -1140,7 +1140,7 @@ async function loadModifiers() {
 
             modifiers = res; // update global variable
 
-            res.forEach(modifierGroup => {
+            res.forEach((modifierGroup, idx) => {
                 const title = modifierGroup.category;
                 const modifiers = modifierGroup.modifiers;
 
@@ -1151,6 +1151,11 @@ async function loadModifiers() {
                 const modifiersEl = document.createElement('div');
                 modifiersEl.classList.add('collapsible-content', 'editor-modifiers-leaf');
 
+                if (idx == 0) {
+                    titleEl.className += ' active'
+                    modifiersEl.style.display = 'block'
+                }
+
                 modifiers.forEach(modObj => {
                     const modifierName = modObj.modifier;
                     const modifierPreviews = modObj?.previews?.map(preview => `${modifierThumbnailPath}/${preview.path}`);