diff --git a/src/components/left/main/Badge.scss b/src/components/left/main/Badge.scss
index 182309a49..c1211510d 100644
--- a/src/components/left/main/Badge.scss
+++ b/src/components/left/main/Badge.scss
@@ -54,7 +54,7 @@
     color: var(--color-white);
   }
 
-  &.pinned:not(.unread) {
+  &.pinned {
     color: var(--color-pinned);
     background: transparent;
     width: 1.5rem;
diff --git a/src/components/left/main/Badge.tsx b/src/components/left/main/Badge.tsx
index 27007a950..4cd2a8570 100644
--- a/src/components/left/main/Badge.tsx
+++ b/src/components/left/main/Badge.tsx
@@ -17,11 +17,12 @@ type OwnProps = {
 
 const Badge: FC<OwnProps> = ({ chat, isPinned, isMuted }) => {
   const isShown = Boolean(chat.unreadCount || chat.hasUnreadMark || isPinned);
+  const isUnread = Boolean(chat.unreadCount || chat.hasUnreadMark);
   const className = buildClassName(
     'Badge',
     isMuted && 'muted',
-    isPinned && 'pinned',
-    Boolean(chat.unreadCount || chat.hasUnreadMark) && 'unread',
+    !isUnread && isPinned && 'pinned',
+    isUnread && 'unread',
   );
 
   function renderContent() {