diff --git a/client/dive-common/components/ActionEditors/ActionShortcuts.vue b/client/dive-common/components/ActionEditors/ActionShortcuts.vue
index 0dd20c58..f08b620b 100644
--- a/client/dive-common/components/ActionEditors/ActionShortcuts.vue
+++ b/client/dive-common/components/ActionEditors/ActionShortcuts.vue
@@ -4,9 +4,11 @@ import {
   computed,
   defineComponent, ref, Ref,
 } from 'vue';
+import draggable from 'vuedraggable';
 import {
   DIVEAction, DIVEActionShortcut, TrackSelectAction,
 } from 'dive-common/use/useActions';
+import { ButtonShortcut } from 'vue-media-annotator/use/AttributeTypes';
 import {
   useAttributes, useConfiguration, useTrackStyleManager,
 } from 'vue-media-annotator/provides';
@@ -22,6 +24,7 @@ export default defineComponent({
     GetShortcut,
     ActionEditor,
     ButtonShortcutEditor,
+    draggable,
   },
   props: {
     disabled: {
@@ -40,6 +43,8 @@ export default defineComponent({
           tempList.push(item);
         });
         shortcutList.value = tempList;
+      } else {
+        shortcutList.value = [];
       }
     };
     updateShortCutList();
@@ -55,6 +60,31 @@ export default defineComponent({
       actionList.value = editingShortcut.value?.actions || [];
     };
 
+    const getShortcutDisplay = (item: DIVEActionShortcut) => {
+      const { key, modifiers } = item.shortcut;
+      if (!key) {
+        return '';
+      }
+      if (modifiers?.length) {
+        return `${key}+${modifiers.join('+')}`;
+      }
+      return key;
+    };
+
+    const hasKeyboardShortcut = (item: DIVEActionShortcut) => !!(item.shortcut.key && item.shortcut.key.length);
+
+    const isIconOnlyButton = (button: ButtonShortcut) => {
+      const hasText = !!(button.buttonText && button.buttonText.trim());
+      return !hasText && !!(button.iconPrepend || button.iconAppend);
+    };
+
+    const onShortcutOrderEnd = () => {
+      if (!configMan.configuration.value) {
+        configMan.configuration.value = {};
+      }
+      configMan.configuration.value.shortcuts = [...shortcutList.value];
+    };
+
     const editShortcut = (index?: number) => {
       addEditShortcut.value = true;
       if (index !== undefined) {
@@ -188,6 +218,10 @@ export default defineComponent({
       addEditActionindex,
       saveAction,
       saveShortcutDisabled,
+      getShortcutDisplay,
+      hasKeyboardShortcut,
+      isIconOnlyButton,
+      onShortcutOrderEnd,
     };
   },
 
@@ -220,78 +254,140 @@ export default defineComponent({
                 Add Shortcut
               </v-btn>
             </v-row>
-            <v-row dense style="border-bottom: 1px solid gray;">
-              <v-col>
-                <span>
-                  <v-icon class="mr-2">mdi-keyboard-outline</v-icon><b>Keyboard</b>
-                </span>
-              </v-col>
-              <v-col>
-                <span>
-                  <v-icon class="mr-2">mdi-button-cursor</v-icon><b>Button</b>
-                </span>
-              </v-col>
-              <v-col>
-                <span>
-                  <b>Description</b>
-                </span>
-              </v-col>
-              <v-col>
-                <span>
-                  <b>Actions</b>
-                </span>
-              </v-col>
-              <v-col cols="1">
-                <span>
-                  <b>Edit</b>
-                </span>
-              </v-col>
-            </v-row>
-
             <v-row
-              v-for="item, index in shortcutList"
-              :key="`shortcut_${item.shortcut.key}_${index}`"
+              v-if="shortcutList.length"
               dense
+              class="px-2 pb-1 font-weight-bold text-caption grey--text text--darken-1"
               align="center"
-              justify="center"
             >
-              <v-col>
-                <span v-if="item.shortcut.key">
-                  <v-icon class="mr-2">mdi-keyboard-outline</v-icon>{{ item.shortcut.key }}{{ item.shortcut.modifiers && item.shortcut.modifiers.length ? `+${item.shortcut.modifiers.join('+')}` : '' }}
-                </span>
+              <v-col cols="1">
+                Drag
               </v-col>
-              <v-col>
-                <span v-if="item.button">
-                  <v-icon class="mr-2">mdi-button-cursor</v-icon>
-                  <v-icon v-if="item.button.iconPrepend">{{ item.button.iconPrepend }}</v-icon>
-                  <span v-if="item.button.buttonText">{{ item.button.buttonText }}</span>
-                  <v-icon v-if="item.button.iconAppend">{{ item.button.iconAppend }}</v-icon>
-                </span>
+              <v-col cols="2">
+                Shortcut
               </v-col>
-              <v-col>
-                {{ item.description }}
+              <v-col cols="2">
+                Button
               </v-col>
-              <v-col>
-                <v-row
-                  v-for="action in item.actions"
-                  :key="`shortcut_action-${item.shortcut.key}-${action.action.type}`"
-                  dense
-                >
-                  {{ action.action.type }}
-                </v-row>
+              <v-col cols="3">
+                Description
               </v-col>
-              <v-col cols="1">
-                <v-icon @click="editShortcut(index)">
-                  mdi-pencil
-                </v-icon>
-                <v-icon
-                  color="error"
-                  @click="removeShortcut(index)"
-                >
-                  mdi-delete
-                </v-icon>
+              <v-col cols="2">
+                Actions
+              </v-col>
+              <v-col cols="2" class="text-right">
+                Edit
               </v-col>
             </v-row>
+            <draggable
+              :list="shortcutList"
+              handle=".drag-handle"
+              @end="onShortcutOrderEnd"
+            >
+              <v-row
+                v-for="(item, index) in shortcutList"
+                :key="`shortcut_${item.shortcut.key}_${index}`"
+                dense
+                align="center"
+                class="px-2 py-1 action-shortcut-list-row"
+              >
+                <v-col cols="1">
+                  <v-icon class="drag-handle">
+                    mdi-drag
+                  </v-icon>
+                </v-col>
+                <v-col cols="2">
+                  <template v-if="hasKeyboardShortcut(item)">
+                    <v-tooltip open-delay="200" bottom>
+                      <template #activator="{ on }">
+                        <v-icon small class="mr-1" color="primary" v-on="on">
+                          mdi-keyboard-outline
+                        </v-icon>
+                      </template>
+                      <span>Keyboard shortcut in use</span>
+                    </v-tooltip>
+                    <v-chip small>
+                      {{ getShortcutDisplay(item) }}
+                    </v-chip>
+                  </template>
+                  <v-tooltip
+                    v-else
+                    open-delay="200"
+                    bottom
+                  >
+                    <template #activator="{ on }">
+                      <v-icon small v-on="on">
+                        mdi-keyboard-off-outline
+                      </v-icon>
+                    </template>
+                    <span>No keyboard shortcut</span>
+                  </v-tooltip>
+                </v-col>
+                <v-col cols="2">
+                  <v-tooltip
+                    v-if="item.button"
+                    open-delay="200"
+                    bottom
+                  >
+                    <template #activator="{ on }">
+                      <v-btn
+                        x-small
+                        outlined
+                        :class="{ 'shortcut-button-preview--icon-only': isIconOnlyButton(item.button) }"
+                        :color="item.button.buttonColor || 'primary'"
+                        v-on="on"
+                        @click.stop.prevent
+                      >
+                        <v-icon
+                          v-if="item.button.iconPrepend"
+                          x-small
+                          :left="!!item.button.buttonText"
+                        >
+                          {{ item.button.iconPrepend }}
+                        </v-icon>
+                        <template v-if="item.button.buttonText">
+                          {{ item.button.buttonText }}
+                        </template>
+                        <v-icon
+                          v-if="item.button.iconAppend"
+                          x-small
+                          :right="!!item.button.buttonText"
+                        >
+                          {{ item.button.iconAppend }}
+                        </v-icon>
+                      </v-btn>
+                    </template>
+                    <span>Custom UI button</span>
+                  </v-tooltip>
+                  <span v-else class="text-caption grey--text">—</span>
+                </v-col>
+                <v-col cols="3">
+                  {{ item.description || '—' }}
+                </v-col>
+                <v-col cols="2">
+                  <v-chip
+                    v-for="action in item.actions"
+                    :key="`shortcut_action-${item.shortcut.key}-${action.action.type}`"
+                    small
+                    class="ma-1"
+                  >
+                    {{ action.action.type }}
+                  </v-chip>
+                </v-col>
+                <v-col cols="2" class="text-right">
+                  <v-btn icon x-small class="ma-0" @click="editShortcut(index)">
+                    <v-icon small>
+                      mdi-pencil
+                    </v-icon>
+                  </v-btn>
+                  <v-btn icon x-small class="ma-0" color="error" @click="removeShortcut(index)">
+                    <v-icon small>
+                      mdi-delete
+                    </v-icon>
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </draggable>
           </div>
           <div v-else-if="editingShortcut !== null">
             <v-row dense>
@@ -477,4 +573,22 @@ export default defineComponent({
     min-height: 15px;
     max-height: 15px;
   }
+
+  .drag-handle {
+    cursor: grab;
+  }
+
+  .action-shortcut-list-row {
+    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
+  }
+
+  .shortcut-button-preview--icon-only {
+    min-width: 28px !important;
+    padding: 0 6px !important;
+
+    .v-icon {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+  }
 </style>
diff --git a/client/dive-common/components/Attributes/AttributeEditor.vue b/client/dive-common/components/Attributes/AttributeEditor.vue
index 3cf0414a..1459108d 100644
--- a/client/dive-common/components/Attributes/AttributeEditor.vue
+++ b/client/dive-common/components/Attributes/AttributeEditor.vue
@@ -535,6 +535,8 @@ export default defineComponent({
             <attribute-shortcuts
               v-model="shortcuts"
               :value-type="datatype"
+              :attribute-name="displayText || name"
+              :attribute-color="color || tempColor"
             />
           </v-tab-item>
           <v-tab-item>
diff --git a/client/dive-common/components/Attributes/AttributeShortcuts.vue b/client/dive-common/components/Attributes/AttributeShortcuts.vue
index 8ad107d4..bfc194b3 100644
--- a/client/dive-common/components/Attributes/AttributeShortcuts.vue
+++ b/client/dive-common/components/Attributes/AttributeShortcuts.vue
@@ -3,6 +3,7 @@ import {
   computed, defineComponent, ref, PropType, Ref,
   watch,
 } from 'vue';
+import draggable from 'vuedraggable';
 import { AttributeShortcut, ButtonShortcut } from 'vue-media-annotator/use/AttributeTypes';
 import usedShortcuts from 'dive-common/use/usedShortcuts';
 import { useAttributes } from 'vue-media-annotator/provides';
@@ -13,6 +14,7 @@ export default defineComponent({
   name: 'AttributeShortcuts',
   components: {
     ButtonShortcutEditor,
+    draggable,
   },
   props: {
     value: {
@@ -23,6 +25,14 @@ export default defineComponent({
       type: String as PropType<'text' | 'number' | 'boolean'>,
       required: true,
     },
+    attributeName: {
+      type: String,
+      default: '',
+    },
+    attributeColor: {
+      type: String,
+      default: '',
+    },
   },
   setup(props, { emit }) {
     const editShortcutDialog = ref(false);
@@ -74,10 +84,31 @@ export default defineComponent({
       return `${base}${shorcut.key}`;
     };
 
+    const defaultDescription = (type: AttributeShortcut['type']) => {
+      if (type === 'remove') {
+        return 'Remove the value';
+      }
+      return 'Set the Value';
+    };
+
+    const isDefaultDescription = (description: string) => [
+      'Set the Value',
+      'Remove the value',
+      'Enter a Description',
+      '',
+    ].includes(description);
+
+    const hasKeyboardShortcut = (shortcut: AttributeShortcut) => !!(shortcut.key && shortcut.key.length);
+
+    const isIconOnlyButton = (button: ButtonShortcut) => {
+      const hasText = !!(button.buttonText && button.buttonText.trim());
+      return !hasText && !!(button.iconPrepend || button.iconAppend);
+    };
+
     const editShortcut = (shortcut: AttributeShortcut, index: number) => {
       selectedShortcut.value = index;
       selectedShortcutType.value = shortcut.type;
-      selectedShortcutDescription.value = shortcut.description || 'Enter a Description';
+      selectedShortcutDescription.value = shortcut.description || defaultDescription(shortcut.type);
       selectedShortcutValue.value = shortcut.value || 0;
       selectedShortcutKey.value = getShortcutDisplay(shortcut);
       selectedShortcutButton.value = shortcut.button || undefined;
@@ -125,7 +156,7 @@ export default defineComponent({
     const addShortcut = () => {
       selectedShortcut.value = props.value.length;
       selectedShortcutType.value = 'set';
-      selectedShortcutDescription.value = 'Enter a Description';
+      selectedShortcutDescription.value = defaultDescription('set');
       if (props.valueType === 'boolean') {
         selectedShortcutValue.value = false;
       }
@@ -223,6 +254,15 @@ export default defineComponent({
       }
     });
 
+    watch(selectedShortcutType, (type) => {
+      if (!editShortcutDialog.value) {
+        return;
+      }
+      if (isDefaultDescription(selectedShortcutDescription.value)) {
+        selectedShortcutDescription.value = defaultDescription(type);
+      }
+    });
+
     const selectedDisplayKey = computed(() => {
       let base = '';
       if (selectedShortcutModifiers.value.length) {
@@ -231,6 +271,15 @@ export default defineComponent({
       }
       return `${base}${selectedShortcutKey.value}`;
     });
+
+    const onShortcutOrderEnd = () => {
+      emit('input', copy.value);
+    };
+
+    watch(() => props.value, (val) => {
+      copy.value = val;
+    });
+
     return {
       editShortcutDialog,
       selectedShortcutType,
@@ -247,6 +296,8 @@ export default defineComponent({
       awaitingKeyPress,
       shortcutError,
       getShortcutDisplay,
+      hasKeyboardShortcut,
+      isIconOnlyButton,
       cancel,
       save,
       addShortcut,
@@ -254,54 +305,166 @@ export default defineComponent({
       editShortcut,
       editKeyPress,
       copy,
+      onShortcutOrderEnd,
     };
   },
 });
 </script>
-awaitingKeyPress
+
 <template>
   <div>
-    <v-btn @click="addShortcut">
+    <v-btn class="mb-2" @click="addShortcut">
       Add Shortcut
     </v-btn>
-    <v-list>
-      <v-list-item
+    <v-row
+      v-if="copy.length"
+      dense
+      class="px-2 pb-1 font-weight-bold text-caption grey--text text--darken-1"
+      align="center"
+    >
+      <v-col cols="1">
+        Drag
+      </v-col>
+      <v-col cols="2">
+        Shortcut
+      </v-col>
+      <v-col cols="2">
+        Type
+      </v-col>
+      <v-col cols="2">
+        Value
+      </v-col>
+      <v-col cols="2">
+        Button
+      </v-col>
+      <v-col cols="1">
+        Info
+      </v-col>
+      <v-col cols="2" class="text-right">
+        Edit
+      </v-col>
+    </v-row>
+    <draggable
+      :list="copy"
+      handle=".drag-handle"
+      @end="onShortcutOrderEnd"
+    >
+      <v-row
         v-for="(shortcut, index) in copy"
-        :key="`${shortcut.type}_shorcut_${shortcut.key}`"
+        :key="`${shortcut.type}_shortcut_${index}_${shortcut.key}`"
+        dense
+        align="center"
+        class="px-2 py-1 shortcut-list-row"
       >
-        <span>Key:</span><v-chip>{{ getShortcutDisplay(shortcut) }}</v-chip>
-        <v-spacer />
-        <span>Type:</span><v-chip>{{ shortcut.type }}</v-chip>
-        <v-spacer />
-        <div v-if="shortcut.type === 'set'">
-          <span>Value:</span> <v-chip> {{ shortcut.value }}</v-chip>
-        </div>
-        <v-spacer />
-        <v-tooltip
-          open-delay="200"
-          bottom
-          max-width="200"
-        >
-          <template #activator="{ on }">
-            <v-icon v-on="on">
-              mdi-card-text-outline
-            </v-icon>
+        <v-col cols="1">
+          <v-icon class="drag-handle">
+            mdi-drag
+          </v-icon>
+        </v-col>
+        <v-col cols="2">
+          <template v-if="hasKeyboardShortcut(shortcut)">
+            <v-tooltip open-delay="200" bottom>
+              <template #activator="{ on }">
+                <v-icon small class="mr-1" color="primary" v-on="on">
+                  mdi-keyboard-outline
+                </v-icon>
+              </template>
+              <span>Keyboard shortcut in use</span>
+            </v-tooltip>
+            <v-chip small>
+              {{ getShortcutDisplay(shortcut) }}
+            </v-chip>
           </template>
-          <span>{{ shortcut.description }}</span>
-        </v-tooltip>
-        <v-spacer />
-        <v-icon @click="editShortcut(shortcut, index)">
-          mdi-pencil
-        </v-icon>
-        <v-spacer />
-        <v-icon
-          color="error"
-          @click="deleteShortcut(index)"
-        >
-          mdi-delete
-        </v-icon>
-      </v-list-item>
-    </v-list>
+          <v-tooltip
+            v-else
+            open-delay="200"
+            bottom
+          >
+            <template #activator="{ on }">
+              <v-icon small v-on="on">
+                mdi-keyboard-off-outline
+              </v-icon>
+            </template>
+            <span>No keyboard shortcut</span>
+          </v-tooltip>
+        </v-col>
+        <v-col cols="2">
+          <v-chip small>
+            {{ shortcut.type }}
+          </v-chip>
+        </v-col>
+        <v-col cols="2">
+          <v-chip v-if="shortcut.type === 'set'" small>
+            {{ shortcut.value }}
+          </v-chip>
+          <span v-else class="text-caption grey--text">—</span>
+        </v-col>
+        <v-col cols="2">
+          <v-tooltip
+            v-if="shortcut.button"
+            open-delay="200"
+            bottom
+          >
+            <template #activator="{ on }">
+              <v-btn
+                x-small
+                outlined
+                :class="{ 'shortcut-button-preview--icon-only': isIconOnlyButton(shortcut.button) }"
+                :color="shortcut.button.buttonColor || 'primary'"
+                v-on="on"
+                @click.stop.prevent
+              >
+                <v-icon
+                  v-if="shortcut.button.iconPrepend"
+                  x-small
+                  :left="!!shortcut.button.buttonText"
+                >
+                  {{ shortcut.button.iconPrepend }}
+                </v-icon>
+                <template v-if="shortcut.button.buttonText">
+                  {{ shortcut.button.buttonText }}
+                </template>
+                <v-icon
+                  v-if="shortcut.button.iconAppend"
+                  x-small
+                  :right="!!shortcut.button.buttonText"
+                >
+                  {{ shortcut.button.iconAppend }}
+                </v-icon>
+              </v-btn>
+            </template>
+            <span>Custom UI button</span>
+          </v-tooltip>
+          <span v-else class="text-caption grey--text">—</span>
+        </v-col>
+        <v-col cols="1">
+          <v-tooltip
+            open-delay="200"
+            bottom
+            max-width="200"
+          >
+            <template #activator="{ on }">
+              <v-icon small v-on="on">
+                mdi-card-text-outline
+              </v-icon>
+            </template>
+            <span>{{ shortcut.description || 'No description' }}</span>
+          </v-tooltip>
+        </v-col>
+        <v-col cols="2" class="text-right">
+          <v-btn icon x-small class="ma-0" @click="editShortcut(shortcut, index)">
+            <v-icon small>
+              mdi-pencil
+            </v-icon>
+          </v-btn>
+          <v-btn icon x-small class="ma-0" color="error" @click="deleteShortcut(index)">
+            <v-icon small>
+              mdi-delete
+            </v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </draggable>
     <v-dialog
       v-model="editShortcutDialog"
       max-width="600"
@@ -446,6 +609,9 @@ awaitingKeyPress
           </v-row>
           <button-shortcut-editor
             v-model="selectedShortcutButton"
+            :attribute-name="attributeName"
+            :attribute-color="attributeColor"
+            :shortcut-type="selectedShortcutType"
           />
         </v-card-text>
         <v-card-actions>
@@ -473,4 +639,21 @@ awaitingKeyPress
 </template>
 
 <style lang="scss">
+.drag-handle {
+  cursor: grab;
+}
+
+.shortcut-list-row {
+  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
+}
+
+.shortcut-button-preview--icon-only {
+  min-width: 28px !important;
+  padding: 0 6px !important;
+
+  .v-icon {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
 </style>
diff --git a/client/dive-common/components/CustomUI/ButtonShortcutEditor.vue b/client/dive-common/components/CustomUI/ButtonShortcutEditor.vue
index 23932fdc..6469b019 100644
--- a/client/dive-common/components/CustomUI/ButtonShortcutEditor.vue
+++ b/client/dive-common/components/CustomUI/ButtonShortcutEditor.vue
@@ -2,7 +2,25 @@
 import {
   defineComponent, PropType, ref, watch,
 } from 'vue';
-import { ButtonShortcut } from 'vue-media-annotator/use/AttributeTypes';
+import { AttributeShortcut, ButtonShortcut } from 'vue-media-annotator/use/AttributeTypes';
+
+function defaultButtonForType(
+  shortcutType: AttributeShortcut['type'] | undefined,
+  attributeName: string | undefined,
+  attributeColor: string | undefined,
+): ButtonShortcut {
+  if (shortcutType === 'remove') {
+    return {
+      buttonText: '',
+      iconPrepend: 'mdi-delete',
+      buttonColor: '#F44336',
+    };
+  }
+  return {
+    buttonText: attributeName || 'Button Name',
+    buttonColor: attributeColor || '#FF00FF',
+  };
+}
 
 export default defineComponent({
   name: 'ButtonShortcutEditor',
@@ -15,16 +33,34 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    attributeName: {
+      type: String,
+      default: '',
+    },
+    attributeColor: {
+      type: String,
+      default: '',
+    },
+    shortcutType: {
+      type: String as PropType<AttributeShortcut['type'] | undefined>,
+      default: undefined,
+    },
   },
   setup(props, { emit }) {
     const buttonShortcutEnabled = ref(!!props.value);
-    const buttonShortcut = ref<ButtonShortcut>(props.value || { buttonText: 'Button Name', buttonColor: '#FF00FF' });
+    const buttonShortcut = ref<ButtonShortcut>(
+      props.value || defaultButtonForType(
+        props.shortcutType,
+        props.attributeName,
+        props.attributeColor,
+      ),
+    );
+    let syncingFromProps = false;
 
-    watch(() => props.value, (newValue) => {
-      buttonShortcutEnabled.value = !!newValue;
-      buttonShortcut.value = newValue || { buttonText: 'Button Name', buttonColor: '#FF00FF' };
-    });
     const updateButtonShortcut = () => {
+      if (syncingFromProps) {
+        return;
+      }
       if (buttonShortcutEnabled.value) {
         emit('input', buttonShortcut.value);
       } else {
@@ -32,19 +68,58 @@ export default defineComponent({
       }
     };
 
+    const applyTypeDefaults = () => {
+      syncingFromProps = true;
+      buttonShortcut.value = defaultButtonForType(
+        props.shortcutType,
+        props.attributeName,
+        props.attributeColor,
+      );
+      syncingFromProps = false;
+      updateButtonShortcut();
+    };
+
+    watch(() => props.value, (newValue) => {
+      syncingFromProps = true;
+      buttonShortcutEnabled.value = !!newValue;
+      buttonShortcut.value = newValue
+        || defaultButtonForType(
+          props.shortcutType,
+          props.attributeName,
+          props.attributeColor,
+        );
+      syncingFromProps = false;
+    });
+
+    watch(buttonShortcutEnabled, (enabled, wasEnabled) => {
+      if (syncingFromProps) {
+        return;
+      }
+      if (enabled && !wasEnabled) {
+        applyTypeDefaults();
+      } else {
+        updateButtonShortcut();
+      }
+    });
+
+    watch(() => props.shortcutType, (type, prevType) => {
+      if (syncingFromProps) {
+        return;
+      }
+      if (buttonShortcutEnabled.value && type && prevType && type !== prevType) {
+        applyTypeDefaults();
+      }
+    });
+
+    watch(buttonShortcut, () => {
+      updateButtonShortcut();
+    }, { deep: true });
+
     return {
       buttonShortcutEnabled,
       buttonShortcut,
-      updateButtonShortcut,
     };
   },
-  watch: {
-    buttonShortcutEnabled: 'updateButtonShortcut',
-    buttonShortcut: {
-      handler: 'updateButtonShortcut',
-      deep: true,
-    },
-  },
 });
 </script>
 
@@ -54,8 +129,42 @@ export default defineComponent({
     <div v-if="buttonShortcutEnabled">
       <v-text-field v-model="buttonShortcut.buttonText" label="Button Text" />
       <v-text-field v-model="buttonShortcut.buttonToolTip" label="Button Tooltip" />
-      <v-text-field v-model="buttonShortcut.iconPrepend" label="Prepend Icon" />
-      <v-text-field v-model="buttonShortcut.iconAppend" label="Append Icon" />
+      <v-row dense align="center">
+        <v-col>
+          <v-text-field
+            v-model="buttonShortcut.iconPrepend"
+            label="Prepend Icon"
+            hide-details
+            class="mb-2"
+          />
+        </v-col>
+        <v-col
+          v-if="buttonShortcut.iconPrepend"
+          cols="auto"
+        >
+          <v-icon :color="buttonShortcut.buttonColor">
+            {{ buttonShortcut.iconPrepend }}
+          </v-icon>
+        </v-col>
+      </v-row>
+      <v-row dense align="center">
+        <v-col>
+          <v-text-field
+            v-model="buttonShortcut.iconAppend"
+            label="Append Icon"
+            hide-details
+            class="mb-2"
+          />
+        </v-col>
+        <v-col
+          v-if="buttonShortcut.iconAppend"
+          cols="auto"
+        >
+          <v-icon :color="buttonShortcut.buttonColor">
+            {{ buttonShortcut.iconAppend }}
+          </v-icon>
+        </v-col>
+      </v-row>
       <v-color-picker v-model="buttonShortcut.buttonColor" label="Button Color" />
       <v-checkbox v-if="attribute" v-model="buttonShortcut.displayValue" label="Display Value" />
     </div>
diff --git a/client/dive-common/components/CustomUI/CustomUIBase.vue b/client/dive-common/components/CustomUI/CustomUIBase.vue
index 1bc34c9e..2f72bcfd 100644
--- a/client/dive-common/components/CustomUI/CustomUIBase.vue
+++ b/client/dive-common/components/CustomUI/CustomUIBase.vue
@@ -440,6 +440,18 @@ export default defineComponent({
           }
         }
       });
+      const order = configMan.configuration.value?.customUI?.attributeButtonOrder || [];
+      if (order.length) {
+        attributeButtonList.sort((a, b) => {
+          const keyA = `${a.type}_${a.attrName}`;
+          const keyB = `${b.type}_${b.attrName}`;
+          const idxA = order.indexOf(keyA);
+          const idxB = order.indexOf(keyB);
+          const sortA = idxA === -1 ? Number.MAX_SAFE_INTEGER : idxA;
+          const sortB = idxB === -1 ? Number.MAX_SAFE_INTEGER : idxB;
+          return sortA - sortB;
+        });
+      }
       return attributeButtonList;
     });
 
diff --git a/client/dive-common/components/configurationEditors/UISettings/UIContextBar.vue b/client/dive-common/components/configurationEditors/UISettings/UIContextBar.vue
index f1855c0f..07002cae 100644
--- a/client/dive-common/components/configurationEditors/UISettings/UIContextBar.vue
+++ b/client/dive-common/components/configurationEditors/UISettings/UIContextBar.vue
@@ -1,15 +1,23 @@
 <script lang="ts">
 import {
-  defineComponent, ref, watch,
+  defineComponent, ref, watch, Ref,
 } from 'vue';
-import { useConfiguration } from 'vue-media-annotator/provides';
+import draggable from 'vuedraggable';
+import { useAttributes, useConfiguration } from 'vue-media-annotator/provides';
+
+interface AttributeButtonOrderItem {
+  key: string;
+  label: string;
+}
 
 export default defineComponent({
   name: 'UIContextBar',
   components: {
+    draggable,
   },
   setup() {
     const configMan = useConfiguration();
+    const attributes = useAttributes();
     const UIContextBarDefaultNotOpen = ref(configMan.getUISetting('UIContextBarDefaultNotOpen') as boolean);
     const UIContextBarNotStatic = ref(configMan.getUISetting('UIContextBarNotStatic') as boolean);
     const UIThresholdControls = ref(configMan.getUISetting('UIThresholdControls') as boolean);
@@ -24,6 +32,10 @@ export default defineComponent({
     const customUITitle = ref(configMan.configuration.value?.customUI?.title || 'Custom UI');
     const customUIInformation = ref(configMan.configuration.value?.customUI?.information || ['Custom UI Information']);
     const customUIWidth = ref(configMan.configuration.value?.customUI?.width || 300);
+    const customUIAttributeButtonOrder = ref<string[]>(
+      [...(configMan.configuration.value?.customUI?.attributeButtonOrder || [])],
+    );
+    const attributeButtonOrderList: Ref<AttributeButtonOrderItem[]> = ref([]);
 
     watch([UIThresholdControls, UIImageEnhancements,
       UIGroupManager, UIAttributeDetails, UIRevisionHistory, UIDatasetInfo, UIAttributeUserReview, UIContextBarDefaultNotOpen, UIContextBarNotStatic], () => {
@@ -47,7 +59,40 @@ export default defineComponent({
     const removeInformation = (index: number) => {
       customUIInformation.value.splice(index, 1);
     };
-    watch([CustomUIEnabled, customUITitle, customUIInformation, customUIWidth], () => {
+
+    function syncAttributeButtonOrderList() {
+      const withButtons = attributes.value
+        .filter((attr) => attr.shortcuts?.some((shortcut) => !!shortcut.button))
+        .map((attr) => ({
+          key: attr.key || `${attr.belongs}_${attr.name}`,
+          label: attr.displayText || attr.name,
+        }));
+      const byKey = new Map(withButtons.map((item) => [item.key, item]));
+      const ordered: AttributeButtonOrderItem[] = [];
+      customUIAttributeButtonOrder.value.forEach((key) => {
+        const item = byKey.get(key);
+        if (item) {
+          ordered.push(item);
+          byKey.delete(key);
+        }
+      });
+      byKey.forEach((item) => ordered.push(item));
+      attributeButtonOrderList.value = ordered;
+      const newOrder = ordered.map((item) => item.key);
+      if (JSON.stringify(newOrder) !== JSON.stringify(customUIAttributeButtonOrder.value)) {
+        customUIAttributeButtonOrder.value = newOrder;
+      }
+    }
+
+    const onAttributeButtonOrderEnd = () => {
+      customUIAttributeButtonOrder.value = attributeButtonOrderList.value.map((item) => item.key);
+    };
+
+    watch(attributes, () => {
+      syncAttributeButtonOrderList();
+    }, { deep: true, immediate: true });
+
+    watch([CustomUIEnabled, customUITitle, customUIInformation, customUIWidth, customUIAttributeButtonOrder], () => {
       if (!CustomUIEnabled.value) {
         configMan.setCustomUI(undefined);
         return;
@@ -56,9 +101,12 @@ export default defineComponent({
         title: customUITitle.value,
         information: customUIInformation.value,
         width: customUIWidth.value,
+        attributeButtonOrder: customUIAttributeButtonOrder.value.length
+          ? customUIAttributeButtonOrder.value
+          : undefined,
       };
       configMan.setCustomUI(data);
-    });
+    }, { deep: true });
 
     return {
       UIContextBarDefaultNotOpen,
@@ -73,6 +121,8 @@ export default defineComponent({
       customUITitle,
       customUIInformation,
       customUIWidth,
+      attributeButtonOrderList,
+      onAttributeButtonOrderEnd,
       addNewInformation,
       removeInformation,
       UIAttributeUserReview,
@@ -175,6 +225,45 @@ export default defineComponent({
               </v-btn>
             </v-col>
           </v-row>
+          <v-expansion-panels class="mt-3" flat>
+            <v-expansion-panel>
+              <v-expansion-panel-header>
+                Attribute button order
+              </v-expansion-panel-header>
+              <v-expansion-panel-content>
+                <p
+                  v-if="!attributeButtonOrderList.length"
+                  class="text-caption grey--text"
+                >
+                  No attribute buttons configured. Enable a button on an attribute shortcut to order it here.
+                </p>
+                <draggable
+                  v-else
+                  :list="attributeButtonOrderList"
+                  handle=".drag-handle"
+                  @end="onAttributeButtonOrderEnd"
+                >
+                  <v-row
+                    v-for="item in attributeButtonOrderList"
+                    :key="item.key"
+                    align="center"
+                    dense
+                    class="mb-1"
+                  >
+                    <v-col cols="auto">
+                      <v-icon class="drag-handle">
+                        mdi-drag
+                      </v-icon>
+                    </v-col>
+                    <v-col>
+                      {{ item.label }}
+                      <span class="text-caption grey--text ml-1">({{ item.key }})</span>
+                    </v-col>
+                  </v-row>
+                </draggable>
+              </v-expansion-panel-content>
+            </v-expansion-panel>
+          </v-expansion-panels>
         </div>
       </div>
     </v-card-text>
@@ -182,4 +271,7 @@ export default defineComponent({
 </template>
 
 <style lang="scss">
+.drag-handle {
+  cursor: grab;
+}
 </style>
diff --git a/client/package.json b/client/package.json
index 2f3e487e..969fb940 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dive-dsa",
-  "version": "1.11.36",
+  "version": "1.11.37",
   "author": {
     "name": "Kitware, Inc.",
     "email": "Bryon.Lewis@kitware.com"
diff --git a/client/src/ConfigurationManager.ts b/client/src/ConfigurationManager.ts
index 957f20c1..35cadd81 100644
--- a/client/src/ConfigurationManager.ts
+++ b/client/src/ConfigurationManager.ts
@@ -140,6 +140,8 @@ export interface CustomUISettings {
   title?: string;
   information?: string[]; // multiple markdown pages of information to be displayed if it exists
   width? : number;
+  /** Attribute keys (`${belongs}_${name}`) controlling Custom UI attribute button group order */
+  attributeButtonOrder?: string[];
   }
 
 export interface ConfigurationUser {
diff --git a/server/dive_utils/models.py b/server/dive_utils/models.py
index 08848967..81d033a8 100644
--- a/server/dive_utils/models.py
+++ b/server/dive_utils/models.py
@@ -536,6 +536,8 @@ class CustomUISettings(BaseModel):
     title: Optional[str]
     information: Optional[List[str]]
     width: Optional[int]
+    # Attribute keys (`{belongs}_{name}`) controlling Custom UI attribute button group order
+    attributeButtonOrder: Optional[List[str]]
 
 
 class VisualMask(BaseModel):