diff --git a/src/app/features/room-nav-item/RoomNavItem.tsx b/src/app/features/room-nav-item/RoomNavItem.tsx
index dbec383f..0d9b8301 100644
--- a/src/app/features/room-nav-item/RoomNavItem.tsx
+++ b/src/app/features/room-nav-item/RoomNavItem.tsx
@@ -177,7 +177,7 @@ export function RoomNavItem({ room, selected, direct, muted, linkPath }: RoomNav
             <Avatar size="200" radii="400">
               {direct ? (
                 <RoomAvatar
-                  variant="Background"
+                  variant="Secondary"
                   src={getRoomAvatarUrl(mx, room, 96)}
                   alt={room.name}
                   renderInitials={() => <Text size="H6">{nameInitials(room.name)}</Text>}
diff --git a/src/app/features/room-nav-item/index.ts b/src/app/features/room-nav-item/index.ts
new file mode 100644
index 00000000..fefc2bdb
--- /dev/null
+++ b/src/app/features/room-nav-item/index.ts
@@ -0,0 +1 @@
+export * from './RoomNavItem';
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index a1eb4140..cbf78582 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -21,16 +21,13 @@ import {
   NavItemContent,
   NavLink,
 } from '../../../components/nav';
-import { UnreadBadge, UnreadBadgeCenter } from '../../../components/unread-badge';
-import { RoomAvatar } from '../../../components/room-avatar';
 import { getDirectCreatePath, getDirectRoomPath } from '../../pathUtils';
 import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
-import { RoomUnreadProvider } from '../../../components/RoomUnreadProvider';
-import { getRoomAvatarUrl } from '../../../utils/room';
-import { nameInitials } from '../../../utils/common';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { useDirectCreateSelected } from '../../../hooks/router/useDirectSelected';
 import { VirtualTile } from '../../../components/virtualizer';
+import { RoomNavItem } from '../../../features/room-nav-item';
+import { muteChangesAtom } from '../../../state/room-list/mutedRoomList';
 
 function DirectEmpty() {
   return (
@@ -64,6 +61,9 @@ export function Direct() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const mDirects = useAtomValue(mDirectAtom);
   const directs = useDirects(mx, allRoomsAtom, mDirects);
+  const muteChanges = useAtomValue(muteChangesAtom);
+  const mutedRooms = muteChanges.added;
+
   const selectedRoomId = useSelectedRoom();
   const createSelected = useDirectCreateSelected();
   const noRoomToDisplay = directs.length === 0;
@@ -131,7 +131,6 @@ export function Direct() {
                       const room = mx.getRoom(roomId);
                       if (!room) return null;
                       const selected = selectedRoomId === roomId;
-                      const avatarSrc = getRoomAvatarUrl(mx, room);
 
                       return (
                         <VirtualTile
@@ -139,49 +138,13 @@ export function Direct() {
                           key={vItem.index}
                           ref={virtualizer.measureElement}
                         >
-                          <RoomUnreadProvider roomId={roomId}>
-                            {(unread) => (
-                              <NavItem
-                                variant="Background"
-                                radii="400"
-                                highlight={!!unread || selected}
-                                aria-selected={selected}
-                              >
-                                <NavLink
-                                  to={getDirectRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
-                                >
-                                  <NavItemContent size="T300">
-                                    <Box as="span" grow="Yes" alignItems="Center" gap="200">
-                                      <Avatar size="200" radii="400">
-                                        <RoomAvatar
-                                          src={avatarSrc}
-                                          alt={room.name}
-                                          renderInitials={() => (
-                                            <Text as="span" size="H6">
-                                              {nameInitials(room.name)}
-                                            </Text>
-                                          )}
-                                        />
-                                      </Avatar>
-                                      <Box as="span" grow="Yes">
-                                        <Text as="span" size="Inherit" truncate>
-                                          {room.name}
-                                        </Text>
-                                      </Box>
-                                      {unread && (
-                                        <UnreadBadgeCenter>
-                                          <UnreadBadge
-                                            highlight={unread.highlight > 0}
-                                            count={unread.total}
-                                          />
-                                        </UnreadBadgeCenter>
-                                      )}
-                                    </Box>
-                                  </NavItemContent>
-                                </NavLink>
-                              </NavItem>
-                            )}
-                          </RoomUnreadProvider>
+                          <RoomNavItem
+                            room={room}
+                            selected={selected}
+                            direct
+                            linkPath={getDirectRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
+                            muted={mutedRooms.includes(roomId)}
+                          />
                         </VirtualTile>
                       );
                     })}
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index 193b8be3..01b4f9f7 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -2,6 +2,7 @@ import React, { useMemo, useRef } from 'react';
 import { Outlet, useNavigate } from 'react-router-dom';
 import { Avatar, Box, Button, Icon, Icons, Text } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { useAtomValue } from 'jotai';
 import { ClientContentLayout } from '../ClientContentLayout';
 import { ClientDrawerLayout } from '../ClientDrawerLayout';
 import { ClientDrawerHeaderLayout } from '../ClientDrawerHeaderLayout';
@@ -16,8 +17,6 @@ import {
   NavItemContent,
   NavLink,
 } from '../../../components/nav';
-import { UnreadBadge, UnreadBadgeCenter } from '../../../components/unread-badge';
-import { RoomIcon } from '../../../components/room-avatar';
 import {
   getExplorePath,
   getHomeCreatePath,
@@ -26,7 +25,6 @@ import {
   getHomeSearchPath,
 } from '../../pathUtils';
 import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
-import { RoomUnreadProvider } from '../../../components/RoomUnreadProvider';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import {
   useHomeCreateSelected,
@@ -36,6 +34,8 @@ import {
 import { useHomeRooms } from './useHomeRooms';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { VirtualTile } from '../../../components/virtualizer';
+import { RoomNavItem } from '../../../features/room-nav-item';
+import { muteChangesAtom } from '../../../state/room-list/mutedRoomList';
 
 function HomeEmpty() {
   const navigate = useNavigate();
@@ -82,6 +82,9 @@ export function Home() {
   const mx = useMatrixClient();
   const scrollRef = useRef<HTMLDivElement>(null);
   const rooms = useHomeRooms();
+  const muteChanges = useAtomValue(muteChangesAtom);
+  const mutedRooms = muteChanges.added;
+
   const selectedRoomId = useSelectedRoom();
   const createSelected = useHomeCreateSelected();
   const joinSelected = useHomeJoinSelected();
@@ -187,45 +190,13 @@ export function Home() {
                           key={vItem.index}
                           ref={virtualizer.measureElement}
                         >
-                          <RoomUnreadProvider roomId={roomId}>
-                            {(unread) => (
-                              <NavItem
-                                variant="Background"
-                                radii="400"
-                                highlight={!!unread || selected}
-                                aria-selected={selected}
-                              >
-                                <NavLink
-                                  to={getHomeRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
-                                >
-                                  <NavItemContent size="T300">
-                                    <Box as="span" grow="Yes" alignItems="Center" gap="200">
-                                      <Avatar size="200" radii="400">
-                                        <RoomIcon
-                                          filled={selected}
-                                          size="100"
-                                          joinRule={room.getJoinRule()}
-                                        />
-                                      </Avatar>
-                                      <Box as="span" grow="Yes">
-                                        <Text as="span" size="Inherit" truncate>
-                                          {room.name}
-                                        </Text>
-                                      </Box>
-                                      {unread && (
-                                        <UnreadBadgeCenter>
-                                          <UnreadBadge
-                                            highlight={unread.highlight > 0}
-                                            count={unread.total}
-                                          />
-                                        </UnreadBadgeCenter>
-                                      )}
-                                    </Box>
-                                  </NavItemContent>
-                                </NavLink>
-                              </NavItem>
-                            )}
-                          </RoomUnreadProvider>
+                          <RoomNavItem
+                            room={room}
+                            selected={selected}
+                            direct={false}
+                            linkPath={getHomeRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
+                            muted={mutedRooms.includes(roomId)}
+                          />
                         </VirtualTile>
                       );
                     })}
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 16ecb276..fda3d875 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -26,7 +26,7 @@ import {
 import { useSpace } from '../../../hooks/useSpace';
 import { VirtualTile } from '../../../components/virtualizer';
 import { useSpaceHierarchy } from './useSpaceHierarchy';
-import { RoomNavItem } from '../../../features/room-nav-item/RoomNavItem';
+import { RoomNavItem } from '../../../features/room-nav-item';
 import { muteChangesAtom } from '../../../state/room-list/mutedRoomList';
 
 export function Space() {
@@ -151,8 +151,8 @@ export function Space() {
                           <NavCategoryHeader>
                             <Text size="O400" truncate>
                               {lastSpace?.roomId === space.roomId
-                                ? 'People'
-                                : `${lastSpace?.name} - People`}
+                                ? 'Direct Messages'
+                                : `Direct Messages - ${lastSpace?.name}`}
                             </Text>
                           </NavCategoryHeader>
                         </div>