diff --git a/web/src/ui/MainScreen.tsx b/web/src/ui/MainScreen.tsx
index 030d514..6717037 100644
--- a/web/src/ui/MainScreen.tsx
+++ b/web/src/ui/MainScreen.tsx
@@ -32,7 +32,7 @@ const MainScreen = () => {
 		}
 	}, [client])
 	return <main className="matrix-main">
-		<RoomList setActiveRoom={setActiveRoom} />
+		<RoomList setActiveRoom={setActiveRoom} activeRoomID={activeRoomID} />
 		{activeRoom && <RoomView key={activeRoomID} room={activeRoom} />}
 	</main>
 }
diff --git a/web/src/ui/roomlist/Entry.tsx b/web/src/ui/roomlist/Entry.tsx
index 56d4eb4..6b3108d 100644
--- a/web/src/ui/roomlist/Entry.tsx
+++ b/web/src/ui/roomlist/Entry.tsx
@@ -20,6 +20,7 @@ import type { MemDBEvent } from "../../api/types"
 export interface RoomListEntryProps {
 	room: RoomListEntry
 	setActiveRoom: (evt: React.MouseEvent) => void
+	isActive: boolean
 }
 
 function makePreviewText(evt?: MemDBEvent): string {
@@ -32,9 +33,13 @@ function makePreviewText(evt?: MemDBEvent): string {
 	return ""
 }
 
-const Entry = ({ room, setActiveRoom }: RoomListEntryProps) => {
+const Entry = ({ room, setActiveRoom, isActive }: RoomListEntryProps) => {
 	const previewText = makePreviewText(room.preview_event)
-	return <div className="room-entry" onClick={setActiveRoom} data-room-id={room.room_id}>
+	return <div
+		className={`room-entry ${isActive ? "active" : ""}`}
+		onClick={setActiveRoom}
+		data-room-id={room.room_id}
+	>
 		<div className="room-entry-left">
 			<img loading="lazy" className="avatar room-avatar" src={getMediaURL(room.avatar)} alt=""/>
 		</div>
diff --git a/web/src/ui/roomlist/RoomList.css b/web/src/ui/roomlist/RoomList.css
index 9fb8722..8e27b95 100644
--- a/web/src/ui/roomlist/RoomList.css
+++ b/web/src/ui/roomlist/RoomList.css
@@ -6,7 +6,7 @@ div.room-list {
 		width: 100%;
 		display: flex;
 		gap: 4px;
-		border-radius: 4px;
+		/*border-radius: 4px;*/
 		user-select: none;
 		cursor: pointer;
 
@@ -14,6 +14,10 @@ div.room-list {
 			background-color: #EEE;
 		}
 
+		&.active {
+			background-color: #DDD;
+		}
+
 		> div.room-entry-left {
 			height: 3rem;
 			width: 3rem;
diff --git a/web/src/ui/roomlist/RoomList.tsx b/web/src/ui/roomlist/RoomList.tsx
index 90833d1..f73dc01 100644
--- a/web/src/ui/roomlist/RoomList.tsx
+++ b/web/src/ui/roomlist/RoomList.tsx
@@ -22,9 +22,10 @@ import "./RoomList.css"
 
 interface RoomListProps {
 	setActiveRoom: (room_id: RoomID) => void
+	activeRoomID: RoomID
 }
 
-const RoomList = ({ setActiveRoom }: RoomListProps) => {
+const RoomList = ({ setActiveRoom, activeRoomID }: RoomListProps) => {
 	const roomList = useNonNullEventAsState(use(ClientContext)!.store.roomList)
 	const clickRoom = useCallback((evt: React.MouseEvent) => {
 		const roomID = evt.currentTarget.getAttribute("data-room-id")
@@ -37,7 +38,7 @@ const RoomList = ({ setActiveRoom }: RoomListProps) => {
 
 	return <div className="room-list">
 		{reverseMap(roomList, room =>
-			<Entry key={room.room_id} room={room} setActiveRoom={clickRoom}/>,
+			<Entry key={room.room_id} isActive={room.room_id === activeRoomID} room={room} setActiveRoom={clickRoom}/>,
 		)}
 	</div>
 }