diff --git a/src/assets/MOCK/dpp.json b/src/assets/MOCK/dpp.json
index ef125a0bd..9959faf8c 100644
--- a/src/assets/MOCK/dpp.json
+++ b/src/assets/MOCK/dpp.json
@@ -1,5 +1,160 @@
 {
-  "metadata": {},
+  "metadata": {
+    "contract": {
+      "@id": "5c4fbb7d-cf02-4401-a7a3-f0ec1c506f33",
+      "@type": "dcat:Dataset",
+      "odrl:hasPolicy": {
+        "@id": "2:1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23:ac45d75a-2542-4d1a-a0fc-034c705418a9",
+        "@type": "odrl:Set",
+        "odrl:permission": [],
+        "odrl:prohibition": [],
+        "odrl:obligation": [],
+        "odrl:target": "1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23"
+      },
+      "dcat:distribution": [
+        {
+          "@type": "dcat:Distribution",
+          "dct:format": {
+            "@id": "HttpProxy"
+          },
+          "dcat:accessService": "1795254a-e354-46c7-9d88-04608b05ca9f"
+        },
+        {
+          "@type": "dcat:Distribution",
+          "dct:format": {
+            "@id": "AmazonS3"
+          },
+          "dcat:accessService": "1795254a-e354-46c7-9d88-04608b05ca9f"
+        }
+      ],
+      "edc:description": "Battery Passport test data",
+      "edc:id": "1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23"
+    },
+    "negotiation": {
+      "init": {
+        "request": {
+          "@context": {
+            "odrl": "http://www.w3.org/ns/odrl/2/"
+          },
+          "@type": "NegotiationInitiateRequestDto",
+          "connectorAddress": "https://materialpass.dev.demo.catena-x.net/BPNL000000000000/api/v1/dsp",
+          "protocol": "dataspace-protocol-http",
+          "connectorId": "BPNL00000000CBA5",
+          "offer": {
+            "offerId": "2:1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23:ac45d75a-2542-4d1a-a0fc-034c705418a9",
+            "assetId": "1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23",
+            "policy": {
+              "@type": "odrl:Set",
+              "odrl:permission": [],
+              "odrl:prohibition": [],
+              "odrl:obligation": [],
+              "odrl:target": "1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23"
+            }
+          }
+        },
+        "response": {
+          "@id": "83892309-6b65-4597-b36a-f86bb7b42f2c",
+          "@type": "edc:IdResponseDto",
+          "edc:createdAt": 1688393668476,
+          "@context": {
+            "dct": "https://purl.org/dc/terms/",
+            "tx": "https://w3id.org/tractusx/v0.0.1/ns/",
+            "edc": "https://w3id.org/edc/v0.0.1/ns/",
+            "dcat": "https://www.w3.org/ns/dcat/",
+            "odrl": "http://www.w3.org/ns/odrl/2/",
+            "dspace": "https://w3id.org/dspace/v0.8/"
+          }
+        }
+      },
+      "get": {
+        "response": {
+          "@id": "83892309-6b65-4597-b36a-f86bb7b42f2c",
+          "@type": "edc:ContractNegotiationDto",
+          "edc:type": "CONSUMER",
+          "edc:protocol": "dataspace-protocol-http",
+          "edc:state": "FINALIZED",
+          "edc:counterPartyAddress": "https://materialpass.dev.demo.catena-x.net/BPNL000000000000/api/v1/dsp",
+          "edc:callbackAddresses": [],
+          "edc:contractAgreementId": "2:1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23:b631f6a1-75b5-497b-ae3d-0413d6dd87fb",
+          "@context": {
+            "dct": "https://purl.org/dc/terms/",
+            "tx": "https://w3id.org/tractusx/v0.0.1/ns/",
+            "edc": "https://w3id.org/edc/v0.0.1/ns/",
+            "dcat": "https://www.w3.org/ns/dcat/",
+            "odrl": "http://www.w3.org/ns/odrl/2/",
+            "dspace": "https://w3id.org/dspace/v0.8/"
+          }
+        }
+      }
+    },
+    "transfer": {
+      "init": {
+        "request": {
+          "@context": {
+            "odrl": "http://www.w3.org/ns/odrl/2/"
+          },
+          "assetId": "1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23",
+          "connectorAddress": "https://materialpass.dev.demo.catena-x.net/BPNL000000000000/api/v1/dsp",
+          "contractId": "2:1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23:b631f6a1-75b5-497b-ae3d-0413d6dd87fb",
+          "dataDestination": {
+            "properties": {
+              "type": "HttpProxy"
+            }
+          },
+          "managedResources": false,
+          "privateProperties": {
+            "receiverHttpEndpoint": "https://materialpass.dev.demo.catena-x.net/endpoint/d0bf9018-87ee-4b4a-b4a5-683b2701d90e"
+          },
+          "protocol": "dataspace-protocol-http",
+          "transferType": {
+            "contentType": "application/octet-stream",
+            "isFinite": true
+          }
+        },
+        "response": {
+          "@id": "ecdad987-afc4-4c49-aa88-9676b4599db0",
+          "@type": "edc:IdResponseDto",
+          "edc:createdAt": 1688393671434,
+          "@context": {
+            "dct": "https://purl.org/dc/terms/",
+            "tx": "https://w3id.org/tractusx/v0.0.1/ns/",
+            "edc": "https://w3id.org/edc/v0.0.1/ns/",
+            "dcat": "https://www.w3.org/ns/dcat/",
+            "odrl": "http://www.w3.org/ns/odrl/2/",
+            "dspace": "https://w3id.org/dspace/v0.8/"
+          }
+        }
+      },
+      "get": {
+        "response": {
+          "@id": "ecdad987-afc4-4c49-aa88-9676b4599db0",
+          "@type": "edc:TransferProcessDto",
+          "edc:state": "COMPLETED",
+          "edc:stateTimestamp": 1688393673622,
+          "edc:type": "CONSUMER",
+          "edc:callbackAddresses": [],
+          "edc:dataDestination": {
+            "edc:type": "HttpProxy"
+          },
+          "edc:dataRequest": {
+            "@id": "ecdad987-afc4-4c49-aa88-9676b4599db0",
+            "@type": "edc:DataRequestDto",
+            "edc:assetId": "1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23",
+            "edc:contractId": "2:1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23:b631f6a1-75b5-497b-ae3d-0413d6dd87fb"
+          },
+          "edc:receiverHttpEndpoint": "https://materialpass.dev.demo.catena-x.net/endpoint/d0bf9018-87ee-4b4a-b4a5-683b2701d90e",
+          "@context": {
+            "dct": "https://purl.org/dc/terms/",
+            "tx": "https://w3id.org/tractusx/v0.0.1/ns/",
+            "edc": "https://w3id.org/edc/v0.0.1/ns/",
+            "dcat": "https://www.w3.org/ns/dcat/",
+            "odrl": "http://www.w3.org/ns/odrl/2/",
+            "dspace": "https://w3id.org/dspace/v0.8/"
+          }
+        }
+      }
+    }
+  },
   "semanticId": "general",
   "aspect": {
     "serialization": {
diff --git a/src/assets/MOCK/transmission.json b/src/assets/MOCK/transmission.json
new file mode 100644
index 000000000..45beb400c
--- /dev/null
+++ b/src/assets/MOCK/transmission.json
@@ -0,0 +1,305 @@
+{
+  "metadata": {
+    "contract": {
+      "@id": "5c4fbb7d-cf02-4401-a7a3-f0ec1c506f33",
+      "@type": "dcat:Dataset",
+      "odrl:hasPolicy": {
+        "@id": "2:1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23:ac45d75a-2542-4d1a-a0fc-034c705418a9",
+        "@type": "odrl:Set",
+        "odrl:permission": [],
+        "odrl:prohibition": [],
+        "odrl:obligation": [],
+        "odrl:target": "1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23"
+      },
+      "dcat:distribution": [
+        {
+          "@type": "dcat:Distribution",
+          "dct:format": {
+            "@id": "HttpProxy"
+          },
+          "dcat:accessService": "1795254a-e354-46c7-9d88-04608b05ca9f"
+        },
+        {
+          "@type": "dcat:Distribution",
+          "dct:format": {
+            "@id": "AmazonS3"
+          },
+          "dcat:accessService": "1795254a-e354-46c7-9d88-04608b05ca9f"
+        }
+      ],
+      "edc:description": "Battery Passport test data",
+      "edc:id": "1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23"
+    },
+    "negotiation": {
+      "init": {
+        "request": {
+          "@context": {
+            "odrl": "http://www.w3.org/ns/odrl/2/"
+          },
+          "@type": "NegotiationInitiateRequestDto",
+          "connectorAddress": "https://materialpass.dev.demo.catena-x.net/BPNL000000000000/api/v1/dsp",
+          "protocol": "dataspace-protocol-http",
+          "connectorId": "BPNL00000000CBA5",
+          "offer": {
+            "offerId": "2:1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23:ac45d75a-2542-4d1a-a0fc-034c705418a9",
+            "assetId": "1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23",
+            "policy": {
+              "@type": "odrl:Set",
+              "odrl:permission": [],
+              "odrl:prohibition": [],
+              "odrl:obligation": [],
+              "odrl:target": "1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23"
+            }
+          }
+        },
+        "response": {
+          "@id": "83892309-6b65-4597-b36a-f86bb7b42f2c",
+          "@type": "edc:IdResponseDto",
+          "edc:createdAt": 1688393668476,
+          "@context": {
+            "dct": "https://purl.org/dc/terms/",
+            "tx": "https://w3id.org/tractusx/v0.0.1/ns/",
+            "edc": "https://w3id.org/edc/v0.0.1/ns/",
+            "dcat": "https://www.w3.org/ns/dcat/",
+            "odrl": "http://www.w3.org/ns/odrl/2/",
+            "dspace": "https://w3id.org/dspace/v0.8/"
+          }
+        }
+      },
+      "get": {
+        "response": {
+          "@id": "83892309-6b65-4597-b36a-f86bb7b42f2c",
+          "@type": "edc:ContractNegotiationDto",
+          "edc:type": "CONSUMER",
+          "edc:protocol": "dataspace-protocol-http",
+          "edc:state": "FINALIZED",
+          "edc:counterPartyAddress": "https://materialpass.dev.demo.catena-x.net/BPNL000000000000/api/v1/dsp",
+          "edc:callbackAddresses": [],
+          "edc:contractAgreementId": "2:1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23:b631f6a1-75b5-497b-ae3d-0413d6dd87fb",
+          "@context": {
+            "dct": "https://purl.org/dc/terms/",
+            "tx": "https://w3id.org/tractusx/v0.0.1/ns/",
+            "edc": "https://w3id.org/edc/v0.0.1/ns/",
+            "dcat": "https://www.w3.org/ns/dcat/",
+            "odrl": "http://www.w3.org/ns/odrl/2/",
+            "dspace": "https://w3id.org/dspace/v0.8/"
+          }
+        }
+      }
+    },
+    "transfer": {
+      "init": {
+        "request": {
+          "@context": {
+            "odrl": "http://www.w3.org/ns/odrl/2/"
+          },
+          "assetId": "1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23",
+          "connectorAddress": "https://materialpass.dev.demo.catena-x.net/BPNL000000000000/api/v1/dsp",
+          "contractId": "2:1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23:b631f6a1-75b5-497b-ae3d-0413d6dd87fb",
+          "dataDestination": {
+            "properties": {
+              "type": "HttpProxy"
+            }
+          },
+          "managedResources": false,
+          "privateProperties": {
+            "receiverHttpEndpoint": "https://materialpass.dev.demo.catena-x.net/endpoint/d0bf9018-87ee-4b4a-b4a5-683b2701d90e"
+          },
+          "protocol": "dataspace-protocol-http",
+          "transferType": {
+            "contentType": "application/octet-stream",
+            "isFinite": true
+          }
+        },
+        "response": {
+          "@id": "ecdad987-afc4-4c49-aa88-9676b4599db0",
+          "@type": "edc:IdResponseDto",
+          "edc:createdAt": 1688393671434,
+          "@context": {
+            "dct": "https://purl.org/dc/terms/",
+            "tx": "https://w3id.org/tractusx/v0.0.1/ns/",
+            "edc": "https://w3id.org/edc/v0.0.1/ns/",
+            "dcat": "https://www.w3.org/ns/dcat/",
+            "odrl": "http://www.w3.org/ns/odrl/2/",
+            "dspace": "https://w3id.org/dspace/v0.8/"
+          }
+        }
+      },
+      "get": {
+        "response": {
+          "@id": "ecdad987-afc4-4c49-aa88-9676b4599db0",
+          "@type": "edc:TransferProcessDto",
+          "edc:state": "COMPLETED",
+          "edc:stateTimestamp": 1688393673622,
+          "edc:type": "CONSUMER",
+          "edc:callbackAddresses": [],
+          "edc:dataDestination": {
+            "edc:type": "HttpProxy"
+          },
+          "edc:dataRequest": {
+            "@id": "ecdad987-afc4-4c49-aa88-9676b4599db0",
+            "@type": "edc:DataRequestDto",
+            "edc:assetId": "1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23",
+            "edc:contractId": "2:1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23:b631f6a1-75b5-497b-ae3d-0413d6dd87fb"
+          },
+          "edc:receiverHttpEndpoint": "https://materialpass.dev.demo.catena-x.net/endpoint/d0bf9018-87ee-4b4a-b4a5-683b2701d90e",
+          "@context": {
+            "dct": "https://purl.org/dc/terms/",
+            "tx": "https://w3id.org/tractusx/v0.0.1/ns/",
+            "edc": "https://w3id.org/edc/v0.0.1/ns/",
+            "dcat": "https://www.w3.org/ns/dcat/",
+            "odrl": "http://www.w3.org/ns/odrl/2/",
+            "dspace": "https://w3id.org/dspace/v0.8/"
+          }
+        }
+      }
+    }
+  },
+  "semanticId": "urn:bamm:io.catenax.transmission.transmission_pass:1.0.0#TransmissionPass",
+  "aspect": {
+    "productSpecificParameters": {
+      "torqueConverter": [
+        "RYtGKbgicZaHCBRQDSx"
+      ],
+      "driveType": "combustion engine",
+      "oilType": "ZF Lifeguard Hybrid 2",
+      "spreading": 6.79,
+      "torque": 500.0,
+      "power": 300.0,
+      "standardGearRatio": {
+        "gear": "1",
+        "ratio": 4.1567
+      },
+      "oilCapacity": 8.9,
+      "electricPerformance": [
+        "VLhpfQGTMDYpsBZxvfBoeygjb"
+      ],
+      "speedResistance": {
+        "speed": 7800,
+        "gear": "1"
+      }
+    },
+    "instructions": {
+      "packagingInstructions": [
+        {
+          "documentTitle": "Title A",
+          "documentLink": "https://www.xxx.pdf"
+        },
+        {
+          "documentTitle": "Title A",
+          "documentLink": "https://www.xxx.pdf"
+        }
+      ],
+      "transportationInstructions": [
+        {
+          "documentTitle": "Title A",
+          "documentLink": "https://www.xxx.pdf"
+        }
+      ],
+      "dismantlingProcedure": [
+        {
+          "documentTitle": "Title A",
+          "documentLink": "https://www.xxx.pdf"
+        }
+      ],
+      "safetyMeasures": [
+        {
+          "documentTitle": "Title A",
+          "documentLink": "https://www.xxx.pdf"
+        }
+      ],
+      "vehicleDismantlingProcedure": [
+        {
+          "documentTitle": "Title A",
+          "documentLink": "https://www.xxx.pdf"
+        }
+      ]
+    },
+    "identification": {
+      "manufacturerId": "BPNL1234567890ZZ",
+      "localIdentifiers": [
+        {
+          "value": "SN12345678",
+          "key": "PartInstanceID"
+        }
+      ],
+      "dataMatrixCode": "UMaAIKKIkknjWEXJUfPxxQHeWKEJ"
+    },
+    "sparePartSupplier": [
+      {
+        "supplierContact": {
+          "faxNumber": "+49 89 0987654321",
+          "website": "https://www.samsung.com",
+          "phoneNumber": "+49 89 1234567890",
+          "email": "test.mail@example.com"
+        },
+        "supplierId": "BPNL1234567890ZZ",
+        "sparePartName": "torque converter"
+      }
+    ],
+    "stateOfHealth": {
+      "serviceHistory": [
+        "2023-05-22T13:16:47.239+02:00"
+      ],
+      "expectedLifespan": 500000,
+      "remanufacturing": {
+        "remanufacturingDate": "2023-05-22T13:16:47.239+02:00",
+        "productStatusValue": "first life"
+      }
+    },
+    "generalInformation": {
+      "additionalInformation": "JxkyvRnL",
+      "physicalDimensionsProperty": {
+        "width": 1000.0,
+        "length": 20000.1,
+        "weight": 100.7,
+        "diameter": 0.03,
+        "height": 0.1
+      },
+      "warrantyPeriod": 60.0,
+      "productDescription": "manual transmission",
+      "productType": "8HP60MH"
+    },
+    "sustainability": {
+      "substancesOfConcern": [
+        "yedUsFwdkelQbxeTeQOvaScfqIOOmaa",
+        "yedUsFwdkelQbxeTeQOvaScfqIOOmaa"
+      ],
+      "responsibleSourcingDocument": [
+        {
+          "documentTitle": "Title A",
+          "documentLink": "https://www.xxx.pdf"
+        }
+      ],
+      "recyclateContent": {
+        "nickel": -1.7976931348623157E+308,
+        "lithium": -1.7976931348623157E+308,
+        "cobalt": -1.7976931348623157E+308,
+        "otherSubstance": [
+          {
+            "substancePercentage": 8.0,
+            "substanceName": "Lead"
+          }
+        ]
+      },
+      "criticalRawMaterials": [
+        "eOMtThyhVNLWUZNRcBaQKxI"
+      ],
+      "carbonFootprint": {
+        "crossSectoralStandardsUsed": [
+          {
+            "crossSectoralStandard": "GHG Protocol Product standard"
+          }
+        ],
+        "co2FootprintTotal": -1.7976931348623157E+308,
+        "productOrSectorSpecificRules": [
+          {
+            "operator": "PEF",
+            "ruleNames": "ABC 2021",
+            "otherOperatorName": "NSF"
+          }
+        ]
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/general/TabsComponent.vue b/src/components/general/TabsComponent.vue
index c75c4dd92..2190c2d63 100644
--- a/src/components/general/TabsComponent.vue
+++ b/src/components/general/TabsComponent.vue
@@ -66,6 +66,10 @@ import Handling from "../passport/sections/Handling.vue";
 import AdditionalData from "../passport/sections/AdditionalData.vue";
 import Sustainability from "../passport/sections/Sustainability.vue";
 import Operation from "../passport/sections/Operation.vue";
+import ProductSpecificParameters from "../passport/sections/ProductSpecificParameters.vue";
+import Instructions from "../passport/sections/Instructions.vue";
+import SparePartSupplier from "../passport/sections/SparePartSupplier.vue";
+import StateOfHealth from "../passport/sections/StateOfHealth.vue";
 
 export default {
   name: "TabsComponent",
@@ -90,6 +94,10 @@ export default {
     AdditionalData,
     Sustainability,
     Operation,
+    ProductSpecificParameters,
+    Instructions,
+    SparePartSupplier,
+    StateOfHealth,
   },
   data() {
     return {
diff --git a/src/components/passport/Field.vue b/src/components/passport/Field.vue
index bdb315ebf..6d8cb4d50 100644
--- a/src/components/passport/Field.vue
+++ b/src/components/passport/Field.vue
@@ -46,6 +46,9 @@
     </span>
 
     <span v-else-if="day"></span>
+    <span v-else-if="faxNumber" class="field-value"
+      >{{ faxNumber ? faxNumber : "—" }}
+    </span>
     <span v-else class="field-value">—</span>
     <!-- This block of code is for section 1 General information Importer information, STREET goes as a value and than the rest below -->
     <span v-if="postal" class="field-value">{{ postal ? postal : "—" }} </span>
@@ -102,6 +105,7 @@ export default {
     postal: { type: [String, Number], default: "" },
     country: { type: [String, Number], default: "" },
     phone: { type: [String, Number], default: "" },
+    faxNumber: { type: [String, Number], default: "" },
     email: { type: [String, Number], default: "" },
     website: { type: [String, Number], default: "" },
     length: { type: [String, Number], default: "" },
diff --git a/src/components/passport/GeneralCards.vue b/src/components/passport/GeneralCards.vue
index 0426f22ba..21567edfa 100644
--- a/src/components/passport/GeneralCards.vue
+++ b/src/components/passport/GeneralCards.vue
@@ -80,7 +80,7 @@
 import DialogComponent from "../general/Dialog.vue";
 
 export default {
-  name: "BatteryCards",
+  name: "GeneralCards",
   components: {
     DialogComponent,
   },
@@ -131,7 +131,7 @@ export default {
           value: this.$props.data.aspect.metadata.version,
           secondValue: this.$props.data.aspect.metadata.issueDate,
           description: {
-            title: "aspect version",
+            title: "Aspect version",
             value: "Description of the aspect version",
           },
         },
diff --git a/src/components/passport/InstructionsField.vue b/src/components/passport/InstructionsField.vue
new file mode 100644
index 000000000..aa489ead5
--- /dev/null
+++ b/src/components/passport/InstructionsField.vue
@@ -0,0 +1,55 @@
+<!--
+  Catena-X - Product Passport Consumer Frontend
+ 
+  Copyright (c) 2022, 2023 BASF SE, BMW AG, Henkel AG & Co. KGaA
+ 
+  See the NOTICE file(s) distributed with this work for additional
+  information regarding copyright ownership.
+ 
+  This program and the accompanying materials are made available under the
+  terms of the Apache License, Version 2.0 which is available at
+  https://www.apache.org/licenses/LICENSE-2.0.
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+  either express or implied. See the
+  License for the specific language govern in permissions and limitations
+  under the License.
+ 
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<template >
+  <!-- eslint-disable-next-line vue/no-multiple-template-root -->
+  <div v-for="document in field" :key="document">
+    <div class="document-field">
+      <div class="field-container">
+        <v-icon icon="mdi-text-box-outline" class="document-icon"></v-icon>
+        <a
+          :href="document.documentLink"
+          target="_blank"
+          class="link-container"
+          data-cy="link-to-the-label-element"
+        >
+          <span class="field-label">{{ document.documentTitle }}</span>
+          <span class="field-value link-wrapper">
+            <span class="link">
+              {{ document.documentLink }}
+            </span>
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InstructionsField",
+  props: {
+    field: { type: Array, default: () => [] },
+  },
+};
+</script>
+
diff --git a/src/components/passport/TransmissionCards.vue b/src/components/passport/TransmissionCards.vue
new file mode 100644
index 000000000..b5a8e77b5
--- /dev/null
+++ b/src/components/passport/TransmissionCards.vue
@@ -0,0 +1,162 @@
+<!--
+  Catena-X - Product Passport Consumer Frontend
+ 
+  Copyright (c) 2022, 2023 BASF SE, BMW AG, Henkel AG & Co. KGaA
+ 
+  See the NOTICE file(s) distributed with this work for additional
+  information regarding copyright ownership.
+ 
+  This program and the accompanying materials are made available under the
+  terms of the Apache License, Version 2.0 which is available at
+  https://www.apache.org/licenses/LICENSE-2.0.
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+  either express or implied. See the
+  License for the specific language govern in permissions and limitations
+  under the License.
+ 
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<template>
+  <v-container class="cards-container">
+    <v-row>
+      <v-col
+        cols="12"
+        md="3"
+        v-for="(card, index) in cards"
+        :key="index"
+        style="padding: 6px !important"
+      >
+        <div class="card-container fill-height">
+          <span class="card-title">{{ card.title }} </span>
+          <span>
+            <v-icon
+              class="card-icon"
+              start
+              md
+              :icon="card.icon"
+              size="x-large"
+            ></v-icon>
+          </span>
+          <div>
+            <div class="card-label">
+              {{ card.label }}
+            </div>
+            <div class="card-value">
+              {{ card.value ? card.value : "-" }} {{ card.valueUnits }}
+            </div>
+            <v-divider></v-divider>
+            <div>
+              <div class="card-second-label">
+                {{ card.secondLabel }}
+              </div>
+              <div class="card-second-value">
+                {{ card.secondValue ? card.secondValue : "-" }}
+                {{ card.secondValueUnits }}
+              </div>
+            </div>
+          </div>
+          <span v-if="card.description" class="card-info-icon">
+            <DialogComponent>
+              <v-icon start md icon="mdi-information-outline"></v-icon>
+              <template v-slot:title>
+                {{ card.description.title }}
+              </template>
+              <template v-slot:text>
+                {{ card.description.value }}
+              </template>
+            </DialogComponent>
+          </span>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import DialogComponent from "../general/Dialog.vue";
+
+export default {
+  name: "TransmissionCards",
+  components: {
+    DialogComponent,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: Object,
+    },
+  },
+  data() {
+    return {
+      cards: [
+        {
+          title: "GENERAL",
+          label: "Product description",
+          secondLabel: "Product type",
+          icon: "mdi-pound",
+          value: this.$props.data.aspect.generalInformation
+            ? this.$props.data.aspect.generalInformation.productDescription
+            : "-",
+          secondValue: this.$props.data.aspect.generalInformation
+            ? this.$props.data.aspect.generalInformation.productType
+            : "-",
+        },
+        {
+          title: "MANUFACTURING",
+          label: "Manufacturer Id",
+          secondLabel: "Matrix code",
+          icon: "mdi-chart-timeline-variant-shimmer",
+          value: this.$props.data.aspect.identification
+            ? this.$props.data.aspect.identification.manufacturerId
+            : "-",
+          secondValue: this.$props.data.aspect.identification
+            ? this.$props.data.aspect.identification.dataMatrixCode
+            : "-",
+          description: {
+            title: "Manufacturing",
+            value: "Description of the manufacturing",
+          },
+        },
+        {
+          title: "SPECIFIC PARAMETERS",
+          label: "Drive type",
+          secondLabel: "Oil type",
+          icon: "mdi-aspect",
+          value: this.$props.data.aspect.productSpecificParameters.driveType,
+          secondValue:
+            this.$props.data.aspect.productSpecificParameters.oilType,
+          description: {
+            title: "Specific parameters",
+            value: "Description of the Specific parameters",
+          },
+        },
+        {
+          title: "SUSTAINABILITY",
+          label: "Total CO2 footprint",
+          secondLabel: "Warranty period",
+          icon: "mdi-leaf",
+          value: this.$props.data.aspect.sustainability.carbonFootprint
+            ? this.$props.data.aspect.sustainability.carbonFootprint
+                .co2FootprintTotal
+            : "-",
+          valueUnits: "t CO2 Total",
+          secondValue:
+            this.$props.data.aspect.generalInformation.warrantyPeriod,
+          secondValueUnits: this.$props.data.aspect.generalInformation
+            .warrantyPeriodUnits
+            ? "months"
+            : "",
+          description: {
+            title: "Sustainability",
+            value: "Description of the Sustainability",
+          },
+        },
+      ],
+    };
+  },
+};
+</script>
diff --git a/src/components/passport/sections/GeneralInformation.vue b/src/components/passport/sections/GeneralInformation.vue
index 3e95f5402..428ebbb30 100644
--- a/src/components/passport/sections/GeneralInformation.vue
+++ b/src/components/passport/sections/GeneralInformation.vue
@@ -24,6 +24,73 @@
 <template v-if="propsData">
   <div class="section">
     <v-container>
+      <!-- Transmission passport-->
+      <template v-if="propsData.generalInformation">
+        <v-row>
+          <template v-if="propsData.generalInformation.additionalInformation">
+            <v-col sm="12" md="3" class="pa-0 ma-0">
+              <Field
+                icon="mdi-fingerprint"
+                label="Additional information"
+                :value="propsData.generalInformation.additionalInformation"
+              />
+            </v-col>
+          </template>
+          <template
+            v-if="propsData.generalInformation.physicalDimensionsProperty"
+          >
+            <v-col sm="12" md="6" class="pa-0 ma-0">
+              <Field
+                icon="mdi-ruler"
+                label="Dimensions"
+                :height="
+                  propsData.generalInformation.physicalDimensionsProperty.height
+                "
+                :length="
+                  propsData.generalInformation.physicalDimensionsProperty.length
+                "
+                unit="mm"
+                :width="
+                  propsData.generalInformation.physicalDimensionsProperty.width
+                "
+              />
+              <Field
+                icon="mdi-scale"
+                label="Weight"
+                unit="kg"
+                :value="
+                  propsData.generalInformation.physicalDimensionsProperty.weight
+                "
+              />
+            </v-col>
+          </template>
+          <v-col sm="12" md="3" class="pa-0 ma-0">
+            <template v-if="propsData.generalInformation.warrantyPeriod">
+              <Field
+                icon="mdi-license"
+                label="Warranty"
+                :value="propsData.generalInformation.warrantyPeriod"
+                unit="months"
+              />
+            </template>
+            <template v-if="propsData.generalInformation.productDescription">
+              <Field
+                icon="mdi-license"
+                label="Product description"
+                :value="propsData.generalInformation.productDescription"
+              />
+            </template>
+            <template v-if="propsData.generalInformation.productType">
+              <Field
+                icon="mdi-license"
+                label="Product type"
+                :value="propsData.generalInformation.productType"
+              />
+            </template>
+          </v-col>
+        </v-row>
+      </template>
+      <!-- Transmission passport ends here -->
       <template v-if="propsData.batteryIdentification">
         <v-row>
           <v-col sm="12" md="9" class="pa-0 ma-0">
@@ -62,14 +129,16 @@
             />
           </v-col>
         </template>
-        <v-col sm="12" md="3" class="pa-0 ma-0">
-          <Field
-            icon="mdi-license"
-            label="Warranty"
-            :value="propsData.warrantyPeriod"
-            unit="month"
-          />
-        </v-col>
+        <template v-if="propsData.warrantyPeriod">
+          <v-col sm="12" md="3" class="pa-0 ma-0">
+            <Field
+              icon="mdi-license"
+              label="Warranty"
+              :value="propsData.warrantyPeriod"
+              unit="month"
+            />
+          </v-col>
+        </template>
       </v-row>
       <template v-if="propsData.physicalDimensions">
         <v-row class="section">
@@ -95,16 +164,18 @@
       </template>
     </v-container>
     <v-container class="container-width-50">
-      <v-row class="section">
-        <v-col cols="12" class="pa-0 ma-0">
-          <Field
-            icon="mdi-calendar-range"
-            style="background: #f9f9f9"
-            label="Date of Manufacture"
-            :day="propsData.manufacturing.dateOfManufacturing"
-          />
-        </v-col>
-      </v-row>
+      <template v-if="propsData.manufacturing">
+        <v-row class="section">
+          <v-col cols="12" class="pa-0 ma-0">
+            <Field
+              icon="mdi-calendar-range"
+              style="background: #f9f9f9"
+              label="Date of Manufacture"
+              :day="propsData.manufacturing.dateOfManufacturing"
+            />
+          </v-col>
+        </v-row>
+      </template>
       <template v-if="propsData.manufacturing">
         <v-row>
           <v-col
@@ -121,57 +192,69 @@
           </v-col>
         </v-row>
       </template>
-      <v-row>
-        <v-col cols="12" class="pa-0 ma-0">
-          <Field
-            style="background: #f9f9f9"
-            icon="mdi-calendar-range"
-            label="Date of placing on the market"
-            :day="propsData.datePlacedOnMarket"
-          />
-        </v-col>
-      </v-row>
-    </v-container>
-    <v-container class="container-width-80">
-      <v-row style="min-height: 180px">
-        <template v-if="propsData.manufacturer">
-          <v-col v-if="propsData.manufacturer.address" md="5" class="pa-0 ma-0">
+      <template v-if="propsData.datePlacedOnMarket">
+        <v-row>
+          <v-col cols="12" class="pa-0 ma-0">
             <Field
-              style="min-height: 168px"
-              icon="mdi-factory"
-              label="Manufacturer Information"
-              :city="propsData.manufacturer.address.locality.value"
-              :country="propsData.manufacturer.address.country.shortName"
-              :postal="propsData.manufacturer.address.postCode.value"
-              :value="propsData.manufacturer.name"
+              style="background: #f9f9f9"
+              icon="mdi-calendar-range"
+              label="Date of placing on the market"
+              :day="propsData.datePlacedOnMarket"
             />
           </v-col>
-        </template>
-        <template v-if="propsData.manufacturer">
-          <v-col v-if="propsData.manufacturer.contact" md="7" class="pa-0 ma-0">
+        </v-row>
+      </template>
+    </v-container>
+    <template v-if="propsData.manufacturer">
+      <v-container class="container-width-80">
+        <v-row style="min-height: 180px">
+          <template v-if="propsData.manufacturer">
+            <v-col
+              v-if="propsData.manufacturer.address"
+              md="5"
+              class="pa-0 ma-0"
+            >
+              <Field
+                style="min-height: 168px"
+                icon="mdi-factory"
+                label="Manufacturer Information"
+                :city="propsData.manufacturer.address.locality.value"
+                :country="propsData.manufacturer.address.country.shortName"
+                :postal="propsData.manufacturer.address.postCode.value"
+                :value="propsData.manufacturer.name"
+              />
+            </v-col>
+          </template>
+          <template v-if="propsData.manufacturer">
+            <v-col
+              v-if="propsData.manufacturer.contact"
+              md="7"
+              class="pa-0 ma-0"
+            >
+              <Field
+                style="min-height: 168px"
+                icon="mdi-at"
+                label="Manufaturer Contact"
+                :phone="propsData.manufacturer.contact.phoneNumber"
+                :email="propsData.manufacturer.contact.email"
+                :website="propsData.manufacturer.contact.website"
+                value=" "
+              />
+            </v-col>
+          </template>
+        </v-row>
+        <v-row>
+          <v-col md="12" class="pa-0 ma-0">
             <Field
-              style="min-height: 168px"
-              icon="mdi-at"
-              label="Manufaturer Contact"
-              :phone="propsData.manufacturer.contact.phoneNumber"
-              :email="propsData.manufacturer.contact.email"
-              :website="propsData.manufacturer.contact.website"
-              value=" "
+              icon="mdi-molecule-co2"
+              label="CO2 Footprint"
+              :value="propsData.cO2FootprintTotal"
+              unit="CO2e/kWh"
             />
           </v-col>
-        </template>
-      </v-row>
-      <v-row>
-        <v-col v-if="propsData.manufacturer" md="12" class="pa-0 ma-0">
-          <Field
-            icon="mdi-molecule-co2"
-            label="CO2 Footprint"
-            :value="propsData.cO2FootprintTotal"
-            unit="CO2e/kWh"
-          />
-        </v-col>
-      </v-row>
-    </v-container>
+        </v-row>
+      </v-container>
+    </template>
   </div>
 </template>
 
diff --git a/src/components/passport/sections/Identification.vue b/src/components/passport/sections/Identification.vue
index 65e78a1c0..01053d4d3 100644
--- a/src/components/passport/sections/Identification.vue
+++ b/src/components/passport/sections/Identification.vue
@@ -25,6 +25,13 @@
     <v-container class="ma-0">
       <v-row class="section">
         <v-col sm="12" md="4" class="pa-0 ma-0">
+          <template v-if="propsData.manufacturerId">
+            <Field
+              icon="mdi-arrow-down-circle-outline"
+              label="Manufacturer Id"
+              :value="propsData.manufacturerId"
+            />
+          </template>
           <template v-if="propsData.localIdentifiers">
             <!-- eslint-disable-next-line vue/no-v-for-template-key -->
             <template v-for="attr in propsData.localIdentifiers" :key="attr">
@@ -35,6 +42,13 @@
               />
             </template>
           </template>
+          <template v-if="propsData.dataMatrixCode">
+            <Field
+              icon="mdi-arrow-down-circle-outline"
+              label="Data matrix code"
+              :value="propsData.dataMatrixCode"
+            />
+          </template>
         </v-col>
         <v-col sm="12" md="4" class="pa-0 ma-0">
           <template v-if="propsData.gtin">
diff --git a/src/components/passport/sections/Instructions.vue b/src/components/passport/sections/Instructions.vue
new file mode 100644
index 000000000..57db1074f
--- /dev/null
+++ b/src/components/passport/sections/Instructions.vue
@@ -0,0 +1,86 @@
+<!--
+  Catena-X - Product Passport Consumer Frontend
+ 
+  Copyright (c) 2022, 2023 BASF SE, BMW AG, Henkel AG & Co. KGaA
+ 
+  See the NOTICE file(s) distributed with this work for additional
+  information regarding copyright ownership.
+ 
+  This program and the accompanying materials are made available under the
+  terms of the Apache License, Version 2.0 which is available at
+  https://www.apache.org/licenses/LICENSE-2.0.
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+  either express or implied. See the
+  License for the specific language govern in permissions and limitations
+  under the License.
+ 
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<template>
+  <div class="section">
+    <v-container class="ma-0">
+      <v-row class="section">
+        <v-col sm="12" md="3" class="pa-0 ma-0">
+          <div class="element-chart-label">Packaging instructions</div>
+          <template v-if="propsData.packagingInstructions">
+            <InstructionsField :field="propsData.packagingInstructions" />
+          </template>
+        </v-col>
+        <v-col sm="12" md="3" class="pa-0 ma-0">
+          <div class="element-chart-label">Transportation instructions</div>
+          <template v-if="propsData.transportationInstructions">
+            <InstructionsField :field="propsData.transportationInstructions" />
+          </template>
+        </v-col>
+        <v-col sm="12" md="3" class="pa-0 ma-0">
+          <div class="element-chart-label">Dismantling procedure</div>
+          <template v-if="propsData.dismantlingProcedure">
+            <InstructionsField :field="propsData.dismantlingProcedure" />
+          </template>
+        </v-col>
+        <v-col sm="12" md="3" class="pa-0 ma-0">
+          <div class="element-chart-label">Safety measures</div>
+          <template v-if="propsData.safetyMeasures">
+            <InstructionsField :field="propsData.safetyMeasures" />
+          </template>
+          <div class="element-chart-label">Vehicle dismantling procedure</div>
+          <template v-if="propsData.vehicleDismantlingProcedure">
+            <InstructionsField :field="propsData.vehicleDismantlingProcedure" />
+          </template>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import InstructionsField from "../InstructionsField.vue";
+import passportUtil from "@/utils/passportUtil.js";
+
+export default {
+  name: "InstructionsComponent",
+  components: {
+    InstructionsField,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: Object,
+    },
+  },
+  data() {
+    return {
+      propsData: this.$props.data.aspect.instructions,
+    };
+  },
+  methods: {
+    callIconFinder(property) {
+      return passportUtil.iconFinder(property);
+    },
+  },
+};
+</script>
diff --git a/src/components/passport/sections/ProductSpecificParameters.vue b/src/components/passport/sections/ProductSpecificParameters.vue
new file mode 100644
index 000000000..0dfcba53e
--- /dev/null
+++ b/src/components/passport/sections/ProductSpecificParameters.vue
@@ -0,0 +1,157 @@
+<!--
+  Catena-X - Product Passport Consumer Frontend
+ 
+  Copyright (c) 2022, 2023 BASF SE, BMW AG, Henkel AG & Co. KGaA
+ 
+  See the NOTICE file(s) distributed with this work for additional
+  information regarding copyright ownership.
+ 
+  This program and the accompanying materials are made available under the
+  terms of the Apache License, Version 2.0 which is available at
+  https://www.apache.org/licenses/LICENSE-2.0.
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+  either express or implied. See the
+  License for the specific language govern in permissions and limitations
+  under the License.
+ 
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<template>
+  <div class="section">
+    <v-container class="ma-0">
+      <v-row class="section">
+        <v-col sm="12" md="4" class="pa-0 ma-0">
+          <div class="element-chart-label"></div>
+          <template v-if="propsData.torqueConverter">
+            <div
+              v-for="(attr, index) in propsData.torqueConverter"
+              :key="index"
+            >
+              <Field
+                :icon="callIconFinder('torqueConverter')"
+                label="Torque converter"
+                :value="attr"
+              />
+            </div>
+          </template>
+          <template v-if="propsData.driveType">
+            <Field
+              :icon="callIconFinder('driveType')"
+              label="Drive type"
+              :value="propsData.driveType"
+            />
+          </template>
+          <template v-if="propsData.oilType">
+            <Field
+              :icon="callIconFinder('oilType')"
+              label="Oil type"
+              :value="propsData.oilType"
+            />
+          </template>
+          <template v-if="propsData.spreading">
+            <Field
+              :icon="callIconFinder('spreading')"
+              label="Spreading"
+              :value="propsData.spreading"
+            />
+          </template>
+          <template v-if="propsData.torque">
+            <Field
+              :icon="callIconFinder('Torque')"
+              label="Torque"
+              :value="propsData.torque"
+            />
+          </template>
+          <template v-if="propsData.power">
+            <Field
+              :icon="callIconFinder('Power')"
+              label="Power"
+              :value="propsData.power"
+            />
+          </template>
+        </v-col>
+        <v-col sm="12" md="4" class="pa-0 ma-0">
+          <div class="element-chart-label">Standard gear ratio</div>
+          <template v-if="propsData.standardGearRatio">
+            <Field
+              :icon="callIconFinder('Gear')"
+              label="Gear"
+              :value="propsData.standardGearRatio.gear"
+            />
+            <Field
+              :icon="callIconFinder('Ratio')"
+              label="Ratio"
+              :value="propsData.standardGearRatio.ratio"
+            />
+          </template>
+        </v-col>
+        <v-col sm="12" md="4" class="pa-0 ma-0">
+          <div class="element-chart-label">Speed resistance</div>
+          <template v-if="propsData.speedResistance">
+            <Field
+              :icon="callIconFinder('Speed')"
+              label="Speed"
+              :value="propsData.speedResistance.speed"
+            />
+            <Field
+              :icon="callIconFinder('Gear')"
+              label="Gear"
+              :value="propsData.speedResistance.gear"
+            />
+          </template>
+          <template v-if="propsData.oilCapacity">
+            <Field
+              :icon="callIconFinder('oilCapacity')"
+              label="Oil capacity"
+              :value="propsData.oilCapacity"
+            />
+          </template>
+          <template v-if="propsData.oilCapacity">
+            <div
+              v-for="(attr, index) in propsData.electricPerformance"
+              :key="index"
+            >
+              <Field
+                :icon="callIconFinder('Electric performance')"
+                label="Electric performance"
+                :value="attr"
+              />
+            </div>
+          </template>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import Field from "../Field.vue";
+import passportUtil from "@/utils/passportUtil.js";
+
+export default {
+  name: "ProductSpecificParameters",
+  components: {
+    Field,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: Object,
+    },
+  },
+  data() {
+    return {
+      propsData: this.$props.data.aspect.productSpecificParameters,
+    };
+  },
+  methods: {
+    callIconFinder(property) {
+      return passportUtil.iconFinder(property);
+    },
+  },
+};
+</script>
diff --git a/src/components/passport/sections/SparePartSupplier.vue b/src/components/passport/sections/SparePartSupplier.vue
new file mode 100644
index 000000000..0382a295f
--- /dev/null
+++ b/src/components/passport/sections/SparePartSupplier.vue
@@ -0,0 +1,80 @@
+<!--
+  Catena-X - Product Passport Consumer Frontend
+ 
+  Copyright (c) 2022, 2023 BASF SE, BMW AG, Henkel AG & Co. KGaA
+ 
+  See the NOTICE file(s) distributed with this work for additional
+  information regarding copyright ownership.
+ 
+  This program and the accompanying materials are made available under the
+  terms of the Apache License, Version 2.0 which is available at
+  https://www.apache.org/licenses/LICENSE-2.0.
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+  either express or implied. See the
+  License for the specific language govern in permissions and limitations
+  under the License.
+ 
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<template>
+  <div class="section">
+    <v-container class="ma-0">
+      <v-row class="section">
+        <v-col sm="12" md="4" class="pa-0 ma-0">
+          <div v-for="(attr, index) in propsData" :key="index">
+            <Field
+              :icon="callIconFinder('supplierContact')"
+              label="Supplier contact"
+              :faxNumber="attr.supplierContact.faxNumber"
+              :website="attr.supplierContact.website"
+              :phone="attr.supplierContact.phoneNumber"
+              :email="attr.supplierContact.email"
+            />
+            <Field
+              :icon="callIconFinder('supplierId')"
+              label="Supplier id"
+              :value="attr.supplierId"
+            />
+            <Field
+              :icon="callIconFinder('sparePartName')"
+              label="Spare part name"
+              :value="attr.sparePartName"
+            />
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import Field from "../Field.vue";
+import passportUtil from "@/utils/passportUtil.js";
+
+export default {
+  name: "SparePartSupplier",
+  components: {
+    Field,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: Object,
+    },
+  },
+  data() {
+    return {
+      propsData: this.$props.data.aspect.sparePartSupplier,
+    };
+  },
+  methods: {
+    callIconFinder(property) {
+      return passportUtil.iconFinder(property);
+    },
+  },
+};
+</script>
diff --git a/src/components/passport/sections/StateOfHealth.vue b/src/components/passport/sections/StateOfHealth.vue
new file mode 100644
index 000000000..6c0c37725
--- /dev/null
+++ b/src/components/passport/sections/StateOfHealth.vue
@@ -0,0 +1,98 @@
+<!--
+  Catena-X - Product Passport Consumer Frontend
+ 
+  Copyright (c) 2022, 2023 BASF SE, BMW AG, Henkel AG & Co. KGaA
+ 
+  See the NOTICE file(s) distributed with this work for additional
+  information regarding copyright ownership.
+ 
+  This program and the accompanying materials are made available under the
+  terms of the Apache License, Version 2.0 which is available at
+  https://www.apache.org/licenses/LICENSE-2.0.
+ 
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+  either express or implied. See the
+  License for the specific language govern in permissions and limitations
+  under the License.
+ 
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<template>
+  <div class="section">
+    <v-container class="ma-0">
+      <v-row class="section">
+        <v-col sm="12" md="4" class="pa-0 ma-0">
+          <div class="element-chart-label"></div>
+          <template v-if="propsData.serviceHistory">
+            <div v-for="(attr, index) in propsData.serviceHistory" :key="index">
+              <Field
+                :icon="callIconFinder('serviceHistory')"
+                label="Service history"
+                :value="callFormattedDate(attr)"
+              />
+            </div>
+          </template>
+          <template v-if="propsData.expectedLifespan">
+            <Field
+              :icon="callIconFinder('expectedLifespan')"
+              label="Expected lifespan"
+              :value="propsData.expectedLifespan"
+            />
+          </template>
+          <template v-if="propsData.remanufacturing">
+            <Field
+              :icon="callIconFinder('remanufacturingDate')"
+              label="Remanufacturing date"
+              :value="
+                callFormattedDate(propsData.remanufacturing.remanufacturingDate)
+              "
+            />
+          </template>
+          <template v-if="propsData.remanufacturing">
+            <Field
+              :icon="callIconFinder('productStatusValue')"
+              label="Product status value"
+              :value="
+                callFormattedDate(propsData.remanufacturing.productStatusValue)
+              "
+            />
+          </template>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import Field from "../Field.vue";
+import passportUtil from "@/utils/passportUtil.js";
+
+export default {
+  name: "StateOfHealth",
+  components: {
+    Field,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: Object,
+    },
+  },
+  data() {
+    return {
+      propsData: this.$props.data.aspect.stateOfHealth,
+    };
+  },
+  methods: {
+    callIconFinder(property) {
+      return passportUtil.iconFinder(property);
+    },
+    callFormattedDate(timestamp) {
+      return passportUtil.formattedDate(timestamp);
+    },
+  },
+};
+</script>
diff --git a/src/components/passport/sections/Sustainability.vue b/src/components/passport/sections/Sustainability.vue
index 7e04f9114..4d4568fdb 100644
--- a/src/components/passport/sections/Sustainability.vue
+++ b/src/components/passport/sections/Sustainability.vue
@@ -23,43 +23,224 @@
 <template>
   <div class="section">
     <v-container class="ma-0">
-      <v-row class="section">
-        <template v-if="propsData">
+      <template
+        v-if="
+          propsData.semanticId ==
+          'urn:bamm:io.catenax.transmission.transmission_pass:1.0.0#TransmissionPass'
+        "
+      >
+        <v-row class="section">
           <v-col sm="12" md="4" class="pa-0 ma-0">
-            <Field
-              icon="mdi-image-size-select-small"
-              label="State"
-              :value="propsData.state"
-            />
-            <AttributeField
-              icon="mdi-image-size-select-small"
-              label="Material"
-              :attributes-list="propsData.material"
-            />
+            <template
+              v-if="propsData.aspect.sustainability.substancesOfConcern"
+            >
+              <div
+                v-for="(attr, index) in propsData.aspect.sustainability
+                  .substancesOfConcern"
+                :key="index"
+              >
+                <Field
+                  icon="mdi-image-size-select-small"
+                  label="Substances of concern"
+                  :value="attr"
+                />
+              </div>
+            </template>
+            <template
+              v-if="propsData.aspect.sustainability.responsibleSourcingDocument"
+            >
+              <InstructionsField
+                :field="
+                  propsData.aspect.sustainability.responsibleSourcingDocument
+                "
+              />
+            </template>
           </v-col>
-        </template>
-        <template v-if="propsData.carbonFootprint">
+          <template
+            v-if="
+              propsData.aspect.sustainability.substancesOfConcern ||
+              propsData.aspect.sustainability.criticalRawMaterials
+            "
+          >
+            <v-col sm="12" md="4" class="pa-0 ma-0">
+              <template
+                v-if="propsData.aspect.sustainability.substancesOfConcern"
+              >
+                <div
+                  v-for="(attr, key) in propsData.aspect.sustainability
+                    .recyclateContent"
+                  :key="key"
+                >
+                  <Field
+                    icon="mdi-image-size-select-small"
+                    :label="key"
+                    :value="attr"
+                  />
+                </div>
+              </template>
+              <template
+                v-if="propsData.aspect.sustainability.criticalRawMaterials"
+              >
+                <div
+                  v-for="(attr, key) in propsData.aspect.sustainability
+                    .criticalRawMaterials"
+                  :key="key"
+                >
+                  <Field
+                    icon="mdi-image-size-select-small"
+                    label="Critical raw materials"
+                    :value="attr"
+                  />
+                </div>
+              </template>
+            </v-col>
+          </template>
+
+          <template
+            v-if="
+              propsData.aspect.sustainability.carbonFootprint
+                .crossSectoralStandardsUsed ||
+              propsData.aspect.sustainability.carbonFootprint
+                .co2FootprintTotal ||
+              propsData.aspect.sustainability.carbonFootprint
+                .productOrSectorSpecificRules
+            "
+          >
+            <v-col sm="12" md="4" class="pa-0 ma-0">
+              <template
+                v-if="
+                  propsData.aspect.sustainability.carbonFootprint
+                    .crossSectoralStandardsUsed
+                "
+              >
+                <div
+                  v-for="(attr, key) in propsData.aspect.sustainability
+                    .carbonFootprint.crossSectoralStandardsUsed"
+                  :key="key"
+                >
+                  <Field
+                    icon="mdi-image-size-select-small"
+                    label="Cross sectoral standard"
+                    :value="attr.crossSectoralStandard"
+                  />
+                </div>
+              </template>
+              <template
+                v-if="
+                  propsData.aspect.sustainability.carbonFootprint
+                    .co2FootprintTotal
+                "
+              >
+                <Field
+                  icon="mdi-image-size-select-small"
+                  label="Co2 footprint total"
+                  :value="
+                    propsData.aspect.sustainability.carbonFootprint
+                      .co2FootprintTotal
+                  "
+                />
+              </template>
+              <template
+                v-if="
+                  propsData.aspect.sustainability.carbonFootprint
+                    .productOrSectorSpecificRules
+                "
+              >
+                <div
+                  v-for="(attr, key) in propsData.aspect.sustainability
+                    .carbonFootprint.productOrSectorSpecificRules"
+                  :key="key"
+                >
+                  <Field
+                    icon="mdi-image-size-select-small"
+                    label="Operator"
+                    :value="attr.operator"
+                  />
+                  <Field
+                    icon="mdi-image-size-select-small"
+                    label="Rule names"
+                    :value="attr.ruleNames"
+                  />
+                  <Field
+                    icon="mdi-image-size-select-small"
+                    label="Other operator name"
+                    :value="attr.otherOperatorName"
+                  />
+                </div>
+              </template>
+            </v-col>
+          </template>
+        </v-row>
+      </template>
+      <template v-else>
+        <v-row class="section">
           <v-col sm="12" md="4" class="pa-0 ma-0">
-            <Field
-              icon="mdi-image-size-select-small"
-              label="Carbon content total"
-              :value="propsData.carbonFootprint.carbonContentTotal"
-            />
-            <Field
-              icon="mdi-image-size-select-small"
-              label="Cross sectoral standard"
-              :value="propsData.carbonFootprint.crossSectoralStandard"
-            />
-            <AttributeField
-              icon="mdi-image-size-select-small"
-              label="Material"
-              :attributes-list="
-                propsData.carbonFootprint.productOrSectorSpecificRules
-              "
-            />
+            <template v-if="propsData.aspect.sustainability.state">
+              <Field
+                icon="mdi-image-size-select-small"
+                label="State"
+                :value="propsData.aspect.sustainability.state"
+              />
+            </template>
+            <template v-if="propsData.aspect.sustainability.material">
+              <AttributeField
+                icon="mdi-image-size-select-small"
+                label="Material"
+                :attributes-list="propsData.aspect.sustainability.material"
+              />
+            </template>
           </v-col>
-        </template>
-      </v-row>
+          <template v-if="propsData.aspect.sustainability.carbonFootprint">
+            <v-col sm="12" md="4" class="pa-0 ma-0">
+              <template
+                v-if="
+                  propsData.aspect.sustainability.carbonFootprint
+                    .carbonContentTotal
+                "
+              >
+                <Field
+                  icon="mdi-image-size-select-small"
+                  label="Carbon content total"
+                  :value="
+                    propsData.aspect.sustainability.carbonFootprint
+                      .carbonContentTotal
+                  "
+                />
+              </template>
+              <template
+                v-if="
+                  propsData.aspect.sustainability.carbonFootprint
+                    .crossSectoralStandard
+                "
+              >
+                <Field
+                  icon="mdi-image-size-select-small"
+                  label="Cross sectoral standard"
+                  :value="
+                    propsData.aspect.sustainability.carbonFootprint
+                      .crossSectoralStandard
+                  "
+                />
+              </template>
+              <template
+                v-if="
+                  propsData.aspect.sustainability.carbonFootprint
+                    .productOrSectorSpecificRules
+                "
+              >
+                <AttributeField
+                  icon="mdi-image-size-select-small"
+                  label="Material"
+                  :attributes-list="
+                    propsData.aspect.sustainability.carbonFootprint
+                      .productOrSectorSpecificRules
+                  "
+                />
+              </template>
+            </v-col>
+          </template>
+        </v-row>
+      </template>
     </v-container>
   </div>
 </template>
@@ -67,12 +248,14 @@
 <script>
 import Field from "../Field.vue";
 import AttributeField from "../AttributeField.vue";
+import InstructionsField from "../InstructionsField.vue";
 
 export default {
   name: "SustainabilityComponent",
   components: {
     AttributeField,
     Field,
+    InstructionsField,
   },
   props: {
     data: {
@@ -82,7 +265,7 @@ export default {
   },
   data() {
     return {
-      propsData: this.$props.data.aspect.sustainability,
+      propsData: this.$props.data,
     };
   },
 };
diff --git a/src/config/templates/iconMappings.json b/src/config/templates/iconMappings.json
index 16b2a818e..c524f6055 100644
--- a/src/config/templates/iconMappings.json
+++ b/src/config/templates/iconMappings.json
@@ -20,5 +20,10 @@
   "electrochemical": "mdi-electron-framework",
   "data": "mdi-data-matrix",
   "chemistry": "mdi-react",
-  "exchange": "mdi-file-swap-outline"
+  "exchange": "mdi-file-swap-outline",
+  "torque": "mdi-cog-outline",
+  "gear": "mdi-cog-outline",
+  "power": "mdi-cog-outline",
+  "drive": "mdi-car",
+  "oil": "mdi-oil"
 }
\ No newline at end of file
diff --git a/src/config/templates/passports.json b/src/config/templates/passports.json
index e2950d106..25772d5ad 100644
--- a/src/config/templates/passports.json
+++ b/src/config/templates/passports.json
@@ -70,42 +70,12 @@
             ]
         },
         "sources": {
-            "mandatory": {
-                "safetyInformation": {
-                    "header": null,
-                    "category": null,
-                    "type": null,
-                    "content": null
-                },
-                "environmentalImpact": {
-                    "header": null,
-                    "category": null,
-                    "type": null,
-                    "content": null
-                }
-            },
-            "optional": [
-                {
-                    "name": null,
-                    "document": {
-                        "header": null,
-                        "category": null,
-                        "type": null,
-                        "content": null
-                    }
-                }
-            ]
+            "mandatory": {},
+            "optional": []
         },
         "sustainability": {
             "state": null,
-            "material": [
-                {
-                    "name": null,
-                    "recycled": false,
-                    "renewable": false,
-                    "percentage": null
-                }
-            ],
+            "material": [],
             "critical": null,
             "carbonFootprint": {
                 "carbonContentTotal": null,
@@ -468,5 +438,136 @@
             "stateOfCharge": null
         },
         "cO2FootprintTotal": null
+    },
+    "urn:bamm:io.catenax.transmission.transmission_pass:1.0.0#TransmissionPass": {
+        "productSpecificParameters": {
+            "torqueConverter": null,
+            "driveType": null,
+            "oilType": null,
+            "spreading": null,
+            "torque": null,
+            "power": null,
+            "standardGearRatio": {
+                "gear": null,
+                "ratio": null
+            },
+            "oilCapacity": null,
+            "electricPerformance": null,
+            "speedResistance": {
+                "speed": null,
+                "gear": null
+            }
+        },
+        "instructions": {
+            "packagingInstructions": [
+                {
+                    "documentTitle": null,
+                    "documentLink": null
+                }
+            ],
+            "transportationInstructions": [
+                {
+                    "documentTitle": null,
+                    "documentLink": null
+                }
+            ],
+            "dismantlingProcedure": [
+                {
+                    "documentTitle": null,
+                    "documentLink": null
+                }
+            ],
+            "safetyMeasures": [
+                {
+                    "documentTitle": null,
+                    "documentLink": null
+                }
+            ],
+            "vehicleDismantlingProcedure": [
+                {
+                    "documentTitle": null,
+                    "documentLink": null
+                }
+            ]
+        },
+        "identification": {
+            "manufacturerId": null,
+            "localIdentifiers": [
+                {
+                    "value": null,
+                    "key": null
+                }
+            ],
+            "dataMatrixCode": null
+        },
+        "sparePartSupplier": [
+            {
+                "supplierContact": {
+                    "faxNumber": null,
+                    "website": null,
+                    "phoneNumber": null,
+                    "email": null
+                },
+                "supplierId": null,
+                "sparePartName": null
+            }
+        ],
+        "stateOfHealth": {
+            "serviceHistory": null,
+            "expectedLifespan": null,
+            "remanufacturing": {
+                "remanufacturingDate": null,
+                "productStatusValue": null
+            }
+        },
+        "generalInformation": {
+            "additionalInformation": null,
+            "physicalDimensionsProperty": {
+                "width": null,
+                "length": null,
+                "weight": null,
+                "diameter": null,
+                "height": null
+            },
+            "warrantyPeriod": null,
+            "productDescription": null,
+            "productType": null
+        },
+        "sustainability": {
+            "substancesOfConcern": null,
+            "responsibleSourcingDocument": [
+                {
+                    "documentTitle": null,
+                    "documentLink": null
+                }
+            ],
+            "recyclateContent": {
+                "nickel": null,
+                "lithium": null,
+                "cobalt": null,
+                "otherSubstance": [
+                    {
+                        "substancePercentage": null,
+                        "substanceName": null
+                    }
+                ]
+            },
+            "criticalRawMaterials": null,
+            "carbonFootprint": {
+                "crossSectoralStandardsUsed": [
+                    {
+                        "crossSectoralStandard": null
+                    }
+                ],
+                "co2FootprintTotal": null,
+                "productOrSectorSpecificRules": [
+                    {
+                        "operator": null,
+                        "ruleNames": null,
+                        "otherOperatorName": null
+                    }
+                ]
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/utils/passportUtil.js b/src/utils/passportUtil.js
index c2f1b8cbb..45745917a 100644
--- a/src/utils/passportUtil.js
+++ b/src/utils/passportUtil.js
@@ -22,6 +22,23 @@
 import iconMappings from "@/config/templates/iconMappings.json";
 
 export default {
+    formattedDate(timestamp) {
+        const date = new Date(timestamp);
+        const formattedDate = date.toLocaleDateString("en-GB", {
+            day: "2-digit",
+            month: "2-digit",
+            year: "numeric",
+        });
+        return formattedDate;
+    },
+    toSentenceCase(text) {
+        // Convert the string to sentence case
+        const words = text.split(/(?=[A-Z])/);
+        const firstWord = [words[0].charAt(0).toUpperCase() + words[0].slice(1)];
+        const otherWords = words.slice(1).map((word) => word.toLowerCase());
+        const formattedWords = firstWord.concat(otherWords);
+        return formattedWords.join(" ");
+    },
     unitRemover(unit) {
         return unit.replace("unit:", "");
     },
diff --git a/src/views/PassportView.vue b/src/views/PassportView.vue
index f90d7b7fb..f272b3c93 100644
--- a/src/views/PassportView.vue
+++ b/src/views/PassportView.vue
@@ -37,7 +37,7 @@
       <template
         v-else-if="
           data.semanticId ===
-          'urn:bamm:io.catenax.transmission:3.0.1#Transmission'
+          'urn:bamm:io.catenax.transmission.transmission_pass:1.0.0#TransmissionPass'
         "
       >
         <span class="header-title">Transmission Product Passport</span>
@@ -72,17 +72,6 @@
           type="Battery ID"
         />
       </template>
-      <template
-        v-else-if="
-          data.semanticId ===
-          'urn:bamm:io.catenax.transmission:3.0.1#Transmission'
-        "
-      >
-        <PassportHeader
-          :id="data.aspect.batteryIdentification.batteryIDDMCCode"
-          type="Transmission ID"
-        />
-      </template>
       <template v-else>
         <PassportHeader :id="id ? id : '-'" type="ID" />
       </template>
@@ -97,11 +86,11 @@
         </template>
         <template
           v-else-if="
-            data.semanticId ===
-            'urn:bamm:io.catenax.transmission:3.0.1#Transmission'
+            data.semanticId ==
+            'urn:bamm:io.catenax.transmission.transmission_pass:1.0.0#TransmissionPass'
           "
         >
-          <BatteryCards :data="data" />
+          <TransmissionCards :data="data" />
         </template>
         <template v-else>
           <GeneralCards :data="data" />
@@ -119,17 +108,6 @@
             :componentsData="data"
           />
         </template>
-        <template
-          v-else-if="
-            data.semanticId ===
-            'urn:bamm:io.catenax.transmission:3.0.1#Transmission'
-          "
-        >
-          <TabsComponent
-            :componentsNames="batteryComponentsNames"
-            :componentsData="data"
-          />
-        </template>
         <template v-else>
           <TabsComponent
             :componentsNames="filteredComponentsNames"
@@ -150,6 +128,7 @@ import TabsComponent from "../components/general/TabsComponent.vue";
 import HeaderComponent from "@/components/general/Header.vue";
 import PassportHeader from "@/components/passport/PassportHeader.vue";
 import BatteryCards from "@/components/passport/BatteryCards.vue";
+import TransmissionCards from "@/components/passport/TransmissionCards.vue";
 import GeneralCards from "@/components/passport/GeneralCards.vue";
 import FooterComponent from "@/components/general/Footer.vue";
 import ErrorComponent from "@/components/general/ErrorComponent.vue";
@@ -172,6 +151,7 @@ export default {
     ErrorComponent,
     TabsComponent,
     GeneralCards,
+    TransmissionCards,
   },
   data() {
     return {
@@ -232,7 +212,7 @@ export default {
         type: "error",
         status: 500,
         statusText: "Internal Server Error",
-      }
+      },
     };
   },
 
@@ -245,7 +225,9 @@ export default {
         dataKeys.push("exchange");
         // Generate component names dynamically from the JSON keys
         return dataKeys.map((key) => ({
-          label: key[0].toUpperCase() + key.slice(1),
+          label: passportUtil.toSentenceCase(
+            key[0].toUpperCase() + key.slice(1)
+          ),
           icon: passportUtil.iconFinder(key),
           component: key,
         }));
@@ -316,10 +298,7 @@ export default {
         // Init backendService
         // Get access token from IDP
         // Get the aspect for the selected version
-        response = await this.backendService.getPassport(
-          id,
-          this.auth
-        );
+        response = await this.backendService.getPassport(id, this.auth);
       } catch (e) {
         console.log("passportView.getPassport() -> " + e);
         this.errorObj.title = jsonUtil.exists("message", response)