diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6fa232f..1a234c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,6 +56,9 @@ importers:
       '@msgpack/msgpack':
         specifier: ^2.7.2
         version: 2.8.0
+      '@svelte-put/dragscroll':
+        specifier: ^3.0.0
+        version: 3.0.0
       '@tailwindcss/forms':
         specifier: ^0.5.3
         version: 0.5.7(tailwindcss@3.3.5)
@@ -1181,6 +1184,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /@svelte-put/dragscroll@3.0.0:
+    resolution: {integrity: sha512-h9MkYBQ9pDmCo/zHtMPzKrTSjGIogbbtRjtoTJH9hjBZGxPhpcGKgS3UA8wLF+IqB47Hcp97LblB855iZlo5nA==}
+    dev: false
+
   /@sveltejs/adapter-static@2.0.3(@sveltejs/kit@1.30.3):
     resolution: {integrity: sha512-VUqTfXsxYGugCpMqQv1U0LIdbR3S5nBkMMDmpjGVJyM6Q2jHVMFtdWJCkeHMySc6mZxJ+0eZK3T7IgmUCDrcUQ==}
     peerDependencies:
diff --git a/ui/package.json b/ui/package.json
index 36a1c2c..b7bb683 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -28,7 +28,8 @@
     "leaflet": "^1.9.3",
     "svelte-apollo": "^0.5.0",
     "svelte-leafletjs": "^0.10.0",
-    "ws": "^8.13.0"
+    "ws": "^8.13.0",
+    "@svelte-put/dragscroll": "^3.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^4.0.0",
diff --git a/ui/src/lib/CommitmentModal.svelte b/ui/src/lib/CommitmentModal.svelte
index a1b8e03..3de6877 100644
--- a/ui/src/lib/CommitmentModal.svelte
+++ b/ui/src/lib/CommitmentModal.svelte
@@ -29,6 +29,17 @@
   let agents: Agent[];
   let resourceSpecifications: any[];
   let units: any[];
+  let saveCost: boolean = false;
+
+  $: saveCost;
+
+  $: if (selectedCommitment) {
+    if (selectedCommitment.clauseOf && selectedCommitment.clauseOf.commitments.length > 0) {
+      saveCost = true
+    } else {
+      saveCost = false
+    }
+  }
 
   // $: if (open) {
     // newCommitment.id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
@@ -399,10 +410,12 @@ const GET_ALL_RESOURCE_SPECIFICATIONS = gql`
                     id="defaultUnitOfResource"
                     name="defaultUnitOfResource"
                     class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                    bind:value={newCommitment.resourceConformsTo.name}
+                    value={newCommitment.resourceConformsTo.name}
                     on:change={(e) => {
                       newCommitment.resourceQuantity.hasUnit = resourceSpecifications.find((rs) => rs.name === e.target.value).defaultUnitOfResource
-                      newCommitment.resourceConformsTo.defaultUnitOfResource = resourceSpecifications.find((rs) => rs.name === e.target.value).defaultUnitOfResource
+                      // newCommitment.resourceConformsTo.defaultUnitOfResource = resourceSpecifications.find((rs) => rs.name === e.target.value).defaultUnitOfResource
+                      let x = resourceSpecifications.find((rs) => rs.name === e.target.value)
+                      newCommitment.resourceConformsTo = x
                     }}
                   >
                     {#each resourceSpecifications as rs}
@@ -491,7 +504,7 @@ const GET_ALL_RESOURCE_SPECIFICATIONS = gql`
                   >
                     {#if units}
                       {#each units as unit}
-                        <option value={unit.label}>{unit.symbol}</option>
+                        <option value={unit.label}>{unit.label}</option>
                       {/each}
                     {/if}
                   </select>
@@ -525,6 +538,22 @@ const GET_ALL_RESOURCE_SPECIFICATIONS = gql`
                     />
                   {/if}
                 </div>
+
+                <!-- save cost? checkbox -->
+                <div class="mt-4 flex items-center">
+                  <input
+                    id="save_cost"
+                    name="save_cost"
+                    type="checkbox"
+                    checked={saveCost}
+                    on:change={(e) => {
+                      saveCost = e.target.checked
+                    }}
+                    class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                  />
+                  <label for="save_cost" class="ml-2 block text-sm text-gray-900">Save cost</label>
+                </div>
+
                 <!-- <p class="mt-3 text-sm leading-6 text-gray-600">
                   Description for the description field
                 </p> -->
@@ -577,13 +606,13 @@ const GET_ALL_RESOURCE_SPECIFICATIONS = gql`
             //   selectedCommitment = Object.assign({}, newCommitmentTemplate)
 
             }
-            // console.log("hihi")
             dispatch('submit', {
               column: commitmentModalColumn,
               process: commitmentModalProcess,
               side: commitmentModalSide,
               commitment: updatedCommitment,
-              useAs: 'update'
+              useAs: 'update',
+              saveCost: saveCost
             });
             open = false;
           }}
@@ -614,7 +643,8 @@ const GET_ALL_RESOURCE_SPECIFICATIONS = gql`
                     ...newCommitment,
                     id: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
                   },
-                  useAs: 'new'
+                  useAs: 'new',
+                  saveCost: saveCost
                 });
               // }
 
diff --git a/ui/src/lib/EconomicEventModal.svelte b/ui/src/lib/EconomicEventModal.svelte
index af4b3b0..6df87db 100644
--- a/ui/src/lib/EconomicEventModal.svelte
+++ b/ui/src/lib/EconomicEventModal.svelte
@@ -426,7 +426,7 @@ const GET_ALL_RESOURCE_SPECIFICATIONS = gql`
                   >
                     {#if units}
                       {#each units as unit}
-                        <option value={unit.label}>{unit.symbol}</option>
+                        <option value={unit.label}>{unit.labell}</option>
                       {/each}
                     {/if}
                   </select>
@@ -461,19 +461,33 @@ const GET_ALL_RESOURCE_SPECIFICATIONS = gql`
                   {/if}
 
                   <div class="mt-4 text-left">
-                    <div>
-                      <label
-                        for="date"
-                        class="block text-sm font-medium leading-6 text-gray-900"
-                        >Commitment finished</label
-                      >
-                        <input type="checkbox" id="finished" 
+                    <!-- <div class="mt-4 flex items-center">
+                      <input
+                        id="save_cost"
+                        name="save_cost"
+                        type="checkbox"
+                        checked={saveCost}
+                        on:change={(e) => {
+                          saveCost = e.target.checked
+                        }}
+                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                      />
+                      <label for="save_cost" class="ml-2 block text-sm text-gray-900">Save cost</label>
+                    </div> -->
+                    <div class="mt-4 flex items-center">
+                      <input type="checkbox" id="finished" 
                         on:change={(e) => {
-                          console.log("lkjjjjjjj", e)
                           selectedCommitment.finished = e.target.checked
                           console.log(selectedCommitment.finished)
                         }}
-                        bind:checked={finished} class="mt-2">
+                        bind:checked={finished} 
+                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        >
+
+                        <label
+                        for="date"
+                        class="block text-sm font-medium leading-6 text-gray-900"
+                        >&nbsp;Commitment finished</label>
                     </div>
                   </div>
                 </div>
diff --git a/ui/src/lib/Header.svelte b/ui/src/lib/Header.svelte
index 6e3a651..c88abc3 100644
--- a/ui/src/lib/Header.svelte
+++ b/ui/src/lib/Header.svelte
@@ -26,7 +26,7 @@
 <style>
   /* Custom CSS */
   .custom-background {
-    background-image: url('/heading3.png');
+    background-image: url('/dsf.jpg');
     background-size: cover;
     background-position: center;
   }
diff --git a/ui/src/lib/PlanModal.svelte b/ui/src/lib/PlanModal.svelte
index 8ea57a8..610e437 100644
--- a/ui/src/lib/PlanModal.svelte
+++ b/ui/src/lib/PlanModal.svelte
@@ -191,6 +191,7 @@
           node {
             id
             name
+            classifiedAs
           }
         }
       }
@@ -315,7 +316,7 @@
       },
     }
     
-    const defaultAgent = agents.find((a) => a.node.name === "Carbon Farm Network").node
+    const defaultAgent = agents.find((a) => a.node.classifiedAs[2] === "Network").node
 
     try {
       o.provider = agents.find((a) => a.node.name === commitment.provider.name).node.id
@@ -400,7 +401,7 @@
       let o = {
         ...c,
         // provider is carbon farm network
-        provider: agents.find((a) => a.node.name === "Carbon Farm Network").node.id,
+        provider: agents.find((a) => a.node.classifiedAs[2] === "Network").node.id,
         // reciever is agent for request
         plannedWithin: p.data.res.plan.id,
         // references plan with independentDemandOf
@@ -584,12 +585,16 @@
     // delete commitments
     console.log(commitmentsToDelete)
     for (const c of commitmentsToDelete) {
-      console.log("deleting commitment", c)
-      await deleteCommitment({
-        variables: {
-          revisionId: c
-        }
-      })
+      try {
+        console.log("deleting commitment", c)
+        await deleteCommitment({
+          variables: {
+            revisionId: c
+          }
+        })
+      } catch (e) {
+        console.log("could not delete commitment", e)
+      }
     }
 
     savingPlan = false;
@@ -625,6 +630,7 @@
     processSpecifications = z.data.processSpecifications.edges
     console.log("loaded process specifications", processSpecifications)
     const y = await agentsQuery.refetch()
+    console.log(y)
     agents = y.data.agents.edges
     console.log("loaded agents", agents)
     window.addEventListener('keydown', checkKey)
diff --git a/ui/src/lib/graphql/plan.fragments.ts b/ui/src/lib/graphql/plan.fragments.ts
index 623a362..8acdf94 100644
--- a/ui/src/lib/graphql/plan.fragments.ts
+++ b/ui/src/lib/graphql/plan.fragments.ts
@@ -99,8 +99,10 @@ export const COMMITMENT_RETURN_FIELDS = gql`
     finished
     clauseOf {
       id
+      revisionId
       commitments {
         id
+        revisionId
         action {
           id
           label
diff --git a/ui/src/lib/icons/EconomicEvent.svelte b/ui/src/lib/icons/EconomicEvent.svelte
index 39bdf0e..e6dbdf3 100644
--- a/ui/src/lib/icons/EconomicEvent.svelte
+++ b/ui/src/lib/icons/EconomicEvent.svelte
@@ -13,17 +13,17 @@
   />
 </svg> -->
 
-<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
-  <!-- Notebook cover -->
+<!-- <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
   <rect x="10%" y="10%" width="80%" height="80%" fill="transparent" stroke="black" stroke-width="1"/>
    
-  <!-- Dollar sign -->
   <text x="48%" y="58%" font-size="80%" fill="black">☰</text>
   <text x="48%" y="88%" font-size="80%" fill="black">☰</text>
 
-  <!-- Notebook binding -->
   <line x1="50%" y1="10%" x2="50%" y2="90%" stroke="black" stroke-width="2"/>
   
-  <!-- Dollar sign -->
   <text x="15%" y="65%" font-size="80%" fill="black">$</text>
-</svg>
+</svg> -->
+
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+  <path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192zm176 40c-13.3 0-24 10.7-24 24v48H152c-13.3 0-24 10.7-24 24s10.7 24 24 24h48v48c0 13.3 10.7 24 24 24s24-10.7 24-24V352h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H248V256c0-13.3-10.7-24-24-24z"/>
+</svg>
\ No newline at end of file
diff --git a/ui/src/routes/plans/new/+page.svelte b/ui/src/routes/plans/new/+page.svelte
index 58da800..f9d8497 100644
--- a/ui/src/routes/plans/new/+page.svelte
+++ b/ui/src/routes/plans/new/+page.svelte
@@ -21,6 +21,7 @@
   import type { RelayConn } from '$lib/graphql/helpers'
   import type { ReadableQuery } from 'svelte-apollo'
   import type { Unit, AgentConnection, Agent, Proposal, ProposalCreateParams, IntentCreateParams, IntentUpdateParams, UnitConnection, ResourceSpecification, ProposalConnection, ProposalUpdateParams, Intent, PlanCreateParams, PlanConnection } from '@valueflows/vf-graphql'
+  import { dragscroll } from '@svelte-put/dragscroll';
 
   let agents: Agent[] = []
   let commitmentModalProcess: number | undefined;
@@ -96,6 +97,10 @@
         console.log("proposalsList", proposalsList)
         requests = proposalsList.filter(it => it.publishes?.find(it => !it.reciprocal)?.publishes?.receiver)
         offers = proposalsList.filter(it => it.publishes?.find(it => !it.reciprocal)?.publishes?.provider)
+        requestsPerOffer = offers.map(it => it.publishes.find(it => !it.reciprocal).id).reduce((acc, it) => {
+          acc[it] = {}
+          return acc
+        }, {})
         console.log("requests init", requests)
         console.log("offers init", offers)
         // console.log(proposalsList[0].publishes[0].publishes)
@@ -440,6 +445,7 @@
   $: aggregatedCommitments = aggregateCommitments(commitments)
   $: if (!plan_created) {
     allColumns = generateColumns(aggregatedCommitments);
+    console.log("all columns", allColumns)
   }
   function createCommitments(requests: { publishes: { proposedIntent: { intent: any }[] }[] }[]): any[] {
     console.log(requests[0].publishes.filter(it => !it.reciprocal))
@@ -564,6 +570,7 @@
     let numerical_value;
     let hasUnit;
     let reciprocal_intent;
+    let primary_intent;
     // TODO get data to test the matching offer logic
     const matching_offer = offers.find(offer => {
       return offer.publishes.find(
@@ -581,10 +588,13 @@
       reciprocal_intent = matching_offer.publishes.find(
         intent => intent.reciprocal
       )
+      primary_intent = matching_offer.publishes.find(
+        intent => !intent.reciprocal
+      )
       // console.log("TEMP", reciprocal_intent)
-      numerical_value = reciprocal_intent.publishes?.resourceQuantity.hasNumericalValue
-      hasUnit = reciprocal_intent.publishes?.resourceQuantity
-      // console.log(numerical_value, hasUnit)
+      numerical_value = reciprocal_intent.publishes?.resourceQuantity.hasNumericalValue / primary_intent.publishes?.resourceQuantity.hasNumericalValue
+      hasUnit = primary_intent.publishes?.resourceQuantity.hasUnit
+      console.log(numerical_value, hasUnit)
       // console.log("made agreement", reciprocal_intent.publishes?.resourceConformsTo?.name, numerical_value, hasUnit)
     } else {
       return
@@ -592,6 +602,13 @@
 
     if (!numerical_value || !hasUnit) return
 
+    if (!requestsPerOffer[primary_intent.id]) {
+      requestsPerOffer[primary_intent.id] = {}
+    }
+    if (commitment.action.label == "pickup") {
+      requestsPerOffer[primary_intent.id][commitment.id] = new Decimal(reciprocal_intent.publishes?.resourceQuantity.hasNumericalValue)
+    }
+
     return {
       name: recipe?.name,
       note: recipe?.note,
@@ -614,6 +631,29 @@
   let planModalOpen = false
   let commitmentModalOpen = false
   let selectedCommitmentId: string | undefined = undefined
+  let requestsPerOffer: { [key: string]: any } = {}
+
+  let totalCost: Decimal = new Decimal(0);
+  $: if (allColumns) {
+    console.log("--totalcost--")
+    totalCost = new Decimal(0)
+    for (let i = 0; i < allColumns.length; i++) {
+      console.log("column", i)
+      console.log(allColumns[i])
+      for (let j = 0; j < allColumns[i].length; j++) {
+        console.log("process", j)
+        let inputsAndOutputs = allColumns[i][j].committedInputs.concat(allColumns[i][j].committedOutputs)
+        for (let k = 0; k < inputsAndOutputs.length; k++) {
+          console.log("cost", inputsAndOutputs[k])
+          console.log("cost", inputsAndOutputs[k].agreement)
+          if (inputsAndOutputs[k].agreement) {
+            totalCost = totalCost.add(inputsAndOutputs[k].agreement.commitment.resourceQuantity.hasNumericalValue)
+          }
+        }
+      }
+    }
+    console.log("total cost", totalCost.toString())
+  }
 </script>
 
 <!-- {JSON.stringify(allColumns)} -->
@@ -637,12 +677,26 @@
         commitments = commitments.map(it => it.id == event.detail.commitment.id ? event.detail.commitment : it)
         commitments = [...commitments]
       } else {
-        let exchange = findExchange(event.detail.commitment, allColumns[commitmentModalColumn][commitmentModalProcess].based_on.name)
-        let agreement = makeAgreement(event.detail.commitment, exchange, offers)
+        // check if provider changed, and if so, update the cost
         let updatedCommitment = {
           ...event.detail.commitment,
-          agreement: agreement
         }
+        
+        // let providerChanged = false;
+        // try {
+        //   providerChanged = event.detail.commitment.provider?.id != allColumns[commitmentModalColumn][commitmentModalProcess][commitmentModalSide].find(it => it.id == event.detail.commitment.id)?.provider?.id
+        // } catch (e) {
+        //   console.log(e)
+        // }
+        // console.log("provider changed? ", providerChanged, event.detail.commitment.provider)
+        // if (providerChanged) {
+          // plan_created = true
+          let exchange = findExchange(event.detail.commitment, allColumns[commitmentModalColumn][commitmentModalProcess].based_on.name)
+          let agreement = makeAgreement(event.detail.commitment, exchange, offers)
+          updatedCommitment.agreement = agreement
+        // }
+
+        console.log("done...", updatedCommitment)
         let commitmentIndex = allColumns[event.detail.column][event.detail.process][event.detail.side].findIndex(it => it.id == event.detail.commitment.id)
         allColumns[event.detail.column][event.detail.process][event.detail.side][commitmentIndex] = updatedCommitment
       }
@@ -652,6 +706,10 @@
         commitments.push(event.detail.commitment)
         commitments = [...commitments]
       } else {
+        plan_created = true
+        let exchange = findExchange(event.detail.commitment, allColumns[commitmentModalColumn][commitmentModalProcess].based_on.name)
+        let agreement = makeAgreement(event.detail.commitment, exchange, offers)
+        event.detail.commitment.agreement = agreement
         allColumns[event.detail.column][event.detail.process][event.detail.side].push(event.detail.commitment)
       }
     }
@@ -680,7 +738,8 @@
   <!-- <div class="outer-div justify-center items-center">
   <div class="scroll-div justify-center items-center">
   <div class="content-div flex space-x-8 mx-4"> -->
-  <div class="flex space-x-8 mx-4 overflow-x-scroll">
+  <div class="flex space-x-8 mx-4 overflow-x-scroll overflow-y-scroll" style="height: calc(100vh - 172px)" use:dragscroll={{ axis: 'both' }}>
+  <!-- <div class="flex space-x-8 mx-4 h-64"> -->
     <div class="min-w-[200px]">
       <div class="flex justify-center" style="margin-top: 22px; margin-bottom: 22px">
         <button
@@ -701,25 +760,34 @@
             {#each proposalsList as { publishes }}
               {@const reciprocal = publishes?.find(it => it.reciprocal)}
               {@const primary = publishes?.find(it => !it.reciprocal)}
+              <!-- {@const requestsTotalAll = requestsPerOffer[primary?.id]} -->
+              <!-- {@const requestsTotal = requestsTotalAll ? Object.values(requestsTotalAll).map(it => new Decimal(it)).reduce((acc, it) => acc.add(it), new Decimal(0)) : new Decimal(0)} -->
+              <!-- {@const requestsTotal = requestsPerOffer[primary?.id]} -->
               {#if primary?.publishes?.provider}
-                <div
-                  class="bg-white rounded-r-full border border-gray-400 py-1 pl-2 pr-4 text-xs"
-                >
+              <div
+              class="bg-white rounded-r-full border border-gray-400 py-1 pl-2 pr-4 text-xs"
+              >
                   <p>{primary?.publishes?.resourceConformsTo?.name}</p>
                   {#if primary?.publishes?.availableQuantity}
                     <p>
-                      {primary?.publishes?.availableQuantity?.hasNumericalValue}
-                      {primary?.publishes?.availableQuantity?.hasUnit?.label},
-                      {reciprocal?.publishes?.resourceQuantity?.hasNumericalValue}<br>
-                      {reciprocal?.publishes?.resourceConformsTo?.name} per {primary?.publishes?.resourceQuantity?.hasUnit?.label}
+                      {#if primary?.publishes?.availableQuantity?.hasNumericalValue && primary?.publishes?.availableQuantity?.hasNumericalValue > 0}
+                        {primary?.publishes?.availableQuantity?.hasNumericalValue}
+                        {primary?.publishes?.availableQuantity?.hasUnit?.label} available<br>
+                      {/if}
+                      <!-- <span style="color: {(requestsTotal > primary?.publishes?.availableQuantity?.hasNumericalValue) ? 'red' : ''
+                      }">
+                      {requestsTotal} of {primary?.publishes?.availableQuantity?.hasNumericalValue} requested<br>
+                      </span> -->
+                      {reciprocal?.publishes?.resourceQuantity?.hasNumericalValue}
+                      {reciprocal?.publishes?.resourceConformsTo?.name} per {primary?.publishes?.resourceQuantity?.hasNumericalValue} {primary?.publishes?.resourceQuantity?.hasUnit?.label}
                     </p>
                   {:else}
                     <p>
                       {reciprocal?.publishes?.resourceQuantity?.hasNumericalValue}
-                      {reciprocal?.publishes?.resourceConformsTo?.name} per {primary?.publishes?.resourceQuantity?.hasUnit?.label}
+                      {reciprocal?.publishes?.resourceConformsTo?.name} per {primary?.publishes?.resourceQuantity?.hasNumericalValue}  {primary?.publishes?.resourceQuantity?.hasUnit?.label}
                     </p>
                   {/if}
-                  <p>{primary?.publishes?.provider?.name}</p>
+                  <p>from {primary?.publishes?.provider?.name}</p>
                 </div>
               {/if}
             {/each}
@@ -753,7 +821,7 @@
     {/each} -->
     {#each allColumns as processes, columnIndex}
       {@const { image, name } = processes[0].based_on}
-      <div class="min-w-[400px]">
+      <div class="min-w-[420px]">
         <img class="mx-auto" height="80px" width="80px" src={image} alt="" />
         <h2 class="text-center text-xl font-semibold">{name}</h2>
         {#each processes as { committedInputs, committedOutputs }, processIndex}
@@ -761,7 +829,7 @@
             <!-- Sub-columns -->
             <div class="grid grid-cols-2 gap-2">
               <div>
-                <button
+                <!-- <button
                   class="flex justify-center items-center w-full mb-2"
                   on:click={() => {
                     commitmentModalProcess = processIndex
@@ -772,7 +840,7 @@
                   }}
                 >
                   <PlusCircle />
-                </button>
+                </button> -->
 
                 {#each committedInputs as { resourceConformsTo, receiver, provider, resourceQuantity, action, editable, id, agreement }}
                   <div
@@ -799,13 +867,15 @@
                       -->
                     </div>
                     <p>
-                      from: {provider?.name || ''}<br />
-                      to: {receiver?.name || ''}
+                      from {provider?.name || ''}<br />
+                      to {receiver?.name || ''}
                     </p>
                     {#if agreement}
                       {@const commitment = agreement.commitment}
+                      <!-- {JSON.stringify(agreement)} -->
+
                       <p>
-                        cost: {new Decimal(
+                        cost {new Decimal(
                           commitment.resourceQuantity.hasNumericalValue
                         )
                           .toFixed(2, Decimal.ROUND_HALF_UP)
@@ -813,7 +883,7 @@
                         {commitment.resourceConformsTo.name}
                       </p>
                     {/if}
-                    <div class="w-full flex justify-center">
+                    <!-- <div class="w-full flex justify-center">
                       <button
                         on:click={() => {
                           commitmentModalProcess = processIndex
@@ -834,12 +904,12 @@
                       >
                         <Trash />
                       </button>
-                    </div>
+                    </div> -->
                   </div>
                 {/each}
               </div>
               <div>
-                <button
+                <!-- <button
                   class="flex justify-center items-center w-full mb-2"
                   on:click={() => {
                     commitmentModalProcess = processIndex
@@ -850,7 +920,7 @@
                   }}
                 >
                   <PlusCircle />
-                </button>
+                </button> -->
 
                 {#each committedOutputs as { resourceConformsTo, receiver, provider, resourceQuantity, action, editable, id, agreement }}
                   <div
@@ -878,13 +948,13 @@
                       -->
                       </div>
                       <p>
-                        from: {provider?.name || ''}<br />
-                        to: {receiver?.name || ''}
+                        from {provider?.name || ''}<br />
+                        to {receiver?.name || ''}
                       </p>
                       {#if agreement}
                         {@const commitment = agreement.commitment}
                         <p>
-                          cost: {new Decimal(
+                          cost {new Decimal(
                             commitment.resourceQuantity.hasNumericalValue
                           )
                             .toFixed(2, Decimal.ROUND_HALF_UP)
@@ -894,7 +964,7 @@
                       {/if}
                     </div>
                     <!-- {#if editable} -->
-                    <div class="w-full flex justify-center">
+                    <!-- <div class="w-full flex justify-center">
                       <button
                         on:click={() => {
                           commitmentModalProcess = processIndex
@@ -915,7 +985,7 @@
                       >
                         <Trash />
                       </button>
-                    </div>
+                    </div> -->
                     <!-- {/if} -->
                   </div>
                 {/each}
@@ -926,7 +996,14 @@
       </div>
     {/each}
 
-    <div class="min-w-[250px] mt-20">
+    <div class="min-w-[250px]">
+      <h2 class="text-center" style="margin-top: 45px; margin-bottom: 11px;">Total cost: ${
+        totalCost
+        
+      }</h2>
+      <!-- // new Decimal(
+        //   allColumns.flat().flat().flat().filter(it => it.clauseOf).map(it => it.clauseOf.commitments.find(it => it.action.label == "transfer").resourceQuantity.hasNumericalValue).reduce((a, b) => new Decimal(a).add(b), 0)
+        // ).toFixed(2, Decimal.ROUND_HALF_UP).toString() -->
       <h2 class="text-center text-xl font-semibold">Satisfy Requests</h2>
       <div class="bg-blue-300 border border-gray-400 p-2">
         <!-- Sub-columns -->
@@ -967,7 +1044,7 @@
                     {resourceQuantity?.hasNumericalValue}
                     {resourceQuantity?.hasUnit?.label}
                   </p>
-                  <p>to: {receiver?.name}</p>
+                  <p>to {receiver?.name}</p>
                 </div>
                 <div class="w-full flex justify-center">
                   <button
@@ -1010,7 +1087,7 @@
                     {primary?.publishes?.resourceQuantity?.hasNumericalValue}
                     {primary?.publishes?.availableQuantity?.hasUnit?.label}
                   </p>
-                  <p>{primary?.publishes?.receiver?.name}</p>
+                  <p>to {primary?.publishes?.receiver?.name}</p>
                 </div>
               {/if}
             {/each}
@@ -1022,11 +1099,10 @@
   <!-- </div>
   </div> -->
 </div>
-
 <style>
   /* Custom CSS */
   .custom-background {
-    background-image: url('/heading3.png');
+    background-image: url('/dsf.jpg');
     background-size: cover;
     background-position: center;
   }
diff --git a/ui/src/routes/plans/update/[plan_id]/+page.svelte b/ui/src/routes/plans/update/[plan_id]/+page.svelte
index eea366d..fb130f1 100644
--- a/ui/src/routes/plans/update/[plan_id]/+page.svelte
+++ b/ui/src/routes/plans/update/[plan_id]/+page.svelte
@@ -23,6 +23,7 @@
   import type { RelayConn } from '$lib/graphql/helpers'
   import type { ReadableQuery } from 'svelte-apollo'
   import type { Unit, AgentConnection, Agent, Proposal, Plan, ProposalCreateParams, IntentCreateParams, IntentUpdateParams, UnitConnection, ResourceSpecification, ProposalConnection, CommitmentConnection, ProposalUpdateParams, Intent, PlanCreateParams, PlanConnection, EconomicEventCreateParams, ProcessConnection, FulfillmentCreateParams } from '@valueflows/vf-graphql'
+  import { dragscroll } from '@svelte-put/dragscroll';
 
   const delay = ms => new Promise(res => setTimeout(res, ms));
   let commitmentModalProcess: number | undefined;
@@ -30,6 +31,7 @@
   let commitmentModalSide: string | undefined;
   let currentProcess: any[] | undefined;
   let commitmentsToDelete: string[] = []
+  let agreementsToDelete: string[] = []
   let processesToLoadCount = 0;
   let processesLoadedCount = 0;
   let selectedProcessId: string | undefined = undefined;
@@ -276,6 +278,99 @@
     }
   }
 
+  function makeAgreement(
+    commitment: any,
+    agreement: undefined | any,
+    offers: any[]
+  ): undefined | any {
+    // const reciprocal_clause = recipe?.has_recipe_reciprocal_clause?.[0]
+    // if (!reciprocal_clause) return
+    // let numerical_value = reciprocal_clause.resourceQuantity.hasNumericalValue
+    // let hasUnit = reciprocal_clause.resourceQuantity.hasUnit
+    let specific_provider = commitment.provider
+    console.log("specific provider", specific_provider)
+    let numerical_value;
+    let hasUnit;
+    let reciprocal_intent;
+    let primary_intent;
+    // TODO get data to test the matching offer logic
+    const matching_offer = offers.find(offer => {
+      return offer.publishes.find(
+        intent => {
+          const offerName = intent.publishes?.resourceConformsTo?.name
+          // console.log(offerName, " ==?", commitment.resourceConformsTo.name)
+          const correctProvider = specific_provider? (intent.publishes?.provider?.id == specific_provider?.id) : true
+          return offerName == commitment.resourceConformsTo.name && correctProvider
+        }
+      )
+    })
+    // console.log("matching offer 0", matching_offer)
+    if (matching_offer) {
+      // console.log("matching offer", matching_offer)
+      reciprocal_intent = matching_offer.publishes.find(
+        intent => intent.reciprocal
+      )
+      primary_intent = matching_offer.publishes.find(
+        intent => !intent.reciprocal
+      )
+      console.log("TEMP", reciprocal_intent?.publishes?.resourceQuantity?.hasNumericalValue, primary_intent?.publishes?.resourceQuantity?.hasNumericalValue)
+      numerical_value = reciprocal_intent.publishes?.resourceQuantity.hasNumericalValue / primary_intent.publishes?.resourceQuantity.hasNumericalValue
+      console.log("numerical value", numerical_value)
+      console.log(new Decimal(numerical_value)
+            .mul(commitment.resourceQuantity.hasNumericalValue)
+            .toDecimalPlaces(0, Decimal.ROUND_UP)
+            .toString()
+            )
+      console.log("has unit?", primary_intent)
+      // hasUnit = reciprocal_intent.publishes?.resourceQuantity
+      hasUnit = primary_intent.publishes?.resourceQuantity?.hasUnit
+      // console.log(numerical_value, hasUnit)
+      // console.log("made agreement", reciprocal_intent.publishes?.resourceConformsTo?.name, numerical_value, hasUnit)
+    } else {
+      return
+    }
+
+    console.log("numerical value", numerical_value, hasUnit)
+    if (!numerical_value || !hasUnit) return
+
+    // return {
+    //   name: agreement?.name,
+    //   note: agreement?.note,
+    //   commitment: {
+    //     action:  reciprocal_intent?.publishes?.action?.label,
+    //     provider: reciprocal_intent?.publishes?.receiver,
+    //     // stage: reciprocal_clause?.stage,
+    //     resourceConformsTo: reciprocal_intent?.publishes?.resourceConformsTo,
+    //     resourceQuantity: {
+    //       hasNumericalValue: new Decimal(numerical_value)
+    //         .mul(commitment.resourceQuantity.hasNumericalValue)
+    //         .toDecimalPlaces(0, Decimal.ROUND_UP)
+    //         .toString(),
+    //       hasUnit: hasUnit
+    //     }
+    //   }
+    // }
+
+    return {
+      commitments: [
+      {
+        action: {
+          label: reciprocal_intent?.publishes?.action?.label
+        },
+        provider: reciprocal_intent?.publishes?.receiver,
+        // stage: reciprocal_clause?.stage,
+        resourceConformsTo: reciprocal_intent?.publishes?.resourceConformsTo,
+        resourceQuantity: {
+          hasNumericalValue: new Decimal(numerical_value)
+            .mul(commitment.resourceQuantity.hasNumericalValue)
+            .toDecimalPlaces(0, Decimal.ROUND_UP)
+            .toString(),
+          hasUnit: hasUnit
+        }
+      }]
+    }
+  }
+
   onMount(async () => {
     if (browser) {
       try {
@@ -349,8 +444,10 @@
               name: process.basedOn.name,
               id: process.basedOn.id,
             },
-            committedInputs: [...process.committedInputs].reverse(),
-            committedOutputs: [...process.committedOutputs].reverse(),
+            // sort committedInputs by last modified
+            committedInputs: [...process.committedInputs].sort((a, b) => new Date(a.meta.retrievedRevision.time).getTime() - new Date(b.meta.retrievedRevision.time).getTime()),
+            // committedInputs: [...process.committedInputs].reverse(),
+            committedOutputs: [...process.committedOutputs].sort((a, b) => new Date(a.meta.retrievedRevision.time).getTime() - new Date(b.meta.retrievedRevision.time).getTime()),
           }
 
           console.log("PROCESS TYPE", process.basedOn.name, newProcess)
@@ -377,6 +474,8 @@
         
         allColumns.unshift(lastColumn)
         loadingPlan = false;
+        console.log("allColumns", allColumns)
+        allColumns = [...allColumns]
 
         await fetchProposals()
       } catch (e) {
@@ -402,12 +501,33 @@
   let commitmentModalOpen = false
   let economicEventModalOpen = false
   let selectedCommitmentId: string | undefined = undefined
+
+  let totalCost: Decimal = new Decimal(0);
+  $: if (allColumns) {
+    totalCost = new Decimal(0)
+    for (let i = 0; i < allColumns.length; i++) {
+      console.log("column", i)
+      console.log(allColumns[i])
+      for (let j = 0; j < allColumns[i].length; j++) {
+        console.log("process", j)
+        let inputsAndOutputs = allColumns[i][j].committedInputs.concat(allColumns[i][j].committedOutputs)
+        for (let k = 0; k < inputsAndOutputs.length; k++) {
+          console.log("cost", inputsAndOutputs[k])
+          console.log("clauseOf", inputsAndOutputs[k].clauseOf)
+          if (inputsAndOutputs[k].clauseOf) {
+            const addedValue = new Decimal(inputsAndOutputs[k].clauseOf.commitments.find(it => it.action.label == "transfer").resourceQuantity.hasNumericalValue)
+            totalCost = totalCost.add(addedValue)
+          }
+        }
+      }
+    }
+    console.log("total cost", totalCost.toString())
+  }
 </script>
 
 <!-- {JSON.stringify(aggregatedCommitments)} -->
 
 
-
 {#if plan}
 <PlanModal bind:open={planModalOpen} planObject = {plan} {allColumns} {commitments} {commitmentsToDelete} editing={true}/>
 {/if}
@@ -449,16 +569,39 @@ bind:open={economicEventModalOpen}
         commitments = commitments.map(it => it.id == event.detail.commitment.id ? event.detail.commitment : it)
         commitments = [...commitments]
       } else {
+
+        // get cost
+        let costAgreement = event.detail.commitment.clauseOf //.commitments.map(it => it.id == event.detail.commitment.id ? event.detail.commitment : {...it, provider: event.detail.commitment.receiver, receiver: event.detail.commitment.provider} )
+        console.log("cost agreement 1", costAgreement)
+        // check if provider changed, and if so, update the cost
+        // let providerChanged = false;
+        // try {
+        //   providerChanged = event.detail.commitment.provider?.id != allColumns[commitmentModalColumn][commitmentModalProcess][commitmentModalSide].find(it => it.id == event.detail.commitment.id)?.provider?.id
+        // } catch (e) {
+        //   console.log(e)
+        // }
+        // console.log("provider changed? ", providerChanged, event.detail.commitment.provider)
+        if (event.detail.saveCost) {
+          if (costAgreement) {
+            agreementsToDelete.push(costAgreement.revisionId)
+            commitmentsToDelete.push(costAgreement.commitments.find(it => it.action.label == "transfer").revisionId)
+          }
+          costAgreement = makeAgreement(event.detail.commitment, costAgreement, offers)
+        }
+        // possible cost update ends
+
         let updatedCommitment = {
           ...event.detail.commitment,
-          clauseOf: {
-            ...event.detail.commitment.clauseOf,
-            commitments: event.detail.commitment.clauseOf.commitments.map(it => it.id == event.detail.commitment.id ? event.detail.commitment : {...it, provider: event.detail.commitment.receiver, receiver: event.detail.commitment.provider} )
-          }
         }
+
+        console.log("cost agreement 2", costAgreement)
+        if (costAgreement) {
+          updatedCommitment.clauseOf = costAgreement
+        }
+
         console.log("updated commitment", updatedCommitment)
         let commitmentIndex = allColumns[event.detail.column][event.detail.process][event.detail.side].findIndex(it => it.id == event.detail.commitment.id)
-        allColumns[event.detail.column][event.detail.process][event.detail.side][commitmentIndex] = {...event.detail.commitment}
+        allColumns[event.detail.column][event.detail.process][event.detail.side][commitmentIndex] = updatedCommitment
       }
     } else {
       console.log(event.detail)
@@ -467,12 +610,18 @@ bind:open={economicEventModalOpen}
         commitments = [...commitments]
       } else {
         console.log("adding commitment", event.detail.commitment)
+        if (event.detail.saveCost) {
+          let costAgreement = makeAgreement(event.detail.commitment, undefined, offers)
+          console.log("cost agreement", costAgreement)
+          if (costAgreement) {
+            event.detail.commitment.clauseOf = costAgreement
+          }
+        }
         allColumns[event.detail.column][event.detail.process][event.detail.side].push(event.detail.commitment)
       }
     }
 
     allColumns = [...allColumns]
-    // console.log(allColumns)
     // console.log(allColumns[event.detail.column][event.detail.process][event.detail.side])
 
     // reset form
@@ -508,7 +657,9 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
   <!-- <div class="outer-div justify-center items-center">
   <div class="scroll-div justify-center items-center">
   <div class="content-div flex space-x-8 mx-4"> -->
-  <div class="flex space-x-8 mx-4 overflow-x-scroll">
+  <!-- <div class="flex space-x-8 mx-4 overflow-x-scroll"> -->
+  <div class="flex space-x-8 mx-4 overflow-x-scroll overflow-y-scroll" style="height: calc(100vh - 172px)" use:dragscroll={{ axis: 'both' }}>
+
     <div class="min-w-[200px]">
       <div class="flex justify-center" style="margin-top: 22px; margin-bottom: 22px">
         <button
@@ -535,19 +686,21 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
                 >
                   <p>{primary?.publishes?.resourceConformsTo?.name}</p>
                   {#if primary?.publishes?.availableQuantity}
-                    <p>
+                  <p>
+                    {#if primary?.publishes?.availableQuantity?.hasNumericalValue && primary?.publishes?.availableQuantity?.hasNumericalValue > 0}
                       {primary?.publishes?.availableQuantity?.hasNumericalValue}
-                      {primary?.publishes?.availableQuantity?.hasUnit?.label},
-                      {reciprocal?.publishes?.resourceQuantity?.hasNumericalValue}
-                      USD per lb
-                    </p>
+                      {primary?.publishes?.availableQuantity?.hasUnit?.label} available<br>
+                    {/if}
+                    {reciprocal?.publishes?.resourceQuantity?.hasNumericalValue}
+                    {reciprocal?.publishes?.resourceConformsTo?.name} per {primary?.publishes?.resourceQuantity?.hasNumericalValue} {primary?.publishes?.resourceQuantity?.hasUnit?.label}
+                  </p>
                   {:else}
                     <p>
                       {reciprocal?.publishes?.resourceQuantity?.hasNumericalValue}
                       USD per lb
                     </p>
                   {/if}
-                  <p>{primary?.publishes?.provider?.name}</p>
+                  <p>from {primary?.publishes?.provider?.name}</p>
                 </div>
               {/if}
             {/each}
@@ -581,7 +734,7 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
     {/each} -->
     {#each allColumns as processes, columnIndex}
     {@const { image, name } = processes[0].basedOn}
-    <div class="min-w-[400px]">
+    <div class="min-w-[420px]">
       <img class="mx-auto" height="80px" width="80px" src={image} alt="" />
       <h2 class="text-center text-xl font-semibold">{name}</h2>
       {#each processes as { committedInputs, committedOutputs }, processIndex}
@@ -602,8 +755,8 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
                 >
                 <PlusCircle />
               </button>
-                {#each committedInputs as { resourceConformsTo, provider, resourceQuantity, action, receiver, id, revisionId, agreement, fulfilledBy, finished, clauseOf }}
-                  {@const color = finished ? "red" : (((fulfilledBy.length > 0) || yellow.includes(id)) ? "yellow" : "white")}
+                {#each committedInputs as { resourceConformsTo, provider, resourceQuantity, action, receiver, id, revisionId, agreement, fulfilledBy, finished, clauseOf, meta }}
+                  {@const color = finished ? "#c4fbc4" : (((fulfilledBy.length > 0) || yellow.includes(id)) ? "#fbfbb0" : "white")}
                   <div
                     class="bg-white rounded-r-full border border-gray-400 py-1 pl-2 pr-4 text-xs"
                     style="background-color: {color};"
@@ -629,14 +782,13 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
                       -->
                     </div>
                     <p>
-                      from: {provider?.name || ''}<br />
-                      to: {receiver?.name || ''}
+                      from {provider?.name || ''}<br />
+                      to {receiver?.name || ''}
                     </p>
                     {#if clauseOf}
                       {@const clause = clauseOf.commitments.find(it => it.action.label == "transfer")}
                         <p>
-                          <!-- {JSON.stringify(clause)} -->
-                          cost: {new Decimal(
+                          cost {new Decimal(
                             clause.resourceQuantity.hasNumericalValue
                           )
                             .toFixed(2, Decimal.ROUND_HALF_UP)
@@ -650,23 +802,35 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
                         finished: {finished}
                       </p>
                     {/if}
-                    <div class="w-full flex justify-center">
-                    {#if revisionId}
-                      <button
-                        on:click={() => {
-                          commitmentModalProcess = processIndex
-                          commitmentModalColumn = columnIndex
-                          commitmentModalSide = "committedInputs"
-                          selectedCommitmentId = id
-                          selectedProcessId = processes[0].id
-                          currentProcess = [...allColumns[commitmentModalColumn][commitmentModalProcess][commitmentModalSide]]
-                          economicEventModalOpen = true
-                        }}
-                      >
-                        <EconomicEvent/>
+                    <div class="w-full flex" style="margin-right: 10px">
+
+                    <div style="margin-right: 20px; margin-top: 4px;">
+                      <!-- button to move commitment up in arra -->
+                      <button on:click={() => {
+                        let index = allColumns[columnIndex][processIndex].committedInputs.findIndex(it => it.id == id)
+                        if (index > 0) {
+                          let temp = allColumns[columnIndex][processIndex].committedInputs[index]
+                          allColumns[columnIndex][processIndex].committedInputs[index] = allColumns[columnIndex][processIndex].committedInputs[index - 1]
+                          allColumns[columnIndex][processIndex].committedInputs[index - 1] = temp
+                        }
+                      }}>
+                        <img class="mx-auto" height="14px" width="14px" src="/arrow-up.svg" alt="" />
+                      </button>
+                      <!-- button to move down -->
+                      <button on:click={() => {
+                        let index = allColumns[columnIndex][processIndex].committedInputs.findIndex(it => it.id == id)
+                        if (index < allColumns[columnIndex][processIndex].committedInputs.length - 1) {
+                          let temp = allColumns[columnIndex][processIndex].committedInputs[index]
+                          allColumns[columnIndex][processIndex].committedInputs[index] = allColumns[columnIndex][processIndex].committedInputs[index + 1]
+                          allColumns[columnIndex][processIndex].committedInputs[index + 1] = temp
+                        }
+                      }}>
+                        <img class="mx-auto" height="14px" width="14px" src="/arrow-down.svg" alt="" />
                       </button>
-                    {/if}
 
+                    </div>
+
+                    <div style="margin-right: 20px; margin-top: 1px">
                     <button
                       on:click={() => {
                         commitmentModalProcess = processIndex
@@ -691,12 +855,31 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
                       <Trash />
                     </button>
                     </div>
+
+                    {#if revisionId}
+                    <button
+                      style="margin-top: -3px;"
+                      on:click={() => {
+                        commitmentModalProcess = processIndex
+                        commitmentModalColumn = columnIndex
+                        commitmentModalSide = "committedInputs"
+                        selectedCommitmentId = id
+                        selectedProcessId = processes[0].id
+                        currentProcess = [...allColumns[commitmentModalColumn][commitmentModalProcess][commitmentModalSide]]
+                        economicEventModalOpen = true
+                      }}
+                    >
+                      <EconomicEvent/>
+                    </button>
+                    {/if}
+
+                    </div>
                   </div>
                 {/each}
               </div>
               <div>
                 <button
-                  class="flex justify-center items-center w-full mb-2"
+                  class="flex items-center w-full mb-2"
                   on:click={() => {
                     commitmentModalProcess = processIndex
                     commitmentModalColumn = columnIndex
@@ -711,7 +894,7 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
                 </button>
 
                 {#each committedOutputs as { resourceConformsTo, provider, resourceQuantity, action, receiver, id, revisionId, agreement, fulfilledBy, finished, clauseOf }}
-                {@const color = finished ? "red" : (((fulfilledBy.length > 0) || yellow.includes(id)) ? "yellow" : "white")}
+                {@const color = finished ? "#c4fbc4" : (((fulfilledBy.length > 0) || yellow.includes(id)) ? "#fbfbb0" : "white")}
                 <div
                     class="bg-white rounded-r-full border border-gray-400 py-1 pl-2 pr-4 text-xs"
                     style="background-color: {color};"
@@ -738,13 +921,13 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
                       -->
                       </div>
                       <p>
-                        from: {provider?.name || ''}<br />
-                        to: {receiver?.name || ''}
+                        from {provider?.name || ''}<br />
+                        to {receiver?.name || ''}
                       </p>
                       {#if clauseOf}
                         {@const clause = clauseOf.commitments.find(it => it.action.label == "transfer")}
                           <p>
-                            cost: {new Decimal(
+                            cost {new Decimal(
                               clause.resourceQuantity.hasNumericalValue
                             )
                               .toFixed(2, Decimal.ROUND_HALF_UP)
@@ -754,23 +937,32 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
                       {/if}
                     </div>
                     <!-- {#if editable} -->
-                      <div class="w-full flex justify-center">
-                        {#if revisionId}
-                          <button
-                            on:click={() => {
-                              commitmentModalProcess = processIndex
-                              commitmentModalColumn = columnIndex
-                              commitmentModalSide = "committedOutputs"
-                              selectedCommitmentId = id
-                              selectedProcessId = processes[0].id
-                              currentProcess = [...allColumns[commitmentModalColumn][commitmentModalProcess][commitmentModalSide]]
-                              economicEventModalOpen = true
-                            }}
-                          >
-                            <EconomicEvent/>
-                          </button>
-                        {/if}
-                        <button
+                    <div class="w-full flex justify-center">
+                      <div style="margin-right: 20px; margin-top: 4px;">
+                        <button on:click={() => {
+                          let index = allColumns[columnIndex][processIndex].committedOutputs.findIndex(it => it.id == id)
+                          if (index > 0) {
+                            let temp = allColumns[columnIndex][processIndex].committedOutputs[index]
+                            allColumns[columnIndex][processIndex].committedOutputs[index] = allColumns[columnIndex][processIndex].committedOutputs[index - 1]
+                            allColumns[columnIndex][processIndex].committedOutputs[index - 1] = temp
+                          }
+                        }}>
+                          <img class="mx-auto" height="14px" width="14px" src="/arrow-up.svg" alt="" />
+                        </button>
+                        <button on:click={() => {
+                          let index = allColumns[columnIndex][processIndex].committedOutputs.findIndex(it => it.id == id)
+                          if (index < allColumns[columnIndex][processIndex].committedOutputs.length - 1) {
+                            let temp = allColumns[columnIndex][processIndex].committedOutputs[index]
+                            allColumns[columnIndex][processIndex].committedOutputs[index] = allColumns[columnIndex][processIndex].committedOutputs[index + 1]
+                            allColumns[columnIndex][processIndex].committedOutputs[index + 1] = temp
+                          }
+                        }}>
+                          <img class="mx-auto" height="14px" width="14px" src="/arrow-down.svg" alt="" />
+                        </button>
+                      </div>
+
+                      <div style="margin-right: 20px; margin-top: 1px">
+                      <button
                         on:click={() => {
                           commitmentModalProcess = processIndex
                           commitmentModalColumn = columnIndex
@@ -780,19 +972,38 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
                           commitmentModalOpen = true
                         }}
                       >
-                        <Pencil/>
-                      </button>
+                      <Pencil/>
+                    </button>
+                    <button
+                    on:click={() => {
+                      allColumns[columnIndex][processIndex].committedOutputs = allColumns[columnIndex][processIndex].committedOutputs.filter(it => it.id != id)
+                      if (revisionId != undefined) {
+                        commitmentsToDelete.push(revisionId)
+                      }
+                    }}
+                      >
+                      <Trash />
+                    </button>
+                    </div>
+
+                    {#if revisionId}
                       <button
+                        style="margin-top: -3px;"
                         on:click={() => {
-                          allColumns[columnIndex][processIndex].committedOutputs = allColumns[columnIndex][processIndex].committedOutputs.filter(it => it.id != id)
-                          if (revisionId != undefined) {
-                            commitmentsToDelete.push(revisionId)
-                          }
+                          commitmentModalProcess = processIndex
+                          commitmentModalColumn = columnIndex
+                          commitmentModalSide = "committedOutputs"
+                          selectedCommitmentId = id
+                          selectedProcessId = processes[0].id
+                          currentProcess = [...allColumns[commitmentModalColumn][commitmentModalProcess][commitmentModalSide]]
+                          economicEventModalOpen = true
                         }}
                       >
-                        <Trash />
+                        <EconomicEvent/>
                       </button>
-                      </div>
+                    {/if}
+
+                    </div>
                     <!-- {/if} -->
                   </div>
                 {/each}
@@ -803,7 +1014,10 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
       </div>
     {/each}
 
-    <div class="min-w-[250px] mt-20">
+    <div class="min-w-[250px]">
+      <!-- <strong>Total cost: $189</strong> -->
+      <h2 class="text-center" style="margin-top: 42px; margin-bottom: 11px;">Total cost: ${totalCost}</h2>
+      <!-- <h2 class="text-center text-xl font-semibold">{name}</h2> -->
       <h2 class="text-center text-xl font-semibold">Satisfy Requests</h2>
       <div class="bg-blue-300 border border-gray-400 p-2">
         <!-- Sub-columns -->
@@ -839,7 +1053,7 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
                     {resourceQuantity?.hasNumericalValue}
                     {resourceConformsTo?.defaultUnitOfResource?.label}
                   </p>
-                  <p>to: {receiver?.name}</p>
+                  <p>to {receiver?.name}</p>
                 </div>
                 <div class="w-full flex justify-center">
                   <button
@@ -886,7 +1100,7 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
                     {primary?.publishes?.resourceQuantity?.hasNumericalValue}
                     {primary?.publishes?.availableQuantity?.hasUnit?.label}
                   </p>
-                  <p>{primary?.publishes?.receiver?.name}</p>
+                  <p>to {primary?.publishes?.receiver?.name}</p>
                 </div>
               {/if}
             {/each}
@@ -904,7 +1118,8 @@ Loading processes ({processesLoadedCount}/{processesToLoadCount})
 <style>
   /* Custom CSS */
   .custom-background {
-    background-image: url('/heading3.png');
+    /* background-image: url('/heading3.png'); */
+    background-image: url('/dsf.jpg');
     background-size: cover;
     background-position: center;
   }
diff --git a/ui/static/arrow-down.svg b/ui/static/arrow-down.svg
new file mode 100644
index 0000000..a00ed21
--- /dev/null
+++ b/ui/static/arrow-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>
\ No newline at end of file
diff --git a/ui/static/arrow-up.svg b/ui/static/arrow-up.svg
new file mode 100644
index 0000000..86ebeab
--- /dev/null
+++ b/ui/static/arrow-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>
\ No newline at end of file
diff --git a/ui/static/calendar-plus-regular.svg b/ui/static/calendar-plus-regular.svg
new file mode 100644
index 0000000..fb65116
--- /dev/null
+++ b/ui/static/calendar-plus-regular.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192zm176 40c-13.3 0-24 10.7-24 24v48H152c-13.3 0-24 10.7-24 24s10.7 24 24 24h48v48c0 13.3 10.7 24 24 24s24-10.7 24-24V352h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H248V256c0-13.3-10.7-24-24-24z"/></svg>
\ No newline at end of file