diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index b8385486ab..ac9f4ca461 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -53,8 +53,18 @@
                             type="text"
                             class="font-mono text-sm"
                             v-model="editingSection.handle"
-                            @input="handleSyncedWithDisplay = false"
-                        />
+                        >
+                            <template #append>
+                                <ui-button
+                                    icon="sync"
+                                    size="sm"
+                                    variant="ghost"
+                                    :aria-label="__('Regenerate from: :field', { field: __('Display') })"
+                                    @click="regenerateHandle"
+                                    v-tooltip="__('Regenerate from: :field', { field: __('Display') })"
+                                />
+                            </template>
+                        </ui-input>
                     </ui-field>
                     <ui-field :label="__('Instructions')">
                         <ui-input type="text" v-model="editingSection.instructions" />
@@ -156,7 +166,6 @@ export default {
         return {
             editingSection: false,
             editingField: null,
-            handleSyncedWithDisplay: false,
             saveKeyBinding: null,
         };
     },
@@ -192,12 +201,6 @@ export default {
             },
         },
 
-        'editingSection.display': function (display) {
-            if (this.editingSection && this.handleSyncedWithDisplay) {
-                this.editingSection.handle = snake_case(display);
-            }
-        },
-
         editingSection: {
             handler(isEditing) {
                 if (isEditing) {
@@ -219,15 +222,15 @@ export default {
         },
     },
 
-    created() {
-        // This logic isn't ideal, but it was better than passing along a 'isNew' boolean and having
-        // to deal with stripping it out and making it not new, etc. Good enough for a quick win.
-        if (!this.section.handle || this.section.handle == 'new_section' || this.section.handle == 'new_set') {
-            this.handleSyncedWithDisplay = true;
-        }
-    },
-
     methods: {
+        regenerateHandle() {
+            if (!this.editingSection) {
+                return;
+            }
+
+            this.editingSection.handle = snake_case(this.editingSection.display);
+        },
+
         fieldLinked(field) {
             this.section.fields.push(field);
             this.$toast.success(__('Field added'));
@@ -263,10 +266,6 @@ export default {
         },
 
         editConfirmed() {
-            if (!this.editingSection.handle) {
-                this.editingSection.handle = snake_case(this.editingSection.display);
-            }
-
             this.$emit('updated', { ...this.section, ...this.editingSection });
             this.editingSection = false;
         },
diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index 0224caf384..815965487a 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -32,7 +32,18 @@
                         <Input ref="title" :model-value="display" @update:model-value="fieldUpdated('display', $event)" />
                     </Field>
                     <Field :label="__('Handle')" class="form-group field-w-100">
-                        <Input class="font-mono" :model-value="handle" @update:model-value="fieldUpdated('handle', $event)" />
+                        <Input class="font-mono" :model-value="handle" @update:model-value="fieldUpdated('handle', $event)">
+                            <template #append>
+                                <Button
+                                    icon="sync"
+                                    size="sm"
+                                    variant="ghost"
+                                    :aria-label="__('Regenerate from: :field', { field: __('Title') })"
+                                    @click="regenerateHandle"
+                                    v-tooltip="__('Regenerate from: :field', { field: __('Title') })"
+                                />
+                            </template>
+                        </Input>
                     </Field>
                     <Field v-if="showInstructions" :label="__('Instructions')" class="form-group field-w-100">
                         <Input :model-value="instructions" @update:model-value="fieldUpdated('instructions', $event)" />
@@ -98,19 +109,10 @@ export default {
             instructions: this.tab.instructions,
             icon: this.tab.icon,
             editing: false,
-            handleSyncedWithDisplay: false,
             saveKeyBinding: null,
         };
     },
 
-    created() {
-        // This logic isn't ideal, but it was better than passing along a 'isNew' boolean and having
-        // to deal with stripping it out and making it not new, etc. Good enough for a quick win.
-        if (!this.handle || this.handle == 'new_tab' || this.handle == 'new_set_group') {
-            this.handleSyncedWithDisplay = true;
-        }
-    },
-
     computed: {
         isActive() {
             return this.currentTab === this.tab._id;
@@ -149,15 +151,19 @@ export default {
     },
 
     methods: {
+        regenerateHandle() {
+            this.handle = snake_case(this.display);
+        },
+
         edit() {
+            this.display = this.tab.display;
+            this.handle = this.tab.handle;
+            this.instructions = this.tab.instructions;
+            this.icon = this.tab.icon;
             this.editing = true;
         },
 
         editConfirmed() {
-            if (!this.handle) {
-                this.handle = snake_case(this.display);
-            }
-
             this.$emit('updated', {
                 ...this.tab,
                 handle: this.handle,
@@ -194,14 +200,6 @@ export default {
         },
 
         fieldUpdated(handle, value) {
-            if (handle === 'display' && this.handleSyncedWithDisplay) {
-                this.handle = snake_case(value);
-            }
-
-            if (handle === 'handle') {
-                this.handleSyncedWithDisplay = false;
-            }
-
             this[handle] = value;
         },