diff --git a/web/src/features/menu/ContextMenu.tsx b/web/src/features/menu/ContextMenu.tsx
index d65acb2..94220ca 100644
--- a/web/src/features/menu/ContextMenu.tsx
+++ b/web/src/features/menu/ContextMenu.tsx
@@ -17,7 +17,7 @@ debugData<ContextMenuProps>([
         {
           title: "Example button",
           description: "Example button description",
-          metadata: { ["Value 1"]: "Some value", ["Value 2"]: 300 },
+          metadata: [{ label: "Value 1", value: 300 }],
         },
         {
           title: "Menu button",
diff --git a/web/src/features/menu/Item.tsx b/web/src/features/menu/Item.tsx
index f342a3a..5a319ea 100644
--- a/web/src/features/menu/Item.tsx
+++ b/web/src/features/menu/Item.tsx
@@ -104,9 +104,14 @@ const Item: React.FC<{
                   <PopoverBody>
                     {Array.isArray(option[1].metadata) ? (
                       option[1].metadata.map(
-                        (metadata: string, index: number) => (
+                        (
+                          metadata: string | { label: string; value: any },
+                          index: number
+                        ) => (
                           <Text key={`context-metadata-${index}`}>
-                            {metadata}
+                            {typeof metadata === "string"
+                              ? `${metadata}`
+                              : `${metadata.label}: ${metadata.value}`}
                           </Text>
                         )
                       )
diff --git a/web/src/interfaces/context.ts b/web/src/interfaces/context.ts
index 276baa0..b5347b8 100644
--- a/web/src/interfaces/context.ts
+++ b/web/src/interfaces/context.ts
@@ -3,7 +3,10 @@ export interface Option {
   title?: string;
   description?: string;
   arrow?: boolean;
-  metadata?: string[] | { [key: string]: any };
+  metadata?:
+    | string[]
+    | { [key: string]: any }
+    | { label: string; value: any }[];
   event?: string;
   serverEvent?: string;
   args?: any;