diff --git a/web/components/unread-badge.css b/web/components/unread-badge.css
new file mode 100644
--- /dev/null
+++ b/web/components/unread-badge.css
@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 12px;
+  height: 12px;
+  border-radius: 10px;
+  background-color: var(--unreadIndicator-background-primary-default);
+  color: var(--unreadIndicator-label-primary-default);
+  font-size: var(--xxs-font-10);
+  font-weight: var(--semi-bold);
+  padding: 3px;
+  border: 1px solid var(--unreadIndicator-border-primary-default);
+}
diff --git a/web/components/unread-badge.react.js b/web/components/unread-badge.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/unread-badge.react.js
@@ -0,0 +1,19 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './unread-badge.css';
+
+type Props = {
+  +unreadCount: number,
+};
+
+function UnreadBadge(props: Props): React.Node {
+  const { unreadCount } = props;
+
+  const unreadText = unreadCount > 99 ? '99+' : unreadCount;
+
+  return <div className={css.container}>{unreadText}</div>;
+}
+
+export default UnreadBadge;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -318,6 +318,11 @@
   /* Tooltip */
   --tooltip-background-primary-default: var(--shades-black-75);
   --tooltip-label-primary-default: var(--shades-white-100);
+
+  /* Unread Indicator */
+  --unreadIndicator-background-primary-default: var(--error-primary);
+  --unreadIndicator-label-primary-default: var(--shades-white-100);
+  --unreadIndicator-border-primary-default: var(--shades-black-85);
 }
 
 /* Light theme */
@@ -390,4 +395,9 @@
   /* @GINSU: TODO double check these values after redesign is finished */
   --tooltip-background-primary-default: var(--shades-white-80);
   --tooltip-label-primary-default: var(--shades-black-85);
+
+  /* Unread Indicator */
+  --unreadIndicator-background-primary-default: var(--error-primary);
+  --unreadIndicator-label-primary-default: var(--shades-white-100);
+  --unreadIndicator-border-primary-default: var(--shades-white-80);
 }