diff --git a/frontend/src/components/blocks/common/base-port/index.tsx b/frontend/src/components/blocks/common/base-port/index.tsx
index cfdc7b1c..8b74650c 100644
--- a/frontend/src/components/blocks/common/base-port/index.tsx
+++ b/frontend/src/components/blocks/common/base-port/index.tsx
@@ -41,7 +41,7 @@ const BasePort: React.FC<BasePortProps> = (props) => {
             portClass = props.isInput ? 'custom-input-port': 'custom-output-port';
             break;
     }
-
+   
     // Different classes based on alignment type. Position varies depending on this.
     switch (alignment) {
         case PortModelAlignment.RIGHT:
diff --git a/frontend/src/core/editor.ts b/frontend/src/core/editor.ts
index d49d97a1..1789c5e0 100644
--- a/frontend/src/core/editor.ts
+++ b/frontend/src/core/editor.ts
@@ -145,14 +145,14 @@ class Editor {
         // Process selected input IDs
         await Promise.all(data.selectedInputIds.map(async (id: string) => { 
             const [blockid, name, linkID] = id.split(":");
-            await this.addComposedBlock('basic.input', name); 
+            await this.addComposedBlock('basic.input', name,blockid); 
 
         }));
         
         // Process selected output IDs
         await Promise.all(data.selectedOutputIds.map(async (id: string) => {
             const [blockid, name, linkID] = id.split(":");
-            await this.addComposedBlock('basic.output', name); 
+            await this.addComposedBlock('basic.output', name,blockid); 
 
         }));
     }
@@ -178,15 +178,25 @@ class Editor {
                         if(portOptions.type == 'port.input'){
                             if(linkIds.length == 0){
                                 indexOne++;
-                                let label = `${node.getType()} -> : ${portOptions.label}`;
+                                let label = ``;
                                 var id = `${options.id}:${portOptions.label}:${linkIds}`;
+                                if(node.getType() == 'block.package'){
+                                    label = `${node.getType()} -> : ${options.info.name} : ${portOptions.label}`;
+                                }else{
+                                    label = `${node.getType()} -> : ${portOptions.label}`;
+                                }
                                 valueOne.push({ indexOne, label, id });
                             }
                             
                         }else if(portOptions.type == 'port.output'){
                             indexTwo++;
-                            let label = `${node.getType()} -> : ${portOptions.label}`;
+                            let label = ``;
                             var id = `${options.id}:${portOptions.label}:${linkIds}`;
+                            if(node.getType() == 'block.package'){
+                                label = `${node.getType()} -> : ${options.info.name} : ${portOptions.label}`;
+                            }else{
+                                label = `${node.getType()} -> : ${portOptions.label}`;
+                            }
                             valueTwo.push({ indexTwo, label, id });
                         }
                         
@@ -268,7 +278,7 @@ class Editor {
         }
     }
 
-    public nullLinkNodes(type:string, name: string){
+    public nullLinkNodes(type:string, name: string,blockID:string){
         // Get all nodes from the model
         const nodes = this.activeModel.getNodes();
     
@@ -279,7 +289,7 @@ class Editor {
     
             // Iterate over each port to check if the name matches the given port name
             for (const port of Object.values(ports)) {
-                if (port.getOptions().label === name) {
+                if (port.getOptions().label === name && node.getID() === blockID) {
                     const link = new DefaultLinkModel();
                     if(port.getType()== 'port.input'){
                         link.setTargetPort(port);
@@ -304,9 +314,9 @@ class Editor {
      * Add the given type of block for composed.
      * @param name : Name / type of the block to add to model.
      */
-    public async addComposedBlock(type: string,name: string): Promise<void> {
+    public async addComposedBlock(type: string,name: string,blockID: string): Promise<void> {
         this.blockCount += 1;
-        const linkID = this.nullLinkNodes(type, name);
+        const linkID = this.nullLinkNodes(type, name,blockID);
         const block = await createComposedBlock(type,name);
         if (block) {
             
diff --git a/frontend/src/core/serialiser/converter.ts b/frontend/src/core/serialiser/converter.ts
index d84c84f3..3bba4289 100644
--- a/frontend/src/core/serialiser/converter.ts
+++ b/frontend/src/core/serialiser/converter.ts
@@ -82,7 +82,7 @@ function getBlocksAndDependencies(model: DiagramModel) {
     const dependencies: { [k: string]: Dependency } = {};
     // Iterate over all the nodes and separate them into normal blocks and dependency blocks
     model.getNodes().forEach((node) => {
-
+        console.log("node",node,node.getType())
         if (node instanceof BaseModel) {
             const block = {
                 id: node.getID(),