diff --git a/src/components/profiles/TriggersEditor.vue b/src/components/profiles/TriggersEditor.vue
index e2e66176..91addd16 100644
--- a/src/components/profiles/TriggersEditor.vue
+++ b/src/components/profiles/TriggersEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-row v-for="triggerKey in Object.keys(triggers)" :key="triggerKey">
+    <v-row v-for="triggerKey in sortedTriggers" :key="triggerKey">
       <v-col>
         <trigger-editor
           v-model="value[triggerKey]"
@@ -25,6 +25,29 @@ export default {
   },
   computed: {
     ...mapGetters("ipc", ["triggers"]),
+    sortedTriggers() {
+      return Object.keys(this.triggers).sort((a, b) => {
+        const aCommands = this.hasCommands(a);
+        const bCommands = this.hasCommands(b);
+
+        if (aCommands && !bCommands) {
+          return -1;
+        }
+        if (!aCommands && bCommands) {
+          return 1;
+        }
+        return 0;
+      });
+    },
+  },
+  methods: {
+    hasCommands(key) {
+      try {
+        return Object.keys(this.value[key]).length >= 1;
+      } catch {
+        return false;
+      }
+    },
   },
 };
 </script>
diff --git a/src/components/triggers/MultiCommandTrigger.vue b/src/components/triggers/MultiCommandTrigger.vue
index a13074a9..3b4b9ed9 100644
--- a/src/components/triggers/MultiCommandTrigger.vue
+++ b/src/components/triggers/MultiCommandTrigger.vue
@@ -1,8 +1,10 @@
 <template>
   <v-expansion-panels>
     <v-expansion-panel>
-      <v-expansion-panel-header> {{ triggerName }} </v-expansion-panel-header>
-      <v-expansion-panel-content>
+      <v-expansion-panel-header :color="panelColor">
+        {{ triggerName }}
+      </v-expansion-panel-header>
+      <v-expansion-panel-content :color="panelColor">
         <v-row v-for="(commandKey, i) in commands" :key="i">
           <v-col>
             <command-card
@@ -43,6 +45,14 @@ export default {
     trigger: {},
   },
   computed: {
+    hasCommands() {
+      if (!this.value) return false;
+      return Object.keys(this.value).length > 0;
+    },
+    panelColor() {
+      if (this.hasCommands) return "grey darken-2";
+      return "";
+    },
     commands() {
       if (!this.value) {
         return [];
diff --git a/src/components/triggers/SingleCommandTrigger.vue b/src/components/triggers/SingleCommandTrigger.vue
index 06e91236..0202ec92 100644
--- a/src/components/triggers/SingleCommandTrigger.vue
+++ b/src/components/triggers/SingleCommandTrigger.vue
@@ -1,8 +1,10 @@
 <template>
   <v-expansion-panels>
     <v-expansion-panel>
-      <v-expansion-panel-header> {{ triggerName }} </v-expansion-panel-header>
-      <v-expansion-panel-content>
+      <v-expansion-panel-header :color="panelColor">
+        {{ triggerName }}
+      </v-expansion-panel-header>
+      <v-expansion-panel-content :color="panelColor">
         <command-editor :value="value" @input="(v) => $emit('input', v)" />
       </v-expansion-panel-content>
     </v-expansion-panel>
@@ -14,6 +16,14 @@ import CommandEditor from "../commands/CommandEditor.vue";
 export default {
   components: { CommandEditor },
   computed: {
+    hasCommands() {
+      if (!this.value) return false;
+      return Object.keys(this.value).length > 0;
+    },
+    panelColor() {
+      if (this.hasCommands) return "grey darken-2";
+      return "";
+    },
     commands() {
       if (!this.value) {
         return [];