diff --git a/index.html b/index.html
index e33125b..9f283c8 100644
--- a/index.html
+++ b/index.html
@@ -91,13 +91,11 @@
                                 <span v-else>@<{{ chatItem.source_hash }}></span>
                             </div>
                             <div v-if="chatItem.message.content" style="white-space:pre-wrap;word-wrap:break-word;font-family:inherit;">{{ chatItem.message.content }}</div>
-                            <div v-if="chatItem.message.fields && chatItem.message.fields.map((field) => field.type).includes('image')" class="grid grid-cols-3 gap-2">
-                                <div v-for="field of chatItem.message.fields.filter((f) => f.type === 'image')">
-                                    <img @click="openImage(`data:image/${field.image_type};base64,${field.image_bytes}`)" :src="`data:image/${field.image_type};base64,${field.image_bytes}`" class="w-full rounded-md shadow-md cursor-pointer"/>
-                                </div>
+                            <div v-if="chatItem.message.fields?.image" class="grid grid-cols-3 gap-2">
+                                <img @click="openImage(`data:image/${chatItem.message.fields.image.image_type};base64,${chatItem.message.fields.image.image_bytes}`)" :src="`data:image/${chatItem.message.fields.image.image_type};base64,${chatItem.message.fields.image.image_bytes}`" class="w-full rounded-md shadow-md cursor-pointer"/>
                             </div>
-                            <div v-for="field of chatItem.message.fields?.filter((f) => f.type === 'file_attachments') ?? []">
-                                <a target="_blank" :download="file_attachment.file_name" :href="`data:application/octet-stream;base64,${file_attachment.file_bytes}`" v-for="file_attachment of field.file_attachments" class="flex border border-gray-200 hover:bg-gray-100 rounded px-2 py-1 text-sm text-gray-700 font-semibold cursor-pointer">
+                            <div v-if="chatItem.message.fields?.file_attachments">
+                                <a target="_blank" :download="file_attachment.file_name" :href="`data:application/octet-stream;base64,${file_attachment.file_bytes}`" v-for="file_attachment of chatItem.message.fields?.file_attachments ?? []" class="flex border border-gray-200 hover:bg-gray-100 rounded px-2 py-1 text-sm text-gray-700 font-semibold cursor-pointer">
                                     <div class="mr-2 my-auto">
                                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                             <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"></path>
diff --git a/web.py b/web.py
index 3534d86..09ac06d 100644
--- a/web.py
+++ b/web.py
@@ -101,7 +101,7 @@ def lxmf_delivery(message):
         message_content = message.content.decode('utf-8')
         source_hash_text = RNS.hexrep(message.source_hash, delimit=False)
 
-        fields = []
+        fields = {}
         message_fields = message.get_fields()
         for field_type in message_fields:
 
@@ -121,20 +121,16 @@ def lxmf_delivery(message):
                     })
 
                 # add to fields
-                fields.append({
-                    "type": "file_attachments",
-                    "file_attachments": file_attachments,
-                })
+                fields["file_attachments"] = file_attachments
 
             # handle image field
             if field_type == LXMF.FIELD_IMAGE:
                 image_type = value[0]
                 image_bytes = base64.b64encode(value[1]).decode("utf-8")
-                fields.append({
-                    "type": "image",
+                fields["image"] = {
                     "image_type": image_type,
                     "image_bytes": image_bytes,
-                })
+                }
 
             # handle commands field
             if field_type == LXMF.FIELD_COMMANDS:
@@ -148,10 +144,7 @@ def lxmf_delivery(message):
                     })
 
                 # add to fields
-                fields.append({
-                    "type": "commands",
-                    "commands": commands,
-                })
+                fields["commands"] = commands
 
         # send received lxmf message data to all websocket clients
         websocket_broadcast(json.dumps({