diff --git a/src/components/channels/ChannelListItem.vue b/src/components/channels/ChannelListItem.vue
new file mode 100644
index 0000000..b1ace33
--- /dev/null
+++ b/src/components/channels/ChannelListItem.vue
@@ -0,0 +1,75 @@
+<template>
+    <div class="flex cursor-pointer p-2 bg-white hover:bg-gray-50">
+
+        <!-- channel info -->
+        <div class="my-auto mr-auto">
+            <div>{{ getChannelName(channel.index) }}</div>
+            <div class="text-sm text-gray-500">
+                <span v-if="channel.role === Protobuf.Channel.Channel_Role.PRIMARY">Primary Channel</span>
+                <span v-else-if="channel.role === Protobuf.Channel.Channel_Role.SECONDARY">Secondary Channel</span>
+                <span v-else-if="channel.role === Protobuf.Channel.Channel_Role.DISABLED">Disabled Channel</span>
+                <span v-else>Unknown Channel Role</span>
+            </div>
+        </div>
+
+        <!-- unread messages count -->
+        <div v-if="unreadMessagesCount > 0" class="my-auto mr-2">
+            <div class="inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 rounded-full shadow">
+                <span v-if="unreadMessagesCount >= 100">99</span>
+                <span>{{ unreadMessagesCount }}</span>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import Database from "../../js/Database.js";
+import Connection from "../../js/Connection.js";
+import ChannelUtils from "../../js/ChannelUtils.js";
+import {
+    Protobuf,
+} from "@meshtastic/js";
+
+export default {
+    name: 'ChannelListItem',
+    props: {
+        channel: Object,
+    },
+    data() {
+        return {
+            unreadMessagesCount: 0,
+            channelMessagesReadStateSubscription: null,
+        };
+    },
+    mounted() {
+        Connection.addMessageListener(this.onMessage);
+        this.channelMessagesReadStateSubscription = Database.ChannelMessagesReadState.get(this.channel.index).$.subscribe(async (channelMessagesReadState) => {
+            await this.onChannelMessagesReadStateChange(channelMessagesReadState);
+        });
+    },
+    unmounted() {
+        Connection.removeMessageListener(this.onMessage);
+        this.channelMessagesReadStateSubscription?.unsubscribe();
+    },
+    methods: {
+        getChannelName: (channelId) => ChannelUtils.getChannelName(channelId),
+        async onMessage() {
+            const channelMessagesReadState = await Database.ChannelMessagesReadState.get(this.channel.index).exec();
+            await this.onChannelMessagesReadStateChange(channelMessagesReadState);
+        },
+        async updateUnreadMessagesCount(lastReadTimestamp) {
+            this.unreadMessagesCount = await Database.Message.getChannelMessagesUnreadCount(this.channel.index, lastReadTimestamp).exec();
+        },
+        async onChannelMessagesReadStateChange(channelMessagesReadState) {
+            const messagesLastReadTimestamp = channelMessagesReadState?.timestamp ?? 0;
+            await this.updateUnreadMessagesCount(messagesLastReadTimestamp);
+        },
+    },
+    computed: {
+        Protobuf() {
+            return Protobuf;
+        },
+    },
+}
+</script>
diff --git a/src/components/channels/ChannelsList.vue b/src/components/channels/ChannelsList.vue
index 1893f04..9b74760 100644
--- a/src/components/channels/ChannelsList.vue
+++ b/src/components/channels/ChannelsList.vue
@@ -1,36 +1,25 @@
 <template>
-    <div class="w-full">
-        <div v-for="channel of enabledChannels" @click="onChannelClick(channel)" class="flex cursor-pointer p-2 shadow border-l-2" :class="[ selectedChannelId === channel.index ? 'bg-gray-100 border-blue-500' : 'bg-white border-transparent hover:bg-gray-50 hover:border-gray-200']">
 
-            <!-- channel info -->
-            <div class="my-auto mr-auto">
-                <div>{{ getChannelName(channel.index) }}</div>
-                <div class="text-sm text-gray-500">
-                    <span v-if="channel.role === Protobuf.Channel.Channel_Role.PRIMARY">Primary Channel</span>
-                    <span v-else-if="channel.role === Protobuf.Channel.Channel_Role.SECONDARY">Secondary Channel</span>
-                    <span v-else-if="channel.role === Protobuf.Channel.Channel_Role.DISABLED">Disabled Channel</span>
-                    <span v-else>Unknown Channel Role</span>
-                </div>
-            </div>
-
-            <!-- security badge -->
-            <div class="my-auto">
-                <ChannelPskBadge :channel="channel"/>
-            </div>
+    <div class="flex flex-col h-full w-full overflow-hidden">
 
+        <!-- channels -->
+        <div class="h-full overflow-y-auto">
+            <ChannelListItem :key="channel.index" v-for="channel of enabledChannels" :channel="channel" @click="onChannelClick(channel)"/>
         </div>
+
     </div>
+
 </template>
 
 <script>
-import {
-    Protobuf,
-} from "@meshtastic/js";
-import ChannelPskBadge from "./ChannelPskBadge.vue";
-import ChannelUtils from "../../js/ChannelUtils.js";
+import {Protobuf} from "@meshtastic/js";
+import ChannelListItem from "./ChannelListItem.vue";
+
 export default {
     name: 'ChannelsList',
-    components: {ChannelPskBadge},
+    components: {
+        ChannelListItem,
+    },
     emits: [
         "channel-click",
     ],
@@ -38,21 +27,12 @@ export default {
         selectedChannelId: Number,
         channels: Array,
     },
-    data() {
-        return {
-
-        };
-    },
     methods: {
-        getChannelName: (channelId) => ChannelUtils.getChannelName(channelId),
         onChannelClick(channel) {
             this.$emit("channel-click", channel);
         },
     },
     computed: {
-        Protobuf() {
-            return Protobuf;
-        },
         enabledChannels() {
             return this.channels.filter((channel) => {
                 return channel.role !== Protobuf.Channel.Channel_Role.DISABLED;
diff --git a/src/components/messages/MessageViewer.vue b/src/components/messages/MessageViewer.vue
index 31280f4..f0eccb6 100644
--- a/src/components/messages/MessageViewer.vue
+++ b/src/components/messages/MessageViewer.vue
@@ -274,17 +274,21 @@ export default {
             });
         },
         updateMessagesLastReadAt() {
-            if(this.type === "node"){
 
-                // do nothing if route is not active
-                if(!this.isActive){
-                    return;
-                }
+            // do nothing if route is not active
+            if(!this.isActive){
+                return;
+            }
 
-                // update last read at
+            // check what type of messages we are viewing
+            if(this.type === "node"){
+                // update last read at for node messages
                 Database.NodeMessagesReadState.touch(this.nodeId);
-
+            } else if(this.type === "channel") {
+                // update last read at for channel messages
+                Database.ChannelMessagesReadState.touch(this.channelId);
             }
+
         },
     },
     computed: {
diff --git a/src/components/pages/MainPage.vue b/src/components/pages/MainPage.vue
index ad88edb..690ca81 100644
--- a/src/components/pages/MainPage.vue
+++ b/src/components/pages/MainPage.vue
@@ -67,6 +67,9 @@ export default {
         },
     },
     computed: {
+        GlobalState() {
+            return GlobalState;
+        },
         isConnected() {
             return GlobalState.isConnected;
         },
diff --git a/src/js/Connection.js b/src/js/Connection.js
index 6720d81..c1064e4 100644
--- a/src/js/Connection.js
+++ b/src/js/Connection.js
@@ -144,14 +144,42 @@ class Connection {
 
     static async setupConnectionListeners(connection) {
 
+        // weird way to allow us to lock all other callbacks from doing anything, until the database is ready...
+        // maybe we should use some sort of lock or mutex etc. basically, onMyNodeInfo is called with our node info
+        // we use this to create a new database instance that is unique based on the node id.
+        // initDatabase is async, which means all the other callbacks such as onChannelPacket are able to fire before the database is ready
+        // this means when we try to access the database when it isn't ready yet, we get fun errors...
+        // so we need to force the callbacks to wait until the database is ready
+        // we will just resolve this promise when the database is ready, and all the packet callbacks should be set to await it
+        var onDatabaseReady = null;
+        const databaseToBeReady = new Promise((resolve) => {
+            onDatabaseReady = resolve;
+        });
+
         // listen for device status changes
         connection.events.onDeviceStatus.subscribe((deviceStatus) => {
+
             console.log("onDeviceStatus", deviceStatus);
             GlobalState.deviceStatus = deviceStatus;
+
+            // check if device is now disconnected
+            if(deviceStatus === Types.DeviceStatusEnum.DeviceDisconnected){
+                this.disconnect();
+            }
+
+        });
+
+        // listen for our node number
+        connection.events.onMyNodeInfo.subscribe(async (data) => {
+            console.log("onMyNodeInfo", data);
+            GlobalState.myNodeId = data.myNodeNum;
+            await Database.initDatabase(GlobalState.myNodeId);
+            onDatabaseReady();
         });
 
         // listen for lora config
-        connection.events.onConfigPacket.subscribe((configPacket) => {
+        connection.events.onConfigPacket.subscribe(async (configPacket) => {
+            await databaseToBeReady;
             if(configPacket.payloadVariant.case.toString() === "lora"){
                 GlobalState.loraConfig = configPacket.payloadVariant.value;
             }
@@ -161,6 +189,8 @@ class Connection {
         // we use this for some packets that don't have their own event listener
         connection.events.onFromRadio.subscribe(async (data) => {
 
+            await databaseToBeReady;
+
             // handle packets
             // we are doing this to get error info for a request id as it's not provided in the onRoutingPacket event
             if(data.payloadVariant.case.toString() === "packet") {
@@ -188,16 +218,11 @@ class Connection {
 
         });
 
-        // listen for our node number
-        connection.events.onMyNodeInfo.subscribe(async (data) => {
-            console.log("onMyNodeInfo", data);
-            GlobalState.myNodeId = data.myNodeNum;
-            await Database.initDatabase(GlobalState.myNodeId);
-        });
-
         // listen for node info
         GlobalState.nodesById = {};
-        connection.events.onNodeInfoPacket.subscribe((data) => {
+        connection.events.onNodeInfoPacket.subscribe(async (data) => {
+
+            await databaseToBeReady;
 
             console.log("onNodeInfoPacket", data);
 
@@ -212,7 +237,9 @@ class Connection {
         });
 
         // listen for mesh packets
-        connection.events.onMeshPacket.subscribe((data) => {
+        connection.events.onMeshPacket.subscribe(async (data) => {
+
+            await databaseToBeReady;
 
             console.log("onMeshPacket", data);
 
@@ -238,7 +265,9 @@ class Connection {
         });
 
         // listen for user info
-        connection.events.onUserPacket.subscribe((data) => {
+        connection.events.onUserPacket.subscribe(async (data) => {
+
+            await databaseToBeReady;
 
             console.log("onUserPacket", data);
 
@@ -261,13 +290,15 @@ class Connection {
 
         // listen for channels
         GlobalState.channelsByIndex = {};
-        connection.events.onChannelPacket.subscribe((data) => {
+        connection.events.onChannelPacket.subscribe(async (data) => {
+            await databaseToBeReady;
             console.log("onChannelPacket", data);
             GlobalState.channelsByIndex[data.index] = data;
         });
 
         // listen for new messages
         connection.events.onMessagePacket.subscribe(async (data) => {
+            await databaseToBeReady;
             console.log("onMessagePacket", data);
             await Database.Message.insert(data);
             for(const messageListener of this.messageListeners){
@@ -277,18 +308,9 @@ class Connection {
             }
         });
 
-        // listen for device status changes
-        connection.events.onDeviceStatus.subscribe((data) => {
-
-            // check if device is now disconnected
-            if(data === Types.DeviceStatusEnum.DeviceDisconnected){
-                this.disconnect();
-            }
-
-        });
-
         // listen for trace routes
         connection.events.onTraceRoutePacket.subscribe(async (data) => {
+            await databaseToBeReady;
             console.log("onTraceRoutePacket", data);
             await Database.TraceRoute.insert(data);
             for(const traceRouteListener of this.traceRouteListeners){
diff --git a/src/js/Database.js b/src/js/Database.js
index c43aab8..8d7bb97 100644
--- a/src/js/Database.js
+++ b/src/js/Database.js
@@ -122,6 +122,22 @@ async function initDatabase(nodeId) {
                 },
             }
         },
+        channel_messages_read_state: {
+            schema: {
+                version: 0,
+                primaryKey: 'id',
+                type: 'object',
+                properties: {
+                    id: {
+                        type: 'string',
+                        maxLength: 10,
+                    },
+                    timestamp: {
+                        type: 'integer',
+                    },
+                },
+            }
+        },
     });
 
 }
@@ -273,6 +289,23 @@ class Message {
         });
     }
 
+    // get unread broadcast messages count for the provided channel id
+    static getChannelMessagesUnreadCount(channelId, messagesLastReadTimestamp) {
+        return database.messages.count({
+            selector: {
+                timestamp: {
+                    $gt: messagesLastReadTimestamp,
+                },
+                to: {
+                    $eq: Constants.broadcastNum,
+                },
+                channel: {
+                    $eq: channelId,
+                },
+            },
+        });
+    }
+
     // get unread direct messages count for the provided node id
     static getNodeMessagesUnreadCount(nodeId, messagesLastReadTimestamp) {
         return database.messages.count({
@@ -389,9 +422,38 @@ class NodeMessagesReadState {
 
 }
 
+class ChannelMessagesReadState {
+
+    // update the read state of messages for the provided channel id
+    static async touch(channelId) {
+        return await database.channel_messages_read_state.upsert({
+            id: channelId.toString(),
+            timestamp: Date.now(),
+        });
+    }
+
+    // get the read state of messages for all channels
+    static getAll() {
+        return database.channel_messages_read_state.find();
+    }
+
+    // get the read state of messages for the provided channel id
+    static get(channelId) {
+        return database.channel_messages_read_state.findOne({
+            selector: {
+                id: {
+                    $eq: channelId.toString(),
+                },
+            },
+        });
+    }
+
+}
+
 export default {
     initDatabase,
     Message,
     TraceRoute,
     NodeMessagesReadState,
+    ChannelMessagesReadState,
 };