diff --git a/src/lib/components/Badge.svelte b/src/lib/components/Badge.svelte
index 5baf82c..b175a2c 100644
--- a/src/lib/components/Badge.svelte
+++ b/src/lib/components/Badge.svelte
@@ -5,6 +5,7 @@
     [BadgeType.INFO]: '⏳',
     [BadgeType.PENDING]: '📦',
     [BadgeType.WARNING]: '⚠️',
+    [BadgeType.REFUNDED]: '🪷',
     [BadgeType.SUCCESS]: '✓',
     [BadgeType.ERROR]: 'X'
   };
@@ -12,8 +13,12 @@
   export let title = 'Info';
   export let type: BadgeType = BadgeType.INFO;
 
-  if (title === 'CONFIRMED') {
+  if (title === 'CONFIRMED' || title === 'succeeded') {
     type = BadgeType.SUCCESS;
+  } else if (title === 'CANCELLED') {
+    type = BadgeType.ERROR;
+  } else if (title === 'REFUNDED') {
+    type = BadgeType.REFUNDED;
   }
 
   $: icon = badgeIcons[type];
@@ -21,7 +26,7 @@
 </script>
 
 <div class="{badgeClass}">
-  <span>{title}</span>
+  <span>{title?.toLowerCase()}</span>
   <span class="icon">{icon}</span>
 </div>
 
@@ -36,27 +41,32 @@
     color: rgb(84, 89, 105);
     margin: 0.2rem;
 
+    > span {
+      text-transform: capitalize;
+    }
+
     .icon {
       margin-left: 0.3rem;
       font-size: 0.8rem;
     }
 
-    &.success {
+    &.SUCCESS {
       background-color: rgb(215, 247, 194);
       color: rgb(0, 105, 8);
     }
 
-    &.error {
+    &.ERROR {
       background-color: rgb(255, 231, 242);
       color: rgb(179, 9, 60);
     }
 
-    &.warning {
+    &.WARNING,
+    &.REFUNDED {
       background-color: rgb(252, 237, 185);
       color: rgb(168, 44, 0);
     }
 
-    &.pending {
+    &.PENDING {
       background-color: lightblue;
       color: darkslateblue;
     }