diff --git a/src/assets/styles/components/general/contractModal.scss b/src/assets/styles/components/general/contractModal.scss
index 18b9eb2b8..c8f367458 100644
--- a/src/assets/styles/components/general/contractModal.scss
+++ b/src/assets/styles/components/general/contractModal.scss
@@ -21,143 +21,210 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-.contract-modal {
-  justify-content: center;
-  align-items: center;
-  .back-to-homepage {
-    margin: 5px 0;
-  }
-  .content-container {
-    margin-top: 20px;
-    width: 500px;
+  .contract-modal {
+    justify-content: center;
+    align-items: center;
 
-    .policy-group-label {
-      margin-top: 15px;
-      margin-bottom: 5px;
-      padding: 5px;
-      font-weight: bolder; 
-      word-break: break-all;
+    .back-to-homepage {
+      margin: 5px 0;
     }
-  }
-  .contract-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center !important;
-    align-items: center !important;
-    padding: 20px 80px 50px 80px;
-  }
-  .title-container {
-    width: fit-content;
-    font-size: 1.5em;
-    font-weight: 600;
-    padding: 15px;
-  }
-  .details-btn {
-    margin: 20px;
-    color: $catena-x-blue;
-    text-decoration: underline;
-  }
-  .json-viewer-container {
-    border: 1px solid lightgray;
-    border-radius: 5px;
-    word-break: break-word;
-    .json-viewer {
-      min-width: 300px;
-      max-height: 50vh;
-      overflow: auto;
-      background-color: rgb(245, 245, 245);
+
+    .decliner {
+      padding: 20px 80px 50px 80px;
     }
-  }
-  .contractid-title{
-    font-size: 14px;
-    font-weight: 500;
-  }
-  .policy-container {
-    color: rgb(17,17,17)!important;
-    padding: 5px 15px 15px 15px !important;
-    .attribute-operator{
+
+    .content-container {
+      margin-top: 20px;
+      min-width: 500px;
+
+      .policy-group-label {
+        margin-top: 15px;
+        font-weight: bolder;
+        word-break: break-word;
+        margin-bottom: 5px;
+        padding: 5px;
+        font-weight: bolder;
+        word-break: break-all;
+        width: 100%;
+      }
+    }
+
+    .btn-background {
+      background-color: rgb(237, 240, 244);
+      width: 100%;
+      padding-bottom: 30px;
+    }
+
+    .v-selection-control-group {
+      align-items: center;
+      padding: 0 40px;
+    }
+
+    .v-selection-control {
+      padding-left: 10px;
+    }
+
+    .details {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .v-radio label {
+      opacity: 1 !important;
+      color: rgb(17, 17, 17);
+    }
+
+    .v-radio .radio-label {
+      color: $catena-x-black !important;
+      cursor: pointer;
+      font-weight: 500;
+    }
+
+    .contract-container {
+      border-radius: 20px;
+      word-break: break-word;
+    }
+
+    .title-container {
+      width: fit-content;
+      font-size: 1.5em;
+      font-weight: 600;
+      width: 100%;
+      text-align: center;
+      padding-top: 56px;
+    }
+
+    .details-btn {
+      margin: 20px;
+      color: $catena-x-blue;
+    }
+
+    .json-viewer-container {
+      border: 1px solid lightgray;
+      border-radius: 5px;
+      margin-bottom: 50px;
+      word-break: break-word;
+
+      .json-viewer {
+        min-width: 300px;
+        max-height: 50vh;
+        overflow: auto;
+        background-color: rgb(245, 245, 245);
+      }
+    }
+
+    .contractid-title {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .policy-container {
+      color: rgb(17, 17, 17) !important;
+      padding: 5px 15px 15px 15px !important;
+
+      .attribute-operator {
         padding: 10px 0;
         max-height: 60%;
         cursor: pointer;
         font-weight: 800;
         color: $catena-x-blue;
-    }
-    .attribute-constraint{
-      word-break: break-all;
-    }
-  
-    .policy-container {
-      background-color: #fff;
-      border-radius: 10px;
-      border: solid 1px #dcdcdc;
-  
-      .policy-title {
-        font-size: 11px;
-        font-weight: 500;
-        color: rgb(17,17,17)!important;
-      }
-  
-      .policy-icon {
-        position: absolute;
-        right: 7px;
-        top: 7px;
-        color: #939393;
-      }
-  
-      .policy-icon-green {
-        color: #428c5b;
-      }
-  
-      .policy-label {
-        font-size: 12px;
-        font-weight: 500;
-        padding-bottom: 5px;
-        display: flex;
-        align-items: center;
-      }
-  
-      .policy-value {
-        font-size: 10px;
-        font-weight: 500;
-        padding-bottom: 5px;
-        word-wrap: break-word;
       }
-  
-      .policy-second-value {
-        font-size: 10px;
-        font-weight: 500;
-        padding-bottom: 5px;
-        word-wrap: break-word;
-      }
-  
-      .policy-second-label {
-        font-size: 12px;
-        font-weight: 500;
-        padding-top: 12px;
-      }
-  
-      .policy-info-icon {
-        position: absolute;
-        right: 0;
-        bottom: 7px;
-        color: #0f71cb;
+
+      .attribute-constraint {
+        word-break: break-all;
       }
-  
-      .policy-info-icon:hover {
-        color: $catena-x-dark-blue;
-        cursor: pointer;
+
+      .policy-container {
+        background-color: #fff;
+        border-radius: 10px;
+        border: solid 1px #dcdcdc;
+
+        .policy-title {
+          font-size: 11px;
+          font-weight: 500;
+          color: rgb(17, 17, 17) !important;
+        }
+
+        .policy-icon {
+          position: absolute;
+          right: 7px;
+          top: 7px;
+          color: #939393;
+        }
+
+        .policy-icon-green {
+          color: #428c5b;
+        }
+
+        .policy-label {
+          font-size: 12px;
+          font-weight: 500;
+          padding-bottom: 5px;
+          display: flex;
+          align-items: center;
+        }
+
+        .policy-value {
+          font-size: 10px;
+          font-weight: 500;
+          padding-bottom: 5px;
+          word-wrap: break-word;
+        }
+
+        .policy-second-value {
+          font-size: 10px;
+          font-weight: 500;
+          padding-bottom: 5px;
+          word-wrap: break-word;
+        }
+
+        .policy-second-label {
+          font-size: 12px;
+          font-weight: 500;
+          padding-top: 12px;
+        }
+
+        .policy-info-icon {
+          position: absolute;
+          right: 0;
+          bottom: 7px;
+          color: #0f71cb;
+        }
+
+        .policy-info-icon:hover {
+          color: $catena-x-dark-blue;
+          cursor: pointer;
+        }
       }
     }
   }
-}
-@media (max-width: 628px) {
-  .contract-modal {
-    .content-container {
-      width: 320px;
-      display: inline;
-      .policy-group-label-mobile {
-        display: block;
+  @media (max-width: 628px) {
+    .contract-modal {
+      .content-container {
+        width: 320px;
+        display: inline;
+
+        .policy-group-label-mobile {
+          display: block;
+        }
       }
     }
   }
+.container-policy-selection {
+  @media (max-width: 628px) {
+    margin-top: 95px;
+  }
+
+  @media (max-width: 375px) {
+    margin-top: 160px;
+  }
+
+
 }
+
+@media (max-width: 628px) {
+  .container-policy-selection .contract-modal .v-selection-control-group {
+    padding: 0 !important;
+  }
+}
\ No newline at end of file
diff --git a/src/components/general/QrcodeStrem.vue b/src/components/general/QrcodeStrem.vue
index e501e94f9..f1d3990f4 100644
--- a/src/components/general/QrcodeStrem.vue
+++ b/src/components/general/QrcodeStrem.vue
@@ -57,7 +57,7 @@ export default {
       try {
         await promise;
       } catch (error) {
-        store.commit("setQrError", error);
+        store.commit("setQrError", error.name);
         if (error.name === "NotAllowedError") {
           this.error = "ERROR: you need to grant camera access permission";
         } else if (error.name === "NotFoundError") {
diff --git a/src/views/PassportView.vue b/src/views/PassportView.vue
index ae04e4921..ec2135f98 100644
--- a/src/views/PassportView.vue
+++ b/src/views/PassportView.vue
@@ -47,10 +47,10 @@
         <span class="header-title">{{ $t("passportView.dpp") }}</span>
       </template>
     </HeaderComponent>
-    <v-container v-if="loading">
+    <v-container v-if="loading && !error">
       <LoadingComponent :id="id" />
     </v-container>
-    <v-container v-else-if="showOverlay">
+    <v-container class="container-policy-selection" v-else-if="showOverlay && !error">
       <div class="loading-container">
         <v-col class="v-col-auto dpp-id-container contract-modal">
           <v-card class="contract-container">
@@ -76,7 +76,8 @@
                 <v-radio
                   v-for="(item, index) in group"
                   :key="`${contractId}_${index}`"
-                  @click="chooseContract(contractId, item['@id'])"
+                  color="#0F71CB"
+                  @click="chooseContract(contractId, item)"
                   :value="`${contractIndex}.${index}`"
                 >
                   <template v-slot:label>
@@ -134,80 +135,104 @@
                 </v-radio>
               </template>
             </v-radio-group>
-            <v-row class="pt-8 justify-center">
-              <v-btn
-                color="#0F71CB"
-                class="text-none"
-                variant="outlined"
-                @click="declineContract()"
-                >{{ $t("passportView.policyAgreement.decline") }}</v-btn
-              >
-              <v-btn
-                class="text-none ms-4 text-white"
-                color="#0F71CB"
-                @click="
-                  resumeNegotiation(
-                    searchResponse,
-                    contractToSign.contract,
-                    contractToSign.policy
-                  )
-                "
-                >{{ $t("passportView.policyAgreement.agree") }}</v-btn
-              >
-            </v-row>
-            <v-row>
-              <v-btn
-                variant="text"
-                @click="toggleDetails"
-                class="details-btn text-none"
-              >
-                {{ detailsTitle }}
-              </v-btn>
-            </v-row>
-            <v-row v-if="details">
-              <div class="json-viewer-container">
-                <JsonViewer
-                  class="json-viewer"
-                  :value="contractItems"
-                  sort
-                  theme="jv-light"
-                />
-              </div>
-            </v-row>
-          </v-card>
-          <v-overlay class="contract-modal" v-model="declineContractModal">
-            <v-card class="contract-container">
-              <div class="title-container">
-                {{ $t("passportView.policyAgreement.declineModal.question") }}
-              </div>
-              <div class="policy-group-label">
-                <div class="back-to-homepage">
-                  {{ $t("passportView.policyAgreement.declineModal.homepage") }}
-                </div>
-              </div>
+            <div class="btn-background">
               <v-row class="pt-8 justify-center">
                 <v-btn
+                  rounded="xl"
+                  size="x-large"
                   color="#0F71CB"
                   class="text-none"
                   variant="outlined"
-                  @click="cancelDeclineContract()"
-                  >{{
-                    $t("passportView.policyAgreement.declineModal.cancel")
-                  }}</v-btn
+                  style="border: 2px solid"
+                  @click="declineContract()"
+                  >{{ $t("passportView.policyAgreement.decline") }}</v-btn
                 >
                 <v-btn
+                  rounded="xl"
+                  size="x-large"
                   class="text-none ms-4 text-white"
-                  color="red-darken-4"
-                  @click="confirmDeclineContract()"
-                  ><template v-if="declineLoading"
-                    ><v-progress-circular
-                      indeterminate
-                    ></v-progress-circular></template
-                  ><template v-else>{{
-                    $t("passportView.policyAgreement.declineModal.confirm")
-                  }}</template></v-btn
+                  color="#0F71CB"
+                  @click="
+                    resumeNegotiation(
+                      searchResponse,
+                      contractToSign.contract,
+                      contractToSign.policy
+                    )
+                  "
+                  >{{ $t("passportView.policyAgreement.agree") }}</v-btn
                 >
               </v-row>
+              <v-row class="justify-center">
+                <v-btn
+                  rounded="xl"
+                  size="x-large"
+                  variant="text"
+                  :prepend-icon="
+                    !details
+                      ? 'mdi-plus-circle-outline'
+                      : 'mdi-minus-circle-outline'
+                  "
+                  @click="toggleDetails"
+                  class="details-btn text-none"
+                >
+                  {{ detailsTitle }}
+                  <template v-slot:prepend>
+                    <v-icon color="#0F71CB"></v-icon>
+                  </template>
+                </v-btn>
+              </v-row>
+              <v-row v-if="details" class="justify-center">
+                <div class="json-viewer-container">
+                  <JsonViewer
+                    class="json-viewer"
+                    :value="contractItems"
+                    sort
+                    theme="jv-light"
+                  />
+                </div>
+              </v-row>
+            </div>
+          </v-card>
+          <v-overlay class="contract-modal" v-model="declineContractModal">
+            <v-card class="contract-container">
+              <div class="title-container pt-8 decliner">
+                {{ $t("passportView.policyAgreement.declineModal.question") }}
+              </div>
+              <div class="policy-group-label decliner">
+                <div class="back-to-homepage">
+                  {{ $t("passportView.policyAgreement.declineModal.homepage") }}
+                </div>
+              </div>
+              <div class="btn-background decliner">
+                <v-row class="pt-8 pb-8 justify-center">
+                  <v-btn
+                    rounded="xl"
+                    size="large"
+                    color="#0F71CB"
+                    class="text-none"
+                    variant="outlined"
+                    style="border: 2px solid"
+                    @click="cancelDeclineContract()"
+                    >{{
+                      $t("passportView.policyAgreement.declineModal.cancel")
+                    }}</v-btn
+                  >
+                  <v-btn
+                    rounded="xl"
+                    size="large"
+                    class="text-none ms-4 text-white"
+                    color="red-darken-4"
+                    @click="confirmDeclineContract()"
+                    ><template v-if="declineLoading"
+                      ><v-progress-circular
+                        indeterminate
+                      ></v-progress-circular></template
+                    ><template v-else>{{
+                      $t("passportView.policyAgreement.declineModal.confirm")
+                    }}</template></v-btn
+                  >
+                </v-row>
+              </div>
             </v-card>
           </v-overlay>
         </v-col>
@@ -397,7 +422,7 @@ export default {
       processId: null,
       backendService: null,
       parsedPolicyConstraints: {},
-      error: true,
+      error: false,
       errorObj: {
         title: "Something went wrong while returning the passport!",
         description: "We are sorry for that, you can retry or try again later",
@@ -551,6 +576,7 @@ export default {
             "The request took too long... Please retry or try again later.";
           this.status = 408;
           this.statusText = "Request Timeout";
+          this.error= true;
         }
         this.searchResponse = result;
       } catch (e) {
@@ -581,6 +607,7 @@ export default {
                   "It was not possible to display the policies and contracts.";
                 this.status = 500;
                 this.statusText = "Internal Server Error";
+                this.error= true;
             }
 
             // Extract policies
@@ -592,6 +619,7 @@ export default {
                   "It was not possible to display the policies and contracts.";
                 this.status = 500;
                 this.statusText = "Internal Server Error";
+                this.error= true;
             }else{
               // Check if policies array has elements and then access the @id of the first element
               const firstPolicyObj = this.policies[0];
@@ -606,6 +634,7 @@ export default {
                     "It was not possible to display the policies and contracts.";
                   this.status = 500;
                   this.statusText = "Internal Server Error";
+                  this.error= true;
               }else{
                 // Commit the contract ID to the store
                 this.$store.commit("setContractToSign", {
@@ -643,6 +672,7 @@ export default {
             "The request took too long... Please retry or try again later.";
           this.status = 408;
           this.statusText = "Request Timeout";
+          this.error= true;
         }
         this.data = result;
       } catch (e) {
@@ -695,6 +725,7 @@ export default {
             "The request took too long... Please retry or try again later.";
           this.errorObj.status = 408;
           this.errorObj.statusText = "Request Timeout";
+          this.error= true;
         }
         this.data = result;
       } catch (e) {
@@ -792,6 +823,7 @@ export default {
         this.errorObj.statusText = jsonUtil.exists("statusText", response)
           ? response["statusText"]
           : "Internal Server Error";
+        this.error= true;
         return response;
       }
 
@@ -802,6 +834,7 @@ export default {
           "It was not possible to complete the passport transfer.";
         this.errorObj.status = 400;
         this.errorObj.statusText = "Bad Request";
+        this.error= true;
         return null;
       }
       // Check if reponse content was successfull and if not print error comming message from backend
@@ -818,6 +851,7 @@ export default {
         this.errorObj.statusText = jsonUtil.exists("statusText", response)
           ? response["statusText"]
           : "Not found";
+        this.error= true;
       }
 
       return response;
@@ -859,6 +893,7 @@ export default {
         this.errorObj.statusText = jsonUtil.exists("statusText", response)
           ? response["statusText"]
           : "Internal Server Error";
+        this.error= true;
         return response;
       }
 
@@ -869,6 +904,7 @@ export default {
           "It was not possible to complete the passport transfer.";
         this.errorObj.status = 400;
         this.errorObj.statusText = "Bad Request";
+        this.error= true;
         return null;
       }
 
@@ -886,6 +922,7 @@ export default {
         this.errorObj.statusText = jsonUtil.exists("statusText", response)
           ? response["statusText"]
           : "Not found";
+        this.error= true;
       }
 
       return response;
@@ -918,6 +955,7 @@ export default {
         this.errorObj.statusText = jsonUtil.exists("statusText", response)
           ? response["statusText"]
           : "Internal Server Error";
+        this.error= true;
         return response;
       }
 
@@ -928,6 +966,7 @@ export default {
           "It was not possible to complete the passport transfer.";
         this.errorObj.status = 400;
         this.errorObj.statusText = "Bad Request";
+        this.error= true;
         return null;
       }
 
@@ -945,6 +984,7 @@ export default {
         this.errorObj.statusText = jsonUtil.exists("statusText", response)
           ? response["statusText"]
           : "Not found";
+        this.error= true;
       }
 
       return response;
diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
index bde506185..23f8ab37a 100644
--- a/src/views/SearchView.vue
+++ b/src/views/SearchView.vue
@@ -49,7 +49,7 @@
             <div class="text-container">
               <p class="text">{{ $t("searchView.errorCameraOff") }}</p>
               <p class="text">{{ $t("searchView.errorTypeID") }}</p>
-              <p class="error">{{ $t(error) }}</p>
+              <p class="error">{{ $t(`searchView.cameraError.${qrError}`) }}</p>
             </div>
             <SearchInput class="search-input" />
           </div>