diff --git a/assets/src/js/admin/vue/modules/form-fields/Card_Builder_Grid_View_With_Thumbnail_Field.vue b/assets/src/js/admin/vue/modules/form-fields/Card_Builder_Grid_View_With_Thumbnail_Field.vue
index 28976fb1da..74eff0dd55 100644
--- a/assets/src/js/admin/vue/modules/form-fields/Card_Builder_Grid_View_With_Thumbnail_Field.vue
+++ b/assets/src/js/admin/vue/modules/form-fields/Card_Builder_Grid_View_With_Thumbnail_Field.vue
@@ -635,8 +635,13 @@ export default {
           ];
 
           for (let widget_name of uniqueWidgets) {
-            // Check if widget is available
-            if (!this.available_widgets[widget_name]) {
+            const availableWidget =
+              this.theAvailableWidgets[widget_name] ||
+              this.available_widgets[widget_name];
+
+            // Check if widget is available. Dynamic custom-field widgets only
+            // exist in theAvailableWidgets, not in the base available_widgets map.
+            if (!availableWidget) {
               continue;
             }
 
@@ -647,11 +652,11 @@ export default {
               typeof this.active_widgets[widget_name] !== "object"
             ) {
               // Get widget from theAvailableWidgets to ensure widget_key and widget_name are set
-              const widgetFromAvailable = this.theAvailableWidgets[widget_name];
+              const widgetFromAvailable = availableWidget;
               if (widgetFromAvailable) {
                 this.active_widgets[widget_name] = {
                   ...widgetFromAvailable,
-                  widget_name: widget_name,
+                  widget_name: widgetFromAvailable.widget_name || widget_name,
                   widget_key: widget_name,
                 };
               } else {
@@ -735,14 +740,19 @@ export default {
             let widget_keys = [];
             for (let matched_field of show_if_cond_state.matched_data) {
               let _main_widget = JSON.parse(JSON.stringify(main_widget));
-              let current_key = widget_keys.includes(widget)
-                ? widget + "_" + (widget_keys.length + 1)
-                : widget;
+              let current_key = matched_field.widget_key
+                ? matched_field.widget_key
+                : widget_keys.includes(widget)
+                  ? widget + "_" + (widget_keys.length + 1)
+                  : widget;
               _main_widget.widget_key = current_key;
 
               if (matched_field.widget_key) {
                 _main_widget.original_widget_key = matched_field.widget_key;
               }
+              if (matched_field.field_key) {
+                _main_widget.field_key = matched_field.field_key;
+              }
 
               if (
                 typeof matched_field.label === "string" &&
@@ -971,15 +981,21 @@ export default {
           }
 
           for (let widget of value[section][area]) {
-            if (typeof widget.widget_name === "undefined") {
-              continue;
-            }
-            if (typeof widget.widget_key === "undefined") {
+            const widget_key =
+              widget.widget_key ||
+              widget.original_widget_key ||
+              widget.widget_name;
+            if (typeof widget_key === "undefined") {
               continue;
             }
-            if (
-              typeof this.available_widgets[widget.widget_name] === "undefined"
-            ) {
+            const widget_template =
+              this.theAvailableWidgets[widget_key] ||
+              this.theAvailableWidgets[widget.original_widget_key] ||
+              this.theAvailableWidgets[widget.widget_name] ||
+              this.available_widgets[widget.widget_name] ||
+              this.available_widgets[widget_key];
+
+            if (typeof widget_template === "undefined") {
               continue;
             }
             if (typeof this.local_layout[section] === "undefined") {
@@ -989,11 +1005,16 @@ export default {
               continue;
             }
 
-            active_widgets_data[widget.widget_key] = widget;
+            active_widgets_data[widget_key] = {
+              ...widget,
+              widget_key: widget_key,
+              widget_name:
+                widget.widget_name || widget_template.widget_name || widget_key,
+            };
             selectedWidgets.push({
               section: section,
               area: area,
-              widget: widget.widget_key,
+              widget: widget_key,
             });
           }
         }
diff --git a/assets/src/js/admin/vue/modules/form-fields/Card_Builder_Grid_View_Without_Thumbnail_Field.vue b/assets/src/js/admin/vue/modules/form-fields/Card_Builder_Grid_View_Without_Thumbnail_Field.vue
index 8abeb75f50..f83c8e8266 100644
--- a/assets/src/js/admin/vue/modules/form-fields/Card_Builder_Grid_View_Without_Thumbnail_Field.vue
+++ b/assets/src/js/admin/vue/modules/form-fields/Card_Builder_Grid_View_Without_Thumbnail_Field.vue
@@ -475,8 +475,13 @@ export default {
             const widget_name =
               layout[section][section_area].selectedWidgets[widget];
 
-            // Check if widget is available
-            if (!this.available_widgets[widget_name]) {
+            const availableWidget =
+              this.theAvailableWidgets[widget_name] ||
+              this.available_widgets[widget_name];
+
+            // Check if widget is available. Dynamic custom-field widgets only
+            // exist in theAvailableWidgets, not in the base available_widgets map.
+            if (!availableWidget) {
               continue;
             }
 
@@ -487,11 +492,11 @@ export default {
               typeof this.active_widgets[widget_name] !== "object"
             ) {
               // Get widget from theAvailableWidgets to ensure widget_key and widget_name are set
-              const widgetFromAvailable = this.theAvailableWidgets[widget_name];
+              const widgetFromAvailable = availableWidget;
               if (widgetFromAvailable) {
                 this.active_widgets[widget_name] = {
                   ...widgetFromAvailable,
-                  widget_name: widget_name,
+                  widget_name: widgetFromAvailable.widget_name || widget_name,
                   widget_key: widget_name,
                 };
               } else {
@@ -575,14 +580,19 @@ export default {
             let widget_keys = [];
             for (let matched_field of show_if_cond_state.matched_data) {
               let _main_widget = JSON.parse(JSON.stringify(main_widget));
-              let current_key = widget_keys.includes(widget)
-                ? widget + "_" + (widget_keys.length + 1)
-                : widget;
+              let current_key = matched_field.widget_key
+                ? matched_field.widget_key
+                : widget_keys.includes(widget)
+                  ? widget + "_" + (widget_keys.length + 1)
+                  : widget;
               _main_widget.widget_key = current_key;
 
               if (matched_field.widget_key) {
                 _main_widget.original_widget_key = matched_field.widget_key;
               }
+              if (matched_field.field_key) {
+                _main_widget.field_key = matched_field.field_key;
+              }
 
               if (
                 typeof matched_field.label === "string" &&
@@ -806,15 +816,21 @@ export default {
           }
 
           for (let widget of value[section][area]) {
-            if (typeof widget.widget_name === "undefined") {
-              continue;
-            }
-            if (typeof widget.widget_key === "undefined") {
+            const widget_key =
+              widget.widget_key ||
+              widget.original_widget_key ||
+              widget.widget_name;
+            if (typeof widget_key === "undefined") {
               continue;
             }
-            if (
-              typeof this.available_widgets[widget.widget_name] === "undefined"
-            ) {
+            const widget_template =
+              this.theAvailableWidgets[widget_key] ||
+              this.theAvailableWidgets[widget.original_widget_key] ||
+              this.theAvailableWidgets[widget.widget_name] ||
+              this.available_widgets[widget.widget_name] ||
+              this.available_widgets[widget_key];
+
+            if (typeof widget_template === "undefined") {
               continue;
             }
             if (typeof this.local_layout[section] === "undefined") {
@@ -824,11 +840,16 @@ export default {
               continue;
             }
 
-            active_widgets_data[widget.widget_key] = widget;
+            active_widgets_data[widget_key] = {
+              ...widget,
+              widget_key: widget_key,
+              widget_name:
+                widget.widget_name || widget_template.widget_name || widget_key,
+            };
             selectedWidgets.push({
               section: section,
               area: area,
-              widget: widget.widget_key,
+              widget: widget_key,
             });
           }
         }
diff --git a/assets/src/js/admin/vue/modules/form-fields/Card_Builder_List_View_With_Thumbnail_Field.vue b/assets/src/js/admin/vue/modules/form-fields/Card_Builder_List_View_With_Thumbnail_Field.vue
index 13088f0aa3..4ecae5aaa6 100644
--- a/assets/src/js/admin/vue/modules/form-fields/Card_Builder_List_View_With_Thumbnail_Field.vue
+++ b/assets/src/js/admin/vue/modules/form-fields/Card_Builder_List_View_With_Thumbnail_Field.vue
@@ -494,8 +494,13 @@ export default {
             const widget_name =
               layout[section][section_area].selectedWidgets[widget];
 
-            // Check if widget is available
-            if (!this.available_widgets[widget_name]) {
+            const availableWidget =
+              this.theAvailableWidgets[widget_name] ||
+              this.available_widgets[widget_name];
+
+            // Check if widget is available. Dynamic custom-field widgets only
+            // exist in theAvailableWidgets, not in the base available_widgets map.
+            if (!availableWidget) {
               continue;
             }
 
@@ -506,11 +511,11 @@ export default {
               typeof this.active_widgets[widget_name] !== "object"
             ) {
               // Get widget from theAvailableWidgets to ensure widget_key and widget_name are set
-              const widgetFromAvailable = this.theAvailableWidgets[widget_name];
+              const widgetFromAvailable = availableWidget;
               if (widgetFromAvailable) {
                 this.active_widgets[widget_name] = {
                   ...widgetFromAvailable,
-                  widget_name: widget_name,
+                  widget_name: widgetFromAvailable.widget_name || widget_name,
                   widget_key: widget_name,
                 };
               } else {
@@ -594,14 +599,19 @@ export default {
             let widget_keys = [];
             for (let matched_field of show_if_cond_state.matched_data) {
               let _main_widget = JSON.parse(JSON.stringify(main_widget));
-              let current_key = widget_keys.includes(widget)
-                ? widget + "_" + (widget_keys.length + 1)
-                : widget;
+              let current_key = matched_field.widget_key
+                ? matched_field.widget_key
+                : widget_keys.includes(widget)
+                  ? widget + "_" + (widget_keys.length + 1)
+                  : widget;
               _main_widget.widget_key = current_key;
 
               if (matched_field.widget_key) {
                 _main_widget.original_widget_key = matched_field.widget_key;
               }
+              if (matched_field.field_key) {
+                _main_widget.field_key = matched_field.field_key;
+              }
 
               if (
                 typeof matched_field.label === "string" &&
@@ -751,15 +761,21 @@ export default {
           }
 
           for (let widget of value[section][area]) {
-            if (typeof widget.widget_name === "undefined") {
-              continue;
-            }
-            if (typeof widget.widget_key === "undefined") {
+            const widget_key =
+              widget.widget_key ||
+              widget.original_widget_key ||
+              widget.widget_name;
+            if (typeof widget_key === "undefined") {
               continue;
             }
-            if (
-              typeof this.available_widgets[widget.widget_name] === "undefined"
-            ) {
+            const widget_template =
+              this.theAvailableWidgets[widget_key] ||
+              this.theAvailableWidgets[widget.original_widget_key] ||
+              this.theAvailableWidgets[widget.widget_name] ||
+              this.available_widgets[widget.widget_name] ||
+              this.available_widgets[widget_key];
+
+            if (typeof widget_template === "undefined") {
               continue;
             }
             if (typeof this.local_layout[section] === "undefined") {
@@ -769,11 +785,16 @@ export default {
               continue;
             }
 
-            active_widgets_data[widget.widget_key] = widget;
+            active_widgets_data[widget_key] = {
+              ...widget,
+              widget_key: widget_key,
+              widget_name:
+                widget.widget_name || widget_template.widget_name || widget_key,
+            };
             selectedWidgets.push({
               section: section,
               area: area,
-              widget: widget.widget_key,
+              widget: widget_key,
             });
           }
         }
diff --git a/assets/src/js/admin/vue/modules/form-fields/Card_Builder_List_View_Without_Thumbnail_Field.vue b/assets/src/js/admin/vue/modules/form-fields/Card_Builder_List_View_Without_Thumbnail_Field.vue
index 242526cb99..bd19611536 100644
--- a/assets/src/js/admin/vue/modules/form-fields/Card_Builder_List_View_Without_Thumbnail_Field.vue
+++ b/assets/src/js/admin/vue/modules/form-fields/Card_Builder_List_View_Without_Thumbnail_Field.vue
@@ -410,8 +410,13 @@ export default {
           ];
 
           for (let widget_name of uniqueWidgets) {
-            // Check if widget is available
-            if (!this.available_widgets[widget_name]) {
+            const availableWidget =
+              this.theAvailableWidgets[widget_name] ||
+              this.available_widgets[widget_name];
+
+            // Check if widget is available. Dynamic custom-field widgets only
+            // exist in theAvailableWidgets, not in the base available_widgets map.
+            if (!availableWidget) {
               continue;
             }
 
@@ -422,11 +427,11 @@ export default {
               typeof this.active_widgets[widget_name] !== "object"
             ) {
               // Get widget from theAvailableWidgets to ensure widget_key and widget_name are set
-              const widgetFromAvailable = this.theAvailableWidgets[widget_name];
+              const widgetFromAvailable = availableWidget;
               if (widgetFromAvailable) {
                 this.active_widgets[widget_name] = {
                   ...widgetFromAvailable,
-                  widget_name: widget_name,
+                  widget_name: widgetFromAvailable.widget_name || widget_name,
                   widget_key: widget_name,
                 };
               } else {
@@ -510,14 +515,19 @@ export default {
             let widget_keys = [];
             for (let matched_field of show_if_cond_state.matched_data) {
               let _main_widget = JSON.parse(JSON.stringify(main_widget));
-              let current_key = widget_keys.includes(widget)
-                ? widget + "_" + (widget_keys.length + 1)
-                : widget;
+              let current_key = matched_field.widget_key
+                ? matched_field.widget_key
+                : widget_keys.includes(widget)
+                  ? widget + "_" + (widget_keys.length + 1)
+                  : widget;
               _main_widget.widget_key = current_key;
 
               if (matched_field.widget_key) {
                 _main_widget.original_widget_key = matched_field.widget_key;
               }
+              if (matched_field.field_key) {
+                _main_widget.field_key = matched_field.field_key;
+              }
 
               if (
                 typeof matched_field.label === "string" &&
@@ -660,15 +670,21 @@ export default {
           }
 
           for (let widget of value[section][area]) {
-            if (typeof widget.widget_name === "undefined") {
-              continue;
-            }
-            if (typeof widget.widget_key === "undefined") {
+            const widget_key =
+              widget.widget_key ||
+              widget.original_widget_key ||
+              widget.widget_name;
+            if (typeof widget_key === "undefined") {
               continue;
             }
-            if (
-              typeof this.available_widgets[widget.widget_name] === "undefined"
-            ) {
+            const widget_template =
+              this.theAvailableWidgets[widget_key] ||
+              this.theAvailableWidgets[widget.original_widget_key] ||
+              this.theAvailableWidgets[widget.widget_name] ||
+              this.available_widgets[widget.widget_name] ||
+              this.available_widgets[widget_key];
+
+            if (typeof widget_template === "undefined") {
               continue;
             }
             if (typeof this.local_layout[section] === "undefined") {
@@ -678,11 +694,16 @@ export default {
               continue;
             }
 
-            active_widgets_data[widget.widget_key] = widget;
+            active_widgets_data[widget_key] = {
+              ...widget,
+              widget_key: widget_key,
+              widget_name:
+                widget.widget_name || widget_template.widget_name || widget_key,
+            };
             selectedWidgets.push({
               section: section,
               area: area,
-              widget: widget.widget_key,
+              widget: widget_key,
             });
           }
         }