diff --git a/frontend/marketplace/src/components/AuctionResultsCard.vue b/frontend/marketplace/src/components/AuctionResultsCard.vue
index 3e70745d..ade2b744 100644
--- a/frontend/marketplace/src/components/AuctionResultsCard.vue
+++ b/frontend/marketplace/src/components/AuctionResultsCard.vue
@@ -2,9 +2,14 @@
 import type { MarketplaceListing } from "@/types/GraphqlSchema";
 import router from "@/router";
 import auctionCard from "@/assets/auctionCard.png";
-import { getDetailsList } from "@/utils/utils";
+import {
+  getDetailsList,
+  prettifyCardProperty,
+  stripPlasticTypeFromMaterial,
+  findPlasticTypeInMaterial,
+} from "@/utils/utils";
 import { formatDenom } from "@/utils/wallet-utils";
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import CustomImage from "@/components/CustomImage.vue";
 
 export interface AuctionResultsCardProps {
@@ -13,11 +18,34 @@ export interface AuctionResultsCardProps {
   };
 }
 
+interface CardDetailsList {
+  applicant: string[];
+  location: string[];
+  material: {
+    key: string;
+    value: string;
+  }[][];
+  volume: number;
+  thumbnailUrl: string;
+  image: string[];
+  locationPointers: {
+    lat: number;
+    lng: number;
+  }[];
+}
+
 const props = defineProps<AuctionResultsCardProps>();
 const denom = ref("");
+const cardDetailsList = ref<CardDetailsList>();
+const applicant = computed<string>(() => {
+  return cardDetailsList.value?.applicant[0] ?? "";
+});
 
 onMounted(async () => {
   denom.value = await formatDenom(props.cardData?.pricePerCreditDenom);
+  cardDetailsList.value = getDetailsList(
+    props.cardData.creditCollection.creditData.nodes,
+  );
 });
 </script>
 <template>
@@ -25,10 +53,7 @@ onMounted(async () => {
     class="bg-auctionBackground md:bg-lightBlack rounded-lg font-Inter text-white my-5 md:p-3 md:grid md:grid-cols-5 min-h-[180px]"
   >
     <CustomImage
-      :src="
-        getDetailsList(cardData.creditCollection.creditData.nodes)
-          .thumbnailUrl || auctionCard
-      "
+      :src="cardDetailsList?.thumbnailUrl || auctionCard"
       image-class="max-h-[200px] w-full rounded-sm"
     />
 
@@ -41,11 +66,7 @@ onMounted(async () => {
         <p class="text-title15 font-light">Price per credit</p>
       </div>
       <div class="text-right">
-        <p class="text-title13 font-bold">
-          {{
-            getDetailsList(cardData.creditCollection.creditData.nodes).volume
-          }}kg
-        </p>
+        <p class="text-title13 font-bold">{{ cardDetailsList?.volume }}kg</p>
         <p class="text-title11 font-light">Volume</p>
       </div>
       <div>
@@ -71,51 +92,38 @@ onMounted(async () => {
     >
       <div class="col-span-1 ...">
         <p class="details-title">Material</p>
-        <ul class="list-disc ml-6">
-          <li
-            v-for="material in getDetailsList(
-              cardData.creditCollection.creditData.nodes,
-            ).material"
-            :key="material.key"
-          >
-            {{ material.value }}
-          </li>
-        </ul>
+        <div
+          v-for="(material, index) in cardDetailsList?.material"
+          :key="`${cardData.id}-material-${index}`"
+        >
+          <h3>{{ findPlasticTypeInMaterial(material)?.value }}</h3>
+          <ul class="list-disc ml-6">
+            <li
+              v-for="property in stripPlasticTypeFromMaterial(material)"
+              :key="property.key"
+              class="text-title14"
+            >
+              {{ prettifyCardProperty(property) }}
+            </li>
+          </ul>
+        </div>
       </div>
       <div class="col-span-1">
         <p class="details-title">Location</p>
         <p>{{ cardData.creditCollection.nodes }}</p>
         <ul class="list-disc ml-6">
-          <li
-            v-for="location in getDetailsList(
-              cardData.creditCollection.creditData.nodes,
-            ).location"
-            :key="location"
-          >
+          <li v-for="location in cardDetailsList?.location" :key="location">
             {{ location }}
           </li>
         </ul>
       </div>
       <div class="col-span-1">
-        <p class="details-title">Applicant</p>
-        <ul class="list-disc ml-6">
-          <li
-            v-for="applicant in getDetailsList(
-              cardData.creditCollection.creditData.nodes,
-            ).applicant"
-            :key="applicant"
-          >
-            {{ applicant }}
-          </li>
-        </ul>
+        <p class="details-title">Collection Organisation</p>
+        <h3>{{ applicant }}</h3>
       </div>
       <div class="col-span-1">
         <p class="details-title">Volume</p>
-        <p>
-          {{
-            getDetailsList(cardData.creditCollection.creditData.nodes).volume
-          }}kg
-        </p>
+        <p>{{ cardDetailsList?.volume }}kg</p>
       </div>
       <div class="col-span-1 text-right">
         <p class="text-title32 font-bold leading-7 mt-6">
diff --git a/frontend/marketplace/src/components/CreditCard.vue b/frontend/marketplace/src/components/CreditCard.vue
index 41226bed..51cc1886 100644
--- a/frontend/marketplace/src/components/CreditCard.vue
+++ b/frontend/marketplace/src/components/CreditCard.vue
@@ -50,12 +50,12 @@ const showTransferCreditsModal = ref(false);
           <ul class="list-disc ml-6">
             <li
               class="text-title18"
-              v-for="material in getDetailsList(
-                cardData.creditCollection.creditData.nodes
+              v-for="(material, index) in getDetailsList(
+                cardData.creditCollection.creditData.nodes,
               ).material"
-              :key="material.key"
+              :key="`${material[0].key}-index-${index}`"
             >
-              {{ material.value }}
+              {{ material[0].value }}
             </li>
           </ul>
         </div>
@@ -104,12 +104,12 @@ const showTransferCreditsModal = ref(false);
           <ul class="list-disc ml-6">
             <li
               class="text-title14 font-bold"
-              v-for="material in getDetailsList(
-                cardData.creditCollection.creditData.nodes
+              v-for="(material, index) in getDetailsList(
+                cardData.creditCollection.creditData.nodes,
               ).material"
-              :key="material.key"
+              :key="`${material[0].key}-index-${index}`"
             >
-              {{ material.value }}
+              {{ material[0].value }}
             </li>
           </ul>
         </div>
diff --git a/frontend/marketplace/src/components/SearchBar.vue b/frontend/marketplace/src/components/SearchBar.vue
index 19d3a5a0..084a9f14 100644
--- a/frontend/marketplace/src/components/SearchBar.vue
+++ b/frontend/marketplace/src/components/SearchBar.vue
@@ -87,7 +87,15 @@ const applicantData: any = useQuery(gql`
           <p class="text-title14 text-dropDownText">Location</p>
           <SearchFilterSelect
             select
-            :options="Array.from(new Set(locationData?.result.value?.countries?.nodes.map((item: any) => item.id)))"
+            :options="
+              Array.from(
+                new Set(
+                  locationData?.result.value?.countries?.nodes.map(
+                    (item: any) => item.id,
+                  ),
+                ),
+              )
+            "
             v-model="filterValues.location"
             placeholder="Select Location"
           />
@@ -110,9 +118,17 @@ const applicantData: any = useQuery(gql`
           />
         </div>
         <div>
-          <p class="filter-subtitle">COLLECTOR ORGANISATION</p>
+          <p class="filter-subtitle">COLLECTION ORGANISATION</p>
           <SearchFilterSelect
-            :options="Array.from(new Set(applicantData?.result.value?.applicantData?.nodes.map((item: any)=>item.name)))"
+            :options="
+              Array.from(
+                new Set(
+                  applicantData?.result.value?.applicantData?.nodes.map(
+                    (item: any) => item.name,
+                  ),
+                ),
+              )
+            "
             v-model="filterValues.organization"
             placeholder="Select collector"
           />
@@ -170,7 +186,15 @@ const applicantData: any = useQuery(gql`
       <div class="filter-box">
         <p class="filter-subtitle">LOCATION</p>
         <SearchFilterSelect
-          :options="Array.from(new Set(locationData?.result.value?.countries?.nodes.map((item: any)=>item.id)))"
+          :options="
+            Array.from(
+              new Set(
+                locationData?.result.value?.countries?.nodes.map(
+                  (item: any) => item.id,
+                ),
+              ),
+            )
+          "
           v-model="filterValues.location"
           placeholder="Select Location"
         />
@@ -194,9 +218,17 @@ const applicantData: any = useQuery(gql`
         />
       </div>
       <div class="filter-box">
-        <p class="filter-subtitle">COLLECTOR ORGANISATION</p>
+        <p class="filter-subtitle">COLLECTION ORGANISATION</p>
         <SearchFilterSelect
-          :options="Array.from(new Set(applicantData?.result.value?.applicantData?.nodes.map((item: any)=>item.name)))"
+          :options="
+            Array.from(
+              new Set(
+                applicantData?.result.value?.applicantData?.nodes.map(
+                  (item: any) => item.name,
+                ),
+              ),
+            )
+          "
           v-model="filterValues.organization"
           placeholder="Select collector"
         />
diff --git a/frontend/marketplace/src/pages/AuctionDetails.vue b/frontend/marketplace/src/pages/AuctionDetails.vue
index b961c070..c53bb695 100644
--- a/frontend/marketplace/src/pages/AuctionDetails.vue
+++ b/frontend/marketplace/src/pages/AuctionDetails.vue
@@ -293,7 +293,7 @@ onMounted(() => {
           list
         />
         <ProjectDetailContent
-          label="Collection organization"
+          label="Collection organisation"
           :value="auctionDetails?.applicant"
         />
         <ProjectDetailContent
diff --git a/frontend/marketplace/src/router/index.ts b/frontend/marketplace/src/router/index.ts
index 056120f6..a9b5c206 100644
--- a/frontend/marketplace/src/router/index.ts
+++ b/frontend/marketplace/src/router/index.ts
@@ -11,6 +11,10 @@ import AuctionPaymentSuccessful from "@/pages/AuctionPaymentSuccessful.vue";
 import AuctionPaymentCancelled from "@/pages/AuctionPaymentCancelled.vue";
 
 const router = createRouter({
+  scrollBehavior: () => {
+    // always scroll to top after navigation
+    return { top: 0 };
+  },
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
diff --git a/frontend/marketplace/src/utils/utils.ts b/frontend/marketplace/src/utils/utils.ts
index a335013b..74bed36f 100644
--- a/frontend/marketplace/src/utils/utils.ts
+++ b/frontend/marketplace/src/utils/utils.ts
@@ -6,19 +6,36 @@ export const convertIPFStoHTTPS = (url: string) => {
   return HTTPS_URL;
 };
 
+const uniqueMaterials = (
+  materials: Array<Array<{ key: string; value: string }>>,
+): Array<Array<{ key: string; value: string }>> => {
+  // Convert each material to a string representation
+  const materialsStr = materials.map((material) =>
+    JSON.stringify(material.sort((a, b) => a.key.localeCompare(b.key))),
+  );
+  // Create a Set from the stringified materials to remove duplicates
+  const uniqueMaterialsStr = Array.from(new Set(materialsStr));
+
+  // Convert each unique material back to an object
+  const uniqueMaterials = uniqueMaterialsStr.map((materialStr) =>
+    JSON.parse(materialStr),
+  );
+
+  return uniqueMaterials;
+};
+
 // TODO run in only once on component init
 export const getDetailsList = (data: any) => {
   const applicantArray: string[] = [];
   const locationArray: string[] = [];
   const imageArray: string[] = [];
-  const materialArray: { key: string; value: string }[] = [];
+  const materialArray: { key: string; value: string }[][] = [];
   let volume: number = 0;
   let thumbnailUrl: string = "";
   const locationPointersArray: {
     lat: number;
     lng: number;
   }[] = [];
-
   data.map((item: any) => {
     if (item.applicantDataByCreditDataId) {
       item.applicantDataByCreditDataId.nodes.map((node: any) => {
@@ -35,7 +52,7 @@ export const getDetailsList = (data: any) => {
           lat: node?.latitude,
           lng: node?.longitude,
         });
-        materialArray.push(...node.material.nodes);
+        materialArray.push(node.material.nodes);
       });
     }
     if (item.mediaFiles) {
@@ -46,11 +63,7 @@ export const getDetailsList = (data: any) => {
     }
   });
 
-  const uniqueMaterialArray = materialArray.filter(
-    (obj, index, self) =>
-      index ===
-      self.findIndex((o) => o.key === obj.key && o.value === obj.value),
-  );
+  const uniqueMaterialArray = uniqueMaterials(materialArray);
 
   return {
     applicant: Array.from(new Set(applicantArray)),
@@ -136,6 +149,33 @@ export const ipfsToHttpsProtocol = (url: string) => {
   return url.replace("ipfs://", "https://ipfs.empowerchain.io/ipfs/");
 };
 
+export const upperCaseFirstLetter = (string: string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
+
+export const prettifyCardProperty = (property: {
+  key: string;
+  value: string;
+}): string => {
+  return property.value.toLowerCase() === "yes" ||
+    property.value.toLowerCase() === "no"
+    ? upperCaseFirstLetter(property.key) + ": " + property.value.toLowerCase()
+    : property.value;
+};
+
+interface Material {
+  key: string;
+  value: string;
+}
+
+export const stripPlasticTypeFromMaterial = (arrayOfProperties: Material[]) => {
+  return arrayOfProperties.filter((property) => property.key !== "plasticType");
+};
+
+export const findPlasticTypeInMaterial = (material: Material[]) => {
+  return material.find((property) => property.key === "plasticType");
+};
+
 export const isValidCreditAmount = (
   amount: number,
   available: number,