diff --git a/app/src/main/assets/eruda.css b/app/src/main/assets/eruda.css
index ff9f10b5..51116589 100644
--- a/app/src/main/assets/eruda.css
+++ b/app/src/main/assets/eruda.css
@@ -163,7 +163,8 @@ h2.eruda-title {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
-  > span {
+  .eruda-command,
+  .eruda-script {
     padding: 0.3em;
     margin: 0.3em;
     border: 0.5px solid violet;
diff --git a/app/src/main/assets/eruda.js b/app/src/main/assets/eruda.js
index 8d36d8b0..83320119 100644
--- a/app/src/main/assets/eruda.js
+++ b/app/src/main/assets/eruda.js
@@ -316,14 +316,31 @@ eruda.Resources = class extends eruda.Resources {
   }
   refreshCommand() {
     this._command = ChromeXt.commands.filter((m) => m.enabled);
-    const commands = this._command
-      .map(function (cmd, index) {
-        let title = cmd.title.toString();
-        if (typeof cmd.title == "function") {
-          title = cmd.title(index);
-        }
-        return `<span data-index=${index} class="${c("command")}">${title}</span>`;
+    const commands = Map.groupBy(this._command
+        .map(function (cmd, index) {
+          cmd["index"] = index;
+          return cmd;
+        }),
+      function (cmd) {
+        return cmd.id
+      })
+      .entries()
+      .map(function (entry) {
+        let cmds = entry[1]
+          .map(function (cmd) {
+            let title = cmd.title.toString();
+            if (typeof cmd.title == "function") {
+              title = cmd.title(cmd.index);
+            }
+            return `<span data-index="${cmd.index}" class="${c("command")}">${title}</span>`;
+          })
+          .join("")
+        return `<div class="${c("command-group")}">` +
+                  `<h3 class="${c("title")}">${entry[0].split(':').at(-1)}</h3>` +
+                  `${cmds}` +
+                `</div>`;
       })
+      .toArray()
       .join("");
     this._$command.html(
       `<h2 class="${c("title")}">UserScript Commands</h2>` +