diff --git a/src/assets/styles/components/general/header.scss b/src/assets/styles/components/general/header.scss
index f9b677538..99ec0bc44 100644
--- a/src/assets/styles/components/general/header.scss
+++ b/src/assets/styles/components/general/header.scss
@@ -19,12 +19,11 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  */
- @media (max-width: 585px) {
-  .header-container{
-    padding: 0px 14px 0 0px!important;
+@media (max-width: 585px) {
+  .header-container {
+    padding: 0px 14px 0 0px !important;
   }
- }
-
+}
 
 .header-container {
   position: fixed;
@@ -110,21 +109,14 @@
   line-height: 1.42857;
   .language {
     color: $catena-x-blue;
+    margin: 0px 16px 0px 0px;
+    font-weight: 500;
     cursor: pointer;
   }
   .active {
-    font-weight: 500;
     color: black;
     border-bottom: 2px solid;
   }
-
-  .inactive {
-    color: rgb(15 113 203 / 50%);
-    font-weight: 500;
-    cursor: not-allowed;
-    margin: 0px 16px 0px 0px;
-    line-height: 1.42857;
-  }
 }
 
 .role {
diff --git a/src/components/general/Dialog.vue b/src/components/general/Dialog.vue
index e2b50b644..59d5d38ab 100644
--- a/src/components/general/Dialog.vue
+++ b/src/components/general/Dialog.vue
@@ -29,7 +29,7 @@
       <v-card class="dialog-container">
         <v-card-title class="title-container">
           <v-icon start size="small" icon="mdi-information-outline"> </v-icon>
-          <slot name="title"> Description </slot>
+          <slot name="title"> {{ $t("dialog.description") }} </slot>
           <v-card-actions class="close-btn-container">
             <v-btn class="close-btn-container" block @click="dialog = false">
               <v-icon start md icon="mdi-close"></v-icon
@@ -40,7 +40,7 @@
         <v-card-text class="dialog-text">
           <slot name="text">
             <h2>404</h2>
-            <p>No description</p>
+            <p>{{ $t("dialog.noDescription") }}</p>
           </slot>
         </v-card-text>
       </v-card>
diff --git a/src/components/general/ErrorComponent.vue b/src/components/general/ErrorComponent.vue
index f8f51950f..f68a72997 100644
--- a/src/components/general/ErrorComponent.vue
+++ b/src/components/general/ErrorComponent.vue
@@ -1,115 +1,152 @@
-<!--
-  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="page-not-found fill-height align-self-center justify-center">
-      <v-row class="justify-center">
-        <v-col class="v-col-auto justify-center" style="height: fit-content">
-          <img src="@/media/404.svg" class="h-100"> 
-        </v-col>
-        <v-col class="v-col-sm-12 v-col-md-6 v-col-lg-6">
-          <v-container fluid>
-            <template v-if="title">
-              <v-row>
-                <v-col><span class="title">{{ title }}</span></v-col>
-              </v-row>
-            </template>
-            <template v-if="subTitle">
-              <v-row>
-                <v-col><span class="subTitle">{{ subTitle }}</span></v-col>
-              </v-row>
-            </template>
-            <template v-if="explanation || description || adminLabel">
-              <v-row>
-                <v-col><span class="description"><template v-if="description">{{ description }}</template> <template v-if="explanation">{{ explanation }}</template> <template v-if="adminLabel"><a :href="'mailto:'+adminEmail">{{adminLabel}}</a></template></span></v-col>
-              </v-row>
-            </template>
-            <template v-if="buttonsVisible">
-              <v-row class="justify-center">
-                <v-col class="v-col-auto"><v-btn size="large" class="btn" rounded="pill" color="primary" :prepend-icon="reloadIcon" @click="$router.go(back)">{{reloadLabel}}</v-btn></v-col>
-                <v-col class="v-col-auto"><v-btn size="large" class="btn" rounded="pill" variant="outlined" :href="homepage">Homepage</v-btn></v-col>
-              </v-row>
-            </template>
-          </v-container>
-        </v-col>
-      </v-row>
-    </v-container>
-</template>
-
-<script>
-import { ADMIN_EMAIL } from "@/services/service.const";
-export default {
-  name: "ErrorComponent",
-  props: {
-    title: {
-      type: [String,Number],
-      default: "404 Not Found",
-    },
-    subTitle:{
-      type: [String,Number],
-      default: "Oops, Something went wrong..."
-    },
-    description: {
-      type: Number,
-      default: null
-    },
-    explanation: {
-      type: String,
-      default: "The server encountered an internal error or misconfiguration and was unable to complete your request."
-    },
-    adminLabel:{
-      type: String,
-      default: "Please contact your admin"
-    },
-    adminEmail:{
-      type: String,
-      default: ADMIN_EMAIL,
-    },
-    buttonsVisible:{
-      type: Boolean,
-      default: true
-    },
-    back:{
-      type: [String, Number],
-      default: -1
-    },
-    homepage:{
-      type: String,
-      default: "/"
-    },
-    reloadLabel:{
-      type: String, 
-      default: "Reload Page"
-    },
-    reloadIcon:{
-      type: String,
-      default: null
-    }
-  }
-};
-</script>
-<style scoped>
-.error {
-  width: 110%;
-}
-</style>
+
+<!--
+  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="page-not-found fill-height align-self-center justify-center"
+  >
+    <v-row class="justify-center">
+      <v-col class="v-col-auto justify-center" style="height: fit-content">
+        <img src="@/media/404.svg" class="h-100" />
+      </v-col>
+      <v-col class="v-col-sm-12 v-col-md-6 v-col-lg-6">
+        <v-container fluid>
+          <template v-if="title">
+            <v-row>
+              <v-col
+                ><span class="title">{{ $t(title) }}</span></v-col
+              >
+            </v-row>
+          </template>
+          <template v-if="subTitle">
+            <v-row>
+              <v-col
+                ><span class="subTitle">{{ $t(subTitle) }}</span></v-col
+              >
+            </v-row>
+          </template>
+          <template v-if="explanation || description || adminLabel">
+            <v-row>
+              <v-col
+                ><span class="description"
+                  ><template v-if="description">{{ $t(description) }}</template>
+                  <template v-if="explanation">{{ $t(explanation) }}</template>
+                  <template v-if="adminLabel"
+                    ><a :href="'mailto:' +adminEmail">{{
+                      $t(adminLabel)
+                    }}</a></template
+                  ></span
+                ></v-col
+              >
+            </v-row>
+          </template>
+          <template v-if="buttonsVisible">
+            <v-row class="justify-center">
+              <v-col class="v-col-auto"
+                ><v-btn
+                  size="large"
+                  class="btn"
+                  rounded="pill"
+                  color="primary"
+                  :prepend-icon="reloadIcon"
+                  @click="$router.go(back)"
+                  >{{ $t(reloadLabel) }}</v-btn
+                ></v-col
+              >
+              <v-col class="v-col-auto"
+                ><v-btn
+                  size="large"
+                  class="btn"
+                  rounded="pill"
+                  variant="outlined"
+                  :href="homepage"
+                  >{{ $t("homepage") }}</v-btn
+                ></v-col
+              >
+            </v-row>
+          </template>
+        </v-container>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { ADMIN_EMAIL } from "@/services/service.const";
+export default {
+  name: "ErrorComponent",
+  props: {
+    title: {
+      type: [String,Number],
+      default: "404 Not Found",
+    },
+    subTitle:{
+      type: [String,Number],
+      default: "Oops, Something went wrong..."
+    },
+    description: {
+      type: Number,
+      default: null
+    },
+    explanation: {
+      type: String,
+      default: "The server encountered an internal error or misconfiguration and was unable to complete your request."
+    },
+    adminLabel:{
+      type: String,
+      default: "Please contact your admin"
+    },
+    adminEmail:{
+      type: String,
+      default: ADMIN_EMAIL,
+    },
+    buttonsVisible:{
+      type: Boolean,
+      default: true
+    },
+    back:{
+      type: [String, Number],
+      default: -1
+    },
+    homepage:{
+      type: String,
+      default: "/"
+    },
+    reloadLabel:{
+      type: String, 
+      default: "Reload Page"
+    },
+    reloadIcon:{
+      type: String,
+      default: null
+    }
+  }
+};
+</script>
+<style scoped>
+.error {
+  width: 110%;
+}
+</style>
+
diff --git a/src/components/general/Footer.vue b/src/components/general/Footer.vue
index 97f91ecee..34ab95400 100644
--- a/src/components/general/Footer.vue
+++ b/src/components/general/Footer.vue
@@ -31,15 +31,16 @@
             id="lnkHelp"
             target="_blank"
             :href="portalUrl+'/documentation/?path=docs'"
-            >Help</a
           >
+            {{ $t("footer.help") }}
+          </a>
         </div>
         <div>
           <a
             id="lnkHelp"
             target="_blank"
             :href="portalUrl+'/contact'"
-            >Contact</a
+            >{{ $t("footer.contact") }}</a
           >
         </div>
         <div>
@@ -47,98 +48,94 @@
             id="lnkHelp"
             target="_blank"
             :href="portalUrl+'/imprint'"
-            >Imprint</a
           >
+            {{ $t("footer.imprint") }}
+          </a>
         </div>
         <div>
           <a
             id="lnkHelp"
             target="_blank"
             :href="portalUrl+'/privacy'"
-            >Privacy</a
           >
+            {{ $t("footer.privacy") }}
+          </a>
         </div>
         <div>
           <a
             id="lnkHelp"
             target="_blank"
             :href="portalUrl+'/terms'"
-            >Terms of Service</a
-          >
+            >
+            {{ $t("footer.terms") }}
+          </a>
         </div>
         <div>
           <a
             id="lnkHelp"
             target="_blank"
             :href="portalUrl+'/cookiepolicy'"
-            >Cookies</a
           >
+            {{ $t("footer.cookies") }}
+          </a>
         </div>
         <div>
           <a
             id="lnkHelp"
             target="_blank"
             :href="portalUrl+'/thirdpartylicenses'"
-            >Third Party Licenses</a
           >
+            {{ $t("footer.thirdParty") }}
+          </a>
         </div>
         <DialogComponent>
           <div>
-            <a id="legalNotice">Legal notice</a>
+            <a id="legalNotice">{{ $t("footer.legal") }}</a>
           </div>
-          <template v-slot:title> Legal notice </template>
+          <template v-slot:title>{{ $t("footer.legal") }}</template>
           <template v-slot:text>
             <div>
-              <a
-                id="lnkHelp"
-                target="_blank"
-                :href="REPO_ENDPOINT"
-                >Digital Product Pass</a
-              >
+              <a id="lnkHelp" target="_blank" :href="REPO_ENDPOINT">{{
+                $t("passportView.dpp")
+              }}</a>
             </div>
-            <div>License: Apache-2.0</div>
+            <div>{{ $t("footer.license") }}</div>
             <div>
-              <span>Licence Path: </span>
+              <span>{{ $t("footer.licensePath") }}</span>
               <a
                 id="lnkHelp"
                 target="_blank"
                 :href="baseCommitUrl + '/LICENSE'"
-                >View License File</a
+                >{{ $t("footer.viewLicense") }}</a
               >
             </div>
             <div>
-              <span>NOTICE: </span>
+              <span>{{ $t("footer.notice") }}</span>
               <a
                 id="lnkHelp"
                 target="_blank"
                 :href="baseCommitUrl + '/NOTICE.md'"
-                >View Notice File</a
+                >{{ $t("footer.viewNotice") }}</a
               >
             </div>
             <div>
-              <span>Source URL: </span>
-              <a
-                id="lnkHelp"
-                target="_blank"
-                :href="REPO_ENDPOINT"
-                >{{REPO_ENDPOINT}}</a
-              >
+              <span>{{ $t("footer.source") }}</span>
+              <a id="lnkHelp" target="_blank" :href="REPO_ENDPOINT">{{
+                REPO_ENDPOINT
+              }}</a>
             </div>
             <div>
-              <span>Commit ID: </span>
-              <a
-                id="lnkHelp"
-                target="_blank"
-                :href="baseCommitUrl"
-                >{{ COMMIT_ID }}</a
-              >
+              <span>{{ $t("footer.commit") }}</span>
+              <a id="lnkHelp" target="_blank" :href="baseCommitUrl">{{
+                COMMIT_ID
+              }}</a>
             </div>
           </template>
         </DialogComponent>
       </div>
       <div class="copyright-container">
         <div class="copyright">
-          Copyright © Catena-X Automotive Network.
+          {{ $t("footer.copyright") }}
           <a target="_blank" id="version" :href="tagRepoUrl">v{{ VERSION }}</a>
         </div>
       </div>
@@ -172,7 +169,7 @@ export default {
     return {
       VERSION,
       COMMIT_ID,
-      REPO_ENDPOINT
+      REPO_ENDPOINT,
     };
   },
 };
diff --git a/src/components/general/Header.vue b/src/components/general/Header.vue
index 8dbab42e7..4ed327990 100644
--- a/src/components/general/Header.vue
+++ b/src/components/general/Header.vue
@@ -52,10 +52,9 @@
                     class="help-btn"
                     :ripple="{ class: 'ripple-background' }"
                     rounded
-                    >Help
+                    >{{ $t("header.helpBtn") }}
                     <Tooltip>
-                      Here you can get help if you need to know more about
-                      Catena-X
+                      {{ $t("header.helpTooltip") }}
                     </Tooltip>
                   </v-btn>
                 </a>
@@ -84,11 +83,29 @@
                       class="menu-btn"
                       @click="logout"
                     >
-                      <span class="profile-text">Sign Out</span>
+                      <span class="profile-text">{{
+                        $t("header.signOut")
+                      }}</span>
                     </v-btn>
                     <div class="profile-menu-lang">
-                      <a disabled class="language inactive">DE</a>
-                      <a class="language active">EN</a>
+                      <a
+                        :class="{
+                          language: true,
+                          inactive: activeLanguage !== 'de',
+                          active: activeLanguage === 'de',
+                        }"
+                        @click="setLanguage('de')"
+                        >DE</a
+                      >
+                      <a
+                        :class="{
+                          language: true,
+                          inactive: activeLanguage !== 'en',
+                          active: activeLanguage === 'en',
+                        }"
+                        @click="setLanguage('en')"
+                        >EN</a
+                      >
                     </div>
                   </v-list>
                 </v-menu>
@@ -124,6 +141,7 @@ export default {
   },
   data() {
     return {
+      activeLanguage: this.$i18n.locale,
       profileHover: false,
       hamburgerMenu: false,
       profileMenu: false,
@@ -142,6 +160,10 @@ export default {
     }
   },
   methods: {
+    setLanguage(lang) {
+      this.activeLanguage = lang;
+      this.$i18n.locale = lang;
+    },
     logout() {
       this.auth.logout();
     },
diff --git a/src/components/general/LoadingComponent.vue b/src/components/general/LoadingComponent.vue
index 4ca3ef6dd..6c2dc88a3 100644
--- a/src/components/general/LoadingComponent.vue
+++ b/src/components/general/LoadingComponent.vue
@@ -23,7 +23,7 @@
 <template>
   <div class="loading-container">
     <v-col class="v-col-auto dpp-id-container">
-      <div class="dpp-id">Asset Id: {{ id }}</div>
+      <div class="dpp-id">{{ $("loading.assetId") }} {{ id }}</div>
       <v-progress-linear
         :model-value="
           initialProgressValue +
@@ -57,38 +57,38 @@
 
       <StepperItem
         :condition="processId"
-        :stepTitle="this.stepsNames.registrySearch.stepTitle"
+        :stepTitle="$t(this.stepsNames.registrySearch.stepTitle)"
         :successStepSubTitle="
-          this.stepsNames.registrySearch.successStepSubtitle
+          $t(this.stepsNames.registrySearch.successStepSubtitle)
         "
         :initialStepSubTitle="
-          this.stepsNames.registrySearch.initialStepSubtitle
+          $t(this.stepsNames.registrySearch.initialStepSubtitle)
         "
         displayId
-        :idLabel="'Created Process Id: ' + processId"
+        :idLabel="$t('loading.createdProcess') + processId"
       />
       <!-- Contract Search step -->
       <StepperItem
         :condition="searchContractId"
-        :stepTitle="this.stepsNames.contractSearch.stepTitle"
+        :stepTitle="$t(this.stepsNames.contractSearch.stepTitle)"
         :successStepSubTitle="
-          this.stepsNames.contractSearch.successStepSubtitle
+          $t(this.stepsNames.contractSearch.successStepSubtitle)
         "
         :initialStepSubTitle="
-          this.stepsNames.contractSearch.initialStepSubtitle
+          $t(this.stepsNames.contractSearch.initialStepSubtitle)
         "
         displayId
-        :idLabel="'Contract Id: ' + searchContractId"
+        :idLabel="$t('loading.contractId') + searchContractId"
       />
       <!-- Contract Negotiation step -->
       <StepperItem
         :condition="statusData.data.history['negotiation-accepted']"
-        :stepTitle="this.stepsNames.contractNegotiation.stepTitle"
+        :stepTitle="$t(this.stepsNames.contractNegotiation.stepTitle)"
         :successStepSubTitle="
-          this.stepsNames.contractNegotiation.successStepSubtitle
+          $t(this.stepsNames.contractNegotiation.successStepSubtitle)
         "
         :initialStepSubTitle="
-          this.stepsNames.contractNegotiation.initialStepSubtitle
+          $t(this.stepsNames.contractNegotiation.initialStepSubtitle)
         "
         displayId
         :idLabel="
@@ -100,12 +100,12 @@
       <!-- Contract Transfer step -->
       <StepperItem
         :condition="statusData.data.history['transfer-request']"
-        :stepTitle="this.stepsNames.contractTransfer.stepTitle"
+        :stepTitle="$t(this.stepsNames.contractTransfer.stepTitle)"
         :successStepSubTitle="
-          this.stepsNames.contractTransfer.successStepSubtitle
+          $t(this.stepsNames.contractTransfer.successStepSubtitle)
         "
         :initialStepSubTitle="
-          this.stepsNames.contractTransfer.initialStepSubtitle
+          $t(this.stepsNames.contractTransfer.initialStepSubtitle)
         "
         displayId
         :idLabel="
@@ -117,12 +117,12 @@
       <!-- Passport Retrieval step -->
       <StepperItem
         :condition="statusData.data.history['data-received']"
-        :stepTitle="this.stepsNames.passportRetrieval.stepTitle"
+        :stepTitle="$t(this.stepsNames.passportRetrieval.stepTitle)"
         :successStepSubTitle="
-          this.stepsNames.passportRetrieval.successStepSubtitle
+          $t(this.stepsNames.passportRetrieval.successStepSubtitle)
         "
         :initialStepSubTitle="
-          this.stepsNames.passportRetrieval.initialStepSubtitle
+          $t(this.stepsNames.passportRetrieval.initialStepSubtitle)
         "
       />
     </v-timeline>
@@ -143,32 +143,32 @@ export default {
       initialProgressValue: 10,
       stepsNames: {
         registrySearch: {
-          stepTitle: "Registry Search",
-          initialStepSubtitle: "Searching...",
-          successStepSubtitle: "Registries available",
+          stepTitle: "loading.registrySearch",
+          initialStepSubtitle: "loading.searching",
+          successStepSubtitle: "loading.registriesAvailable",
           progressValue: 25,
         },
         contractSearch: {
-          stepTitle: "Contract Search",
-          initialStepSubtitle: "Searching...",
-          successStepSubtitle: "Contract available",
+          stepTitle: "loading.contractSearch",
+          initialStepSubtitle: "loading.searching",
+          successStepSubtitle: "loading.contractAvailable",
           progressValue: 20,
         },
         contractNegotiation: {
-          stepTitle: "Contract Negotiation",
-          initialStepSubtitle: "Negotiating...",
-          successStepSubtitle: "Contract status: ",
+          stepTitle: "loading.contractNegotiation",
+          initialStepSubtitle: "loading.negotiating",
+          successStepSubtitle: "loading.contractStatus",
           progressValue: 10,
         },
         contractTransfer: {
-          stepTitle: "Contract Transfer",
-          initialStepSubtitle: "Transferring...",
-          successStepSubtitle: "Transfer completed",
+          stepTitle: "loading.contractTransfer",
+          initialStepSubtitle: "loading.transferring",
+          successStepSubtitle: "loading.transferCompleted",
           progressValue: 15,
         },
         passportRetrieval: {
-          stepTitle: "Passport Retrieval",
-          initialStepSubtitle: "Retrieving... ",
+          stepTitle: "loading.passportRetrieval",
+          initialStepSubtitle: "loading.retrieving",
           successStepSubtitle: "",
           progressValue: 20,
         },
diff --git a/src/components/general/RecursiveTree.vue b/src/components/general/RecursiveTree.vue
index 0d64191ae..2fa78fef6 100644
--- a/src/components/general/RecursiveTree.vue
+++ b/src/components/general/RecursiveTree.vue
@@ -122,7 +122,7 @@
       <div class="tile-container">
         <v-icon class="icon-bg mdi-minus gray-bg"> [{{ "mdi-minus" }}] </v-icon>
         <div class="tile not-available">
-          <p class="tile-id">Not available</p>
+          <p class="tile-id">{{ $t("recursiveTree.notAvailable") }}</p>
         </div>
       </div>
     </div>
diff --git a/src/components/general/SearchInput.vue b/src/components/general/SearchInput.vue
index 92cf6453c..704bbe4a4 100644
--- a/src/components/general/SearchInput.vue
+++ b/src/components/general/SearchInput.vue
@@ -33,7 +33,7 @@
         v-model="typedCode"
         class="input"
         type="text"
-        placeholder="Enter Battery ID"
+        :placeholder="$t('searchInput.passportId')"
       ></v-text-field>
 
       <v-btn
@@ -56,7 +56,7 @@
       type="submit"
       :disabled="!isContent"
     >
-      Search
+      {{ $t("searchInput.search") }}
     </v-btn>
   </v-form>
 </template>
diff --git a/src/components/general/TabsComponent.vue b/src/components/general/TabsComponent.vue
index 2190c2d63..e3bd35be0 100644
--- a/src/components/general/TabsComponent.vue
+++ b/src/components/general/TabsComponent.vue
@@ -29,7 +29,7 @@
         :value="section.component"
       >
         <v-icon start md :icon="section.icon"> </v-icon>
-        {{ section.label }}
+        {{ $t(section.label) }}
       </v-tab>
     </v-tabs>
     <v-card-text>
diff --git a/src/components/passport/BarChart.vue b/src/components/passport/BarChart.vue
index 3fed303c1..3f5366925 100644
--- a/src/components/passport/BarChart.vue
+++ b/src/components/passport/BarChart.vue
@@ -30,10 +30,10 @@
       :style="`width: ${barChart(currentValue, maxValue)}; background: #0f71cb`"
     />
     <div class="chart-value current">
-      {{ isNumeric(currentValue) ? currentValue : "No data" }}
+      {{ isNumeric(currentValue) ? currentValue : $t("barChart.noData") }}
     </div>
     <div class="chart-value max">
-      {{ isNumeric(maxValue) ? maxValue : "No data" }}
+      {{ isNumeric(maxValue) ? maxValue : $t("barChart.noData") }}
     </div>
   </div>
 </template>
diff --git a/src/components/passport/BatteryCards.vue b/src/components/passport/BatteryCards.vue
index 4f203665b..414422107 100644
--- a/src/components/passport/BatteryCards.vue
+++ b/src/components/passport/BatteryCards.vue
@@ -32,18 +32,21 @@
         style="padding: 6px !important"
       >
         <div class="card-container fill-height">
-          <span class="card-title">{{ card.title }} </span>
+          <span class="card-title">{{ $t(card.title) }} </span>
           <span>
             <v-icon
               class="card-icon"
               start
               md
-              :icon="card.icon"
+              :icon="callIconFinder(card.icon)"
               size="x-large"
             ></v-icon>
           </span>
 
-          <v-container class="pa-0" v-if="card.title === 'SUSTAINABILITY'">
+          <v-container
+            class="pa-0"
+            v-if="card.title == 'batteryCards.titleSustainability'"
+          >
             <v-row class="sustainability pa-0 ma-0">
               <ElementChart
                 :data="card.value"
@@ -56,26 +59,31 @@
                   {{ card.secondValueUnits }}
                 </span>
                 <div class="co2-label" style="padding-top: 0">
-                  {{ card.secondLabel }}
+                  {{ $t(card.secondLabel) }}
                 </div>
               </div>
             </v-row>
           </v-container>
           <div v-else>
             <div class="card-label">
-              {{ card.label }}
+              {{ $t(card.label) }}
             </div>
             <div class="card-value">
               {{ card.value ? card.value : "-" }} {{ card.valueUnits }}
             </div>
             <v-divider></v-divider>
-            <div v-if="card.title === 'HEALTH'" style="margin-bottom: 60px">
-              <div class="charging-cycles-title">Charging Cycles</div>
+            <div
+              v-if="card.title == 'batteryCards.titleHealth'"
+              style="margin-bottom: 60px"
+            >
+              <div class="charging-cycles-title">
+                {{ $t("batteryCards.chargingCycles") }}
+              </div>
               <BarChart :currentValue="currentValue" :maxValue="maxValue" />
             </div>
             <div v-else>
               <div class="card-second-label">
-                {{ card.secondLabel }}
+                {{ $t(card.secondLabel) }}
               </div>
               <div class="card-second-value">
                 {{ card.secondValue ? card.secondValue : "-" }}
@@ -87,10 +95,10 @@
             <DialogComponent>
               <v-icon start md icon="mdi-information-outline"></v-icon>
               <template v-slot:title>
-                {{ card.description.title }}
+                {{ $t(card.description.title) }}
               </template>
               <template v-slot:text>
-                {{ card.description.value }}
+                {{ $t(card.description.value) }}
               </template>
             </DialogComponent>
           </span>
@@ -103,6 +111,7 @@
 <script>
 import ElementChart from "./ElementChart.vue";
 import BarChart from "./BarChart.vue";
+import passportUtil from "@/utils/passportUtil.js";
 import DialogComponent from "../general/Dialog.vue";
 
 export default {
@@ -125,10 +134,10 @@ export default {
       maxValue: this.$props.data.aspect.batteryCycleLife.expectedLifetime,
       cards: [
         {
-          title: "GENERAL",
-          label: "Type",
-          secondLabel: "Model",
-          icon: "mdi-pound",
+          title: "batteryCards.titleGeneral",
+          label: "batteryCards.labelGeneral",
+          secondLabel: "batteryCards.secondLabelGeneral",
+          icon: "general",
           value: this.$props.data.aspect.batteryIdentification
             ? this.$props.data.aspect.batteryIdentification.batteryType
             : "-",
@@ -137,10 +146,10 @@ export default {
             : "-",
         },
         {
-          title: "PERFORMANCE",
-          label: "Rated Capacity",
-          secondLabel: "Original Power",
-          icon: "mdi-chart-timeline-variant-shimmer",
+          title: "batteryCards.titlePerformance",
+          label: "batteryCards.labelPerformance",
+          secondLabel: "batteryCards.secondLabelPerformance",
+          icon: "performance",
           value:
             this.$props.data.aspect.electrochemicalProperties.ratedCapacity,
           valueUnits: "kWh",
@@ -151,15 +160,15 @@ export default {
                 .originalPowerCapability
             : "-",
           description: {
-            title: "Performance",
-            value: "Description of the performance",
+            title: "batteryCards.descriptionPerformanceTitle",
+            value: "batteryCards.descriptionPerformanceValue",
           },
         },
         {
-          title: "HEALTH",
-          label: "State of Health (SoH)",
-          secondLabel: "Charging Cycles",
-          icon: "mdi-battery-plus",
+          title: "batteryCards.titleHealth",
+          label: "batteryCards.labelHealth",
+          secondLabel: "batteryCards.secondLabelHealth",
+          icon: "health",
           value: this.$props.data.aspect.stateOfBattery
             ? this.$props.data.aspect.stateOfBattery.stateOfHealth
             : "-",
@@ -168,14 +177,14 @@ export default {
             ? this.$props.data.aspect.batteryIdentification.batteryModel
             : "-",
           description: {
-            title: "Health",
-            value: "Description of the health",
+            title: "batteryCards.descriptionHealthTitle",
+            value: "batteryCards.descriptionHealthValue",
           },
         },
         {
-          title: "SUSTAINABILITY",
-          icon: "mdi-leaf",
-          secondLabel: "CO2e/kWh",
+          title: "batteryCards.titleSustainability",
+          icon: "sustainability",
+          secondLabel: "batteryCards.secondLabelSustainability",
 
           value: [
             {
@@ -208,12 +217,18 @@ export default {
           ],
           secondValue: this.$props.data.aspect.cO2FootprintTotal,
           description: {
-            title: "Sustainability",
-            value: "Description of the Sustainability",
+            title: "batteryCards.descriptionHSustainabilityTitle",
+            value: "batteryCards.descriptionSustainabilityValue",
           },
         },
       ],
     };
   },
+
+  methods: {
+    callIconFinder(icon) {
+      return passportUtil.iconFinder(icon);
+    },
+  },
 };
 </script>
diff --git a/src/components/passport/Field.vue b/src/components/passport/Field.vue
index 6d8cb4d50..17aae0311 100644
--- a/src/components/passport/Field.vue
+++ b/src/components/passport/Field.vue
@@ -65,11 +65,14 @@
     <!-- This block of code is for section 4 Parameters of the battery where we have tests and temp ranges -->
     <div v-if="tempMin || test" class="test-container">
       <span v-if="tempMin" class="test"
-        >Temp ranges:
-        <b>{{ tempMin }} {{ tempUnit }} to {{ tempMax }} {{ tempUnit }}</b>
+        >{{ $t("field.tempRange") }}
+        <b
+          >{{ tempMin }} {{ tempUnit }} {{ $t("field.to") }} {{ tempMax }}
+          {{ tempUnit }}</b
+        >
       </span>
       <span v-if="test" class="test"
-        >Reference test: <b>{{ test }}</b>
+        >{{ $t("field.referenceTest") }} <b>{{ test }}</b>
       </span>
     </div>
 
diff --git a/src/components/passport/GeneralCards.vue b/src/components/passport/GeneralCards.vue
index 1b6b95c05..80d80c05a 100644
--- a/src/components/passport/GeneralCards.vue
+++ b/src/components/passport/GeneralCards.vue
@@ -31,7 +31,7 @@
         style="padding: 6px !important"
       >
         <div class="card-container fill-height">
-          <span class="card-title">{{ card.title }} </span>
+          <span class="card-title">{{ $t(card.title) }} </span>
           <span>
             <v-icon
               class="card-icon"
@@ -43,15 +43,15 @@
           </span>
           <div>
             <div class="card-label">
-              {{ card.label }}
+              {{ $t(card.label) }}
             </div>
             <div class="card-value">
-              {{ card.value ? card.value : "-" }} {{ card.valueUnits }}
+              {{ card.value ? $t(card.value) : "-" }} {{ $t(card.valueUnits) }}
             </div>
             <v-divider></v-divider>
             <div>
               <div class="card-second-label">
-                {{ card.secondLabel }}
+                {{ $t(card.secondLabel) }}
               </div>
               <div class="card-second-value">
                 {{ card.secondValue ? card.secondValue : "-" }}
@@ -63,10 +63,10 @@
             <DialogComponent>
               <v-icon start md icon="mdi-information-outline"></v-icon>
               <template v-slot:title>
-                {{ card.description.title }}
+                {{ $t(card.description.title) }}
               </template>
               <template v-slot:text>
-                {{ card.description.value }}
+                {{ $t(card.description.value) }}
               </template>
             </DialogComponent>
           </span>
@@ -94,9 +94,9 @@ export default {
     return {
       cards: [
         {
-          title: "GENERAL",
-          label: "Product name",
-          secondLabel: "Product code",
+          title: "generalCards.titleGeneral",
+          label: "generalCards.productName",
+          secondLabel: "generalCards.productType",
           icon: "mdi-pound",
           value: this.$props.data.aspect.typology
             ? this.$props.data.aspect.typology.shortName
@@ -106,9 +106,9 @@ export default {
             : "-",
         },
         {
-          title: "MANUFACTURING",
-          label: "Manufacturer Id",
-          secondLabel: "Date of Manufacturing",
+          title: "generalCards.titleManufacturing",
+          label: "generalCards.manufacturerId",
+          secondLabel: "generalCards.dateOfManufacturing",
           icon: "mdi-chart-timeline-variant-shimmer",
           value: this.$props.data.aspect.operation.manufacturer
             ? this.$props.data.aspect.operation.manufacturer.manufacturer
@@ -117,35 +117,39 @@ export default {
             ? this.$props.data.aspect.operation.manufacturer.manufacturingDate
             : "-",
           description: {
-            title: "Manufacturing",
-            value: "Description of the manufacturing",
+            title: "generalCards.descriptionManufacturingTitle",
+            value: "generalCards.descriptionManufacturingValue",
           },
         },
         {
-          title: "ASPECT VERSION",
-          label: "Current version",
-          secondLabel: "Issued",
+          title: "generalCards.titleAspectVersion",
+          label: "generalCards.currentVersion",
+          secondLabel: "generalCards.issued",
           icon: "mdi-aspect",
           value: this.$props.data.aspect.metadata.version,
           secondValue: this.$props.data.aspect.metadata.issueDate,
           description: {
-            title: "Aspect version",
-            value: "Description of the aspect version",
+            title: "generalCards.descriptionAspectVersionTitle",
+            value: "generalCards.descriptionAspectVersionValue",
           },
         },
         {
-          title: "SUSTAINABILITY",
-          label: "Total CO2 footprint",
-          secondLabel: "Placed on market",
+
+          title: "generalCards.titleSustainability",
+          label: "generalCards.totalCo2Footprint",
+          secondLabel: "generalCards.warrantyPeriod",
           icon: "mdi-leaf",
           value: this.$props.data.aspect.sustainability["PEF"].carbon
             ? this.$props.data.aspect.sustainability["PEF"].carbon[0].value
             : "-",
-          valueUnits: "t CO2 Total",
-          secondValue: this.$props.data.aspect.commercial.placedOnMarket,
+          valueUnits: "generalCards.tCo2Total",
+          secondValue: this.$props.data.aspect.commercial.warranty,
+          secondValueUnits: this.$props.data.aspect.commercial.warranty
+            ? "generalCards.months"
+            : "",
           description: {
-            title: "Sustainability",
-            value: "Description of the Sustainability",
+            title: "generalCards.descriptionSustainabilityTitle",
+            value: "generalCards.descriptionSustainabilityValue",
           },
         },
       ],
diff --git a/src/components/passport/PassportHeader.vue b/src/components/passport/PassportHeader.vue
index acf1d7466..245dfb8e4 100644
--- a/src/components/passport/PassportHeader.vue
+++ b/src/components/passport/PassportHeader.vue
@@ -32,7 +32,7 @@
       style="border: 2px solid; text-transform: initial"
     >
       <v-icon class="icon" start md icon="mdi-arrow-left"></v-icon>
-      Back
+      {{ $t("passportHeader.backBtn") }}
     </v-btn>
 
     <div class="id-wrapper">
diff --git a/src/components/passport/Section.vue b/src/components/passport/Section.vue
index 2c9e72b4d..a77bce3f1 100644
--- a/src/components/passport/Section.vue
+++ b/src/components/passport/Section.vue
@@ -1,127 +1,127 @@
-<!--
-  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>
-    <SectionHeader :title="title" @click="toggle = !toggle" />
-    <div class="section-content" :class="[toggle ? 'hidden' : '']">
-      <slot>Sorry, no content</slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import SectionHeader from "../general/SectionHeader.vue";
-
-export default {
-  name: "SectionComponent",
-  components: {
-    SectionHeader,
-  },
-  props: {
-    title: { type: String, default: "" },
-  },
-  data() {
-    return {
-      toggle: false,
-    };
-  },
-};
-</script>
-
-
-<style scoped>
-.section-content {
-  width: 100%;
-  border: solid 1px #b3cb2d;
-  border-radius: 0 0 4px 4px;
-  background-color: #fff;
-  margin-bottom: 50px;
-}
-
-.sub-section-container {
-  display: flex;
-  flex-wrap: wrap;
-  border-bottom: solid 1px #edefe5;
-}
-
-.sub-title {
-  font-weight: bold;
-  font-size: 20px;
-  color: #c6cca3;
-}
-
-.sub-title-container {
-  padding: 22px 40px 0 40px;
-  width: 100%;
-}
-
-.list-container {
-  width: 33%;
-  padding: 0 0 22px 40px;
-}
-
-.list-label {
-  padding: 22px 0 10px 0;
-  font-size: 12px;
-  color: #777777;
-}
-
-ul {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-}
-
-li {
-  margin-left: 20px;
-  font-weight: bold;
-}
-
-.hidden {
-  display: none;
-}
-
-@media (max-width: 750px) {
-  .section-content {
-    border: none;
-  }
-
-  .section-content {
-    margin-bottom: 0;
-  }
-
-  .list-container {
-    width: 100%;
-    padding-left: 50px;
-  }
-
-  .section-content {
-    border: none;
-    margin-bottom: 0;
-  }
-
-  .sub-title-container {
-    padding: 22px 40px 0 30px;
-  }
-}
-</style>
+<!--
+  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>
+    <SectionHeader :title="title" @click="toggle = !toggle" />
+    <div class="section-content" :class="[toggle ? 'hidden' : '']">
+      <slot>{{ $t("section.noContent") }}</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import SectionHeader from "../general/SectionHeader.vue";
+
+export default {
+  name: "SectionComponent",
+  components: {
+    SectionHeader,
+  },
+  props: {
+    title: { type: String, default: "" },
+  },
+  data() {
+    return {
+      toggle: false,
+    };
+  },
+};
+</script>
+
+
+<style scoped>
+.section-content {
+  width: 100%;
+  border: solid 1px #b3cb2d;
+  border-radius: 0 0 4px 4px;
+  background-color: #fff;
+  margin-bottom: 50px;
+}
+
+.sub-section-container {
+  display: flex;
+  flex-wrap: wrap;
+  border-bottom: solid 1px #edefe5;
+}
+
+.sub-title {
+  font-weight: bold;
+  font-size: 20px;
+  color: #c6cca3;
+}
+
+.sub-title-container {
+  padding: 22px 40px 0 40px;
+  width: 100%;
+}
+
+.list-container {
+  width: 33%;
+  padding: 0 0 22px 40px;
+}
+
+.list-label {
+  padding: 22px 0 10px 0;
+  font-size: 12px;
+  color: #777777;
+}
+
+ul {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+li {
+  margin-left: 20px;
+  font-weight: bold;
+}
+
+.hidden {
+  display: none;
+}
+
+@media (max-width: 750px) {
+  .section-content {
+    border: none;
+  }
+
+  .section-content {
+    margin-bottom: 0;
+  }
+
+  .list-container {
+    width: 100%;
+    padding-left: 50px;
+  }
+
+  .section-content {
+    border: none;
+    margin-bottom: 0;
+  }
+
+  .sub-title-container {
+    padding: 22px 40px 0 30px;
+  }
+}
+</style>
diff --git a/src/components/passport/sections/BatteryComposition.vue b/src/components/passport/sections/BatteryComposition.vue
index 8516804a4..dcaaa8f9a 100644
--- a/src/components/passport/sections/BatteryComposition.vue
+++ b/src/components/passport/sections/BatteryComposition.vue
@@ -34,12 +34,12 @@
             data-cy="composition"
             icon="mdi-newspaper-variant-outline"
             :attributes-list="propsData.compositionOfBattery"
-            label="Main Battery Composites"
+            :label="$t('sections.batteryComposition.batteryComposites')"
             style="background: #f9f9f9; min-width: 300px"
           />
           <Field
             icon="mdi-select-all"
-            label="Critical raw materials"
+            :label="$t('sections.batteryComposition.criticalRawMaterials')"
             :value="propsData.criticalRawMaterials"
             style="min-width: 300px"
           />
diff --git a/src/components/passport/sections/CellChemistry.vue b/src/components/passport/sections/CellChemistry.vue
index 48f463c4a..5d94bf71f 100644
--- a/src/components/passport/sections/CellChemistry.vue
+++ b/src/components/passport/sections/CellChemistry.vue
@@ -28,7 +28,7 @@
           <AttributeField
             icon="mdi-battery-plus"
             :attributes-list="electrolyteComposition"
-            label="Composition of electrolyte"
+            :label="$t('sections.cellChemistry.electrolyteComposition')"
             data-cy="electrolyte-composition"
             style="margin-bottom: 12px; amx"
           />
@@ -49,7 +49,7 @@
             class="element-chart-label"
             style="margin-left: -5px; margin-bottom: 15px"
           >
-            Recyclate Content Active Materials
+            {{ $t("sections.cellChemistry.recyclateContent") }}
           </div>
           <ElementChart :data="propsData" />
         </v-col>
diff --git a/src/components/passport/sections/Characteristics.vue b/src/components/passport/sections/Characteristics.vue
index b56845e7d..2f9eeaf90 100644
--- a/src/components/passport/sections/Characteristics.vue
+++ b/src/components/passport/sections/Characteristics.vue
@@ -26,63 +26,20 @@
       <v-row class="section">
         <template v-if="propsData.physicalDimension">
           <v-col sm="12" md="4" class="pa-0 ma-0">
-            <div class="element-chart-label">Physical dimension</div>
-            <template v-if="propsData.physicalDimension.grossWeight">
-              <Field
-                :icon="callIconFinder('grossWeight')"
-                label="Gross weight"
-                :value="propsData.physicalDimension.grossWeight.value"
-                :unit="propsData.physicalDimension.grossWeight.unit"
-              />
-            </template>
-            <template v-if="propsData.physicalDimension.weightOrVolume.left">
-              <Field
-                :icon="callIconFinder('weightOrVolume')"
-                label="Weight or volume"
-                :value="propsData.physicalDimension.weightOrVolume.left.value"
-                :unit="propsData.physicalDimension.weightOrVolume.left.unit"
-              />
-            </template>
-            <template v-if="propsData.physicalDimension.diameter">
-              <Field
-                :icon="callIconFinder('diameter')"
-                label="Diameter"
-                :value="propsData.physicalDimension.diameter.value"
-                :unit="propsData.physicalDimension.diameter.unit"
-              />
-            </template>
-            <template v-if="propsData.physicalDimension.grossVolume">
-              <Field
-                :icon="callIconFinder('grossVolume')"
-                label="Gross volume"
-                :value="propsData.physicalDimension.grossVolume.value"
-                :unit="propsData.physicalDimension.grossVolume.unit"
-              />
-            </template>
-            <template v-if="propsData.physicalDimension.width">
-              <Field
-                :icon="callIconFinder('width')"
-                label="Width"
-                :value="propsData.physicalDimension.width.value"
-                :unit="propsData.physicalDimension.width.unit"
-              />
-            </template>
-            <template v-if="propsData.physicalDimension.length">
-              <Field
-                :icon="callIconFinder('length')"
-                label="Length"
-                :value="propsData.physicalDimension.length.value"
-                :unit="propsData.physicalDimension.length.unit"
-              />
-            </template>
-            <template v-if="propsData.physicalDimension.height">
-              <Field
-                :icon="callIconFinder('height')"
-                label="Height"
-                :value="propsData.physicalDimension.height.value"
-                :unit="propsData.physicalDimension.height.unit"
-              />
-            </template>
+            <Field
+              icon="mdi-image-size-select-small"
+              :label="$t('sections.characteristics.physicalDimensionsProperty')"
+              :width="propsData.physicalDimensionsProperty.width"
+              :length="propsData.physicalDimensionsProperty.length"
+              :height="propsData.physicalDimensionsProperty.height"
+            />
+            <Field
+              icon="mdi-arrow-down-circle-outline"
+              :label="$t('sections.characteristics.weight')"
+              :value="propsData.physicalDimensionsProperty.weight"
+              :unit="propsData.physicalDimensionsProperty.unit"
+            />
+
           </v-col>
         </template>
         <template v-if="propsData.lifespan">
diff --git a/src/components/passport/sections/Components.vue b/src/components/passport/sections/Components.vue
index a69b2adfd..a4d104f62 100644
--- a/src/components/passport/sections/Components.vue
+++ b/src/components/passport/sections/Components.vue
@@ -25,7 +25,7 @@
     <v-container class="ma-0">
       <template v-if="loading || infoBar">
         <div class="info-bar" :style="`background-color: ${infoColor}`">
-          {{ infoBarMessage }}
+          {{ $t(infoBarMessage) }}
         </div>
       </template>
       <RecursiveTree
@@ -57,8 +57,7 @@ export default {
       auth: inject("authentication"),
       loading: false,
       infoBar: false,
-      infoBarMessage:
-        "The search for child components started, this may take a while...",
+      infoBarMessage: "sections.components.searchForChild",
       infoColor: "#0F71CB",
       backendService: null,
       status: 204,
@@ -120,18 +119,16 @@ export default {
           this.invokeIrsData();
           this.infoBar = false;
         } else if (response.status == 404) {
-          this.infoBarMessage = "No child components found";
+          this.infoBarMessage = "sections.components.noChild";
           this.infoColor = "#FFA000";
         } else {
-          this.infoBarMessage =
-            "Something went wrong while searching for child components";
+          this.infoBarMessage = "sections.components.somethingWentWrong";
           this.infoColor = "#d32f2f";
           this.status = 500;
         }
       } catch (error) {
         console.error("API call failed:", error);
-        this.infoBarMessage =
-          "Something went wrong while searching for child components";
+        this.infoBarMessage = "sections.components.somethingWentWrong";
         this.infoColor = "#d32f2f";
         this.status = 500;
       }
diff --git a/src/components/passport/sections/ElectrochemicalProperties.vue b/src/components/passport/sections/ElectrochemicalProperties.vue
index 1bfbc3f36..9ed4ea6ab 100644
--- a/src/components/passport/sections/ElectrochemicalProperties.vue
+++ b/src/components/passport/sections/ElectrochemicalProperties.vue
@@ -25,39 +25,53 @@
     <v-container class="ma-0">
       <v-row class="section">
         <v-col sm="12" md="2" class="pa-0 ma-0">
-          <div class="element-chart-label">Capacity</div>
+          <div class="element-chart-label">
+            {{ $t("sections.electrochemicalProperties.capacity") }}
+          </div>
           <Field
             icon="mdi-image-size-select-small"
             data-cy="remaining-capacity"
-            label="Rated capacity"
+            :label="$t('sections.electrochemicalProperties.ratedCapacity')"
             unit="kWh"
             :value="propsData.ratedCapacity"
           />
           <Field
             icon="mdi-arrow-down-circle-outline"
-            label="Capacity fade"
+            :label="$t('sections.electrochemicalProperties.capacityFade')"
             unit="%"
             :value="propsData.capacityFade"
           />
           <Field
             icon="mdi-arrow-bottom-right-thin-circle-outline"
-            label="Capacity threshold exhaustion"
+            :label="
+              $t(
+                'sections.electrochemicalProperties.capacityThresholdExhaustion'
+              )
+            "
             unit="%"
             :value="propsData.capacityThresholdExhaustion"
           />
         </v-col>
         <template v-if="propsData.batteryPower">
           <v-col sm="12" md="2" class="pa-0 ma-0">
-            <div class="element-chart-label">Efficiency</div>
+            <div class="element-chart-label">
+              {{ $t("sections.electrochemicalProperties.efficiency") }}
+            </div>
             <Field
               icon="mdi-lightning-bolt-outline"
-              label="Original power capability"
+              :label="
+                $t('sections.electrochemicalProperties.originalPowerCapability')
+              "
               unit="kW"
               :value="propsData.batteryPower.originalPowerCapability"
             />
             <Field
               icon="mdi-arrow-bottom-right-thin-circle-outline"
-              label="Original power capability limits"
+              :label="
+                $t(
+                  'sections.electrochemicalProperties.originalPowerCapabilityLimits'
+                )
+              "
               unit="kW"
               :value="propsData.batteryPower.originalPowerCapabilityLimits"
             />
@@ -75,14 +89,18 @@
             <template v-if="propsData.batteryPower">
               <Field
                 icon="mdi-battery"
-                label="Maximum allowed battery power (MABP)"
+                :label="
+                  $t(
+                    'sections.electrochemicalProperties.maximumAllowedBatteryPower'
+                  )
+                "
                 unit="kW"
                 :value="propsData.batteryPower.maximumAllowedBatteryPower"
               />
             </template>
             <Field
               icon="mdi-battery"
-              label="Ratio MABE vs. MABP"
+              :label="$t('MABEvsMABP')"
               unit="%"
               :value="
                 propsData.ratioMaximumAllowedBatteryPowerAndMaximumAllowedBatteryEnergy
@@ -95,19 +113,27 @@
             <div class="element-chart-label"></div>
             <Field
               icon="mdi-battery"
-              label="Power capability at 20 charge"
+              :label="
+                $t(
+                  'sections.electrochemicalProperties.powerCapabilityAt20Charge'
+                )
+              "
               unit="%"
               :value="propsData.batteryPower.powerCapabilityAt20Charge"
             />
             <Field
               icon="mdi-battery"
-              label="Power capability at 80 charge"
+              :label="
+                $t(
+                  'sections.electrochemicalProperties.powerCapabilityAt80Charge'
+                )
+              "
               unit="%"
               :value="propsData.batteryPower.powerCapabilityAt80Charge"
             />
             <Field
               icon="mdi-battery"
-              label="Power fade"
+              :label="$t('sections.electrochemicalProperties.powerFade')"
               unit="%"
               :value="propsData.batteryPower.powerFade"
             />
@@ -115,17 +141,25 @@
         </template>
         <template v-if="propsData.internalResistance">
           <v-col sm="12" md="2" class="pa-0 ma-0">
-            <div class="element-chart-label">Resistance</div>
+            <div class="element-chart-label">
+              {{ $t("sections.electrochemicalProperties.resistance") }}
+            </div>
 
             <Field
               icon="mdi-omega"
-              label="Pack internal resistance"
+              :label="
+                $t('sections.electrochemicalProperties.packInternalResistance')
+              "
               unit="Ω"
               :value="propsData.internalResistance.packInternalResistance"
             />
             <Field
               icon="mdi-arrow-up"
-              label="Pack internal resistance increase"
+              :label="
+                $t(
+                  'sections.electrochemicalProperties.packInternalResistanceIncrease'
+                )
+              "
               unit="%"
               :value="
                 propsData.internalResistance.packInternalResistanceIncrease
@@ -133,7 +167,9 @@
             />
             <Field
               icon="mdi-table-split-cell"
-              label="Cell internal resistance"
+              :label="
+                $t('sections.electrochemicalProperties.cellInternalResistance')
+              "
               unit="Ω"
               :value="propsData.internalResistance.cellInternalResistance"
             />
@@ -141,22 +177,24 @@
         </template>
         <template v-if="propsData.batteryVoltage">
           <v-col sm="12" md="2" class="pa-0 ma-0">
-            <div class="element-chart-label">Voltage</div>
+            <div class="element-chart-label">
+              {{ $t("sections.electrochemicalProperties.voltage") }}
+            </div>
             <Field
               icon="mdi-lightning-bolt-outline"
-              label="Nominal voltage"
+              :label="$t('sections.electrochemicalProperties.nominalVoltage')"
               unit="V"
               :value="propsData.batteryVoltage.nominalVoltage"
             />
             <Field
               icon="mdi-arrow-down-circle-outline"
-              label="Max voltage"
+              :label="$t('sections.electrochemicalProperties.maxVoltage')"
               unit="V"
               :value="propsData.batteryVoltage.maxVoltage"
             />
             <Field
               icon="mdi-arrow-down-circle-outline"
-              label="Min voltage"
+              :label="$t('sections.electrochemicalProperties.minVoltage')"
               unit="V"
               :value="propsData.batteryVoltage.minVoltage"
             />
diff --git a/src/components/passport/sections/Exchange.vue b/src/components/passport/sections/Exchange.vue
index 278fe4390..d85415953 100644
--- a/src/components/passport/sections/Exchange.vue
+++ b/src/components/passport/sections/Exchange.vue
@@ -1,353 +1,361 @@
-<!--
-  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">
-        <template v-if="propsData.contract">
-          <v-col sm="12" md="4" class="pa-0 ma-0">
-            <div class="element-chart-label">Contract</div>
-            <Field
-              icon="mdi-file-swap-outline"
-              label="ID"
-              :value="propsData.contract['@id']"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Type"
-              :value="propsData.contract['@type']"
-            />
-            <DialogComponent class="field-dialog">
-              <Field
-                info
-                icon="mdi-file-swap-outline"
-                label="Policy ID"
-                :value="propsData.contract['odrl:hasPolicy']['@id']"
-              />
-              <template v-slot:title>
-                <h3>Policy</h3>
-              </template>
-              <template v-slot:text>
-                <RecursiveComponent
-                  :jsonData="propsData.contract['odrl:hasPolicy']"
-                />
-              </template>
-            </DialogComponent>
-            <DialogComponent class="field-dialog">
-              <Field
-                info
-                icon="mdi-file-swap-outline"
-                label="Distribution"
-                value="Distribution list"
-              />
-              <template v-slot:title>
-                <h3>Distribution</h3>
-              </template>
-              <template v-slot:text>
-                <RecursiveComponent
-                  :jsonData="propsData.contract['dcat:distribution']"
-                />
-              </template>
-            </DialogComponent>
-            <Field
-              icon="mdi-file-swap-outline"
-              label="EDC description"
-              :value="propsData.contract['edc:description']"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="EDC ID"
-              :value="propsData.contract['edc:id']"
-            />
-          </v-col>
-        </template>
-
-        <template v-if="propsData.negotiation">
-          <v-col sm="12" md="4" class="pa-0 ma-0">
-            <div class="element-chart-label">Negotiation</div>
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Type"
-              :value="propsData.negotiation.get.response['@type']"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="ID"
-              :value="propsData.negotiation.get.response['@id']"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="EDC Type"
-              :value="propsData.negotiation.get.response['edc:type']"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="EDC protocol"
-              :value="propsData.negotiation.get.response['edc:protocol']"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="EDC state"
-              :value="propsData.negotiation.get.response['edc:state']"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="EDC counter party address"
-              :value="
-                propsData.negotiation.get.response['edc:counterPartyAddress']
-              "
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="EDC contract agreement ID"
-              :value="
-                propsData.negotiation.get.response['edc:contractAgreementId']
-              "
-            />
-            <DialogComponent class="field-dialog">
-              <Field
-                info
-                icon="mdi-file-swap-outline"
-                label="Context"
-                :value="propsData.negotiation.get.response['@context'].dct"
-              />
-              <template v-slot:title>
-                <h3>Context</h3>
-              </template>
-              <template v-slot:text>
-                <RecursiveComponent
-                  :jsonData="propsData.negotiation.get.response['@context']"
-                />
-              </template>
-            </DialogComponent>
-          </v-col>
-        </template>
-        <template v-if="propsData.negotiationRequest">
-          <v-col sm="12" md="2" class="pa-0 ma-0">
-            <div class="element-chart-label">Negotiation request</div>
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Type"
-              :value="propsData.negotiation.init.request['@type']"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Connector address"
-              :value="propsData.negotiation.init.request.connectorAddress"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Protocol"
-              :value="propsData.negotiation.init.request.protocol"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Connector ID"
-              :value="propsData.negotiation.init.request.connectorId"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Provider ID"
-              :value="propsData.negotiation.init.request.providerId"
-            />
-            <DialogComponent class="field-dialog">
-              <Field
-                info
-                icon="mdi-file-swap-outline"
-                label="Offer"
-                value="Offer detail"
-              />
-              <template v-slot:title>
-                <h3>Offer</h3>
-              </template>
-              <template v-slot:text>
-                <RecursiveComponent
-                  :jsonData="propsData.negotiation.request.init.offer"
-                />
-              </template>
-            </DialogComponent>
-          </v-col>
-        </template>
-        <template v-if="propsData.transfer">
-          <v-col sm="12" md="4" class="pa-0 ma-0">
-            <div class="element-chart-label">Transfer</div>
-
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Transfer ID"
-              :value="propsData.transfer.get.response['@id']"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Transfer type"
-              :value="propsData.transfer.get.response['@type']"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Transfer state"
-              :value="propsData.transfer.get.response['edc:state']"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="EDC timestamp"
-              :value="
-                formattedDate(
-                  propsData.transfer.get.response['edc:stateTimestamp']
-                )
-              "
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="EDC type"
-              :value="propsData.transfer.get.response['edc:type']"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Transfer type"
-              :value="propsData.transfer.get.response['@type']"
-            />
-            <DialogComponent>
-              <Field
-                info
-                icon="mdi-file-swap-outline"
-                label="EDC data request ID"
-                :value="
-                  propsData.transfer.get.response['edc:dataRequest']['@id']
-                "
-              />
-              <template v-slot:title>
-                <h3>EDC data request</h3>
-              </template>
-              <template v-slot:text>
-                <RecursiveComponent
-                  :jsonData="propsData.transfer.get.response['edc:dataRequest']"
-                />
-              </template>
-            </DialogComponent>
-            <Field
-              icon="mdi-file-swap-outline"
-              label="EDC receiver http endpoint"
-              :value="
-                propsData.transfer.get.response['edc:receiverHttpEndpoint']
-              "
-            />
-          </v-col>
-        </template>
-        <template v-if="propsData.transferRequest">
-          <v-col sm="12" md="2" class="pa-0 ma-0">
-            <div class="element-chart-label">Transfer request</div>
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Asset ID"
-              :value="propsData.transfer.init.request.assetId"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Connector address"
-              :value="propsData.transfer.init.request.connectorAddress"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Contract Id"
-              :value="propsData.transfer.init.request.contractId"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Data destination"
-              :value="
-                propsData.transfer.init.request.dataDestination.properties.type
-              "
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Reciver http endpoint"
-              :value="
-                propsData.transfer.init.request.privateProperties
-                  .receiverHttpEndpoint
-              "
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Protocol"
-              :value="propsData.transfer.init.request.protocol"
-            />
-            <Field
-              icon="mdi-file-swap-outline"
-              label="Content type"
-              :value="propsData.transfer.init.request.transferType.contentType"
-            />
-          </v-col>
-        </template>
-      </v-row>
-    </v-container>
-  </div>
-</template>
-
-<script>
-import Field from "../Field.vue";
-import DialogComponent from "../../general/Dialog.vue";
-import RecursiveComponent from "../../general/RecursiveComponent.vue";
-
-export default {
-  name: "ContractExchange",
-  components: {
-    Field,
-    DialogComponent,
-    RecursiveComponent,
-  },
-  props: {
-    data: {
-      type: Object,
-      default: Object,
-    },
-  },
-  data() {
-    return {
-      propsData: this.$props.data.metadata,
-      exampleTimestamp: 1666358400,
-    };
-  },
-  methods: {
-    formattedDate(timestamp) {
-      const date = new Date(timestamp);
-      const formattedDate = date.toLocaleDateString("en-GB", {
-        day: "2-digit",
-        month: "2-digit",
-        year: "numeric",
-      });
-      return formattedDate;
-    },
-    arrayName(array) {
-      return Object.keys(array)[0];
-    },
-    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(" ");
-    },
-  },
-};
-</script>
+<!--
+  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">
+        <template v-if="propsData.contract">
+          <v-col sm="12" md="4" class="pa-0 ma-0">
+            <div class="element-chart-label">
+              {{ $t("sections.exchange.contract") }}
+            </div>
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.id')"
+              :value="propsData.contract['@id']"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.type')"
+              :value="propsData.contract['@type']"
+            />
+            <DialogComponent class="field-dialog">
+              <Field
+                info
+                icon="mdi-file-swap-outline"
+                :label="$t('sections.exchange.policyId')"
+                :value="propsData.contract['odrl:hasPolicy']['@id']"
+              />
+              <template v-slot:title>
+                <h3>{{ $t("sections.exchange.policy") }}</h3>
+              </template>
+              <template v-slot:text>
+                <RecursiveComponent
+                  :jsonData="propsData.contract['odrl:hasPolicy']"
+                />
+              </template>
+            </DialogComponent>
+            <DialogComponent class="field-dialog">
+              <Field
+                info
+                icon="mdi-file-swap-outline"
+                :label="$t('sections.exchange.distribution')"
+                :value="$t('sections.exchange.distributionList')"
+              />
+              <template v-slot:title>
+                <h3>{{ $t("sections.exchange.distribution") }}</h3>
+              </template>
+              <template v-slot:text>
+                <RecursiveComponent
+                  :jsonData="propsData.contract['dcat:distribution']"
+                />
+              </template>
+            </DialogComponent>
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.edcDescription')"
+              :value="propsData.contract['edc:description']"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.edcId')"
+              :value="propsData.contract['edc:id']"
+            />
+          </v-col>
+        </template>
+        <template v-if="propsData.negotiation">
+          <v-col sm="12" md="4" class="pa-0 ma-0">
+            <div class="element-chart-label">
+              {{ $t("sections.exchange.negotiation") }}
+            </div>
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.type')"
+              :value="propsData.negotiation.get.response['@type']"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.id')"
+              :value="propsData.negotiation.get.response['@id']"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.edcType')"
+              :value="propsData.negotiation.get.response['edc:type']"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.edcProtocol')"
+              :value="propsData.negotiation.get.response['edc:protocol']"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.edcState')"
+              :value="propsData.negotiation.get.response['edc:state']"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.edcCounterPartyAddress')"
+              :value="
+                propsData.negotiation.get.response['edc:counterPartyAddress']
+              "
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.edcContractAgreementId')"
+              :value="
+                propsData.negotiation.get.response['edc:contractAgreementId']
+              "
+            />
+            <DialogComponent class="field-dialog">
+              <Field
+                info
+                icon="mdi-file-swap-outline"
+                :label="$t('sections.exchange.context')"
+                :value="propsData.negotiation.get.response['@context'].dct"
+              />
+              <template v-slot:title>
+                <h3>{{ $t("sections.exchange.context") }}</h3>
+              </template>
+              <template v-slot:text>
+                <RecursiveComponent
+                  :jsonData="propsData.negotiation.get.response['@context']"
+                />
+              </template>
+            </DialogComponent>
+          </v-col>
+        </template>
+        <template v-if="propsData.negotiationRequest">
+          <v-col sm="12" md="2" class="pa-0 ma-0">
+            <div class="element-chart-label">
+              {{ $t("sections.exchange.negotiationRequest") }}
+            </div>
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.type')"
+              :value="propsData.negotiation.init.request['@type']"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              label="Connector address"
+              :value="propsData.negotiation.init.request.connectorAddress"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.protocol')"
+              :value="propsData.negotiation.init.request.protocol"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.connectorId')"
+              :value="propsData.negotiation.init.request.connectorId"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.providerId')"
+              :value="propsData.negotiation.init.request.providerId"
+            />
+            <DialogComponent class="field-dialog">
+              <Field
+                info
+                icon="mdi-file-swap-outline"
+                :label="$t('sections.exchange.offer')"
+                :value="$t('sections.exchange.offerDetail')"
+              />
+              <template v-slot:title>
+                <h3>{{ $t("sections.exchange.offer") }}</h3>
+              </template>
+              <template v-slot:text>
+                <RecursiveComponent
+                  :jsonData="propsData.negotiation.request.init.offer"
+                />
+              </template>
+            </DialogComponent>
+          </v-col>
+        </template>
+        <template v-if="propsData.transfer">
+          <v-col sm="12" md="4" class="pa-0 ma-0">
+            <div class="element-chart-label">
+              {{ $t("sections.exchange.transfer") }}
+            </div>
+
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.transferId')"
+              :value="propsData.transfer.get.response['@id']"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.transferType')"
+              :value="propsData.transfer.get.response['@type']"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.transferState')"
+              :value="propsData.transfer.get.response['edc:state']"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.edcTimestamp')"
+              :value="
+                formattedDate(
+                  propsData.transfer.get.response['edc:stateTimestamp']
+                )
+              "
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.edcType')"
+              :value="propsData.transfer.get.response['edc:type']"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.transferType')"
+              :value="propsData.transfer.get.response['@type']"
+            />
+            <DialogComponent>
+              <Field
+                info
+                icon="mdi-file-swap-outline"
+                :label="$t('sections.exchange.edcDataRequestId')"
+                :value="
+                  propsData.transfer.get.response['edc:dataRequest']['@id']
+                "
+              />
+              <template v-slot:title>
+                <h3>{{ $t("sections.exchange.edcDataRequest") }}</h3>
+              </template>
+              <template v-slot:text>
+                <RecursiveComponent
+                  :jsonData="propsData.transfer.get.response['edc:dataRequest']"
+                />
+              </template>
+            </DialogComponent>
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.edcReceiverHttpEndpoint')"
+              :value="
+                propsData.transfer.get.response['edc:receiverHttpEndpoint']
+              "
+            />
+          </v-col>
+        </template>
+        <template v-if="propsData.transferRequest">
+          <v-col sm="12" md="2" class="pa-0 ma-0">
+            <div class="element-chart-label">
+              {{ $t("sections.exchange.transferRequest") }}
+            </div>
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.assetId')"
+              :value="propsData.transfer.init.request.assetId"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.connectorAddress')"
+              :value="propsData.transfer.init.request.connectorAddress"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.contractId')"
+              :value="propsData.transfer.init.request.contractId"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.dataDestination')"
+              :value="
+                propsData.transfer.init.request.dataDestination.properties.type
+              "
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.reciverHttpEndpoint')"
+              :value="
+                propsData.transfer.init.request.privateProperties
+                  .receiverHttpEndpoint
+              "
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.protocol')"
+              :value="propsData.transfer.init.request.protocol"
+            />
+            <Field
+              icon="mdi-file-swap-outline"
+              :label="$t('sections.exchange.contentType')"
+              :value="propsData.transfer.init.request.transferType.contentType"
+            />
+          </v-col>
+        </template>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import Field from "../Field.vue";
+import DialogComponent from "../../general/Dialog.vue";
+import RecursiveComponent from "../../general/RecursiveComponent.vue";
+
+export default {
+  name: "ContractExchange",
+  components: {
+    Field,
+    DialogComponent,
+    RecursiveComponent,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: Object,
+    },
+  },
+  data() {
+    return {
+      propsData: this.$props.data.metadata,
+    };
+  },
+  methods: {
+    formattedDate(timestamp) {
+      const date = new Date(timestamp);
+      const formattedDate = date.toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+      });
+      return formattedDate;
+    },
+    arrayName(array) {
+      return Object.keys(array)[0];
+    },
+    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(" ");
+    },
+  },
+};
+</script>
diff --git a/src/components/passport/sections/GeneralInformation.vue b/src/components/passport/sections/GeneralInformation.vue
index 428ebbb30..c2441f829 100644
--- a/src/components/passport/sections/GeneralInformation.vue
+++ b/src/components/passport/sections/GeneralInformation.vue
@@ -99,14 +99,18 @@
                 info
                 data-cy="battery-id"
                 icon="mdi-fingerprint"
-                label="Battery ID (DMC)"
+                :label="$t('sections.generalInformation.batteryId')"
                 :value="propsData.batteryIdentification.batteryIDDMCCode"
               />
               <template v-slot:title>
-                {{ descriptions.BatteryId.title }}
+                {{
+                  $t("sections.generalInformation.batteryIdDescriptionTitle")
+                }}
               </template>
               <template v-slot:text>
-                {{ descriptions.BatteryId.value }}
+                {{
+                  $t("sections.generalInformation.batteryIdDescriptionValue")
+                }}
               </template>
             </DialogComponent>
           </v-col>
@@ -116,7 +120,7 @@
         <template v-if="propsData.batteryIdentification">
           <v-col sm="12" md="4" class="pa-0 ma-0">
             <Field
-              label="Battery Type"
+              :label="$t('sections.generalInformation.batteryType')"
               icon="mdi-battery-unknown"
               :value="propsData.batteryIdentification.batteryType"
             />
@@ -124,7 +128,7 @@
           <v-col sm="12" md="5" class="pa-0 ma-0">
             <Field
               icon="mdi-battery"
-              label="Battery Model"
+              :label="$t('sections.generalInformation.batteryModel')"
               :value="propsData.batteryIdentification.batteryModel"
             />
           </v-col>
@@ -133,7 +137,7 @@
           <v-col sm="12" md="3" class="pa-0 ma-0">
             <Field
               icon="mdi-license"
-              label="Warranty"
+              :label="$t('sections.generalInformation.warranty')"
               :value="propsData.warrantyPeriod"
               unit="month"
             />
@@ -145,7 +149,7 @@
           <v-col sm="12" md="9" class="pa-0 ma-0">
             <Field
               icon="mdi-ruler"
-              label="Dimensions of the battery"
+              :label="$t('sections.generalInformation.dimensions')"
               :height="propsData.physicalDimensions.height"
               :length="propsData.physicalDimensions.length"
               unit="mm"
@@ -155,7 +159,7 @@
           <v-col sm="12" md="3" class="pa-0 ma-0">
             <Field
               icon="mdi-scale"
-              label="Weight"
+              :label="$t('sections.generalInformation.weight')"
               unit="kg"
               :value="propsData.physicalDimensions.weight"
             />
@@ -170,7 +174,7 @@
             <Field
               icon="mdi-calendar-range"
               style="background: #f9f9f9"
-              label="Date of Manufacture"
+              :label="$t('sections.generalInformation.dateOfManufacturing')"
               :day="propsData.manufacturing.dateOfManufacturing"
             />
           </v-col>
@@ -186,7 +190,7 @@
             <Field
               icon="mdi-map-marker-outline"
               style="background: #f9f9f9"
-              label="Place of Manufacturing"
+              :label="$t('sections.generalInformation.placeOfManufacturing')"
               :value="propsData.manufacturing.address.locality.value"
             />
           </v-col>
@@ -198,70 +202,59 @@
             <Field
               style="background: #f9f9f9"
               icon="mdi-calendar-range"
-              label="Date of placing on the market"
+              :label="$t('sections.generalInformation.datePlacedOnMarket')"
               :day="propsData.datePlacedOnMarket"
             />
           </v-col>
         </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">
+    <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
-              icon="mdi-molecule-co2"
-              label="CO2 Footprint"
-              :value="propsData.cO2FootprintTotal"
-              unit="CO2e/kWh"
+              style="min-height: 168px"
+              icon="mdi-factory"
+              :label="$t('sections.generalInformation.manufacturerInformation')"
+              :city="propsData.manufacturer.address.locality.value"
+              :country="propsData.manufacturer.address.country.shortName"
+              :postal="propsData.manufacturer.address.postCode.value"
+              :value="propsData.manufacturer.name"
             />
           </v-col>
-        </v-row>
-      </v-container>
-    </template>
+        </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="$t('sections.generalInformation.manufacturerContact')"
+              :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 v-if="propsData.manufacturer" md="12" class="pa-0 ma-0">
+          <Field
+            icon="mdi-molecule-co2"
+            :label="$t('sections.generalInformation.cO2FootprintTotal')"
+            :value="propsData.cO2FootprintTotal"
+            unit="CO2e/kWh"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
 
 <script>
 import Field from "../Field.vue";
 import DialogComponent from "../../general/Dialog.vue";
-import descriptions from "../../../config/templates/descriptions.json";
 
 export default {
   name: "GeneralInformation",
@@ -278,7 +271,6 @@ export default {
 
   data() {
     return {
-      descriptions: descriptions,
       propsData: this.$props.data.aspect,
     };
   },
diff --git a/src/components/passport/sections/Serialization.vue b/src/components/passport/sections/Serialization.vue
index 725035f59..29a1047bd 100644
--- a/src/components/passport/sections/Serialization.vue
+++ b/src/components/passport/sections/Serialization.vue
@@ -26,30 +26,34 @@
       <v-row class="section">
         <template v-if="propsData.manufacturingInformation">
           <v-col sm="12" md="4" class="pa-0 ma-0">
-            <div class="element-chart-label">Manufacturing information</div>
+            <div class="element-chart-label">
+              {{ $t("sections.serialization.manufacturingInformation") }}
+            </div>
             <Field
               icon="mdi-image-size-select-small"
-              label="Date"
+              :label="$t('sections.serialization.date')"
               :value="propsData.manufacturingInformation.date"
             />
             <Field
               icon="mdi-arrow-down-circle-outline"
-              label="Country"
+              :label="$t('sections.serialization.country')"
               :value="propsData.manufacturingInformation.country"
             />
           </v-col>
         </template>
         <template v-if="propsData.registration">
           <v-col sm="12" md="4" class="pa-0 ma-0">
-            <div class="element-chart-label">Registration</div>
+            <div class="element-chart-label">
+              {{ $t("sections.serialization.registration") }}
+            </div>
             <Field
               icon="mdi-lightning-bolt-outline"
-              label="Customer part Id"
+              :label="$t('sections.serialization.customerPartId')"
               :value="propsData.registration.customerPartId"
             />
             <Field
               icon="mdi-arrow-bottom-right-thin-circle-outline"
-              label="Manufacturer part Id"
+              :label="$t('sections.serialization.manufacturerPartId')"
               :value="propsData.registration.manufacturerPartId"
             />
           </v-col>
@@ -59,7 +63,7 @@
             <div class="element-chart-label"></div>
             <Field
               icon="mdi-lightning-bolt-outline"
-              label="Quantity"
+              :label="$t('sections.serialization.quantity')"
               :value="propsData.quantity.value"
               :unit="propsData.quantity.unit"
             />
diff --git a/src/components/passport/sections/StateOfBattery.vue b/src/components/passport/sections/StateOfBattery.vue
index ecf202eec..7409f4e8a 100644
--- a/src/components/passport/sections/StateOfBattery.vue
+++ b/src/components/passport/sections/StateOfBattery.vue
@@ -29,7 +29,7 @@
             <Field
               icon="mdi-battery-plus"
               data-cy="state-of-charge"
-              label="State of health"
+              :label="$t('sections.stateOfBattery.stateOfHealth')"
               :value="propsData.stateOfBattery.stateOfHealth"
               style="margin-bottom: 12px"
               unit="%"
@@ -37,7 +37,7 @@
           </template>
           <Field
             icon="mdi-recycle-variant"
-            label="Cycle life test c rate"
+            :label="$t('sections.stateOfBattery.cycleLifeTestCRate')"
             :value="propsData.batteryCycleLife.cycleLifeTestCRate"
             style="margin-bottom: 12px"
             unit="C"
@@ -47,7 +47,7 @@
           <template v-if="propsData.stateOfBattery">
             <Field
               icon="mdi-flash-outline"
-              label="State of charge"
+              :label="$t('sections.stateOfBattery.stateOfCharge')"
               :value="propsData.stateOfBattery.stateOfCharge"
               style="margin-bottom: 12px"
               unit="%"
@@ -55,7 +55,7 @@
           </template>
           <Field
             icon="mdi-flash-outline"
-            label="Cycle life test depth of discharge"
+            :label="$t('sections.stateOfBattery.cycleLifeTestDepthOfDischarge')"
             :value="propsData.batteryCycleLife.cycleLifeTestDepthOfDischarge"
             style="margin-bottom: 12px"
             unit="%"
@@ -65,14 +65,14 @@
           <!-- componet belowe needs to be repalced with charging cycle bar chart -->
           <Field
             icon="mdi-battery-charging"
-            label="Expected lifetime"
+            :label="$t('sections.stateOfBattery.expectedLifetime')"
             style="background: #f9f9f9; margin-bottom: 12px"
             :value="propsData.batteryCycleLife.expectedLifetime"
             unit="cycles"
           />
           <Field
             icon="mdi-thermometer-low"
-            label="Temperature range (idle state)"
+            :label="$t('sections.stateOfBattery.temperatureRange')"
             style="background: #f9f9f9; margin-bottom: 12px"
             :tempRangeMin="
               propsData.temperatureRangeIdleState
@@ -90,7 +90,7 @@
           <v-col sm="12" md="2" class="pa-0 ma-0">
             <Field
               icon="mdi-numeric-1-circle-outline"
-              label="Status battery"
+              :label="$t('sections.stateOfBattery.statusBattery')"
               :value="propsData.stateOfBattery.statusBattery"
             />
           </v-col>
diff --git a/src/config/templates/descriptions.json b/src/config/templates/descriptions.json
deleted file mode 100644
index c1434f99c..000000000
--- a/src/config/templates/descriptions.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "vehicleDismantlingProcedure": {
-    "title": "Vehicle dismantling procedure",
-    "value": "Document containing the vehicle dismantling procedure is describing a regulatory requirement"
-  },
-  "cathodeActiveMaterials": {
-    "title": "Cathode active materials",
-    "value": "The total amount of valuable materials contained in CAM material: Nickel, Cobalt, Lithium"
-  },
-  "MaterialNameAndWeightAndPercentageMassFractionEntity": {
-    "title": "material name and weight and percent",
-    "value": "Entity to bundle a material's name, weight and percentage of mass"
-  },
-  "BatteryId": {
-    "title": "Battery ID",
-    "value": "Battery ID or DMC that you can find in your device settings"
-  }
-}
\ No newline at end of file
diff --git a/src/config/templates/iconMappings.json b/src/config/templates/iconMappings.json
index 1fb7dc2d3..0baf709f7 100644
--- a/src/config/templates/iconMappings.json
+++ b/src/config/templates/iconMappings.json
@@ -11,7 +11,6 @@
   "identification": "mdi-information-outline",
   "sources": "mdi-source-branch",
   "handling": "mdi-card-account-details-outline",
-  "sustainability": "mdi-fuse",
   "operation": "mdi-handshake-outline",
   "information": "mdi-information-outline",
   "product": "mdi-watermark",
@@ -21,6 +20,10 @@
   "data": "mdi-data-matrix",
   "chemistry": "mdi-react",
   "exchange": "mdi-file-swap-outline",
+  "general": "mdi-pound",
+  "health": "mdi-battery-plus",
+  "sustainability": "mdi-leaf",
+  "performance": "mdi-chart-timeline-variant-shimmer",
   "weight": "mdi-weight",
   "diameter": "mdi-diameter-outline",
   "torque": "mdi-cog-outline",
@@ -28,4 +31,4 @@
   "power": "mdi-cog-outline",
   "drive": "mdi-car",
   "oil": "mdi-oil"
-}
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index fa657e6ec..8e4449e7e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,6 +28,19 @@ import { loadFonts } from './assets/plugins/webfontloader';
 import router from './router';
 import '@/assets/styles/main.scss';
 import authentication from '@/services/Authentication';
+import { createI18n } from 'vue-i18n';
+// Import translation files
+import en from '@/translations/en.json';
+import de from '@/translations/de.json';
+
+const i18n = createI18n({
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: {
+        en,
+        de
+    }
+});
 
 loadFonts();
 
@@ -35,6 +48,7 @@ const app = createApp(App);
 app.use(vuetify);
 app.use(store);
 app.use(router);
+app.use(i18n);
 
 var auth = new authentication();
 app.provide('authentication', auth);
diff --git a/src/media/backgroundart.jpg b/src/media/backgroundart.jpg
new file mode 100644
index 000000000..a0e5c3fae
Binary files /dev/null and b/src/media/backgroundart.jpg differ
diff --git a/src/translations/de.json b/src/translations/de.json
new file mode 100644
index 000000000..5036123ab
--- /dev/null
+++ b/src/translations/de.json
@@ -0,0 +1,316 @@
+{
+  "header": {
+    "helpBtn": "Hilfe",
+    "helpTooltip": "Hier können Sie Hilfe erhalten, wenn Sie mehr über Catena-X wissen müssen",
+    "signOut": "Abmelden"
+  },
+  "searchView": {
+    "title": "Catena-X Batteriepass",
+    "welcomeMessage": "Der Begriff 'Batteriepass' bezieht sich auf ein digitales Dokument, das wesentliche Informationen über eine Batterie enthält, insbesondere im Kontext von Elektrofahrzeugen (EVs). Dieses Dokument umfasst Details über den Hersteller der Batterie, Spezifikationen, Leistungsmerkmale, Gesundheitszustand und Lebenszyklusdaten. Der Zweck eines Batteriepasses besteht darin, eine ordnungsgemäße Wartung, Instandhaltung und Recycling der Batterie zu erleichtern, sowie die Rückverfolgbarkeit und Konformität zu ermöglichen.",
+    "errorCameraOff": "Ihre Kamera ist ausgeschaltet.",
+    "errorTypeID": "Schalten Sie sie ein oder geben Sie die ID ein.",
+    "findOutMore": "Möchten Sie mehr erfahren? Lesen Sie unseren",
+    "guide": "Einsteiger-Leitfaden",
+    "cameraError": {
+      "NotAllowedError": "FEHLER: Sie müssen die Kamera-Zugriffsberechtigung erteilen",
+      "NotFoundError": "FEHLER: keine Kamera auf diesem Gerät",
+      "NotSupportedError": "FEHLER: Sichere Umgebung erforderlich (HTTPS, localhost)",
+      "NotReadableError": "FEHLER: Wird die Kamera bereits verwendet?",
+      "OverconstrainedError": "FEHLER: installierte Kameras sind nicht geeignet",
+      "StreamApiNotSupportedError": "FEHLER: Stream-API wird in diesem Browser nicht unterstützt",
+      "InsecureContextError": "FEHLER: Kamerazugriff ist nur in sicherer Umgebung erlaubt. Verwenden Sie HTTPS oder localhost anstelle von HTTP."
+    }
+  },
+  "passportView": {
+    "dpp": "Digitaler Produkt Pass",
+    "bpp": "Batterie Pass",
+    "tpp": "Getriebe Pass",
+    "batteryComponentsNames": {
+      "generalInformation": "Allgemeine Informationen",
+      "stateOfBattery": "Zustand der Batterie",
+      "components": "Komponenten",
+      "batteryComposition": "Batteriezusammensetzung",
+      "cellChemistry": "Zellenchemie",
+      "electrochemicalProperties": "Elektrochemische Eigenschaften",
+      "documents": "Dokumente",
+      "exchange": "Austausch"
+    }
+  },
+  "home": {
+    "welcome": "Willkommen",
+    "home": "Startseite"
+  },
+  "footer": {
+    "help": "Hilfe",
+    "contact": "Kontakt",
+    "imprint": "Impressum",
+    "privacy": "Datenschutz",
+    "terms": "Nutzungsbedingungen",
+    "cookies": "Cookies",
+    "thirdParty": "Lizenzen Dritter",
+    "legal": "Rechtlicher Hinweis",
+    "license": "Lizenz: Apache-2.0",
+    "licensePath": "Lizenzpfad: ",
+    "viewLicense": "Lizenzdatei ansehen",
+    "notice": "HINWEIS: ",
+    "viewNotice": "Hinweisdatei ansehen",
+    "source": "Quell-URL: ",
+    "commit": "Commit-ID: ",
+    "copyright": "Urheberrecht © Catena-X Automotive Network."
+  },
+  "searchInput": {
+    "search": "Suchen",
+    "passportId": "Pass-ID eingeben"
+  },
+  "barChart": {
+    "noData": "Keine Daten"
+  },
+  "batteryCards": {
+    "titleGeneral": "ALLGEMEIN",
+    "labelGeneral": "Typ",
+    "secondLabelGeneral": "Modell",
+    "titlePerformance": "LEISTUNG",
+    "labelPerformance": "Nennkapazität",
+    "secondLabelPerformance": "Modell",
+    "descriptionPerformanceTitle": "Leistung",
+    "descriptionPerformanceValue": "Beschreibung der Leistung",
+    "titleHealth": "GESUNDHEIT",
+    "labelHealth": "Zustand der Gesundheit",
+    "secondLabelHealth": "Ladezyklen",
+    "descriptionHealthTitle": "Gesundheit",
+    "descriptionHealthValue": "Beschreibung der Gesundheit",
+    "titleSustainability": "NACHHALTIGKEIT",
+    "secondLabelSustainability": "CO2e/kWh",
+    "descriptionHSustainabilityTitle": "Nachhaltigkeit",
+    "descriptionSustainabilityValue": "Beschreibung der Nachhaltigkeit",
+    "chargingCycles": "Ladezyklen"
+  },
+  "generalCards": {
+    "titleGeneral": "ALLGEMEIN",
+    "productName": "Produktname",
+    "productType": "Produkttyp",
+    "titleManufacturing": "HERSTELLUNG",
+    "manufacturerId": "Hersteller-ID",
+    "dateOfManufacturing": "Herstellungsdatum",
+    "descriptionManufacturingTitle": "Herstellung",
+    "descriptionManufacturingValue": "Beschreibung der Herstellung",
+    "titleAspectVersion": "ASPEKTVERSION",
+    "currentVersion": "Aktuelle Version",
+    "issued": "Ausgestellt",
+    "descriptionAspectVersionTitle": "Aspektversion",
+    "descriptionAspectVersionValue": "Beschreibung der Aspektversion",
+    "titleSustainability": "NACHHALTIGKEIT",
+    "totalCo2Footprint": "Gesamter CO2-Fußabdruck",
+    "warrantyPeriod": "Garantiezeitraum",
+    "tCo2Total": "t CO2 Gesamt",
+    "months": "Monate",
+    "descriptionSustainabilityTitle": "Nachhaltigkeit",
+    "descriptionSustainabilityValue": "Beschreibung der Nachhaltigkeit"
+  },
+  "passportHeader": {
+    "backBtn": "Zurück"
+  },
+  "field": {
+    "tempRange": "Temperaturbereich:",
+    "to": "bis",
+    "referenceTest": "Referenztest:"
+  },
+  "recursiveTree": {
+    "notAvailable": "Nicht verfügbar"
+  },
+  "dialog": {
+    "description": "Beschreibung",
+    "noDescription": "Keine Beschreibung"
+  },
+  "section": {
+    "noContent": "Entschuldigung, kein Inhalt"
+  },
+  "error": {
+    "404NotFound": "404 Nicht gefunden",
+    "somethingWentWrong": "Hoppla, etwas ist schiefgelaufen...",
+    "internalError": "Der Server hat einen internen Fehler oder eine Fehlkonfiguration festgestellt und konnte Ihre Anfrage nicht bearbeiten.",
+    "contactYourAdmin": "Bitte kontaktieren Sie Ihren Administrator",
+    "adminExample": "admin@beispiel.com",
+    "reload": "Seite neu laden",
+    "homepage": "Startseite"
+  },
+  "loading": {
+    "assetId": "Anlage-ID: ",
+    "registrySearch": "Register Suche",
+    "searching": "Suche...",
+    "registriesAvailable": "Register verfügbar",
+    "contractSearch": "Vertragssuche",
+    "contractAvailable": "Vertrag verfügbar",
+    "contractNegotiation": "Vertragsverhandlung",
+    "negotiating": "Verhandlung...",
+    "contractStatus": "Vertragsstatus: ",
+    "contractTransfer": "Vertragsübertragung",
+    "transferring": "Übertragung...",
+    "transferCompleted": "Übertragung abgeschlossen",
+    "passportRetrieval": "Passabruf",
+    "retrieving": "Abruf... ",
+    "createdProcess": "Erstellte Prozess-ID: ",
+    "contractId: ": "Vertrags-ID: "
+  },
+  "sections": {
+    "generalInformation": {
+      "batteryId": "Batterie-ID",
+      "batteryIdDescriptionTitle": "Batterie-ID",
+      "batteryIdDescriptionValue": "Batterie-ID oder DMC, die Sie in Ihren Geräteeinstellungen finden können",
+      "batteryType": "Batterietyp",
+      "batteryModel": "Batteriemodell",
+      "warranty": "Garantie",
+      "dimensions": "Abmessungen der Batterie",
+      "weight": "Gewicht",
+      "dateOfManufacturing": "Herstellungsdatum",
+      "placeOfManufacturing": "Herstellungsort",
+      "datePlacedOnMarket": "Markteinführungsdatum",
+      "manufacturerInformation": "Herstellerinformationen",
+      "manufacturerContact": "Herstellerkontakt",
+      "cO2FootprintTotal": "CO2-Fußabdruck"
+    },
+    "stateOfBattery": {
+      "stateOfHealth": "aktueller Zustand",
+      "cycleLifeTestCRate": "Zykluslebensdauertest C-Rate",
+      "stateOfCharge": "Ladezustand",
+      "cycleLifeTestDepthOfDischarge": "Tiefe der Entladung im Zykluslebensdauertest",
+      "expectedLifetime": "Erwartete Lebensdauer",
+      "temperatureRange": "Temperaturbereich (im Ruhezustand)",
+      "statusBattery": "Batterie-Status"
+    },
+    "components": {
+      "searchForChild": "Die Suche nach verbauten Komponenten hat begonnen, dies kann eine Weile dauern...",
+      "noChild": "Keine verbauten Komponenten gefunden",
+      "somethingWentWrong": "Etwas ist bei der Suche nach Komponenten schiefgelaufen"
+    },
+    "batteryComposition": {
+      "batteryComposites": "Hauptbestandteile der Batterie",
+      "criticalRawMaterials": "Kritische Rohstoffe"
+    },
+    "cellChemistry": {
+      "electrolyteComposition": "Zusammensetzung des Elektrolyts",
+      "recyclateContent": "Recyclat-Anteil"
+    },
+    "electrochemicalProperties": {
+      "capacity": "Kapazität",
+      "ratedCapacity": "Nennkapazität",
+      "capacityFade": "Kapazitätsverlust",
+      "capacityThresholdExhaustion": "Kapazitätsschwelle für Batterie-Erschöpfung",
+      "efficiency": "Effizienz",
+      "originalPowerCapability": "Ursprüngliche Leistungsfähigkeit",
+      "originalPowerCapabilityLimits": "Grenzen der ursprünglichen Leistungsfähigkeit",
+      "maximumAllowedBatteryPower": "Maximal zulässige Batterieenergie (MABE)",
+      "MABEvsMABP": "Verhältnis MABE zu MABP",
+      "powerCapabilityAt20Charge": "Leistungsfähigkeit bei 20% Ladung",
+      "powerCapabilityAt80Charge": "Leistungsfähigkeit bei 80% Ladung",
+      "powerFade": "Leistungsverlust",
+      "resistance": "Widerstand",
+      "packInternalResistance": "Interner Widerstand des Batteriepacks",
+      "packInternalResistanceIncrease": "Zunahme des internen Widerstands des Batteriepacks",
+      "cellInternalResistance": "Interner Widerstand der Zelle",
+      "voltage": "Spannung",
+      "nominalVoltage": "Nennspannung",
+      "maxVoltage": "Maximale Spannung",
+      "minVoltage": "Minimale Spannung"
+    },
+    "exchange": {
+      "contract": "Vertrag",
+      "policy": "Richtlinie",
+      "distribution": "Verteilung",
+      "negotiation": "Verhandlung",
+      "context": "Kontext",
+      "negotiationRequest": "Verhandlungsanfrage",
+      "offer": "Angebot",
+      "transfer": "Übertragung",
+      "edcDataRequest": "EDC-Datenanfrage",
+      "transferRequest": "Übertragungsanfrage",
+      "id": "ID",
+      "type": "Typ",
+      "policyId": "Richtlinien-ID",
+      "distributionList": "Verteilungsliste",
+      "edcDescription": "EDC-Beschreibung",
+      "edcId": "EDC-ID",
+      "edcType": "EDC-Typ",
+      "edcProtocol": "EDC-Protokoll",
+      "protocol": "Protokoll",
+      "edcState": "EDC-Zustand",
+      "edcCounterPartyAddress": "EDC-Partner-Adresse",
+      "edcContractAgreementId": "EDC-Vertragsvereinbarungs-ID",
+      "connectorId": "Connector-ID",
+      "providerId": "Anbieter-ID",
+      "offerDetail": "Angebotsdetails",
+      "transferId": "Übertragungs-ID",
+      "transferType": "Übertragungstyp",
+      "transferState": "Übertragungszustand",
+      "edcTimestamp": "EDC-Zeitstempel",
+      "edcDataRequestId": "EDC-Datenanfrage-ID",
+      "edcReceiverHttpEndpoint": "EDC-Empfänger HTTP-Endpunkt",
+      "assetId": "Anlagen-ID",
+      "connectorAddress": "Connector-Adresse",
+      "contractId": "Vertrags-ID",
+      "dataDestination": "Datendestination",
+      "reciverHttpEndpoint": "Empfänger-HTTP-Endpunkt",
+      "contentType": "Inhaltstyp"
+    },
+    "characteristics": {
+      "physicalDimensionsProperty": "Eigenschaft der physischen Abmessungen",
+      "weight": "Gewicht",
+      "lifespan": "Lebensdauer",
+      "energyCapacity": "Energiekapazität",
+      "voltage": "Spannung"
+    },
+    "commercial": {
+      "placedOnMarket": "Markteinführung",
+      "warranty": "Garantie"
+    },
+    "handling": {
+      "maintenanceHistory": "Wartungshistorie",
+      "spareParts": "Ersatzteile",
+      "substanceOfConcern": "besorgniserregender Stoff"
+    },
+    "identification": {
+      "gtin": "GTIN"
+    },
+    "metadata": {
+      "issueDate": "Ausgabedatum",
+      "version": "Version",
+      "validityDate": "Gültigkeitsdatum",
+      "customerPartId": "Kundenteil-ID",
+      "manufacturerPartId": "Herstellerteil-ID",
+      "status": "Status"
+    },
+    "operation": {
+      "importer": "Importeur",
+      "manufacturerId": "Hersteller-ID",
+      "facilityId": "Einrichtungs-ID"
+    },
+    "serialization": {
+      "manufacturingInformation": "Herstellungsinformationen",
+      "date": "Datum",
+      "country": "Land",
+      "registration": "Registrierung",
+      "customerPartId": "Kundenteil-ID",
+      "manufacturerPartId": "Herstellerteil-ID",
+      "quantity": "Menge"
+    },
+    "sustainability": {
+      "state": "Zustand",
+      "material": "Material",
+      "carbonContentTotal": "Gesamtkohlenstoffgehalt",
+      "crossSectoralStandard": "Sektorenübergreifender Standard",
+      "substancesOfConcern": "Besorgniserregende Stoffe",
+      "criticalRawMaterials": "Kritische Rohstoffe",
+      "co2FootprintTotal": "Gesamter CO₂-Fußabdruck",
+      "operator": "Betreiber",
+      "ruleNames": "Regelnamen",
+      "otherOperatorName": "Name des anderen Betreibers"
+    },
+    "typology": {
+      "name": "Name",
+      "definition": "Definition",
+      "code": "Code",
+      "nameAtManufacturer": "Name beim Hersteller",
+      "nameAtCustomer": "Name auf dem Markt"
+    }
+  }
+}
diff --git a/src/translations/en.json b/src/translations/en.json
new file mode 100644
index 000000000..32f313b3f
--- /dev/null
+++ b/src/translations/en.json
@@ -0,0 +1,316 @@
+{
+  "header": {
+    "helpBtn": "Help",
+    "helpTooltip": " Here you can get help if you need to know more about Catena-X",
+    "signOut": "Sign Out"
+  },
+  "searchView": {
+    "title": "Catena-X Battery Passport",
+    "welcomeMessage": "The term \"Battery Passport\" refers to a digital document that contains essential information about a battery, specifically in the context of electric vehicles (EVs). This document includes details about the battery's manufacturer, specifications, performance characteristics, health status, and lifecycle data. The purpose of a Battery Passport is to facilitate proper maintenance, servicing, and recycling of the battery, while also enabling traceability and compliance.",
+    "errorCameraOff": "Your camera is off.",
+    "errorTypeID": "Turn it on or type the ID.",
+    "findOutMore": "Want to find out more? Read our Get",
+    "guide": "Started Guide",
+    "cameraError": {
+      "NotAllowedError": "ERROR: you need to grant camera access permission",
+      "NotFoundError": "ERROR: no camera on this device",
+      "NotSupportedError": "ERROR: secure context required (HTTPS, localhost)",
+      "NotReadableError": "ERROR: is the camera already in use?",
+      "OverconstrainedError": "ERROR: installed cameras are not suitable",
+      "StreamApiNotSupportedError": "ERROR: Stream API is not supported in this browser",
+      "InsecureContextError": "ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP."
+    }
+  },
+  "passportView": {
+    "dpp": "Digital Product Passport",
+    "bpp": "Battery Product Passport",
+    "tpp": "Transmission Product Passport",
+    "batteryComponentsNames": {
+      "generalInformation": "General Information",
+      "stateOfBattery": "State Of Battery",
+      "components": "Components",
+      "batteryComposition": "Battery Composition",
+      "cellChemistry": "Cell Chemistry",
+      "electrochemicalProperties": "Electrochemical Properties",
+      "documents": "Documents",
+      "exchange": "Exchange"
+    }
+  },
+  "home": {
+    "welcome": "Welcome",
+    "home": "Home"
+  },
+  "footer": {
+    "help": "Help",
+    "contact": "Contact",
+    "imprint": "Imprint",
+    "privacy": "Privacy",
+    "terms": "Terms of Service",
+    "cookies": "Cookies",
+    "thirdParty": "Third Party Licenses",
+    "legal": "Legal notice",
+    "license": "License: Apache-2.0",
+    "licensePath": "Licence Path: ",
+    "viewLicense": "View License File",
+    "notice": "NOTICE: ",
+    "viewNotice": "View Notice File",
+    "source": "Source URL: ",
+    "commit": "Commit ID: ",
+    "copyright": "Copyright © Catena-X Automotive Network."
+  },
+  "searchInput": {
+    "search": "Search",
+    "passportId": "Enter Passport ID"
+  },
+  "barChart": {
+    "noData": "No data"
+  },
+  "batteryCards": {
+    "titleGeneral": "GENERAL",
+    "labelGeneral": "Type",
+    "secondLabelGeneral": "Model",
+    "titlePerformance": "PERFORMANCE",
+    "labelPerformance": "Rated Capacity",
+    "secondLabelPerformance": "Model",
+    "descriptionPerformanceTitle": "Performance",
+    "descriptionPerformanceValue": "Description of the performance",
+    "titleHealth": "HEALTH",
+    "labelHealth": "State of Health (SoH)",
+    "secondLabelHealth": "Charging Cycles",
+    "descriptionHealthTitle": "Health",
+    "descriptionHealthValue": "Description of the health",
+    "titleSustainability": "SUSTAINABILITY",
+    "secondLabelSustainability": "CO2e/kWh",
+    "descriptionHSustainabilityTitle": "Sustainability",
+    "descriptionSustainabilityValue": "Description of the sustainability",
+    "chargingCycles": "Charging Cycles"
+  },
+  "generalCards": {
+    "titleGeneral": "GENERAL",
+    "productName": "Product name",
+    "productType": "Product type",
+    "titleManufacturing": "MANUFACTURING",
+    "manufacturerId": "Manufacturer ID",
+    "dateOfManufacturing": "Date of Manufacturing",
+    "descriptionManufacturingTitle": "Manufacturing",
+    "descriptionManufacturingValue": "Description of the manufacturing",
+    "titleAspectVersion": "ASPECT VERSION",
+    "currentVersion": "Current version",
+    "issued": "Issued",
+    "descriptionAspectVersionTitle": "Aspect version",
+    "descriptionAspectVersionValue": "Description of the aspect version",
+    "titleSustainability": "SUSTAINABILITY",
+    "totalCo2Footprint": "Total CO2 footprint",
+    "warrantyPeriod": "Warranty period",
+    "tCo2Total": "t CO2 Total",
+    "months": "months",
+    "descriptionSustainabilityTitle": "Sustainability",
+    "descriptionSustainabilityValue": "Description of the Sustainability"
+  },
+  "passportHeader": {
+    "backBtn": "Back"
+  },
+  "field": {
+    "tempRange": "Temp range:",
+    "to": "to",
+    "referenceTest": "Reference test:"
+  },
+  "recursiveTree": {
+    "notAvailable": "Not available"
+  },
+  "dialog": {
+    "description": "Description",
+    "noDescription": "No description"
+  },
+  "section": {
+    "noContent": "Sorry, no content"
+  },
+  "error": {
+    "404NotFound": "404 Not Found",
+    "somethingWentWrong": "Oops, Something went wrong...",
+    "internalError": "The server encountered an internal error or misconfiguration and was unable to complete your request.",
+    "contactYourAdmin": "Please contact your admin",
+    "adminExample": "admin@example.com",
+    "reload": "Reload Page",
+    "homepage": "Homepage"
+  },
+  "loading": {
+    "assetId": "Asset Id: ",
+    "registrySearch": "Registry Search",
+    "searching": "Searching...",
+    "registriesAvailable": "Registries available",
+    "contractSearch": "Contract Search",
+    "contractAvailable": "Contract available",
+    "contractNegotiation": "Contract Negotiation",
+    "negotiating": "Negotiating...",
+    "contractStatus": "Contract status: ",
+    "contractTransfer": "Contract Transfer",
+    "transferring": "Transferring...",
+    "transferCompleted": "Transfer completed",
+    "passportRetrieval": "Passport Retrieval",
+    "retrieving": "Retrieving... ",
+    "createdProcess": "Created Process ID: ",
+    "contractId: ": "Contract ID: "
+  },
+  "sections": {
+    "generalInformation": {
+      "batteryId": "Battery ID (DMC)",
+      "batteryIdDescriptionTitle": "Battery ID",
+      "batteryIdDescriptionValue": "Battery ID or DMC that you can find in your device settings",
+      "batteryType": "Battery Type",
+      "batteryModel": "Battery Model",
+      "warranty": "Warranty",
+      "dimensions": "Dimensions of the battery",
+      "weight": "Weight",
+      "dateOfManufacturing": "Date of Manufacture",
+      "placeOfManufacturing": "Place of Manufacturing",
+      "datePlacedOnMarket": "Date of placing on the market",
+      "manufacturerInformation": "Manufacturer Information",
+      "manufacturerContact": "Manufacturer Contact",
+      "cO2FootprintTotal": "CO2 Footprint"
+    },
+    "stateOfBattery": {
+      "stateOfHealth": "State of health",
+      "cycleLifeTestCRate": "Cycle life test c rate",
+      "stateOfCharge": "State of charge",
+      "cycleLifeTestDepthOfDischarge": "Cycle life test depth of discharge",
+      "expectedLifetime": "Expected lifetime",
+      "temperatureRange": "Temperature range (idle state)",
+      "statusBattery": "Status battery"
+    },
+    "components": {
+      "searchForChild": "The search for child components started, this may take a while...",
+      "noChild": "No child components found",
+      "somethingWentWrong": "Something went wrong while searching for child components"
+    },
+    "batteryComposition": {
+      "batteryComposites": "Main Battery Composites",
+      "criticalRawMaterials": "Critical raw materials"
+    },
+    "cellChemistry": {
+      "electrolyteComposition": "Composition of electrolyte",
+      "recyclateContent": "Recyclate Content Active Materials"
+    },
+    "electrochemicalProperties": {
+      "capacity": "Capacity",
+      "ratedCapacity": "Rated capacity",
+      "capacityFade": "Capacity fade",
+      "capacityThresholdExhaustion": "Capacity threshold exhaustion",
+      "efficiency": "Efficiency",
+      "originalPowerCapability": "Original power capability",
+      "originalPowerCapabilityLimits": "Original power capability limits",
+      "maximumAllowedBatteryPower": "Maximum allowed battery energy (MABE)",
+      "MABEvsMABP": "Ratio MABE vs. MABP",
+      "powerCapabilityAt20Charge": "Power capability at 20 charge",
+      "powerCapabilityAt80Charge": "Power capability at 80 charge",
+      "powerFade": "Power fade",
+      "resistance": "Resistance",
+      "packInternalResistance": "Pack internal resistance",
+      "packInternalResistanceIncrease": "Pack internal resistance increase",
+      "cellInternalResistance": "Cell internal resistance",
+      "voltage": "Voltage",
+      "nominalVoltage": "Nominal voltage",
+      "maxVoltage": "Max voltage",
+      "minVoltage": "Min voltage"
+    },
+    "exchange": {
+      "contract": "Contract",
+      "policy": "Policy",
+      "distribution": "Distribution",
+      "negotiation": "Negotiation",
+      "context": "Context",
+      "negotiationRequest": "Negotiation request",
+      "offer": "Offer",
+      "transfer": "Transfer",
+      "edcDataRequest": "EDC data request",
+      "transferRequest": "Transfer request",
+      "id": "ID",
+      "type": "Type",
+      "policyId": "Policy ID",
+      "distributionList": "Distribution List",
+      "edcDescription": "EDC description",
+      "edcId": "EDC ID",
+      "edcType": "EDC Type",
+      "edcProtocol": "EDC protocol",
+      "protocol": "Protocol",
+      "edcState": "EDC state",
+      "edcCounterPartyAddress": "EDC counter party address",
+      "edcContractAgreementId": "EDC contract agreement ID",
+      "connectorId": "Connector ID",
+      "providerId": "Provider ID",
+      "offerDetail": "Offer detail",
+      "transferId": "Transfer ID",
+      "transferType": "Transfer Type",
+      "transferState": "Transfer state",
+      "edcTimestamp": "EDC timestamp",
+      "edcDataRequestId": "EDC data request ID",
+      "edcReceiverHttpEndpoint": "EDC receiver http endpoint",
+      "assetId": "Asset ID",
+      "connectorAddress": "Connector address",
+      "contractId": "Contract ID",
+      "dataDestination": "Data destination",
+      "reciverHttpEndpoint": "Reciver http endpoint",
+      "contentType": "Content type"
+    },
+    "characteristics": {
+      "physicalDimensionsProperty": "Physical dimensions property",
+      "weight": "Weight",
+      "lifespan": "Lifespan",
+      "energyCapacity": "Energy capacity",
+      "voltage": "Voltage"
+    },
+    "commercial": {
+      "placedOnMarket": "Place on the market",
+      "warranty": "Warranty"
+    },
+    "handling": {
+      "maintenanceHistory": "Maintenance history",
+      "spareParts": "Spare parts",
+      "substanceOfConcern": "Substance of concern"
+    },
+    "identification": {
+      "gtin": "Gtin"
+    },
+    "metadata": {
+      "issueDate": "Issue date",
+      "version": "Version",
+      "validityDate": "Validity date",
+      "customerPartId": "Customer part ID",
+      "manufacturerPartId": "Manufacturer part ID",
+      "status": "Status"
+    },
+    "operation": {
+      "importer": "Importer",
+      "manufacturerId": "Manufacturer ID",
+      "facilityId": "Facility ID"
+    },
+    "serialization": {
+      "manufacturingInformation": "Manufacturing information",
+      "date": "Date",
+      "country": "Country",
+      "registration": "Registration",
+      "customerPartId": "Customer part ID",
+      "manufacturerPartId": "Manufacturer part ID",
+      "quantity": "Quantity"
+    },
+    "sustainability": {
+      "state": "State",
+      "material": "Material",
+      "carbonContentTotal": "Carbon content total",
+      "crossSectoralStandard": "Cross sectoral standard",
+      "substancesOfConcern": "Substances of concern",
+      "criticalRawMaterials": "Critical raw materials",
+      "co2FootprintTotal": "CO₂ footprint total",
+      "operator": "Operator",
+      "ruleNames": "Rule names",
+      "otherOperatorName": "Other operator name"
+    },
+    "typology": {
+      "name": "Name",
+      "definition": "Definition",
+      "code": "Code",
+      "nameAtManufacturer": "Name at manufacturer",
+      "nameAtCustomer": "Name at customer"
+    }
+  }
+}
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index b49fd6642..85dfe7439 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -23,7 +23,9 @@
 <template>
   <div>
     <HeaderComponent>
-      <div class="header-title">{{ welcome }}</div>
+      <div class="header-title">
+        {{ welcomeUser ? $t("home.welcome") + welcomeUser : $t("home.home") }}
+      </div>
     </HeaderComponent>
     <v-container>
       <v-window>
@@ -46,19 +48,19 @@ import { inject } from "vue";
 export default {
   // eslint-disable-next-line vue/multi-word-component-names
   name: "HomeView",
-  data(){
-    return{
+  data() {
+    return {
       auth: inject("authentication"),
-    }
+    };
   },
   computed: {
-    welcome(){
-        if (this.auth.isUserAuthenticated) {
-          return "Welcome " + this.auth.getName() + "!";
-        }else{
-          return "Home"
-        }
-    }
+    welcomeUser() {
+      if (this.auth.isUserAuthenticated) {
+        return " " + this.auth.getName() + "!";
+      } else {
+        return null;
+      }
+    },
   },
   components: {
     SearchView,
diff --git a/src/views/PassportView.vue b/src/views/PassportView.vue
index f272b3c93..e92d749c2 100644
--- a/src/views/PassportView.vue
+++ b/src/views/PassportView.vue
@@ -24,7 +24,7 @@
   <div>
     <HeaderComponent>
       <template v-if="!data">
-        <span class="header-title">Digital Product Passport</span>
+        <span class="header-title">{{ $t("passportView.dpp") }}</span>
       </template>
       <template
         v-else-if="
@@ -32,7 +32,7 @@
           'urn:bamm:io.catenax.battery.battery_pass:3.0.1#BatteryPass'
         "
       >
-        <span class="header-title">Battery Product Passport</span>
+        <span class="header-title">{{ $t("passportView.bpp") }}</span>
       </template>
       <template
         v-else-if="
@@ -40,10 +40,10 @@
           'urn:bamm:io.catenax.transmission.transmission_pass:1.0.0#TransmissionPass'
         "
       >
-        <span class="header-title">Transmission Product Passport</span>
+        <span class="header-title">{{ $t("passportView.tpp") }}</span>
       </template>
       <template v-else>
-        <span class="header-title">Digital Product Passport</span>
+        <span class="header-title">{{ $t("passportView.dpp") }}</span>
       </template>
     </HeaderComponent>
     <v-container v-if="loading">
@@ -157,42 +157,43 @@ export default {
     return {
       batteryComponentsNames: [
         {
-          label: "General Information",
+          label: "passportView.batteryComponentsNames.generalInformation",
           icon: "mdi-information-outline",
           component: "GeneralInformation",
         },
         {
-          label: "Product Condition",
+          label: "passportView.batteryComponentsNames.stateOfBattery",
           icon: "mdi-battery-charging",
           component: "StateOfBattery",
         },
         {
-          label: "Components",
+          label: "passportView.batteryComponentsNames.components",
           icon: "mdi-battery-unknown",
           component: "Components",
         },
         {
-          label: "Battery composition",
+          label: "passportView.batteryComponentsNames.batteryComposition",
           icon: "mdi-battery-unknown",
           component: "BatteryComposition",
         },
         {
-          label: "Cell chemistry",
+          label: "passportView.batteryComponentsNames.cellChemistry",
           icon: "mdi-flask-empty-outline",
           component: "CellChemistry",
         },
         {
-          label: "Electrochemical properties",
+          label:
+            "passportView.batteryComponentsNames.electrochemicalProperties",
           icon: "mdi-microscope",
           component: "ElectrochemicalProperties",
         },
         {
-          label: "Additional information",
+          label: "passportView.batteryComponentsNames.documents",
           icon: "mdi-text-box-multiple-outline",
           component: "Documents",
         },
         {
-          label: "Data exchange information",
+          label: "passportView.batteryComponentsNames.exchange",
           icon: "mdi-file-swap-outline",
           component: "Exchange",
         },
@@ -306,19 +307,15 @@ export default {
           : "Failed to return passport";
         this.errorObj.description =
           "It was not possible to transfer the passport.";
-
         this.errorObj.status = jsonUtil.exists("status", response)
           ? response["status"]
           : 500;
-
         this.errorObj.statusText = jsonUtil.exists("statusText", response)
           ? response["statusText"]
           : "Internal Server Error";
         return response;
       }
-
       //     response = jsonUtil.copy(response, true);
-
       // Check if the response is empty and give an error
       if (!response) {
         this.errorObj.title = "Failed to return passport";
@@ -326,10 +323,8 @@ export default {
           "It was not possible to complete the passport transfer.";
         this.errorObj.status = 400;
         this.errorObj.statusText = "Bad Request";
-
         return null;
       }
-
       // Check if reponse content was successfull and if not print error comming message from backend
       if (jsonUtil.exists("status", response) && response["status"] != 200) {
         this.errorObj.title = jsonUtil.exists("message", response)
@@ -340,12 +335,10 @@ export default {
         this.errorObj.status = jsonUtil.exists("status", response)
           ? response["status"]
           : 404;
-
         this.errorObj.statusText = jsonUtil.exists("statusText", response)
           ? response["statusText"]
           : "Not found";
       }
-
       return response;
     },
   },
diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
index 54fc1d034..0391853e5 100644
--- a/src/views/SearchView.vue
+++ b/src/views/SearchView.vue
@@ -24,16 +24,8 @@
   <div class="home-page-container">
     <div class="left-container" :class="{ hidden: isHidden }">
       <div class="left-container-text">
-        <h2>Catena-X Battery Passport</h2>
-        <p>
-          The term "Battery Passport" refers to a digital document that contains
-          essential information about a battery, specifically in the context of
-          electric vehicles (EVs). This document includes details about the
-          battery's manufacturer, specifications, performance characteristics,
-          health status, and lifecycle data. The purpose of a Battery Passport
-          is to facilitate proper maintenance, servicing, and recycling of the
-          battery, while also enabling traceability and compliance.
-        </p>
+        <h2>{{ $t("searchView.title") }}</h2>
+        <p>{{ $t("searchView.welcomeMessage") }}</p>
       </div>
       <div class="img-container">
         <img :src="BatteryScanning" class="image" alt="Battery scanning" />
@@ -47,9 +39,9 @@
         <v-container class="search-page">
           <div v-if="qrError" class="qr-container">
             <div class="text-container">
-              <p class="text">Your camera is off.</p>
-              <p class="text">Turn it on or type the ID.</p>
-              <p class="error">{{ qrError }}</p>
+              <p class="text">{{ $t("searchView.errorCameraOff") }}</p>
+              <p class="text">{{ $t("searchView.errorTypeID") }}</p>
+              <p class="error">{{ $t(error) }}</p>
             </div>
             <SearchInput class="search-input" />
           </div>
@@ -94,18 +86,22 @@
         </v-container>
       </div>
       <div class="guide">
-        📖 Want to find out more? Read our
-        <a class="advanced-search-link" @click="openExternalLink"
-          >Get Started Guide</a
-        >
+        📖 {{ $t("searchView.findOutMore") }}
+        <a class="advanced-search-link" @click="openExternalLink">{{
+          $t("searchView.guide")
+        }}</a>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import QrcodeStream from "../components/general/QrcodeStrem.vue";
+import { QrcodeStream } from "vue3-qrcode-reader";
+import CatenaLogo from "../media/logo.png";
+import QRFrame from "../media/qrFrame.svg";
 import BatteryScanning from "../media/battery-img.jpeg";
+// New picture
+// import BatteryScanning from "../media/backgroundart.jpg";
 import LogotypeDPP from "../media/logotypeDPP.svg";
 import SearchInput from "../components/general/SearchInput.vue";
 import { mapState } from "vuex";