diff --git a/.eslintignore b/.eslintignore
index a7063603..20646d43 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,3 +2,4 @@
 **/node_modules
 **/protos
 **/proto
+**/coverage
diff --git a/.prettierignore b/.prettierignore
index d6014446..800ee336 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,3 +3,4 @@
 .parcel-cache
 .github
 **/protos
+**/coverage
diff --git a/packages/status-js/src/client/activityCenter.ts b/packages/status-js/src/client/activityCenter.ts
index 5302d4a3..0f67c0b7 100644
--- a/packages/status-js/src/client/activityCenter.ts
+++ b/packages/status-js/src/client/activityCenter.ts
@@ -1,10 +1,11 @@
 // todo?: rename to notifications (center?), inbox, or keep same as other platforms
+// todo: use kebab case for the file name
 
 import type { ChatMessage } from './chat'
 import type { Client } from './client'
 
 // todo?: rename to Activity
-type Notification = {
+export type Notification = {
   type: 'message'
   value: ChatMessage
   isMention?: boolean
@@ -13,8 +14,9 @@ type Notification = {
 
 export type ActivityCenterLatest = {
   notifications: Notification[]
-  // todo?: rename count to mentionsAndRepliesCount
+  // todo?: rename count to mentionsAndRepliesCount, mentionsCount
   unreadChats: Map<string, { count: number }>
+  totalCount: number
 }
 
 export class ActivityCenter {
@@ -33,6 +35,7 @@ export class ActivityCenter {
   public getLatest = (): ActivityCenterLatest => {
     const notifications: Notification[] = []
     const unreadChats: Map<string, { count: number }> = new Map()
+    let totalCount = 0
 
     for (const notification of this.#notifications.values()) {
       if (notification.type === 'message') {
@@ -41,8 +44,10 @@ export class ActivityCenter {
         const chat = unreadChats.get(chatUuid)
         let count = chat?.count ?? 0
 
-        if (notification.isMention || notification.isReply) {
+        const isMention = notification.isMention || notification.isReply
+        if (isMention) {
           count++
+          totalCount++
         }
 
         if (chat) {
@@ -50,6 +55,10 @@ export class ActivityCenter {
         } else {
           unreadChats.set(chatUuid, { count })
         }
+
+        if (!isMention) {
+          continue
+        }
       }
 
       notifications.push(notification)
@@ -67,12 +76,14 @@ export class ActivityCenter {
       return 0
     })
 
-    // fixme!?: do not display regular messages, only mentions and replies
-    // todo?: group notifications (all, unreads, mentions, replies, _chats.{id,count})
-    return { notifications, unreadChats }
+    return {
+      // todo?: group notifications (all, mentions, replies)
+      notifications,
+      unreadChats,
+      totalCount,
+    }
   }
 
-  // todo: pass ids instead of values and resolve within
   public addMessageNotification = (
     newMessage: ChatMessage,
     referencedMessage?: ChatMessage
@@ -98,15 +109,49 @@ export class ActivityCenter {
     this.emitLatest()
   }
 
+  // todo?: also calls `clearChatNotifications` (on non-action items/notifications)?
+  // markAllAsRead = () => {}
+
+  // todo?: for example from chat with red bar in UI indicating start
+  // markChatNotificationsAsUnreadSince = (category, id) => {}
+
+  // todo?: rename to `clearChatNotifications`; separate (button) from `markAllAsRead`?
+  // todo?: merge with `removeChatNotifications`; together with `notification.type` condition
   /**
    * Removes all notifications.
    */
-  removeNotifications = () => {
-    this.#notifications.clear()
+  removeNotifications = (category: 'all' | 'mentions' | 'replies') => {
+    // todo?: clear all non-actionable notification too
+    if (category === 'all') {
+      for (const notification of this.#notifications) {
+        const { isMention, isReply } = notification
+
+        if (!(isMention || isReply)) {
+          continue
+        }
+
+        this.#notifications.delete(notification)
+      }
+    } else if (category === 'mentions') {
+      // todo: extract to a func
+      this.#notifications.forEach(notification => {
+        if (notification.isMention) {
+          this.#notifications.delete(notification)
+        }
+      })
+    } else if (category === 'replies') {
+      this.#notifications.forEach(notification => {
+        if (notification.isReply) {
+          this.#notifications.delete(notification)
+        }
+      })
+    }
 
     this.emitLatest()
   }
 
+  // todo?: call from UI on ESC
+  // todo?: call from UI if scrolled all the way to the end
   /**
    * Removes chat message notifications from the Activity Center. For example,
    * on only opening or after scrolling to the end.
diff --git a/packages/status-js/src/client/chat.ts b/packages/status-js/src/client/chat.ts
index 61f990bd..2a2a9e4d 100644
--- a/packages/status-js/src/client/chat.ts
+++ b/packages/status-js/src/client/chat.ts
@@ -20,6 +20,7 @@ import type { MessageType } from '../protos/enums'
 import type { Client } from './client'
 import type { Community } from './community/community'
 import type { Reactions } from './community/get-reactions'
+import type { Member } from './member'
 import type { WakuMessage } from 'js-waku'
 
 export type ChatMessage = ChatMessageProto & {
@@ -28,6 +29,9 @@ export type ChatMessage = ChatMessageProto & {
   reactions: Reactions
   chatUuid: string
   signer: string
+  member: Member
+  communityDisplayName: string
+  chatDisplayName: string
   responseToMessage?: ChatMessage
   edittedClock?: bigint
   pinnedClock?: bigint
diff --git a/packages/status-js/src/client/community/handle-waku-message.ts b/packages/status-js/src/client/community/handle-waku-message.ts
index 37562ab7..148206bb 100644
--- a/packages/status-js/src/client/community/handle-waku-message.ts
+++ b/packages/status-js/src/client/community/handle-waku-message.ts
@@ -126,6 +126,8 @@ export function handleWakuMessage(
               messageId,
               chatUuid,
               signerPublicKey,
+              community,
+              chat,
             })
 
             // handle
diff --git a/packages/status-js/src/client/community/map-chat-message.ts b/packages/status-js/src/client/community/map-chat-message.ts
index 8a65032b..d0139cac 100644
--- a/packages/status-js/src/client/community/map-chat-message.ts
+++ b/packages/status-js/src/client/community/map-chat-message.ts
@@ -1,5 +1,6 @@
 import type { ChatMessage as ChatMessageProto } from '../../protos/chat-message'
-import type { ChatMessage } from '../chat'
+import type { Chat, ChatMessage } from '../chat'
+import type { Community } from './community'
 
 export function mapChatMessage(
   decodedMessage: ChatMessageProto,
@@ -7,9 +8,11 @@ export function mapChatMessage(
     messageId: string
     chatUuid: string
     signerPublicKey: string
+    community: Community
+    chat: Chat
   }
 ): ChatMessage {
-  const { messageId, chatUuid, signerPublicKey } = props
+  const { messageId, chatUuid, signerPublicKey, community, chat } = props
 
   const message: ChatMessage = {
     ...decodedMessage,
@@ -25,6 +28,10 @@ export function mapChatMessage(
       SAD: new Set<string>(),
       ANGRY: new Set<string>(),
     },
+    member: community.getMember(signerPublicKey)!,
+    // todo?: asign as .community, .community.description, .communityDescription, or .community.displayName
+    communityDisplayName: community.description.identity!.displayName,
+    chatDisplayName: chat.description.identity!.displayName,
   }
 
   return message
diff --git a/packages/status-js/src/index.ts b/packages/status-js/src/index.ts
index 2599977d..410740b5 100644
--- a/packages/status-js/src/index.ts
+++ b/packages/status-js/src/index.ts
@@ -2,6 +2,7 @@ export type { Account } from './client/account'
 export type {
   ActivityCenter,
   ActivityCenterLatest,
+  Notification,
 } from './client/activityCenter'
 export type { ChatMessage as Message } from './client/chat'
 export type { Client, ClientOptions } from './client/client'
diff --git a/packages/status-react/package.json b/packages/status-react/package.json
index fb24d6f7..61bff02d 100644
--- a/packages/status-react/package.json
+++ b/packages/status-react/package.json
@@ -42,11 +42,13 @@
     "@radix-ui/react-label": "^0.1.5",
     "@radix-ui/react-popover": "^0.1.6",
     "@radix-ui/react-separator": "^0.1.4",
+    "@radix-ui/react-tabs": "^1.0.0",
     "@radix-ui/react-toggle-group": "^0.1.5",
-    "@radix-ui/react-tooltip": "^0.1.7",
+    "@radix-ui/react-tooltip": "^1.0.0",
     "@radix-ui/react-visually-hidden": "^0.1.4",
     "@status-im/js": "0.1.0-alpha.2",
     "@stitches/react": "^1.2.8",
+    "date-fns": "^2.29.3",
     "emoji-mart": "^3.0.1",
     "html-entities": "^2.3.2",
     "qrcode.react": "^3.0.1",
diff --git a/packages/status-react/src/components/chat-menu/edit-group-chat-dialog.tsx b/packages/status-react/src/components/chat-menu/edit-group-chat-dialog.tsx
index d67def3e..b5ac7df7 100644
--- a/packages/status-react/src/components/chat-menu/edit-group-chat-dialog.tsx
+++ b/packages/status-react/src/components/chat-menu/edit-group-chat-dialog.tsx
@@ -11,7 +11,7 @@ export const EditGroupChatDialog = () => {
           placeholder="A catchy name"
           maxLength={30}
         />
-        <Avatar size="120" />
+        <Avatar size="120" initialsLength={1} />
       </Dialog.Body>
       <Dialog.Actions>
         <Dialog.Action>Save changes</Dialog.Action>
diff --git a/packages/status-react/src/components/main-sidebar/components/chats/chat-item.tsx b/packages/status-react/src/components/main-sidebar/components/chats/chat-item.tsx
index 271ee500..e582e8e3 100644
--- a/packages/status-react/src/components/main-sidebar/components/chats/chat-item.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/chats/chat-item.tsx
@@ -4,7 +4,7 @@ import { NavLink } from 'react-router-dom'
 
 import { useActivityCenter } from '../../../../protocol'
 import { styled } from '../../../../styles/config'
-import { Avatar } from '../../../../system'
+import { Avatar, Badge, Flex } from '../../../../system'
 
 import type { Chat } from '../../../../protocol/use-sorted-chats'
 import type { Ref } from 'react'
@@ -30,7 +30,10 @@ const ChatItem = (props: Props, ref: Ref<HTMLAnchorElement>) => {
       to={`/${chat.id}`}
       state={muted ? 'muted' : unread ? 'unread' : undefined}
     >
-      <Avatar size={24} name={displayName} color={color} />#{displayName}
+      <Flex gap={2} align="center">
+        <Avatar size={24} name={displayName} color={color} initialsLength={1} />
+        #{displayName}
+      </Flex>
       {count > 0 && <Badge>{count}</Badge>}
     </Link>
   )
@@ -46,11 +49,11 @@ const Link = styled(NavLink, {
   fontFamily: '$sans',
   fontWeight: '$500',
   fontSize: 15,
-  display: 'inline-flex',
+  display: 'flex',
+  justifyContent: 'space-between',
   color: '$accent-4',
   alignItems: 'center',
   width: '100%',
-  gap: '$2',
   borderRadius: 8,
   padding: 8,
 
@@ -75,15 +78,3 @@ const Link = styled(NavLink, {
     },
   },
 })
-
-const Badge = styled('div', {
-  textAlign: 'center',
-  position: 'absolute',
-  right: 8,
-  width: 22,
-  height: 22,
-  background: '$primary-1',
-  borderRadius: '$full',
-  fontSize: 12,
-  color: '$accent-11',
-})
diff --git a/packages/status-react/src/components/main-sidebar/components/chats/index.tsx b/packages/status-react/src/components/main-sidebar/components/chats/index.tsx
index 598bf95d..265a9ad2 100644
--- a/packages/status-react/src/components/main-sidebar/components/chats/index.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/chats/index.tsx
@@ -9,7 +9,7 @@ export const Chats = () => {
   const { categories, chats } = useSortedChats()
 
   return (
-    <Box css={{ padding: '18px 0', overflow: 'auto' }}>
+    <Box css={{ padding: '18px 0', overflowY: 'scroll' }}>
       {chats.map(chat => (
         <ChatItem key={chat.id} chat={chat} />
       ))}
diff --git a/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx b/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx
index 9a3a4609..8b75b576 100644
--- a/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx
+++ b/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx
@@ -14,7 +14,7 @@ export const CommunityInfo = () => {
   return (
     <DialogTrigger>
       <Button>
-        <Avatar size={36} name={displayName} color={color} />
+        <Avatar size={36} name={displayName} color={color} initialsLength={1} />
         <div>
           <Text>{displayName}</Text>
           <Text color="gray" size={12}>
diff --git a/packages/status-react/src/components/main-sidebar/index.tsx b/packages/status-react/src/components/main-sidebar/index.tsx
index d14ce63a..0bed4c0c 100644
--- a/packages/status-react/src/components/main-sidebar/index.tsx
+++ b/packages/status-react/src/components/main-sidebar/index.tsx
@@ -38,7 +38,6 @@ const Wrapper = styled('div', {
   flexDirection: 'column',
   padding: '10px 16px',
   backgroundColor: '$gray-4',
-  overflowY: 'scroll',
 
   '@large': {
     display: 'flex',
diff --git a/packages/status-react/src/components/member-sidebar/index.tsx b/packages/status-react/src/components/member-sidebar/index.tsx
index ad6f1ea4..9939e9d3 100644
--- a/packages/status-react/src/components/member-sidebar/index.tsx
+++ b/packages/status-react/src/components/member-sidebar/index.tsx
@@ -22,7 +22,7 @@ export function MemberSidebar() {
             <UserItem account={account} />
           </MemberGroup>
         )}
-        <MemberGroup label="Online">
+        <MemberGroup label="All">
           {members.map(member => (
             <MemberItem
               key={member.publicKey}
diff --git a/packages/status-react/src/components/welcome-dialog/index.tsx b/packages/status-react/src/components/welcome-dialog/index.tsx
index 96e14c23..7b8c7363 100644
--- a/packages/status-react/src/components/welcome-dialog/index.tsx
+++ b/packages/status-react/src/components/welcome-dialog/index.tsx
@@ -17,6 +17,7 @@ export const WelcomeDialog = () => {
             size="64"
             src={identity?.displayName}
             color={identity?.color}
+            initialsLength={1}
           />
         </Flex>
         <Text>{identity?.description}</Text>
diff --git a/packages/status-react/src/contexts/app-context.tsx b/packages/status-react/src/contexts/app-context.tsx
index 34f0e55f..c065c20e 100644
--- a/packages/status-react/src/contexts/app-context.tsx
+++ b/packages/status-react/src/contexts/app-context.tsx
@@ -28,7 +28,7 @@ const reducer: Reducer<State, Action> = (state, action) => {
 
 const initialState: State = {
   state: 'loading',
-  showMembers: false,
+  showMembers: true,
 }
 
 interface Props {
diff --git a/packages/status-react/src/hooks/use-local-storage.tsx b/packages/status-react/src/hooks/use-local-storage.tsx
index d3f96bb1..f7dc55ff 100644
--- a/packages/status-react/src/hooks/use-local-storage.tsx
+++ b/packages/status-react/src/hooks/use-local-storage.tsx
@@ -90,7 +90,6 @@ function parseJSON<T>(value: string | null): T | undefined {
   try {
     return value === 'undefined' ? undefined : JSON.parse(value ?? '')
   } catch {
-    console.log('Parse error', { value })
     return undefined
   }
 }
diff --git a/packages/status-react/src/icons/double-tick-icon.tsx b/packages/status-react/src/icons/double-tick-icon.tsx
new file mode 100644
index 00000000..0725b63a
--- /dev/null
+++ b/packages/status-react/src/icons/double-tick-icon.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+
+export const DoubleTickIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="24"
+      height="16"
+      viewBox="0 0 24 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M22.864 0.421992C23.2086 0.651757 23.3017 1.11741 23.072 1.46206L13.1979 15.4222C13.0733 15.6091 12.8714 15.7303 12.6478 15.7525C12.4242 15.7746 12.2025 15.6953 12.0436 15.5365L6.04357 9.53646C5.75067 9.24357 5.75067 8.76869 6.04357 8.4758C6.33646 8.18291 6.81133 8.18291 7.10423 8.4758L12.4573 13.8289L21.8239 0.630005C22.0537 0.285358 22.5193 0.192228 22.864 0.421992Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.8555 0.383649C18.1925 0.624401 18.2706 1.09281 18.0299 1.42988L12.0524 9.7986C11.8116 10.1357 11.3432 10.2137 11.0061 9.97298C10.6691 9.73223 10.591 9.26382 10.8318 8.92676L16.8092 0.558034C17.05 0.220971 17.5184 0.142897 17.8555 0.383649Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.01928 8.47976C1.31098 8.18568 1.78585 8.18375 2.07993 8.47546L8.09754 14.4444C8.39162 14.7361 8.39355 15.211 8.10185 15.505C7.81015 15.7991 7.33528 15.801 7.0412 15.5093L1.02359 9.54041C0.729506 9.24871 0.727577 8.77384 1.01928 8.47976Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/tiny-chevron-right-icon.tsx b/packages/status-react/src/icons/tiny-chevron-right-icon.tsx
new file mode 100644
index 00000000..ccfe8e07
--- /dev/null
+++ b/packages/status-react/src/icons/tiny-chevron-right-icon.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+export const TinyChevronRightIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width={6}
+      height={9}
+      viewBox="0 0 6 9"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M.97.97a.75.75 0 000 1.06l2.116 2.116a.5.5 0 010 .708L.97 6.97a.75.75 0 001.06 1.06l3-3a.75.75 0 000-1.06l-3-3a.75.75 0 00-1.06 0z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/tiny-community-icon.tsx b/packages/status-react/src/icons/tiny-community-icon.tsx
new file mode 100644
index 00000000..9ebbcc95
--- /dev/null
+++ b/packages/status-react/src/icons/tiny-community-icon.tsx
@@ -0,0 +1,22 @@
+// todo: add to /tiny folder
+import React from 'react'
+
+export const TinyCommunityIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width={12}
+      height={12}
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 12a2 2 0 002-2 2 2 0 002-2V2a2 2 0 00-2-2C4.477 0 0 4.477 0 10a2 2 0 002 2h6zm-5.5-2a.477.477 0 01-.485-.5A8.001 8.001 0 019.5 2.015c.276-.017.5.209.5.485v1a.534.534 0 01-.5.52A6.001 6.001 0 004.02 9.5a.534.534 0 01-.52.5h-1zM10 6.5c0-.276-.225-.503-.499-.47a4.002 4.002 0 00-3.47 3.471c-.034.274.193.499.469.499h1c.276 0 .494-.227.562-.495a2.003 2.003 0 011.443-1.443c.268-.068.495-.286.495-.562v-1z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/tiny-reply-icon.tsx b/packages/status-react/src/icons/tiny-reply-icon.tsx
new file mode 100644
index 00000000..600f64ec
--- /dev/null
+++ b/packages/status-react/src/icons/tiny-reply-icon.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+export const TinyReplyIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width={10}
+      height={11}
+      viewBox="0 0 10 11"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M5 2.59V1.123c0-.62.373-.812.824-.422l4.004 3.445a.449.449 0 01-.001.704L5.822 8.297C5.373 8.685 5 8.495 5 7.874V6.5c-2.502 0-3.817 1.887-4.476 3.532-.103.258-.253.258-.324-.01A5.912 5.912 0 010 8.498a5.996 5.996 0 015-5.91z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/protocol/use-activity-center.tsx b/packages/status-react/src/protocol/use-activity-center.tsx
index d237db45..a4f6f07d 100644
--- a/packages/status-react/src/protocol/use-activity-center.tsx
+++ b/packages/status-react/src/protocol/use-activity-center.tsx
@@ -22,6 +22,9 @@ export const useActivityCenter = () => {
   }, [client.activityCenter])
 
   return {
+    activityCenter: client.activityCenter,
+    notifications: latest.notifications,
     unreadChats: latest.unreadChats,
+    totalCount: latest.totalCount,
   }
 }
diff --git a/packages/status-react/src/routes/chat/components/chat-info/index.tsx b/packages/status-react/src/routes/chat/components/chat-info/index.tsx
index 5c93909b..b2da60bc 100644
--- a/packages/status-react/src/routes/chat/components/chat-info/index.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-info/index.tsx
@@ -20,6 +20,7 @@ export const ChatInfo = (props: Props) => {
         size={36}
         name={chat.identity?.displayName}
         color={chat.identity?.color}
+        initialsLength={1}
       />
       <div>
         <Text>#{chat.identity?.displayName}</Text>
diff --git a/packages/status-react/src/routes/chat/components/chat-message/index.tsx b/packages/status-react/src/routes/chat/components/chat-message/index.tsx
index 445743da..de1125c6 100644
--- a/packages/status-react/src/routes/chat/components/chat-message/index.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-message/index.tsx
@@ -7,7 +7,7 @@ import { useChatContext } from '../../../../contexts/chat-context'
 // import { BellIcon } from '../../../../icons/bell-icon'
 // import { PinIcon } from '../../../../icons/pin-icon'
 import { useProtocol } from '../../../../protocol'
-import { styled } from '../../../../styles/config'
+import { keyframes, styled } from '../../../../styles/config'
 import {
   Avatar,
   Box,
@@ -32,6 +32,7 @@ import type { Message, Reaction } from '../../../../protocol'
 interface Props {
   message: Message
   prevMessage?: Message
+  highlight?: boolean
 }
 
 // const MessageLink = forwardRef(function MessageLink(
@@ -60,7 +61,7 @@ export const ChatMessage = (props: Props) => {
   const { params } = useMatch(':id')!
 
   const chatId = params.id!
-  const { message } = props
+  const { message, highlight } = props
 
   const mention = false
   const pinned = false
@@ -172,7 +173,12 @@ export const ChatMessage = (props: Props) => {
   return (
     <>
       {/* <ContextMenuTrigger> */}
-      <Wrapper mention={mention} pinned={pinned} data-active={reacting}>
+      <Wrapper
+        mention={mention}
+        pinned={pinned}
+        data-active={reacting}
+        highlight={highlight}
+      >
         {responseTo && <MessageReply messageId={responseTo} />}
         <Flex gap={2}>
           <Box>
@@ -262,6 +268,15 @@ export const ChatMessage = (props: Props) => {
   )
 }
 
+const backgroundAnimation = keyframes({
+  from: {
+    backgroundColor: '$navigate-2',
+  },
+  to: {
+    backgroundColor: 'revert',
+  },
+})
+
 // TODO: Use compound variants https://stitches.dev/docs/variants#compound-variants
 const Wrapper = styled('div', {
   position: 'relative',
@@ -273,7 +288,7 @@ const Wrapper = styled('div', {
   transitionDuration: '100ms',
 
   '&:hover, &[data-open="true"], &[data-active="true"]': {
-    background: '$gray-4',
+    background: '$gray-2',
   },
 
   a: {
@@ -317,6 +332,13 @@ const Wrapper = styled('div', {
         },
       },
     },
+    highlight: {
+      true: {
+        '@motion': {
+          animation: `${backgroundAnimation} 3s ease-out 0s`,
+        },
+      },
+    },
   },
 
   compoundVariants: [],
diff --git a/packages/status-react/src/routes/chat/components/navbar/components/activity-center-popover/index.tsx b/packages/status-react/src/routes/chat/components/navbar/components/activity-center-popover/index.tsx
new file mode 100644
index 00000000..a9c6d993
--- /dev/null
+++ b/packages/status-react/src/routes/chat/components/navbar/components/activity-center-popover/index.tsx
@@ -0,0 +1,184 @@
+import React, { Fragment, useState } from 'react'
+
+import format from 'date-fns/format'
+import isSameDay from 'date-fns/isSameDay'
+import isSameYear from 'date-fns/isSameYear'
+
+import { BellIcon } from '../../../../../../icons/bell-icon'
+import { DoubleTickIcon } from '../../../../../../icons/double-tick-icon'
+import { useActivityCenter } from '../../../../../../protocol'
+import {
+  Activity,
+  Badge,
+  IconButton,
+  Popover,
+  PopoverTrigger,
+  Tabs,
+  Text,
+  Tooltip,
+} from '../../../../../../system'
+
+import type { Notification } from '@status-im/js'
+
+export const ActivityCenterPopover = () => {
+  const [open, setOpen] = useState(false)
+
+  const { activityCenter, notifications, totalCount } = useActivityCenter()
+
+  const initialValue: {
+    all: Notification[]
+    mentions: Notification[]
+    replies: Notification[]
+  } = {
+    all: notifications,
+    mentions: [],
+    replies: [],
+  }
+  const { all, mentions, replies } = notifications.reduce((acc, obj) => {
+    if (obj.type === 'message') {
+      if (obj.isMention) {
+        acc.mentions.push(obj)
+      }
+
+      if (obj.isReply) {
+        acc.replies.push(obj)
+      }
+    }
+
+    return acc
+  }, initialValue)
+
+  const createContent = (
+    notifications: Notification[]
+  ): JSX.Element | JSX.Element[] => {
+    const mappedNotifications = notifications.map(
+      (currentNotification, notificationIndex, iteratedNotifications) => {
+        const previousNotification =
+          iteratedNotifications[notificationIndex - 1]
+
+        let showNewDateSeparator: boolean
+        if (!previousNotification) {
+          showNewDateSeparator = true
+        } else {
+          showNewDateSeparator = !isSameDay(
+            new Date(Number(currentNotification.value.timestamp)),
+            new Date(Number(previousNotification.value.timestamp))
+          )
+        }
+
+        let date: string | undefined
+        if (showNewDateSeparator) {
+          const _date = new Date(Number(currentNotification.value.timestamp))
+
+          const today = new Date()
+          const yesterday = new Date().setDate(today.getDate() - 1)
+
+          if (isSameDay(_date, today)) {
+            date = 'Today'
+          } else if (isSameDay(_date, yesterday)) {
+            date = 'Yesterday'
+          } else if (isSameYear(_date, today)) {
+            date = format(_date, 'iii, d MMMM')
+          } else {
+            date = format(_date, 'iii, d MMMM yyyy')
+          }
+        }
+
+        return (
+          <Fragment key={currentNotification.value.messageId}>
+            {/* todo: seperate separator component */}
+            {showNewDateSeparator && (
+              <Text
+                color="gray"
+                weight={400}
+                css={{ height: '34px', padding: '8px 16px 4px 16px' }}
+              >
+                {date}
+              </Text>
+            )}
+            <Activity onNavigateChange={() => setOpen(false)}>
+              {currentNotification}
+            </Activity>
+          </Fragment>
+        )
+      }
+    )
+
+    if (!mappedNotifications.length) {
+      return (
+        <Text
+          size="15"
+          color="gray"
+          weight="400"
+          align="center"
+          css={{
+            margin: 'auto',
+            position: 'relative',
+            top: '50%',
+            transform: 'translateY(-50%)',
+          }}
+        >
+          Notifications will appear here
+        </Text>
+      )
+    }
+
+    return mappedNotifications
+  }
+
+  return (
+    <PopoverTrigger open={open} onOpenChange={setOpen}>
+      <Tooltip label="Activity">
+        <IconButton
+          label="Show Activity Center"
+          onClick={() => setOpen(!open)}
+          css={{ position: 'relative' }}
+        >
+          <>
+            <BellIcon />
+            {totalCount > 0 && (
+              <Badge
+                variant="border"
+                css={{
+                  position: 'absolute',
+                  left: 16,
+                  top: -2,
+                }}
+              >
+                {totalCount}
+              </Badge>
+            )}
+          </>
+        </IconButton>
+      </Tooltip>
+      <Popover side="bottom" css={{ width: 600, height: 770 }}>
+        <Tabs
+          tabs={[
+            { title: 'All', value: 'all', content: createContent(all) },
+            {
+              title: 'Mentions',
+              value: 'mentions',
+              content: createContent(mentions),
+            },
+            {
+              title: 'Replies',
+              value: 'replies',
+              content: createContent(replies),
+            },
+          ]}
+          actions={[
+            {
+              icon: <DoubleTickIcon />,
+              // todo: call it "Mark as Read" since the action is relative to active tab
+              label: 'Mark All As Read',
+              method: (activeTab: string) =>
+                activityCenter.removeNotifications(
+                  activeTab as 'all' | 'mentions' | 'replies'
+                ),
+            },
+          ]}
+        />
+      </Popover>
+    </PopoverTrigger>
+  )
+}
diff --git a/packages/status-react/src/routes/chat/components/navbar/index.tsx b/packages/status-react/src/routes/chat/components/navbar/index.tsx
index 0dfe5c71..9c2a1f30 100644
--- a/packages/status-react/src/routes/chat/components/navbar/index.tsx
+++ b/packages/status-react/src/routes/chat/components/navbar/index.tsx
@@ -4,13 +4,13 @@ import { useMatch } from 'react-router-dom'
 
 // import { ChatMenu } from '../../../../components/chat-menu'
 import { useAppState } from '../../../../contexts/app-context'
-// import { BellIcon } from '../../../../icons/bell-icon'
 // import { DotsIcon } from '../../../../icons/dots-icon'
 import { GroupIcon } from '../../../../icons/group-icon'
 import { useChat } from '../../../../protocol'
 import { styled } from '../../../../styles/config'
-import { Flex, IconButton } from '../../../../system'
+import { Flex, IconButton, Separator } from '../../../../system'
 import { ChatInfo } from '../chat-info'
+import { ActivityCenterPopover } from './components/activity-center-popover'
 
 interface Props {
   enableMembers: boolean
@@ -20,6 +20,7 @@ export const Navbar = (props: Props) => {
   const { enableMembers } = props
 
   const { state, dispatch } = useAppState()
+
   const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion
 
   const chat = useChat(params.id!)
@@ -46,11 +47,9 @@ export const Navbar = (props: Props) => {
           <ChatMenu type="dropdown" />
         </DropdownMenuTrigger> */}
 
-        {/* <Separator orientation="vertical" css={{ height: 24 }} /> */}
+        <Separator orientation="vertical" css={{ height: 24 }} />
 
-        {/* <IconButton label="Show Activity Center">
-          <BellIcon />
-        </IconButton> */}
+        <ActivityCenterPopover />
       </Flex>
     </NavbarWrapper>
   )
@@ -60,5 +59,5 @@ const NavbarWrapper = styled('div', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  padding: '10px 16px',
+  padding: '10px 20px',
 })
diff --git a/packages/status-react/src/routes/chat/index.tsx b/packages/status-react/src/routes/chat/index.tsx
index 3e899490..5346567c 100644
--- a/packages/status-react/src/routes/chat/index.tsx
+++ b/packages/status-react/src/routes/chat/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 
-import { useMatch } from 'react-router-dom'
+import { useLocation, useMatch } from 'react-router-dom'
 
 import { MemberSidebar } from '../../components/member-sidebar'
 import { useAppState } from '../../contexts/app-context'
@@ -23,7 +23,12 @@ const ChatStart = (props: ChatStartProps) => {
 
   return (
     <Flex direction="column" gap="3" align="center" css={{ marginBottom: 50 }}>
-      <Avatar size={120} name={identity?.displayName} color={identity?.color} />
+      <Avatar
+        size={120}
+        name={identity?.displayName}
+        color={identity?.color}
+        initialsLength={1}
+      />
       <Heading>{identity?.displayName}</Heading>
       <Text>
         Welcome to the beginning of the #{identity?.displayName} channel!
@@ -43,11 +48,28 @@ const Body = () => {
   const chat = client.community.getChat(chatId)!
   const messages = useMessages(chatId)
 
-  const contentRef = useRef<HTMLDivElement>(null)
+  const location = useLocation()
+  const selectedMessageId = (
+    location.state as { selectedMessageId: string } | undefined
+  )?.selectedMessageId
+
+  const contentRef = useRef<HTMLDivElement | null>(null)
+  // todo: more scrolling conditions
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    if (selectedMessageId) {
+      document.getElementById(selectedMessageId)?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'start',
+      })
+      // todo?: history.state clean-up
+
+      return
+    }
+
     contentRef.current!.scrollTop = contentRef.current!.scrollHeight ?? 0
-  }, [chatId, messages.data.length])
+  }, [chatId, messages.data.length, selectedMessageId])
 
   const handleMessageSubmit = (message: string) => {
     chat.sendTextMessage(message, state.reply?.message.messageId)
@@ -57,9 +79,15 @@ const Body = () => {
     <>
       <ContentWrapper ref={contentRef}>
         <ChatStart chatId={chatId} />
-        {messages.data.map(message => (
-          <ChatMessage key={message.messageId} message={message} />
-        ))}
+        {messages.data.map(message => {
+          return (
+            <ChatMessage
+              key={message.messageId}
+              message={message}
+              highlight={message.messageId === selectedMessageId}
+            />
+          )
+        })}
       </ContentWrapper>
       {account && <ChatInput onSubmit={handleMessageSubmit} />}
     </>
@@ -87,14 +115,11 @@ export const Chat = () => {
 
 const Wrapper = styled('div', {
   flex: 1,
-  position: 'relative',
-  width: '100%',
-  height: '100%',
   display: 'flex',
   alignItems: 'stretch',
+  // https://medium.com/the-crazy-coder/the-mystery-of-css-flex-layout-items-shrinking-8748145e96d9
+  minWidth: 0,
   background: '$background',
-  maxWidth: '100%',
-  minWidth: 1,
 })
 
 const ContentWrapper = styled('div', {
@@ -103,7 +128,6 @@ const ContentWrapper = styled('div', {
   overflowX: 'hidden',
   WebkitOverflowScrolling: 'touch',
   overscrollBehavior: 'contain',
-  minWidth: 1,
 
   // scrollSnapType: 'y proximity',
 
@@ -117,5 +141,5 @@ const Main = styled('div', {
   flex: 1,
   display: 'flex',
   flexDirection: 'column',
-  minWidth: 1,
+  minWidth: 0,
 })
diff --git a/packages/status-react/src/routes/index.tsx b/packages/status-react/src/routes/index.tsx
index 137651e9..e3657bb0 100644
--- a/packages/status-react/src/routes/index.tsx
+++ b/packages/status-react/src/routes/index.tsx
@@ -22,6 +22,20 @@ interface Props extends Config {
   meta?: string
 }
 
+// todo: use a better way to handle this
+const RootGate = (props: { children: JSX.Element }) => {
+  const { client } = useProtocol()
+
+  // todo!: use sorted chats
+  const chat = client.community._chats[0]
+
+  if (!chat) {
+    return props.children
+  }
+
+  return <Navigate to={`/${chat.uuid}`} replace />
+}
+
 // TODO: use a better way to handle this
 const Gate = (props: { children: JSX.Element }) => {
   const { client } = useProtocol()
@@ -60,8 +74,20 @@ export const Community = (props: Props) => {
               <MainSidebar />
               <Routes>
                 <Route
-                  path="/:id"
+                  path="/"
                   element={
+                    <RootGate>
+                      {/* todo?: empty state/page */}
+                      {/* todo?: navbar at least; think community w/o chats yet, but already has members to inspect */}
+                      <></>
+                    </RootGate>
+                  }
+                />
+                {/* todo?: nest under `/` route */}
+                <Route
+                  path=":id"
+                  element={
+                    // todo?: merge with `RootGate`
                     <Gate>
                       <Chat />
                     </Gate>
diff --git a/packages/status-react/src/styles/config.tsx b/packages/status-react/src/styles/config.tsx
index 338cf65e..b9afd992 100644
--- a/packages/status-react/src/styles/config.tsx
+++ b/packages/status-react/src/styles/config.tsx
@@ -57,6 +57,8 @@ export const {
       'pin-2': 'rgba(255, 159, 15, 0.2)',
       'pin-3': 'rgba(255, 159, 15, 0.1)',
 
+      'navigate-2': 'rgba(255, 159, 15, 0.2)',
+
       'accent-1': 'rgba(0, 0, 0, 1)',
       'accent-2': 'rgba(0, 0, 0, 0.9)',
       'accent-3': 'rgba(0, 0, 0, 0.8)',
diff --git a/packages/status-react/src/system/activity/activity.tsx b/packages/status-react/src/system/activity/activity.tsx
new file mode 100644
index 00000000..ec5793a2
--- /dev/null
+++ b/packages/status-react/src/system/activity/activity.tsx
@@ -0,0 +1,127 @@
+import React from 'react'
+
+import { useNavigate } from 'react-router-dom'
+
+import { styled } from '../../styles/config'
+import { Avatar } from '../avatar'
+import { Box } from '../box'
+import { EthAddress } from '../eth-address'
+import { Flex } from '../flex'
+import { Tag } from '../tag'
+import { Text } from '../text'
+
+import type { Notification } from '@status-im/js'
+
+const Base = styled('div', {
+  display: 'flex',
+  flexShrink: 0,
+  minHeight: '60px',
+  maxHeight: '126px',
+  padding: '8px 16px',
+  '&:hover': {
+    background: '$primary-3',
+  },
+})
+
+interface Props {
+  children: Notification
+  onNavigateChange: () => void
+}
+
+const Activity = (props: Props) => {
+  const value = props.children.value
+  const isReply = props.children.isReply
+
+  const navigate = useNavigate()
+
+  return (
+    <Base
+      onClick={() => {
+        props.onNavigateChange()
+        navigate(`/${value.chatUuid}`, {
+          // todo?: rename to `jumpedTo` or `navigateTo`
+          state: { selectedMessageId: value.messageId },
+        })
+      }}
+    >
+      <Flex
+        gap={2}
+        css={{
+          width: '100%',
+        }}
+      >
+        <Box>
+          <Avatar
+            size={40}
+            name={value.member.username}
+            colorHash={value.member.colorHash}
+          />
+        </Box>
+        <Flex
+          direction="column"
+          css={{
+            width: '100%',
+          }}
+        >
+          <div>
+            <Flex gap="1" align="center">
+              <Text color="primary" weight="500" size="15">
+                {/* todo?: ens name */}
+                {/* todo?: nickname */}
+                {value.member.username}
+              </Text>
+              <EthAddress size={10} color="gray">
+                {value.member.chatKey}
+              </EthAddress>
+              <Text size="10" color="gray">
+                •
+              </Text>
+              <Text size="10" color="gray">
+                {new Date(Number(value.timestamp)).toLocaleTimeString([], {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })}
+              </Text>
+            </Flex>
+          </div>
+          {/* todo?: same comoponnent as for chat messages; think mention resolution */}
+          <Text
+            css={{
+              wordBreak: 'break-word',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              display: '-webkit-box',
+              boxOrient: 'vertical',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+            }}
+          >
+            {value.text}
+          </Text>
+          <Flex
+            gap={1}
+            css={{
+              padding: '6px 0px 0px',
+            }}
+          >
+            <Tag
+              type="community"
+              communityDisplayName={value.communityDisplayName}
+              chatDisplayName={value.chatDisplayName}
+              chatUuid={value.chatUuid}
+              onNavigateChange={props.onNavigateChange}
+            />
+            {isReply && (
+              <Tag
+                type="reply"
+                text={value.responseToMessage?.text ?? 'Message not available.'}
+              />
+            )}
+          </Flex>
+        </Flex>
+      </Flex>
+    </Base>
+  )
+}
+
+export { Activity }
diff --git a/packages/status-react/src/system/activity/index.tsx b/packages/status-react/src/system/activity/index.tsx
new file mode 100644
index 00000000..a1d1c4f5
--- /dev/null
+++ b/packages/status-react/src/system/activity/index.tsx
@@ -0,0 +1 @@
+export { Activity } from './activity'
diff --git a/packages/status-react/src/system/avatar/avatar.tsx b/packages/status-react/src/system/avatar/avatar.tsx
index 095fabb6..1fe90683 100644
--- a/packages/status-react/src/system/avatar/avatar.tsx
+++ b/packages/status-react/src/system/avatar/avatar.tsx
@@ -13,10 +13,19 @@ interface Props {
   src?: string
   color?: string
   colorHash?: number[][]
+  initialsLength?: 1 | 2
 }
 
 const Avatar = (props: Props) => {
-  const { size, name, src, color, indicator, colorHash } = props
+  const {
+    size,
+    name,
+    src,
+    color,
+    indicator,
+    colorHash,
+    initialsLength = 2,
+  } = props
 
   const identiconRing = useMemo(() => {
     if (colorHash) {
@@ -25,7 +34,7 @@ const Avatar = (props: Props) => {
     }
   }, [colorHash])
 
-  const initials = name ? name.slice(0, 1) : ''
+  const initials = name ? name.slice(0, initialsLength) : ''
 
   return (
     <Base
diff --git a/packages/status-react/src/system/avatar/styles.tsx b/packages/status-react/src/system/avatar/styles.tsx
index 5ede1edb..2c0021eb 100644
--- a/packages/status-react/src/system/avatar/styles.tsx
+++ b/packages/status-react/src/system/avatar/styles.tsx
@@ -11,6 +11,11 @@ export const Base = styled('div', {
 
   variants: {
     size: {
+      16: {
+        width: 16,
+        height: 16,
+        padding: 1,
+      },
       20: {
         width: 20,
         height: 20,
@@ -31,6 +36,11 @@ export const Base = styled('div', {
         height: 36,
         padding: 2,
       },
+      40: {
+        width: 40,
+        height: 40,
+        padding: 2,
+      },
       44: {
         width: 44,
         height: 44,
@@ -71,6 +81,7 @@ export const Indicator = styled('span', {
 
   variants: {
     size: {
+      16: {},
       20: {},
       24: {},
       32: {
@@ -78,6 +89,7 @@ export const Indicator = styled('span', {
         height: 12,
       },
       36: {},
+      40: {},
       44: {},
       64: {},
       80: {},
@@ -105,10 +117,12 @@ export const Initials = styled('div', {
   verticalAlign: 'baseline',
   variants: {
     size: {
+      16: { fontSize: 'calc(16 * 0.5px)', lineHeight: '16px' },
       20: { fontSize: 'calc(20 * 0.5px)', lineHeight: '20px' },
       24: { fontSize: 'calc(24 * 0.5px)', lineHeight: '24px' },
       32: { fontSize: 'calc(32 * 0.5px)', lineHeight: '32px' },
       36: { fontSize: 'calc(36 * 0.5px)', lineHeight: '36px' },
+      40: { fontSize: 'calc(40 * 0.5px)', lineHeight: '40px' },
       44: { fontSize: 'calc(44 * 0.5px)', lineHeight: '44px' },
       64: { fontSize: 'calc(64 * 0.5px)', lineHeight: '64px' },
       80: { fontSize: 'calc(80 * 0.5px)', lineHeight: '80px' },
diff --git a/packages/status-react/src/system/badge/badge.tsx b/packages/status-react/src/system/badge/badge.tsx
new file mode 100644
index 00000000..0224c491
--- /dev/null
+++ b/packages/status-react/src/system/badge/badge.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { Text } from '../text'
+import { Base } from './styles'
+
+import type { Variants } from './styles'
+import type Stitches from '@stitches/react'
+
+interface Props {
+  children: number
+  variant?: Variants['variant']
+  css?: Stitches.CSS
+}
+
+const Badge = (props: Props) => {
+  const { children, variant, css } = props
+
+  return (
+    <Base variant={variant} css={css}>
+      <Text size="12" weight="500" align="center" css={{ color: '$accent-11' }}>
+        {children < 100 ? children : '99+'}
+      </Text>
+    </Base>
+  )
+}
+
+export { Badge }
+export type { Props as BadgeProps }
diff --git a/packages/status-react/src/system/badge/index.tsx b/packages/status-react/src/system/badge/index.tsx
new file mode 100644
index 00000000..16b632d2
--- /dev/null
+++ b/packages/status-react/src/system/badge/index.tsx
@@ -0,0 +1,2 @@
+export type { BadgeProps } from './badge'
+export { Badge } from './badge'
diff --git a/packages/status-react/src/system/badge/styles.tsx b/packages/status-react/src/system/badge/styles.tsx
new file mode 100644
index 00000000..801dfae7
--- /dev/null
+++ b/packages/status-react/src/system/badge/styles.tsx
@@ -0,0 +1,32 @@
+import { styled } from '../../styles/config'
+
+import type { VariantProps } from '../../styles/config'
+
+export type Variants = VariantProps<typeof Base>
+
+export const Base = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: 22,
+  height: 22,
+  padding: '3px 7px',
+  background: '$primary-1',
+  /**
+   * @see https://copyprogramming.com/howto/css-set-border-radius-relative-to-height
+   * @see https://stackoverflow.com/a/66530702/6924883
+   */
+  borderRadius: 9999,
+
+  variants: {
+    variant: {
+      border: {
+        minWidth: 18,
+        height: 18,
+        padding: '1px 5px',
+        // todo?: use border
+        outline: '2px solid $accent-11',
+      },
+    },
+  },
+})
diff --git a/packages/status-react/src/system/button/button.tsx b/packages/status-react/src/system/button/button.tsx
index 2c87df4a..c8882407 100644
--- a/packages/status-react/src/system/button/button.tsx
+++ b/packages/status-react/src/system/button/button.tsx
@@ -11,6 +11,7 @@ interface Props {
   children: string
   disabled?: boolean
   loading?: boolean
+  active?: boolean
   type?: ButtonProps['type']
   onClick?: ButtonProps['onClick']
   variant?: Variants['variant']
diff --git a/packages/status-react/src/system/button/styles.tsx b/packages/status-react/src/system/button/styles.tsx
index 19c82c92..65fa7401 100644
--- a/packages/status-react/src/system/button/styles.tsx
+++ b/packages/status-react/src/system/button/styles.tsx
@@ -37,6 +37,19 @@ export const Base = styled('button', {
           background: '$primary-2',
         },
       },
+      secondary: {
+        background: '$transparent',
+        color: '$primary-1',
+        '&:hover': {
+          background: '$primary-3',
+        },
+        '&[data-state="active"]': {
+          background: '$primary-2',
+          '&:hover': {
+            backgroundColor: '$primary-2', // override default hover behavior
+          },
+        },
+      },
       danger: {
         background: '$danger-3',
         color: '$danger-1',
@@ -54,8 +67,9 @@ export const Base = styled('button', {
     },
     size: {
       small: {
+        height: '38px',
         fontSize: '13px',
-        padding: '10px 12px',
+        padding: '0px 12px',
       },
     },
     loading: {
diff --git a/packages/status-react/src/system/icon-button/icon-button.tsx b/packages/status-react/src/system/icon-button/icon-button.tsx
index bb69c612..33457977 100644
--- a/packages/status-react/src/system/icon-button/icon-button.tsx
+++ b/packages/status-react/src/system/icon-button/icon-button.tsx
@@ -6,6 +6,7 @@ import { Link } from 'react-router-dom'
 import { Base } from './styles'
 
 import type { Variants } from './styles'
+import type Stitches from '@stitches/react'
 import type { Ref } from 'react'
 import type { LinkProps } from 'react-router-dom'
 
@@ -20,6 +21,7 @@ interface Props {
   color?: Variants['color']
   active?: boolean
   to?: LinkProps['to']
+  css?: Stitches.CSS
 }
 
 const IconButton = (props: Props, ref: Ref<HTMLButtonElement>) => {
@@ -32,6 +34,7 @@ const IconButton = (props: Props, ref: Ref<HTMLButtonElement>) => {
     color,
     active,
     to,
+    css,
     ...buttonProps
   } = props
 
@@ -44,6 +47,7 @@ const IconButton = (props: Props, ref: Ref<HTMLButtonElement>) => {
         intent={intent}
         color={color}
         active={active}
+        css={css}
       >
         {children}
       </Base>
@@ -60,6 +64,7 @@ const IconButton = (props: Props, ref: Ref<HTMLButtonElement>) => {
       intent={intent}
       color={color}
       active={active}
+      css={css}
     >
       <AccessibleIcon label={label}>{children}</AccessibleIcon>
     </Base>
diff --git a/packages/status-react/src/system/index.tsx b/packages/status-react/src/system/index.tsx
index 71bb3028..7c5237b4 100644
--- a/packages/status-react/src/system/index.tsx
+++ b/packages/status-react/src/system/index.tsx
@@ -1,4 +1,6 @@
+export { Activity } from './activity'
 export { Avatar } from './avatar'
+export { Badge } from './badge'
 export { Box } from './box'
 export { Button } from './button'
 export { ButtonGroup } from './button-group'
@@ -24,6 +26,8 @@ export { IconButton } from './icon-button'
 export { Image } from './image'
 export { Popover, PopoverTrigger } from './popover'
 export { Separator } from './separator'
+export { Tabs } from './tabs'
+export { Tag } from './tag'
 export { Text } from './text'
 export { TextInput } from './text-input'
 export { Tooltip } from './tooltip'
diff --git a/packages/status-react/src/system/popover/popover.tsx b/packages/status-react/src/system/popover/popover.tsx
index e6c47952..9eecc417 100644
--- a/packages/status-react/src/system/popover/popover.tsx
+++ b/packages/status-react/src/system/popover/popover.tsx
@@ -5,6 +5,7 @@ import * as Primitive from '@radix-ui/react-popover'
 import { Content } from './styles'
 
 import type { PopoverContentProps } from '@radix-ui/react-popover'
+import type Stitches from '@stitches/react'
 import type { Ref } from 'react'
 
 interface TriggerProps {
@@ -32,13 +33,14 @@ const _PopoverTrigger = forwardRef(PopoverTrigger)
 
 interface PopoverProps extends PopoverContentProps {
   children: React.ReactNode
+  css?: Stitches.CSS
 }
 
 const Popover = (props: PopoverProps) => {
-  const { children, ...contentProps } = props
+  const { children, css, ...contentProps } = props
 
   return (
-    <Content as={Primitive.Content} {...contentProps}>
+    <Content as={Primitive.Content} css={css} {...contentProps}>
       {children}
     </Content>
   )
diff --git a/packages/status-react/src/system/tabs/index.tsx b/packages/status-react/src/system/tabs/index.tsx
new file mode 100644
index 00000000..55f323c5
--- /dev/null
+++ b/packages/status-react/src/system/tabs/index.tsx
@@ -0,0 +1 @@
+export { Tabs } from './tabs'
diff --git a/packages/status-react/src/system/tabs/tabs.tsx b/packages/status-react/src/system/tabs/tabs.tsx
new file mode 100644
index 00000000..8a63b768
--- /dev/null
+++ b/packages/status-react/src/system/tabs/tabs.tsx
@@ -0,0 +1,110 @@
+import React, { useState } from 'react'
+
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+
+import { DoubleTickIcon } from '../../icons/double-tick-icon'
+import { styled } from '../../styles/config'
+import { Button } from '../button'
+import { Flex } from '../flex'
+import { IconButton } from '../icon-button'
+import { Tooltip } from '../tooltip'
+
+const TabsRoot = styled(TabsPrimitive.Root, {
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+})
+
+const TabsList = styled(TabsPrimitive.List, { display: 'flex', gap: '8px' })
+
+const TabsContent = styled(TabsPrimitive.Content, {
+  width: '100%',
+  height: '100%',
+})
+
+const ContentWrapper = styled('div', {
+  flex: 1,
+  overflowY: 'scroll',
+  overflowX: 'hidden',
+})
+
+interface Props {
+  tabs: Array<{
+    title: string
+    value: string
+    content: JSX.Element | JSX.Element[]
+  }>
+  actions: Array<{
+    icon: JSX.Element
+    label: string
+    method: (activeTab: string) => void
+  }>
+}
+
+const Tabs = (props: Props) => {
+  const [activeTab, setActiveTab] = useState('all')
+
+  const initialValue: {
+    triggers: JSX.Element[]
+    contents: JSX.Element[]
+  } = {
+    triggers: [],
+    contents: [],
+  }
+  const { triggers, contents } = props.tabs.reduce((results, currentTab) => {
+    results.triggers.push(
+      <TabsPrimitive.Trigger
+        key={currentTab.value}
+        value={currentTab.value}
+        asChild
+      >
+        <Button size="small" variant="secondary">
+          {currentTab.title}
+        </Button>
+      </TabsPrimitive.Trigger>
+    )
+    results.contents.push(
+      <TabsContent key={currentTab.value} value={currentTab.value}>
+        {currentTab.content}
+      </TabsContent>
+    )
+
+    return results
+  }, initialValue)
+
+  const actions = props.actions.map(action => {
+    return (
+      <Tooltip key={action.label} label={action.label} arrowOffset={7}>
+        <IconButton
+          label={action.label}
+          onClick={() => {
+            action.method(activeTab)
+          }}
+        >
+          <DoubleTickIcon />
+        </IconButton>
+      </Tooltip>
+    )
+  })
+
+  return (
+    <TabsRoot value={activeTab} onValueChange={setActiveTab}>
+      <Flex
+        css={{
+          height: '64px',
+          padding: '13px 16px',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        {/* todo?: if all empty, disable other tabs */}
+        {/* todo?: if active, disable hover and clicks */}
+        <TabsList>{triggers}</TabsList>
+        <div>{actions}</div>
+      </Flex>
+      <ContentWrapper>{contents}</ContentWrapper>
+    </TabsRoot>
+  )
+}
+
+export { Tabs }
diff --git a/packages/status-react/src/system/tag/index.tsx b/packages/status-react/src/system/tag/index.tsx
new file mode 100644
index 00000000..9d018728
--- /dev/null
+++ b/packages/status-react/src/system/tag/index.tsx
@@ -0,0 +1 @@
+export { Tag } from './tag'
diff --git a/packages/status-react/src/system/tag/tag.tsx b/packages/status-react/src/system/tag/tag.tsx
new file mode 100644
index 00000000..feb83a78
--- /dev/null
+++ b/packages/status-react/src/system/tag/tag.tsx
@@ -0,0 +1,128 @@
+import React from 'react'
+
+import { useNavigate } from 'react-router-dom'
+
+import { TinyChevronRightIcon } from '../../icons/tiny-chevron-right-icon'
+import { TinyCommunityIcon } from '../../icons/tiny-community-icon'
+import { TinyReplyIcon } from '../../icons/tiny-reply-icon'
+import { styled } from '../../styles/config'
+import { Avatar } from '../avatar'
+import { Text } from '../text'
+
+const Base = styled('div', {
+  padding: '0px 6px',
+  border: '1px solid rgba(0, 0, 0, 0.1)',
+  borderRadius: '11px',
+  height: '22px',
+  display: 'flex',
+  alignItems: 'center',
+  width: 'max-content',
+  color: '$gray-1',
+  gap: '6px',
+  '&:hover': {
+    cursor: 'default',
+  },
+})
+
+const Segment = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+})
+
+const PathLink = styled('a', {
+  '&:hover': {
+    textDecoration: 'underline',
+  },
+})
+
+interface CommunityProps {
+  type: 'community'
+  communityDisplayName: string
+  chatDisplayName: string
+  chatUuid: string
+  onNavigateChange: () => void
+}
+interface ReplyProps {
+  type: 'reply'
+  text: string
+}
+
+// fixme: clicking on flex gab/space between components captures and handles click events
+const Tag = (props: CommunityProps | ReplyProps) => {
+  const { type } = props
+
+  // todo?: extract together with `PathLink`
+  const navigate = useNavigate()
+
+  switch (type) {
+    case 'community':
+      return (
+        <Base>
+          <Segment
+            role="none"
+            onClick={e => {
+              e.preventDefault()
+              e.stopPropagation()
+            }}
+          >
+            <TinyCommunityIcon />
+            <Avatar
+              size={16}
+              name={props.communityDisplayName}
+              initialsLength={1}
+            />
+            <Text color="current" weight="500">
+              {props.communityDisplayName}
+            </Text>
+          </Segment>
+          <Segment
+            role="none"
+            onClick={e => {
+              e.preventDefault()
+              e.stopPropagation()
+            }}
+          >
+            <TinyChevronRightIcon />
+          </Segment>
+          <Segment>
+            <PathLink
+              onClick={e => {
+                e.preventDefault()
+                e.stopPropagation()
+                props.onNavigateChange()
+                navigate(`/${props.chatUuid}`)
+              }}
+            >
+              <Text color="current" weight="500">
+                #{props.chatDisplayName}
+              </Text>
+            </PathLink>
+          </Segment>
+        </Base>
+      )
+
+    case 'reply':
+      return (
+        <Base>
+          <Segment
+            role="none"
+            onClick={e => {
+              e.preventDefault()
+              e.stopPropagation()
+            }}
+          >
+            <TinyReplyIcon />
+            <Text color="current" weight="500">
+              {props.text}
+            </Text>
+          </Segment>
+        </Base>
+      )
+
+    default:
+      return null
+  }
+}
+
+export { Tag }
diff --git a/packages/status-react/src/system/text/text.tsx b/packages/status-react/src/system/text/text.tsx
index bd278326..3d1c0ab5 100644
--- a/packages/status-react/src/system/text/text.tsx
+++ b/packages/status-react/src/system/text/text.tsx
@@ -2,6 +2,7 @@ import { styled, theme } from '../../styles/config'
 
 import type React from 'react'
 
+// todo?: rich variant here (e.g. mentions, format, code)
 const Text = styled('div', {
   fontFamily: theme.fonts.sans,
   overflowWrap: 'break-word',
@@ -35,6 +36,9 @@ const Text = styled('div', {
       gray: {
         color: '$gray-1',
       },
+      current: {
+        color: '$current',
+      },
     },
     weight: {
       '400': {
diff --git a/packages/status-react/src/system/tooltip/styles.tsx b/packages/status-react/src/system/tooltip/styles.tsx
index d322a819..d9919f9a 100644
--- a/packages/status-react/src/system/tooltip/styles.tsx
+++ b/packages/status-react/src/system/tooltip/styles.tsx
@@ -27,7 +27,7 @@ export const Content = styled(Primitive.Content, {
   fontWeight: '$500',
   fontSize: 13,
   padding: 8,
-  lineHeight: 1,
+  lineHeight: '18px',
   backgroundColor: '$accent-1',
   color: '$accent-11',
   borderRadius: 8,
diff --git a/packages/status-react/src/system/tooltip/tooltip.tsx b/packages/status-react/src/system/tooltip/tooltip.tsx
index f1fc0614..d5563ab6 100644
--- a/packages/status-react/src/system/tooltip/tooltip.tsx
+++ b/packages/status-react/src/system/tooltip/tooltip.tsx
@@ -4,7 +4,10 @@ import * as Primitive from '@radix-ui/react-tooltip'
 
 import { Arrow, Content } from './styles'
 
-import type { TooltipContentProps } from '@radix-ui/react-tooltip'
+import type {
+  TooltipArrowProps,
+  TooltipContentProps,
+} from '@radix-ui/react-tooltip'
 import type { Ref } from 'react'
 
 interface Props {
@@ -12,6 +15,8 @@ interface Props {
   children: React.ReactElement
   side?: TooltipContentProps['side']
   sideOffset?: TooltipContentProps['sideOffset']
+  align?: TooltipContentProps['align']
+  arrowOffset?: TooltipArrowProps['offset']
 }
 
 const Tooltip = (props: Props, ref: Ref<HTMLButtonElement>) => {
@@ -20,19 +25,23 @@ const Tooltip = (props: Props, ref: Ref<HTMLButtonElement>) => {
     label,
     side = 'top',
     sideOffset = 5,
+    align = 'center',
+    arrowOffset = 0,
     ...triggerProps
   } = props
 
   return (
-    <Primitive.Root delayDuration={500}>
-      <Primitive.Trigger asChild>
-        {cloneElement(children, { ref, ...triggerProps })}
-      </Primitive.Trigger>
-      <Content side={side} sideOffset={sideOffset}>
-        {label}
-        <Arrow />
-      </Content>
-    </Primitive.Root>
+    <Primitive.Provider>
+      <Primitive.Root delayDuration={500}>
+        <Primitive.Trigger asChild>
+          {cloneElement(children, { ref, ...triggerProps })}
+        </Primitive.Trigger>
+        <Content side={side} sideOffset={sideOffset} align={align}>
+          {label}
+          <Arrow offset={arrowOffset} />
+        </Content>
+      </Primitive.Root>
+    </Primitive.Provider>
   )
 }
 
diff --git a/yarn.lock b/yarn.lock
index 3284e750..971d4795 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -750,6 +750,26 @@
     "@ethersproject/bytes" "^5.5.0"
     "@ethersproject/logger" "^5.5.0"
 
+"@floating-ui/core@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.3.tgz#d274116678ffae87f6b60e90f88cc4083eefab86"
+  integrity sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==
+
+"@floating-ui/dom@^0.5.3":
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.4.tgz#4eae73f78bcd4bd553ae2ade30e6f1f9c73fe3f1"
+  integrity sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==
+  dependencies:
+    "@floating-ui/core" "^0.7.3"
+
+"@floating-ui/react-dom@0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-0.7.2.tgz#0bf4ceccb777a140fc535c87eb5d6241c8e89864"
+  integrity sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==
+  dependencies:
+    "@floating-ui/dom" "^0.5.3"
+    use-isomorphic-layout-effect "^1.1.1"
+
 "@hcaptcha/react-hcaptcha@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@hcaptcha/react-hcaptcha/-/react-hcaptcha-1.1.0.tgz#ca770c9fc1f456e3c6b057bedf01a94693b2ec96"
@@ -1451,6 +1471,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/primitive@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
+  integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-accessible-icon@^0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-accessible-icon/-/react-accessible-icon-0.1.4.tgz#bdbf1e3226a0e9e7778b68728b175bdc532b720c"
@@ -1480,6 +1507,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "0.1.4"
 
+"@radix-ui/react-arrow@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.0.tgz#c461f4c2cab3317e3d42a1ae62910a4cbb0192a1"
+  integrity sha512-1MUuv24HCdepi41+qfv125EwMuxgQ+U+h0A9K3BjCO/J8nVRREKHHpkD9clwfnjEDk9hgGzCnff4aUKCPiRepw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.0"
+
 "@radix-ui/react-checkbox@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-0.1.5.tgz#3a6bd54ba1720c8e5c03852acf460e35dfbe9da3"
@@ -1522,6 +1557,17 @@
     "@radix-ui/react-primitive" "0.1.4"
     "@radix-ui/react-slot" "0.1.2"
 
+"@radix-ui/react-collection@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.0.tgz#0ec4c72fabd35a03b5787075ac799e3b17ca5710"
+  integrity sha512-8i1pf5dKjnq90Z8udnnXKzdCEV3/FYrfw0n/b6NvB6piXEn3fO1bOh7HBcpG8XrnIXzxlYu2oCcR38QpyLS/mg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-slot" "1.0.0"
+
 "@radix-ui/react-compose-refs@0.1.0", "@radix-ui/react-compose-refs@^0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz#cff6e780a0f73778b976acff2c2a5b6551caab95"
@@ -1529,6 +1575,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-compose-refs@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
+  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-context-menu@^0.1.6":
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-0.1.6.tgz#0c75f2faffec6c8697247a4b685a432b3c4d07f0"
@@ -1548,6 +1601,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-context@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
+  integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-dialog@0.1.7", "@radix-ui/react-dialog@^0.1.7":
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-0.1.7.tgz#285414cf66f5bbf42bc9935314e0381abe01e7d0"
@@ -1569,6 +1629,13 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "^2.4.0"
 
+"@radix-ui/react-direction@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45"
+  integrity sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-dismissable-layer@0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.5.tgz#9379032351e79028d472733a5cc8ba4a0ea43314"
@@ -1582,6 +1649,18 @@
     "@radix-ui/react-use-callback-ref" "0.1.0"
     "@radix-ui/react-use-escape-keydown" "0.1.0"
 
+"@radix-ui/react-dismissable-layer@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz#35b7826fa262fd84370faef310e627161dffa76b"
+  integrity sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-escape-keydown" "1.0.0"
+
 "@radix-ui/react-dropdown-menu@^0.1.6":
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-0.1.6.tgz#3203229788cd57e552c9f19dcc7008e2b545919c"
@@ -1621,6 +1700,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "0.1.0"
 
+"@radix-ui/react-id@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e"
+  integrity sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
 "@radix-ui/react-label@0.1.5", "@radix-ui/react-label@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-0.1.5.tgz#12cd965bfc983e0148121d4c99fb8e27a917c45c"
@@ -1692,6 +1779,22 @@
     "@radix-ui/react-use-size" "0.1.1"
     "@radix-ui/rect" "0.1.1"
 
+"@radix-ui/react-popper@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.0.0.tgz#fb4f937864bf39c48f27f55beee61fa9f2bef93c"
+  integrity sha512-k2dDd+1Wl0XWAMs9ZvAxxYsB9sOsEhrFQV4CINd7IUZf0wfdye4OHen9siwxvZImbzhgVeKTJi68OQmPRvVdMg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "0.7.2"
+    "@radix-ui/react-arrow" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+    "@radix-ui/react-use-rect" "1.0.0"
+    "@radix-ui/react-use-size" "1.0.0"
+    "@radix-ui/rect" "1.0.0"
+
 "@radix-ui/react-portal@0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-0.1.4.tgz#17bdce3d7f1a9a0b35cb5e935ab8bc562441a7d2"
@@ -1701,6 +1804,14 @@
     "@radix-ui/react-primitive" "0.1.4"
     "@radix-ui/react-use-layout-effect" "0.1.0"
 
+"@radix-ui/react-portal@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.0.tgz#7220b66743394fabb50c55cb32381395cc4a276b"
+  integrity sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.0"
+
 "@radix-ui/react-presence@0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-0.1.2.tgz#9f11cce3df73cf65bc348e8b76d891f0d54c1fe3"
@@ -1710,6 +1821,15 @@
     "@radix-ui/react-compose-refs" "0.1.0"
     "@radix-ui/react-use-layout-effect" "0.1.0"
 
+"@radix-ui/react-presence@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
+  integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
 "@radix-ui/react-primitive@0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz#6c233cf08b0cb87fecd107e9efecb3f21861edc1"
@@ -1718,6 +1838,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "0.1.2"
 
+"@radix-ui/react-primitive@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz#376cd72b0fcd5e0e04d252ed33eb1b1f025af2b0"
+  integrity sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.0"
+
 "@radix-ui/react-roving-focus@0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-0.1.5.tgz#cc48d17a36b56f253d54905b0fd60ee134cb97ee"
@@ -1733,6 +1861,22 @@
     "@radix-ui/react-use-callback-ref" "0.1.0"
     "@radix-ui/react-use-controllable-state" "0.1.0"
 
+"@radix-ui/react-roving-focus@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.0.tgz#aadeb65d5dbcdbdd037078156ae1f57c2ff754ee"
+  integrity sha512-lHvO4MhvoWpeNbiJAoyDsEtbKqP2jkkdwsMVJ3kfqbkC71J/aXE6Th6gkZA1xHEqSku+t+UgoDjvE7Z3gsBpcg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-collection" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+
 "@radix-ui/react-separator@^0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-0.1.4.tgz#383ad0f82b364d9982a978d752084af3598e4090"
@@ -1749,6 +1893,29 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "0.1.0"
 
+"@radix-ui/react-slot@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.0.tgz#7fa805b99891dea1e862d8f8fbe07f4d6d0fd698"
+  integrity sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+
+"@radix-ui/react-tabs@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.0.0.tgz#135c67f1f2bd9ada69a3f6e38dd897d459af5fe5"
+  integrity sha512-oKUwEDsySVC0uuSEH7SHCVt1+ijmiDFAI9p+fHCtuZdqrRDKIFs09zp5nrmu4ggP6xqSx9lj1VSblnDH+n3IBA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-direction" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-roving-focus" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+
 "@radix-ui/react-toggle-group@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-0.1.5.tgz#9e4d65e22c4fc0ba3a42fbc8d5496c430e5e9852"
@@ -1772,26 +1939,24 @@
     "@radix-ui/react-primitive" "0.1.4"
     "@radix-ui/react-use-controllable-state" "0.1.0"
 
-"@radix-ui/react-tooltip@^0.1.7":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz#6f8c00d6e489565d14abf209ce0fb8853c8c8ee3"
-  integrity sha512-eiBUsVOHenZ0JR16tl970bB0DafJBz6mFgSGfIGIVpflFj0LIsIDiLMsYyvYdx1KwwsIUDTEZtxcPm/sWjPzqA==
+"@radix-ui/react-tooltip@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.0.tgz#f7fcecf2bac5c31cd14666b5acd056015fc21646"
+  integrity sha512-RB06pov+O4Npy10ei1C6fsyB9QoOjz7Ubo8Sl3qdKtLgkL9iI96925DYtH0bxx6MH6YB2FuzLU6B75qn3AQQQw==
   dependencies:
     "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "0.1.0"
-    "@radix-ui/react-compose-refs" "0.1.0"
-    "@radix-ui/react-context" "0.1.1"
-    "@radix-ui/react-id" "0.1.5"
-    "@radix-ui/react-popper" "0.1.4"
-    "@radix-ui/react-portal" "0.1.4"
-    "@radix-ui/react-presence" "0.1.2"
-    "@radix-ui/react-primitive" "0.1.4"
-    "@radix-ui/react-slot" "0.1.2"
-    "@radix-ui/react-use-controllable-state" "0.1.0"
-    "@radix-ui/react-use-escape-keydown" "0.1.0"
-    "@radix-ui/react-use-previous" "0.1.1"
-    "@radix-ui/react-use-rect" "0.1.1"
-    "@radix-ui/react-visually-hidden" "0.1.4"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-dismissable-layer" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-popper" "1.0.0"
+    "@radix-ui/react-portal" "1.0.0"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.0"
+    "@radix-ui/react-slot" "1.0.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    "@radix-ui/react-visually-hidden" "1.0.0"
 
 "@radix-ui/react-use-body-pointer-events@0.1.1":
   version "0.1.1"
@@ -1808,6 +1973,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-callback-ref@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
+  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-controllable-state@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-0.1.0.tgz#4fced164acfc69a4e34fb9d193afdab973a55de1"
@@ -1816,6 +1988,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "0.1.0"
 
+"@radix-ui/react-use-controllable-state@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
+  integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
 "@radix-ui/react-use-direction@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-direction/-/react-use-direction-0.1.0.tgz#97ac1d52e497c974389e7988f809238ed72e7df7"
@@ -1831,6 +2011,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-callback-ref" "0.1.0"
 
+"@radix-ui/react-use-escape-keydown@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz#aef375db4736b9de38a5a679f6f49b45a060e5d1"
+  integrity sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
 "@radix-ui/react-use-layout-effect@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.1.0.tgz#ebf71bd6d2825de8f1fbb984abf2293823f0f223"
@@ -1838,6 +2026,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-layout-effect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
+  integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-previous@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0"
@@ -1853,6 +2048,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/rect" "0.1.1"
 
+"@radix-ui/react-use-rect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz#b040cc88a4906b78696cd3a32b075ed5b1423b3e"
+  integrity sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/rect" "1.0.0"
+
 "@radix-ui/react-use-size@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-0.1.1.tgz#f6b75272a5d41c3089ca78c8a2e48e5f204ef90f"
@@ -1860,6 +2063,14 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-size@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz#a0b455ac826749419f6354dc733e2ca465054771"
+  integrity sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
 "@radix-ui/react-visually-hidden@0.1.4", "@radix-ui/react-visually-hidden@^0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-0.1.4.tgz#6c75eae34fb5d084b503506fbfc05587ced05f03"
@@ -1868,6 +2079,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "0.1.4"
 
+"@radix-ui/react-visually-hidden@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.0.tgz#4d69d7e3b6d21ee4678ed6de5215dcd068394401"
+  integrity sha512-MwAhMdX+n6S4InwRKSnpUsp+lLkYG6izQF56ul6guSX2mBBLOMV9Frx7xJlkEe2GjKLzbNuHhaCS6e5gopmZNA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.0"
+
 "@radix-ui/rect@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.1.1.tgz#95b5ba51f469bea6b1b841e2d427e17e37d38419"
@@ -1875,6 +2094,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/rect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.0.tgz#0dc8e6a829ea2828d53cbc94b81793ba6383bf3c"
+  integrity sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@rollup/pluginutils@^4.2.1":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
@@ -2840,6 +3066,11 @@ datastore-core@^8.0.1:
     it-take "^1.0.1"
     uint8arrays "^3.0.0"
 
+date-fns@^2.29.3:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+
 debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -6832,6 +7063,11 @@ use-callback-ref@^1.2.3:
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
   integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
 
+use-isomorphic-layout-effect@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
 use-sidecar@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.5.tgz#ffff2a17c1df42e348624b699ba6e5c220527f2b"