diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx
index dfeac94243d..159d4f02a30 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx
@@ -641,9 +641,9 @@ export function NodeList(props: NodeListProps) {
                     // If subcategory is inside "Current Workspace", show "Current Integration" actions instead of 
                     // the subcategory title when the subcategory referes to the current integration
                     const categoryActions = parentCategoryTitle === "Current Workspace" ?  
-                       ( group.title?.includes("(current)") ? getCategoryActions("Current Integration") : getCategoryActions(group.title)) 
+                       ( group.title?.includes("(current)") ? getCategoryActions("Current Integration", title) : getCategoryActions(group.title, title)) 
                     : 
-                    getCategoryActions(group.title);
+                    getCategoryActions(group.title, title);
                     const config = categoryConfig[group.title] || { hasBackground: true };
                     const shouldShowSeparator = config.showSeparatorBefore;
 
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts
index 2f224d5406c..c36d0ce31c7 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts
@@ -127,7 +127,7 @@ export class InputNode extends DataMapperNodeModel {
                         focusedFieldFQNs
                     });
                     if (!parentPort.attributes.collapsed){
-                        this.numberOfFields += 2; // This is for converting arrow and additional gap
+                        this.numberOfFields += 0.2; // Add additional gaps to fix the impact of 2 headers
                     }
                 } else if (this.filteredInputType.fields) {
                     const fields = this.filteredInputType.fields?.filter(f => !!f);
@@ -146,7 +146,7 @@ export class InputNode extends DataMapperNodeModel {
                         });
                     }
                 } else if (!parentPort.attributes.collapsed) {
-                    this.numberOfFields += 6; // This is for payload widget and arrow
+                    this.numberOfFields += 4.8; // This is for payload widget
                 }
             } else {
                 await this.addPortsForInputField({
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx
index e84dbc667e7..ef85ff3a124 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx
@@ -149,15 +149,25 @@ export function InputNodeWidget(props: InputNodeWidgetProps) {
                     onMouseLeave={onMouseLeave}
                 >
                     <span className={classes.label}>
-                        {(fields || dmType.convertedField || isConvertibleType) && (
+                        {dmType.category !== InputCategory.ConvertedVariable ? (
+                            (fields || dmType.convertedField || isConvertibleType) && (
+                                <Button
+                                    id={"expand-or-collapse-" + id}
+                                    appearance="icon"
+                                    tooltip="Expand/Collapse"
+                                    onClick={handleExpand}
+                                    data-testid={`${id}-expand-icon-record-source-node`}
+                                >
+                                    {expanded ? <Codicon name="chevron-down" /> : <Codicon name="chevron-right" />}
+                                </Button>
+                            )
+                        ) : (
                             <Button
-                                id={"expand-or-collapse-" + id}
+                                id={"converted-icon-" + id}
                                 appearance="icon"
-                                tooltip="Expand/Collapse"
-                                onClick={handleExpand}
-                                data-testid={`${id}-expand-icon-record-source-node`}
+                                tooltip="Type defined variable"
                             >
-                                {expanded ? <Codicon name="chevron-down" /> : <Codicon name="chevron-right" />}
+                                <Icon name="arrow-down-right" />
                             </Button>
                         )}
                         {label}
@@ -167,7 +177,7 @@ export function InputNodeWidget(props: InputNodeWidgetProps) {
                             <FieldActionButton
                                 id={"field-action-edit-" + id}
                                 tooltip="Edit"
-                                iconName="settings-gear"
+                                iconName="edit"
                                 onClick={async () => await context.createConvertedVariable(dmType.name, true, dmType.typeName)}
                             />
                         )}
@@ -202,27 +212,21 @@ export function InputNodeWidget(props: InputNodeWidgetProps) {
                 )}
             </TreeContainer>
             {expanded && dmType.convertedField &&
-                <>
-                    <ArrowWidget direction="down" />
-                    <InputNodeWidget
-                        id={dmType.convertedField.name}
-                        dmType={dmType.convertedField}
-                        engine={engine}
-                        getPort={getPort}
-                        context={context}
-                        valueLabel={dmType.convertedField.name}
-                        focusedInputs={focusedInputs}
-                    />
-                </>
+                <InputNodeWidget
+                    id={dmType.convertedField.name}
+                    dmType={dmType.convertedField}
+                    engine={engine}
+                    getPort={getPort}
+                    context={context}
+                    valueLabel={dmType.convertedField.name}
+                    focusedInputs={focusedInputs}
+                />
             }
             {expanded && isConvertibleType && !dmType.convertedField &&
-                <>
-                    <ArrowWidget direction="down" />
-                    <PayloadWidget
-                        onClick={async () => await context.createConvertedVariable(headerLabel, true, undefined, dmType.typeName)}
-                        typeName={dmType.typeName}
-                    />
-                </>
+                <PayloadWidget
+                    onClick={async () => await context.createConvertedVariable(headerLabel, true, undefined, dmType.typeName)}
+                    typeName={dmType.typeName.toUpperCase()}
+                />
             }
         </>
     );
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx
index 874f423bf8c..b7e4874d126 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx
@@ -152,21 +152,31 @@ export function ObjectOutputWidget(props: ObjectOutputWidgetProps) {
 						}
 					</span>
 					<span className={classes.label}>
-						<Button
-							id={"expand-or-collapse-" + id} 
-							appearance="icon"
-							tooltip="Expand/Collapse"
-							onClick={handleExpand}
-							data-testid={`${id}-expand-icon-mapping-target-node`}
-						>
-							{expanded ? <Codicon name="chevron-down" /> : <Codicon name="chevron-right" />}
-						</Button>
+						{outputType.category !== InputCategory.ConvertedVariable ? (
+							<Button
+								id={"expand-or-collapse-" + id}
+								appearance="icon"
+								tooltip="Expand/Collapse"
+								onClick={handleExpand}
+								data-testid={`${id}-expand-icon-mapping-target-node`}
+							>
+								{expanded ? <Codicon name="chevron-down" /> : <Codicon name="chevron-right" />}
+							</Button>
+						) : (
+							<Button
+								id={"converted-icon-" + id}
+								appearance="icon"
+								tooltip="Type defined variable"
+							>
+								<Icon name="arrow-left-up" />
+							</Button>
+						)}
 						{label}
 						{outputType.category === InputCategory.ConvertedVariable && (
 							<FieldActionButton
 								id={"field-action-edit-" + id}
 								tooltip="Edit"
-								iconName="settings-gear"
+								iconName="edit"
 								onClick={async () => await context.createConvertedVariable(outputType.name, false, outputType.typeName)}
 							/>
 						)}
@@ -192,30 +202,24 @@ export function ObjectOutputWidget(props: ObjectOutputWidgetProps) {
 				)}
 			</TreeContainer>
 			{expanded && outputType.convertedField &&
-                <>
-                    <ArrowWidget direction="up" />
-                    <ObjectOutputWidget
-						engine={engine}
-						id={`${OBJECT_OUTPUT_TARGET_PORT_PREFIX}.${outputType.convertedField.name}`}
-						outputType={outputType.convertedField}
-						typeName={outputType.convertedField.typeName}
-						value={undefined}
-						getPort={getPort}
-						context={context}
-						mappings={mappings}
-						valueLabel={outputType.convertedField.name}
-						originalTypeName={outputType.convertedField.typeName}
-					/>
-                </>
-            }
+				<ObjectOutputWidget
+					engine={engine}
+					id={`${OBJECT_OUTPUT_TARGET_PORT_PREFIX}.${outputType.convertedField.name}`}
+					outputType={outputType.convertedField}
+					typeName={outputType.convertedField.typeName}
+					value={undefined}
+					getPort={getPort}
+					context={context}
+					mappings={mappings}
+					valueLabel={outputType.convertedField.name}
+					originalTypeName={outputType.convertedField.typeName}
+				/>
+			}
 			{expanded && isConvertibleType && !outputType.convertedField &&
-				<>
-					<ArrowWidget direction="up" />
-					<PayloadWidget
-						onClick={async () => await context.createConvertedVariable(valueLabel, false, undefined, outputType.typeName)}
-						typeName={outputType.typeName}
-					/>
-				</>
+				<PayloadWidget
+					onClick={async () => await context.createConvertedVariable(valueLabel, false, undefined, outputType.typeName)}
+					typeName={outputType.typeName.toUpperCase()}
+				/>
 			}
 		</>
 	);
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/PayloadWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/PayloadWidget.tsx
index 93f7a083fef..aa7cb1b06ac 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/PayloadWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/PayloadWidget.tsx
@@ -22,7 +22,7 @@ import { useIONodesStyles } from "../../../styles";
 
 export interface PayloadWidgetProps {
     onClick: () => void | Promise<void>;
-    typeName?: string;
+    typeName: string;
 }
 
 export function PayloadWidget(props: PayloadWidgetProps) {
@@ -46,14 +46,14 @@ export function PayloadWidget(props: PayloadWidgetProps) {
             className={classes.payloadWidget}
             onClick={!inProgress ? handleOnClick : undefined}
         >
-            <p className={classes.payloadWidgetMessage}>{`Please provide a sample ${typeName} payload to construct the ${typeName} structure to create mappings`}</p>
+            <div className={classes.payloadNote}>{`Structure is not defined. Please provide a sample ${typeName} to create the structure`}</div>
             <div className={classes.payloadWidgetAction}>
                 {inProgress ? (
                     <ProgressRing sx={{ height: '16px', width: '16px' }} />
                 ) : (
-                    <Codicon name="add"/>
+                    <Codicon name="new-file" iconSx={{ fontSize: '25px' }}/>
                 )}
-                <p className={classes.payloadWidgetActionLabel}>{`Add sample ${typeName}`}</p>
+                <p className={classes.payloadWidgetActionLabel}>{`Add Sample ${typeName}`}</p>
             </div>
         </div>
     );
diff --git a/workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts
index 61070964a47..5fbaacd1f07 100644
--- a/workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts
@@ -327,9 +327,12 @@ export function handleExpand(id: string, expanded: boolean) {
 }
 
 export function isExpandable(field: IOType): boolean {
-    return field?.kind === TypeKind.Record ||
-        field?.kind === TypeKind.Array ||
-        field?.kind === TypeKind.Enum;
+    const fieldKind = field?.kind;
+    return fieldKind === TypeKind.Record ||
+        fieldKind === TypeKind.Array ||
+        fieldKind === TypeKind.Json ||
+        fieldKind === TypeKind.Xml ||
+        fieldKind === TypeKind.Enum;
 }
 
 export function getTargetField(viewId: string, outputId: string){
diff --git a/workspaces/ballerina/data-mapper/src/components/styles.ts b/workspaces/ballerina/data-mapper/src/components/styles.ts
index 9d4bd3fdd41..24aacf056a9 100644
--- a/workspaces/ballerina/data-mapper/src/components/styles.ts
+++ b/workspaces/ballerina/data-mapper/src/components/styles.ts
@@ -334,6 +334,7 @@ export const useIONodesStyles = () => ({
     }),
     payloadWidget: css({
         width: `${IO_NODE_DEFAULT_WIDTH}px`,
+        height: `${IO_NODE_FIELD_HEIGHT * 5}px`,
         border: "2.5px dashed var(--vscode-dropdown-border)",
         borderRadius: "6px",
         background: "var(--vscode-sideBar-background)",
@@ -347,22 +348,20 @@ export const useIONodesStyles = () => ({
             borderColor: "var(--vscode-focusBorder)"
         }
     }),
-    payloadWidgetMessage: css({
-        color: "var(--vscode-descriptionForeground)",
+    payloadNote: css({
         fontSize: "13px",
-        fontFamily: "GilmerRegular",
-        textAlign: "left",
-        width: "100%",
-        margin: "0 0 16px 0",
-        borderLeft: "3px solid var(--vscode-descriptionForeground)",
-        paddingLeft: "10px",
-        lineHeight: "1.5"
+        color: "var(--vscode-descriptionForeground)",
+        padding: "8px 10px",
+        backgroundColor: "var(--vscode-textBlockQuote-background)",
+        borderLeft: "3px solid var(--vscode-textBlockQuote-border)",
+        borderRadius: "0 4px 4px 0"
     }),
     payloadWidgetAction: css({
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        gap: "6px",
+        gap: "20px",
+        marginTop: "28px",
         color: "var(--vscode-descriptionForeground)"
     }),
     payloadWidgetActionLabel: css({
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/arrow-down-right.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/arrow-down-right.svg
new file mode 100644
index 00000000000..76b20d9a93e
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/arrow-down-right.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 2a1 1 0 0 0-2 0zm19.707 14.207a1 1 0 0 0 0-1.414l-6.364-6.364a1 1 0 1 0-1.414 1.414l5.657 5.657-5.657 5.657a1 1 0 0 0 1.414 1.414zM2 2H1v8.5h2V2zm5 13.5v1h15v-2H7zm-5-5H1a6 6 0 0 0 6 6v-2a4 4 0 0 1-4-4z"/></svg>
\ No newline at end of file
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/arrow-left-up.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/arrow-left-up.svg
new file mode 100644
index 00000000000..9f790a17852
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/arrow-left-up.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22 21a1 1 0 1 1 0 2zM7.793 1.293a1 1 0 0 1 1.414 0l6.364 6.364a1 1 0 0 1-1.414 1.414L8.5 3.414 2.843 9.071A1 1 0 0 1 1.43 7.657zM22 22v1h-8.5v-2H22zM8.5 17h-1V2h2v15zm5 5v1a6 6 0 0 1-6-6h2a4 4 0 0 0 4 4z"/></svg>
\ No newline at end of file