diff --git a/package-lock.json b/package-lock.json
index f86565f70..af4cd964b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@popperjs/core": "^2.11.2",
         "@vitejs/plugin-vue": "^4.0.0",
         "axios": ">=1.6.0",
+        "clipboard": "^2.0.11",
         "core-js": "^3.8.3",
         "crypto-js": "^4.2.0",
         "eslint-config-prettier": "^8.5.0",
@@ -1201,6 +1202,11 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -4514,6 +4520,11 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
diff --git a/src/assets/styles/components/general/contractModal.scss b/src/assets/styles/components/general/contractModal.scss
index db8b5927a..cab271d4b 100644
--- a/src/assets/styles/components/general/contractModal.scss
+++ b/src/assets/styles/components/general/contractModal.scss
@@ -23,9 +23,17 @@
 .contract-modal {
   justify-content: center;
   align-items: center;
+  .back-to-homepage {
+    margin: 5px 0;
+  }
   .content-container {
     margin-top: 20px;
-    width: 300px;
+    width: 450px;
+
+    .policy-group-label {
+      margin-top: 15px;
+      font-weight: bolder;
+    }
   }
   .contract-container {
     display: flex;
@@ -57,3 +65,15 @@
     }
   }
 }
+
+@media (max-width: 628px) {
+  .contract-modal {
+    .content-container {
+      width: 320px;
+      display: inline;
+      .policy-group-label-mobile {
+        display: block;
+      }
+    }
+  }
+}
diff --git a/src/components/general/StepperItem.vue b/src/components/general/StepperItem.vue
index cc15a21c7..90236bc1a 100644
--- a/src/components/general/StepperItem.vue
+++ b/src/components/general/StepperItem.vue
@@ -44,56 +44,102 @@
             </p>
             <template v-if="contractSign && policies.length > 1">
               <v-overlay class="contract-modal" v-model="showOverlay">
-                <v-card class="contract-container">
-                  <div class="title-container">Choose a policy</div>
-                  <v-radio-group class="content-container" v-model="radios">
-                    <v-radio
-                      v-for="(item, index) in policies"
-                      :key="index"
-                      @click="chooseContract(item)"
-                      :value="index"
-                      :label="
-                        'Policy type: ' +
-                        item['odrl:permission']['odrl:action']['odrl:type']
-                      "
-                    >
-                    </v-radio>
-                  </v-radio-group>
-                  <v-row class="pt-8 justify-center">
-                    <v-btn
-                      color="#0F71CB"
-                      class="text-none"
-                      variant="outlined"
-                      @click="declineContract()"
-                      >Decline</v-btn
-                    >
-                    <v-btn
-                      class="text-none ms-4 text-white"
-                      color="#0F71CB"
-                      @click="callAcceptContract(this.contractToSign['@id'])"
-                      >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"
-                      />
+                <template v-if="showContractModal">
+                  <v-card class="contract-container">
+                    <div class="title-container">Choose a policy</div>
+                    <v-radio-group class="content-container" v-model="radios">
+                      <!-- Loop over the grouped policies -->
+                      <template
+                        v-for="(group, contractId) in groupedPolicies"
+                        :key="contractId"
+                      >
+                        <div class="policy-group-label">
+                          <span class="policy-group-label-mobile"
+                            >Contract ID:</span
+                          >
+                          {{ contractId }}
+                        </div>
+                        <v-radio
+                          v-for="(item, index) in group"
+                          :key="`${contractId}_${index}`"
+                          @click="chooseContract(contractId, item['@id'])"
+                          :value="`${contractId}_${index}`"
+                          :label="
+                            'Policy type: ' +
+                            item['odrl:permission']['odrl:action']['odrl:type']
+                          "
+                        >
+                        </v-radio>
+                      </template>
+                    </v-radio-group>
+                    <v-row class="pt-8 justify-center">
+                      <v-btn
+                        color="#0F71CB"
+                        class="text-none"
+                        variant="outlined"
+                        @click="declineContract()"
+                        >Decline</v-btn
+                      >
+                      <v-btn
+                        class="text-none ms-4 text-white"
+                        color="#0F71CB"
+                        @click="
+                          callAcceptContract(
+                            this.contractToSign.contract,
+                            this.contractToSign.policy
+                          )
+                        "
+                        >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>
+                </template>
+                <template v-if="declineContractModal">
+                  <v-card class="contract-container">
+                    <div class="title-container">
+                      Are you sure you want to decline?
                     </div>
-                  </v-row>
-                </v-card>
+                    <div class="policy-group-label">
+                      <div class="back-to-homepage">
+                        This will take you back to the Homepage
+                      </div>
+                    </div>
+                    <v-row class="pt-8 justify-center">
+                      <v-btn
+                        color="#0F71CB"
+                        class="text-none"
+                        variant="outlined"
+                        @click="cancelDeclineContract()"
+                        >Cancel</v-btn
+                      >
+                      <v-btn
+                        class="text-none ms-4 text-white"
+                        color="red-darken-4"
+                        @click="confirmDeclineContract()"
+                        >Yes, Decline</v-btn
+                      >
+                    </v-row>
+                  </v-card>
+                </template>
               </v-overlay>
             </template>
           </div>
@@ -131,9 +177,21 @@ export default {
     details: false,
     detailsTitle: "More details",
     policies: [],
+    declineContractModal: false,
+    showContractModal: true,
   }),
   computed: {
     ...mapState(["searchData", "contractToSign"]),
+    groupedPolicies() {
+      return this.policies.reduce((groups, policy) => {
+        const contractId = Object.keys(policy)[0];
+        if (!groups[contractId]) {
+          groups[contractId] = [];
+        }
+        groups[contractId].push(policy[contractId]);
+        return groups;
+      }, {});
+    },
   },
   async created() {
     this.backendService = new BackendService();
@@ -148,13 +206,14 @@ export default {
 
     // Check if policies array has elements and then access the @id of the first element
     if (this.policies.length > 0) {
-      const contractId = this.policies[0];
-
+      const firstPolicyObj = this.policies[0];
+      const initialContractToSign = Object.keys(firstPolicyObj)[0];
+      const initialPolicyToSign = firstPolicyObj[initialContractToSign]["@id"];
       // Commit the contract ID to the store
-      this.$store.commit("setContractToSign", contractId);
-
-      // Store the ID in state
-      this.contractToSign = contractId;
+      this.$store.commit("setContractToSign", {
+        contract: initialContractToSign,
+        policy: initialPolicyToSign,
+      });
     } else {
       console.error("No policies found");
     }
@@ -163,21 +222,28 @@ export default {
   },
   methods: {
     extractPolicies(contracts) {
-      const policies = [];
-      contracts.forEach((contract) => {
-        if (contract["odrl:hasPolicy"]) {
-          // Check if 'odrl:hasPolicy' is an array
+      let contractPolicies = [];
+
+      for (let key in contracts) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (contracts.hasOwnProperty(key)) {
+          const contract = contracts[key];
+
           if (Array.isArray(contract["odrl:hasPolicy"])) {
             contract["odrl:hasPolicy"].forEach((policy) => {
-              policies.push(policy);
+              let policyEntry = {};
+              policyEntry[key] = policy;
+              contractPolicies.push(policyEntry);
             });
           } else {
-            // 'odrl:hasPolicy' is a single object
-            policies.push(contract["odrl:hasPolicy"]);
+            // Create an entry with the contract key and the policy object
+            let policyEntry = {};
+            policyEntry[key] = contract["odrl:hasPolicy"];
+            contractPolicies.push(policyEntry);
           }
         }
-      });
-      return (this.policies = policies);
+      }
+      return (this.policies = contractPolicies);
     },
     toggleDetails() {
       this.details = !this.details;
@@ -187,29 +253,25 @@ export default {
         this.detailsTitle = "More details";
       }
     },
-    operatorMapper(operator) {
-      let opr = operator.replace("odrl:", "");
-      if (opr == "eq") {
-        return " = ";
-      }
-      return opr;
-    },
-    chooseContract(contract) {
-      return (this.contractToSign = store.commit(
-        "setContractToSign",
-        contract
-      ));
+    chooseContract(contract, policy) {
+      console.log("Contract chosen - contractToSign:", this.contractToSign);
+      console.log("Contract chosen - policies:", this.policies);
+
+      return (this.contractToSign = store.commit("setContractToSign", {
+        contract: contract,
+        policy: policy,
+      }));
     },
     shouldShowOverlay() {
-      if (this.contractItems.length > 1) {
+      if (this.policies.length > 1) {
         return (this.showOverlay = true);
       }
     },
-    async callAcceptContract(contractToSign) {
+    callAcceptContract(contract, policy) {
+      alert("contract: " + contract + " " + "policy: " + policy);
       try {
-        // let response = await this.backendService.acceptContract(contractToSign);
+        // let response = await this.backendService.acceptContract(contract, policy);
         // return response;
-        alert(contractToSign);
       } catch (error) {
         console.error("Error accepting contract", error);
       } finally {
@@ -217,8 +279,16 @@ export default {
       }
     },
     declineContract() {
+      this.declineContractModal = true;
+      this.showContractModal = false;
+    },
+    confirmDeclineContract() {
       this.$router.push("/");
     },
+    cancelDeclineContract() {
+      this.declineContractModal = false;
+      this.showContractModal = true;
+    },
   },
 };
 </script>
diff --git a/src/main.js b/src/main.js
index 449b4ea2b..99fe60907 100644
--- a/src/main.js
+++ b/src/main.js
@@ -31,7 +31,6 @@ import authentication from '@/services/Authentication';
 import JsonViewer from "vue3-json-viewer";
 import "vue3-json-viewer/dist/index.css";
 import { createI18n } from 'vue-i18n';
-// Import translation files
 import en from '@/translations/en.json';
 import de from '@/translations/de.json';
 
diff --git a/src/store/index.js b/src/store/index.js
index 5cb9cec41..7d6d7c4ea 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -56,8 +56,8 @@ export default createStore({
             }
         ],
         searchData: {
-            "contracts": [
-                {
+            "contracts": {
+                "9b3c0977-6b14-4201-bd76-55f681a92872": {
                     "@id": "9b3c0977-6b14-4201-bd76-55f681a92872",
                     "@type": "dcat:Dataset",
                     "odrl:hasPolicy": {
@@ -110,7 +110,7 @@ export default createStore({
                     "edc:description": "Battery Passport test data",
                     "edc:id": "365e6fbe-bb34-11ec-8422-0242ac120002-61125dc3-5e6f-4f4b-838d-447432b97918"
                 },
-                {
+                "5c4fbb7d-cf02-4401-a7a3-f0ec1c506f33": {
                     "@id": "5c4fbb7d-cf02-4401-a7a3-f0ec1c506f33",
                     "@type": "dcat:Dataset",
                     "odrl:hasPolicy": [{
@@ -212,11 +212,11 @@ export default createStore({
                     "edc:description": "Battery Passport test data",
                     "edc:id": "1f4a64f0-aba9-498a-917c-4936c24c50cd-49a06ad2-64b7-46c8-9f3b-a718c462ca23"
                 }
-            ],
+            },
             "token": "688787d8ff144c502c7f5cffaafe2cc588d86079f9de88304c26b0cb99ce91c6",
             "id": "ccbf6bfb-c7e1-4db4-8225-9fa95ee82f7f"
         },
-        contractToSign: null,
+        contractToSign: {},
         processId: null,
         searchContractId: null,
         irsState: false,
diff --git a/src/views/PassportView.vue b/src/views/PassportView.vue
index b630b9369..e92d749c2 100644
--- a/src/views/PassportView.vue
+++ b/src/views/PassportView.vue
@@ -206,7 +206,7 @@ export default {
       irsData: [],
       processId: null,
       backendService: null,
-      error: false,
+      error: true,
       errorObj: {
         title: "Something went wrong while returning the passport!",
         description: "We are sorry for that, you can retry or try again later",