diff --git a/raven-app/src/components/feature/channels/ChannelList.tsx b/raven-app/src/components/feature/channels/ChannelList.tsx
index 1d339c8fd..9ad79059e 100644
--- a/raven-app/src/components/feature/channels/ChannelList.tsx
+++ b/raven-app/src/components/feature/channels/ChannelList.tsx
@@ -4,7 +4,7 @@ import { CreateChannelButton } from "./CreateChannelModal"
 import { useContext, useMemo, useState } from "react"
 import { ChannelListContext, ChannelListContextType, ChannelListItem, UnreadCountData } from "../../../utils/channel/ChannelListProvider"
 import { ChannelIcon } from "@/utils/layout/channelIcon"
-import { Flex, Text } from "@radix-ui/themes"
+import { Box, Flex, Text } from "@radix-ui/themes"
 import { useLocation, useParams } from "react-router-dom"
 
 export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData }) => {
@@ -22,11 +22,14 @@ export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData }
             <SidebarGroupItem gap='2' className={'pl-1.5'}>
                 <SidebarViewMoreButton onClick={toggle} />
                 <Flex width='100%' justify='between' align='center' gap='2'>
-                    <Flex gap='3' align='center'>
+                    <Flex gap='2' align='center'>
                         <SidebarGroupLabel className='cal-sans'>Channels</SidebarGroupLabel>
                         <CreateChannelButton updateChannelList={mutate} />
                     </Flex>
-                    {!showData && unread_count && unread_count.total_unread_count_in_channels > 0 && <SidebarBadge>{unread_count.total_unread_count_in_channels}</SidebarBadge>}
+                    {!showData && unread_count && unread_count.total_unread_count_in_channels > 0 &&
+                        <Box pr='2'>
+                            <SidebarBadge>{unread_count.total_unread_count_in_channels}</SidebarBadge>
+                        </Box>}
                 </Flex>
             </SidebarGroupItem>
             <SidebarGroup>
@@ -45,6 +48,12 @@ const ChannelItem = ({ channel, unreadCount }: { channel: ChannelListItem, unrea
 
     const unreadCountForChannel = useMemo(() => unreadCount.find((unread) => unread.name == channel.name)?.unread_count, [channel.name, unreadCount])
 
+    return <ChannelItemElement channel={channel} unreadCount={unreadCountForChannel} />
+
+}
+
+export const ChannelItemElement = ({ channel, unreadCount }: { channel: ChannelListItem, unreadCount?: number }) => {
+
     const { channelID } = useParams()
 
     const { state } = useLocation()
@@ -53,16 +62,15 @@ const ChannelItem = ({ channel, unreadCount }: { channel: ChannelListItem, unrea
      * Show the unread count if it exists and either the channel is not the current channel,
      * or if it is the current channel, the user is viewing a base message
      */
-    const showUnread = unreadCountForChannel && (channelID !== channel.name || state?.baseMessage)
+    const showUnread = unreadCount && (channelID !== channel.name || state?.baseMessage)
 
     return (
         <SidebarItem to={channel.name} className={'py-1.5'}>
             <ChannelIcon type={channel.type} size='18' />
             <Flex justify='between' align={'center'} width='100%'>
                 <Text size='2' className="text-ellipsis line-clamp-1" as='span' weight={showUnread ? 'bold' : 'regular'}>{channel.channel_name}</Text>
-                {showUnread ? <SidebarBadge>{unreadCountForChannel}</SidebarBadge> : null}
+                {showUnread ? <SidebarBadge>{unreadCount}</SidebarBadge> : null}
             </Flex>
         </SidebarItem>
     )
-
 }
\ No newline at end of file
diff --git a/raven-app/src/components/feature/channels/CreateChannelModal.tsx b/raven-app/src/components/feature/channels/CreateChannelModal.tsx
index 29b0385b5..69e100b66 100644
--- a/raven-app/src/components/feature/channels/CreateChannelModal.tsx
+++ b/raven-app/src/components/feature/channels/CreateChannelModal.tsx
@@ -101,7 +101,7 @@ export const CreateChannelButton = ({ updateChannelList }: { updateChannelList:
     return <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
         <Dialog.Trigger>
             <IconButton variant='ghost' size='1' color='gray' aria-label='Create Channel' className='h-[18px]' title='Create Channel'>
-                <BiPlus className='text-slate-12 mt-0.5' />
+                <BiPlus className='text-slate-12' />
             </IconButton>
         </Dialog.Trigger>
         <Dialog.Content className={DIALOG_CONTENT_CLASS}>
diff --git a/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx b/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx
index 236651079..ce1f96021 100644
--- a/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx
+++ b/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx
@@ -7,7 +7,7 @@ import { UserContext } from "../../../utils/auth/UserProvider"
 import { useGetUser } from "@/hooks/useGetUser"
 import { useIsUserActive } from "@/hooks/useIsUserActive"
 import { ChannelListContext, ChannelListContextType, DMChannelListItem, ExtraUsersData, UnreadCountData } from "../../../utils/channel/ChannelListProvider"
-import { Flex, Text } from "@radix-ui/themes"
+import { Box, Flex, Text } from "@radix-ui/themes"
 import { UserAvatar } from "@/components/common/UserAvatar"
 import { useToast } from "@/hooks/useToast"
 
@@ -27,7 +27,11 @@ export const DirectMessageList = ({ unread_count }: { unread_count?: UnreadCount
                     <Flex gap='2' align='center'>
                         <SidebarGroupLabel className='cal-sans'>Direct Messages</SidebarGroupLabel>
                     </Flex>
-                    {!showData && unread_count && unread_count?.total_unread_count_in_dms > 0 && <SidebarBadge>{unread_count.total_unread_count_in_dms}</SidebarBadge>}
+                    {!showData && unread_count && unread_count?.total_unread_count_in_dms > 0 &&
+                        <Box pr='2'>
+                            <SidebarBadge>{unread_count.total_unread_count_in_dms}</SidebarBadge>
+                        </Box>
+                    }
                 </Flex>
             </SidebarGroupItem>
             <SidebarGroup>
@@ -56,15 +60,22 @@ const DirectMessageItemList = ({ unread_count }: { unread_count?: UnreadCountDat
 
 const DirectMessageItem = ({ channel, unreadCount }: { channel: DMChannelListItem, unreadCount: UnreadCountData['channels'] }) => {
 
-    const { currentUser } = useContext(UserContext)
+
     const unreadCountForChannel = useMemo(() => unreadCount.find((unread) => unread.name == channel.name)?.unread_count, [channel.name, unreadCount])
 
+    return <DirectMessageItemElement channel={channel} unreadCount={unreadCountForChannel} />
+
+}
+
+export const DirectMessageItemElement = ({ channel, unreadCount }: { channel: DMChannelListItem, unreadCount?: number }) => {
+
+    const { currentUser } = useContext(UserContext)
     const userData = useGetUser(channel.peer_user_id)
     const isActive = useIsUserActive(channel.peer_user_id)
 
     const { channelID } = useParams()
 
-    const showUnread = unreadCountForChannel && channelID !== channel.name
+    const showUnread = unreadCount && channelID !== channel.name
 
     return <SidebarItem to={channel.name} className={'py-0.5'}>
         <SidebarIcon>
@@ -74,7 +85,7 @@ const DirectMessageItem = ({ channel, unreadCount }: { channel: DMChannelListIte
             <Text size='2' className="text-ellipsis line-clamp-1" weight={showUnread ? 'bold' : 'regular'}>
                 {channel.peer_user_id !== currentUser ? userData?.full_name ?? channel.peer_user_id : `${userData?.full_name} (You)`}
             </Text>
-            {showUnread ? <SidebarBadge>{unreadCountForChannel}</SidebarBadge> : null}
+            {showUnread ? <SidebarBadge>{unreadCount}</SidebarBadge> : null}
         </Flex>
     </SidebarItem>
 }
diff --git a/raven-app/src/components/layout/Sidebar/SidebarBody.tsx b/raven-app/src/components/layout/Sidebar/SidebarBody.tsx
index ad8296bd3..6830a5376 100644
--- a/raven-app/src/components/layout/Sidebar/SidebarBody.tsx
+++ b/raven-app/src/components/layout/Sidebar/SidebarBody.tsx
@@ -1,9 +1,10 @@
 import { ChannelList } from '../../feature/channels/ChannelList'
 import { DirectMessageList } from '../../feature/direct-messages/DirectMessageList'
 import { SidebarItem } from './SidebarComp'
-import { AccessibleIcon, Box, Flex, ScrollArea, Text } from '@radix-ui/themes'
+import { AccessibleIcon, Box, Flex, ScrollArea, Separator, Text } from '@radix-ui/themes'
 import { BiBookmark } from 'react-icons/bi'
 import useUnreadMessageCount from '@/hooks/useUnreadMessageCount'
+import UnreadChannels from './UnreadChannels'
 
 export const SidebarBody = () => {
 
@@ -12,7 +13,7 @@ export const SidebarBody = () => {
     return (
         <ScrollArea type="hover" scrollbars="vertical" className='h-[calc(100vh-7rem)]'>
             <Flex direction='column' gap='2' className='overflow-x-hidden' px='2'>
-                <Box>
+                <Box pb='2'>
                     <SidebarItem to={'saved-messages'} className='pl-1.5 py-0.5'>
                         <AccessibleIcon label='Saved Messages'>
                             <BiBookmark className='text-slate-12 mt-0.5' size='14' />
@@ -22,6 +23,11 @@ export const SidebarBody = () => {
                         </Box>
                     </SidebarItem>
                 </Box>
+                <UnreadChannels unread_count={unread_count?.message} />
+                <Box width='100%' py='2'>
+                    <Separator size='4' />
+                </Box>
+
                 <ChannelList unread_count={unread_count?.message} />
                 <DirectMessageList unread_count={unread_count?.message} />
             </Flex>
diff --git a/raven-app/src/components/layout/Sidebar/SidebarComp.tsx b/raven-app/src/components/layout/Sidebar/SidebarComp.tsx
index 20b84523b..d5b37c1cf 100644
--- a/raven-app/src/components/layout/Sidebar/SidebarComp.tsx
+++ b/raven-app/src/components/layout/Sidebar/SidebarComp.tsx
@@ -80,7 +80,7 @@ export const SidebarItem = ({ to, children, end, active = false, activeStyles, c
                     <Flex
                         gap='2'
                         align='center'
-                        px='3'
+                        px='2'
                         className={clsx('cursor-pointer text-black dark:text-gray-100 user-select-none rounded-md no-underline transition-all duration-200 hover:bg-gray-3 dark:hover:bg-gray-5', isActive ? activeClass : '', className)}
                         {...props}>
                         {children}
diff --git a/raven-app/src/components/layout/Sidebar/UnreadChannels.tsx b/raven-app/src/components/layout/Sidebar/UnreadChannels.tsx
new file mode 100644
index 000000000..6c70d2fab
--- /dev/null
+++ b/raven-app/src/components/layout/Sidebar/UnreadChannels.tsx
@@ -0,0 +1,83 @@
+import { ChannelListContext, ChannelListContextType, UnreadCountData } from '@/utils/channel/ChannelListProvider'
+import { useContext, useMemo } from 'react'
+import { SidebarGroup, SidebarGroupItem, SidebarGroupLabel, SidebarGroupList } from './SidebarComp'
+import { Flex } from '@radix-ui/themes'
+import { MdOutlineMarkChatUnread } from 'react-icons/md'
+import { ChannelItemElement } from '@/components/feature/channels/ChannelList'
+import { DirectMessageItemElement } from '@/components/feature/direct-messages/DirectMessageList'
+
+type Props = {}
+
+const UnreadChannels = ({ unread_count }: { unread_count?: UnreadCountData }) => {
+
+    const { channels, dm_channels } = useContext(ChannelListContext) as ChannelListContextType
+
+    const { unread_channels, unread_dm_channels } = useMemo(() => {
+        // Only show channels with unread messages
+        const activeChannels = channels.filter(channel => channel.is_archived === 0)
+
+        const channelsWithUnread = []
+        const dmsWithUnread = []
+        for (const channel of activeChannels) {
+            const count = unread_count?.channels.find((unread) => unread.name === channel.name)?.unread_count
+            if (count) {
+                channelsWithUnread.push({
+                    ...channel,
+                    unread_count: count
+                })
+            }
+        }
+
+        for (const channel of dm_channels) {
+            const count = unread_count?.channels.find((unread) => unread.name === channel.name)?.unread_count
+            if (count) {
+                dmsWithUnread.push({
+                    ...channel,
+                    unread_count: count
+                })
+            }
+        }
+
+        return {
+            unread_channels: channelsWithUnread,
+            unread_dm_channels: dmsWithUnread
+        }
+
+    }, [channels, dm_channels, unread_count])
+
+    if (unread_channels.length === 0 && unread_dm_channels.length === 0) {
+        return null
+    }
+
+
+    return (
+        <SidebarGroup>
+            <SidebarGroupItem gap='2' className={'pl-1.5'}>
+                <MdOutlineMarkChatUnread className='text-slate-12 mt-0.5' size='14' />
+                <Flex width='100%' justify='between' align='center' gap='2'>
+                    <SidebarGroupLabel className='cal-sans'>Unread</SidebarGroupLabel>
+                </Flex>
+            </SidebarGroupItem>
+            <SidebarGroup>
+                <SidebarGroupList>
+                    {unread_channels.map((channel) => <ChannelItemElement
+                        channel={channel}
+                        unreadCount={channel.unread_count}
+                        key={channel.name} />)}
+
+                    {unread_dm_channels.map((channel) => <DirectMessageItemElement
+                        channel={channel}
+                        unreadCount={channel.unread_count}
+                        key={channel.name} />)}
+
+                    {/* {filteredChannels.map((channel) => <ChannelItem
+                        channel={channel}
+                        unreadCount={unread_count?.channels ?? []}
+                        key={channel.name} />)} */}
+                </SidebarGroupList>
+            </SidebarGroup>
+        </SidebarGroup>
+    )
+}
+
+export default UnreadChannels
\ No newline at end of file