diff --git a/bun.lockb b/bun.lockb
index 3dd5d05b..6c715ad7 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/dist/index.js b/dist/index.js
index 0e671b1f..b9b1b499 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -295,7 +295,7 @@
                     }
                   });
                 } catch {
-                  throw `error: cannot process subscribe:children directive because ListItemConverter is not defined. Usage: "subscribe:children={[list, converter]}"; you can find a more detailed example in the documentation`;
+                  throw `error: cannot process subscribe:children directive because StateItemConverter is not defined. Usage: "subscribe:children={[list, converter]}"; you can find a more detailed example in the documentation`;
                 }
               }
             }
@@ -501,7 +501,7 @@
       const { sender, body, channel, isoDate, itemData } = JSON.parse(
         data.messageBody
       );
-      if (itemData != void 0) {
+      if (itemData && itemData.id && itemData.title) {
         return this.handleItem(itemData);
       }
       this.handleMessage({
@@ -522,7 +522,7 @@
       if (selectedChat.value != this) this.hasUnreadMessages.value = true;
     };
     handleItem = (itemData) => {
-      console.log(itemData);
+      this.items.set(itemData.id, itemData);
     };
     // messages
     createMessage = async (messageText, itemData) => {
@@ -1110,7 +1110,11 @@
         title: "new item"
       });
     }
-    return /* @__PURE__ */ createElement("div", { class: "chat-tool-view" }, /* @__PURE__ */ createElement("button", { "on:click": createItem }, "+"), /* @__PURE__ */ createElement("hr", null));
+    const itemConverter = (item) => {
+      console.log(item);
+      return /* @__PURE__ */ createElement("span", null, item.title);
+    };
+    return /* @__PURE__ */ createElement("div", { class: "chat-tool-view" }, /* @__PURE__ */ createElement("button", { "on:click": createItem }, "+"), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { "children:append": [chat.items, itemConverter] }));
   }
 
   // src/Views/messageComposer.tsx
diff --git a/package.json b/package.json
index 5b4bdf59..27152464 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "bloatless-react": "^1.3.2",
+    "bloatless-react": "^1.3.3",
     "esbuild": "latest",
     "udn-frontend": "^1.0.7-beta1"
   },
diff --git a/src/Model/chatModel.ts b/src/Model/chatModel.ts
index 1d45b477..551947f5 100644
--- a/src/Model/chatModel.ts
+++ b/src/Model/chatModel.ts
@@ -151,7 +151,7 @@ export class Chat {
       data.messageBody
     );
 
-    if (itemData != undefined) {
+    if (itemData && itemData.id && itemData.title) {
       return this.handleItem(itemData);
     }
 
@@ -177,7 +177,7 @@ export class Chat {
   };
 
   handleItem = (itemData: Item): void => {
-    console.log(itemData);
+    this.items.set(itemData.id, itemData);
   };
 
   // messages
diff --git a/src/Views/chatListSection.tsx b/src/Views/chatListSection.tsx
index e70fc054..123dab3a 100644
--- a/src/Views/chatListSection.tsx
+++ b/src/Views/chatListSection.tsx
@@ -12,7 +12,7 @@ import {
 import { Chat } from "../Model/chatModel";
 import { translation } from "../translations";
 
-const chatConverter: React.ListItemConverter<Chat> = (chat) => {
+const chatConverter: React.StateItemConverter<Chat> = (chat) => {
   function select() {
     selectChat(chat);
   }
diff --git a/src/Views/chatOptionModal.tsx b/src/Views/chatOptionModal.tsx
index f321aaba..93630f9b 100644
--- a/src/Views/chatOptionModal.tsx
+++ b/src/Views/chatOptionModal.tsx
@@ -20,7 +20,7 @@ export function ChatOptionModal(chat: Chat, isPresented: React.State<boolean>) {
     shouldShowKey.value == true ? "text" : "password"
   );
 
-  const secondaryChannelConverter: React.ListItemConverter<string> = (
+  const secondaryChannelConverter: React.StateItemConverter<string> = (
     secondaryChannel
   ) => {
     function remove() {
diff --git a/src/Views/chatToolView.tsx b/src/Views/chatToolView.tsx
index 1576c065..5ebf2585 100644
--- a/src/Views/chatToolView.tsx
+++ b/src/Views/chatToolView.tsx
@@ -1,6 +1,7 @@
 import * as React from "bloatless-react";
 
-import { Chat } from "../Model/chatModel";
+import { Chat, Item } from "../Model/chatModel";
+
 import { translation } from "../translations";
 
 export function ChatToolView(chat: Chat) {
@@ -11,11 +12,15 @@ export function ChatToolView(chat: Chat) {
     });
   }
 
+  const itemConverter: React.StateItemConverter<Item> = (item) => {
+    return <span>{item.title}</span>;
+  };
+
   return (
     <div class="chat-tool-view">
       <button on:click={createItem}>+</button>
       <hr></hr>
-      
+      <div children:append={[chat.items, itemConverter]}></div>
     </div>
   );
 }
diff --git a/src/Views/connectionSection.tsx b/src/Views/connectionSection.tsx
index 92460023..6bb22e64 100644
--- a/src/Views/connectionSection.tsx
+++ b/src/Views/connectionSection.tsx
@@ -17,7 +17,7 @@ import {
 
 import { translation } from "../translations";
 
-const addressConverter: React.ListItemConverter<string> = (address) => {
+const addressConverter: React.StateItemConverter<string> = (address) => {
   return <option>{address}</option>;
 };
 
diff --git a/src/Views/threadView.tsx b/src/Views/threadView.tsx
index 77709167..7fe989a3 100644
--- a/src/Views/threadView.tsx
+++ b/src/Views/threadView.tsx
@@ -5,7 +5,7 @@ import { Chat, ChatMessage } from "../Model/chatModel";
 import { translation } from "../translations";
 
 export function ThreadView(chat: Chat) {
-  const messageConverter: React.ListItemConverter<ChatMessage> = (message) => {
+  const messageConverter: React.StateItemConverter<ChatMessage> = (message) => {
     function resendMessage() {
       chat.resendMessage(message);
     }
@@ -72,7 +72,7 @@ export function ThreadView(chat: Chat) {
     );
   };
 
-  const outboxMessageConverter: React.ListItemConverter<ChatMessage> = (
+  const outboxMessageConverter: React.StateItemConverter<ChatMessage> = (
     message
   ) => {
     function remove() {