diff --git a/src/element/FollowsYou.css b/src/element/FollowsYou.css
index 2b1cf5ec..89d1b40f 100644
--- a/src/element/FollowsYou.css
+++ b/src/element/FollowsYou.css
@@ -1,5 +1,5 @@
 .follows-you {
-  color: var(--font-secondary-color);
+  color: var(--font-tertiary-color);
   font-size: var(--font-size-tiny);
   margin-left: .2em;
   font-weight: normal
diff --git a/src/element/Invoice.css b/src/element/Invoice.css
index c2fcfd0d..824ea481 100644
--- a/src/element/Invoice.css
+++ b/src/element/Invoice.css
@@ -1,5 +1,4 @@
 .note-invoice {
-    background: var(--note-bg);
     border: 1px solid var(--font-secondary-color);
     border-radius: 16px;
     padding: 12px;
diff --git a/src/element/Note.css b/src/element/Note.css
index 33c5af8e..701f6fe8 100644
--- a/src/element/Note.css
+++ b/src/element/Note.css
@@ -72,6 +72,11 @@
   margin-bottom: 24px;
 }
 
+.indented .note.active:last-child {
+  border-bottom-right-radius: 16px;
+  margin-bottom: 24px;
+}
+
 .indented > .indented .note:last-child {
   border-bottom-right-radius: 0px;
   margin-bottom: 0;
diff --git a/src/element/UnreadCount.css b/src/element/UnreadCount.css
new file mode 100644
index 00000000..9d70cd5c
--- /dev/null
+++ b/src/element/UnreadCount.css
@@ -0,0 +1,19 @@
+.pill {
+  font-size: var(--font-size-small);
+  display: inline-block;
+  background-color: var(--gray-tertiary);
+  padding: 2px 10px;
+  border-radius: 10px;
+  user-select: none;
+  color: var(--font-color);
+  margin: 2px 5px;
+}
+
+.pill.unread {
+  background-color: var(--gray);
+  color:  var(--font-color);
+}
+
+.pill:hover {
+  cursor: pointer;
+}
diff --git a/src/element/UnreadCount.tsx b/src/element/UnreadCount.tsx
new file mode 100644
index 00000000..9685c6b0
--- /dev/null
+++ b/src/element/UnreadCount.tsx
@@ -0,0 +1,11 @@
+import "./UnreadCount.css"
+
+const UnreadCount = ({ unread }: { unread: number }) => {
+  return (
+     <span className={`pill ${unread > 0 ? 'unread' : ''}`}>
+       {unread}
+     </span>
+  )
+}
+
+export default UnreadCount
diff --git a/src/pages/MessagesPage.tsx b/src/pages/MessagesPage.tsx
index bb2b640e..09592e69 100644
--- a/src/pages/MessagesPage.tsx
+++ b/src/pages/MessagesPage.tsx
@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux"
 
 import { HexKey, RawEvent } from "../nostr";
+import UnreadCount from "../element/UnreadCount";
 import ProfileImage from "../element/ProfileImage";
 import { hexToBech32 } from "../Util";
 import { incDmInteraction } from "../state/Login";
@@ -27,9 +28,7 @@ export default function MessagesPage() {
         return (
             <div className="flex mb10" key={chat.pubkey}>
                 <ProfileImage pubkey={chat.pubkey} className="f-grow" link={`/messages/${hexToBech32("npub", chat.pubkey)}`} />
-                <span className="pill">
-                    {chat.unreadMessages}
-                </span>
+                <UnreadCount unread={chat.unreadMessages} />
             </div>
         )
     }