diff --git a/src/blockchain/abi.js b/src/blockchain/abi.js
index 6c7c7b4..54a9379 100644
--- a/src/blockchain/abi.js
+++ b/src/blockchain/abi.js
@@ -53,10 +53,11 @@ const Tranche = `(uint64,${Constraint}[])`
 const SwapOrder = `(address,address,${Route},uint256,bool,bool,uint64,${Tranche}[])`
 
 export const vaultAbi = [
-    'function withdraw(uint256) public',
-    'function withdrawTo(address payable,uint256) public',
-    'function withdraw(address,uint256) public',
-    'function withdrawTo(address,address,uint256) public',
-    'function placeOrder((address,address,(uint8,uint24),uint256,bool,bool,uint64,(uint16,(uint8,bytes)[])[])) public',
-    'function placeOrders((address,address,(uint8,uint24),uint256,bool,bool,uint64,(uint16,(uint8,bytes)[])[])[],uint8) public',
+    'function withdraw(uint256)',
+    'function withdrawTo(address payable,uint256)',
+    'function withdraw(address,uint256)',
+    'function withdrawTo(address,address,uint256)',
+    'function placeOrder((address,address,(uint8,uint24),uint256,bool,bool,uint64,(uint16,(uint8,bytes)[])[]))',
+    'function placeOrders((address,address,(uint8,uint24),uint256,bool,bool,uint64,(uint16,(uint8,bytes)[])[])[],uint8)',
+    'function cancelOrder(uint64)',
 ]
diff --git a/src/blockchain/wallet.js b/src/blockchain/wallet.js
index 67fa663..2b40fe5 100644
--- a/src/blockchain/wallet.js
+++ b/src/blockchain/wallet.js
@@ -157,6 +157,18 @@ export async function pendOrder(order) {
 }
 
 
+export async function cancelOrder(vault, orderIndex) {
+  pendTransaction(async (signer)=> {
+    const contract = contractOrNull(vault, vaultAbi, signer)
+    if( contract === null ) {
+      console.error('vault contract was null while canceling order', vault, orderIndex)
+      return null
+    }
+    return await contract.cancelOrder(orderIndex)
+  })
+}
+
+
 export function flushOrders(vault) {
   for( const order of pendingOrders )
     pendOrderAsTransaction(vault, order)
diff --git a/src/components/Btn.vue b/src/components/Btn.vue
index ade9d3f..1c04d4f 100644
--- a/src/components/Btn.vue
+++ b/src/components/Btn.vue
@@ -1,6 +1,6 @@
 <template>
   <v-btn variant="outlined">
-    <v-icon v-if="icon" :icon="icon" :color="color"></v-icon>
+    <v-icon v-if="icon" :icon="icon" :color="color"></v-icon>&nbsp;
     <slot/>
   </v-btn>
 </template>
diff --git a/src/components/Orders.vue b/src/components/Orders.vue
index 08d1635..2945717 100644
--- a/src/components/Orders.vue
+++ b/src/components/Orders.vue
@@ -24,6 +24,7 @@
         <td>
           {{pairPrice(inTokenAddr, outTokenAddr, vaultAddr, index, avgPrice)}}
           <btn v-if="pairPrice(inTokenAddr, outTokenAddr, vaultAddr, index, avgPrice)!==''" size="small"
+               variant="plain"
                @click="inverted[[vaultAddr,index]] = !inverted[[vaultAddr,index]]">
             {{pair(inTokenAddr, outTokenAddr, vaultAddr,index)}}
           </btn>
@@ -31,10 +32,13 @@
         <td>
           <v-chip v-if="state===-1" prepend-icon="mdi-signature" color="yellow">Signing</v-chip>
           <v-chip v-if="state===0" prepend-icon="mdi-dots-horizontal" color="green">Open</v-chip>
-          <v-chip v-if="state===1" prepend-icon="mdi-close" color="red">Canceled</v-chip>
+          <v-chip v-if="state===1" prepend-icon="mdi-cancel" color="red">Canceled</v-chip>
           <v-chip v-if="state===2" prepend-icon="mdi-check-circle-outline" color="green">Completed</v-chip>
           <v-chip v-if="state===3" prepend-icon="mdi-progress-check" color="grey-darken-1">Expired</v-chip>
         </td>
+        <td>
+          <btn v-if="state===0" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,index)">Cancel</btn>
+        </td>
       </tr>
     </tbody>
   </v-table>
@@ -46,6 +50,7 @@ import {useStore} from "@/store/store";
 import {computed, reactive} from "vue";
 import {token} from "@/blockchain/token.js";
 import Btn from "@/components/Btn.vue"
+import {cancelOrder} from "@/blockchain/wallet.js";
 
 const s = useStore()
 const props = defineProps(['vault'])
diff --git a/src/components/TokenRow.vue b/src/components/TokenRow.vue
index 2331266..1ab16a2 100644
--- a/src/components/TokenRow.vue
+++ b/src/components/TokenRow.vue
@@ -10,7 +10,7 @@
     <td>
       <v-menu>
         <template v-slot:activator="{ props }">
-          <v-btn variant="plain" v-bind="props" icon="mdi-menu"/> <!-- mdi-dots-vertical -->
+          <v-btn variant="plain" v-bind="props" icon="mdi-dots-vertical"/>
         </template>
         <v-list>
           <v-list-subheader :title="token.symbol"/>
diff --git a/src/views/OrdersView.vue b/src/views/OrdersView.vue
index d1475d7..7035e41 100644
--- a/src/views/OrdersView.vue
+++ b/src/views/OrdersView.vue
@@ -1,8 +1,12 @@
 <template>
   <needs-provider>
     <needs-signer>
-      <btn icon="mdi-plus" color="green" class="mb-6" @click="$router.push('/twap')">New Dexorder</btn>
-      <orders/>
+      <v-card title="Orders">
+        <v-card-item>
+          <btn icon="mdi-plus" color="green" class="mb-6" @click="$router.push('/twap')">New Dexorder</btn>
+          <orders/>
+        </v-card-item>
+      </v-card>
     </needs-signer>
   </needs-provider>
 </template>
@@ -12,6 +16,7 @@ import Orders from "@/components/Orders.vue";
 import NeedsSigner from "@/components/NeedsSigner.vue";
 import NeedsProvider from "@/components/NeedsProvider.vue";
 import Btn from "@/components/Btn.vue";
+import PhoneCard from "@/components/PhoneCard.vue";
 </script>
 
 <style scoped lang="scss">