diff --git a/packages/status-react/src/components/member-sidebar/index.tsx b/packages/status-react/src/components/member-sidebar/index.tsx
new file mode 100644
index 00000000..b287119c
--- /dev/null
+++ b/packages/status-react/src/components/member-sidebar/index.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+
+import { styled } from '~/src/styles/config'
+import { Grid } from '~/src/system'
+import { Heading } from '~/src/system/heading'
+
+import { MemberGroup } from './member-group'
+import { MemberItem } from './member-item'
+import { UserItem } from './user-item'
+
+export function MemberSidebar() {
+ return (
+
+
+ Members
+
+
+
+
+
+
+
+ pvl.eth
+
+
+ carmen
+
+
+ carmen
+
+
+
+
+ mark
+
+
+ mark
+
+
+
+
+ )
+}
+
+const Wrapper = styled('div', {
+ width: 256,
+ flexShrink: 0,
+ padding: '18px 16px',
+ display: 'none',
+ backgroundColor: '#F6F8FA',
+ overflowY: 'scroll',
+
+ '@medium': {
+ display: 'block',
+ },
+})
diff --git a/packages/status-react/src/components/member-sidebar/member-group.tsx b/packages/status-react/src/components/member-sidebar/member-group.tsx
new file mode 100644
index 00000000..451b277d
--- /dev/null
+++ b/packages/status-react/src/components/member-sidebar/member-group.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { Text } from '~/src/system'
+
+interface Props {
+ label: string
+ children: React.ReactElement[] | React.ReactElement
+}
+
+export const MemberGroup = (props: Props) => {
+ const { label, children } = props
+
+ return (
+
+
+ {label}
+
+ {children}
+
+ )
+}
diff --git a/packages/status-react/src/components/member-sidebar/member-item.tsx b/packages/status-react/src/components/member-sidebar/member-item.tsx
new file mode 100644
index 00000000..154fbf5a
--- /dev/null
+++ b/packages/status-react/src/components/member-sidebar/member-item.tsx
@@ -0,0 +1,70 @@
+import React from 'react'
+
+import { Avatar, EthAddress, Flex, Text } from '~/src/system'
+
+import type { AvatarProps } from '~/src/system/avatar'
+
+interface Props {
+ children: string
+ verified: boolean
+ untrustworthy: boolean
+ indicator?: AvatarProps['indicator']
+}
+
+export const MemberItem = (props: Props) => {
+ const { children, indicator, verified, untrustworthy } = props
+
+ return (
+
+
+
+
+
+ {children}
+
+ {verified && (
+
+ )}
+ {untrustworthy && (
+
+ )}
+
+
+ 71C7656EC7ab88b098defB751B7401B5f6d8976F
+
+
+
+
+ Pavel
+
+
+
+ 71C7656EC7ab88b098defB751B7401B5f6d8976F
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const LogoutButton = styled('button', {
+ background: 'rgba(67, 96, 223, 0.1)',
+ borderRadius: '50%',
+ height: 32,
+ width: 32,
+ display: 'inline-flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+})