diff --git a/packages/status-react/src/modules/community/CommunityChatRoom.tsx b/packages/status-react/src/modules/community/CommunityChatRoom.tsx
deleted file mode 100644
index a8d31132..00000000
--- a/packages/status-react/src/modules/community/CommunityChatRoom.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { useState } from 'react'
-
-import styled from 'styled-components'
-
-import { Channels } from '~/src/components/Channels/Channels'
-import { ChatBody } from '~/src/components/Chat/ChatBody'
-import { ChatCreation } from '~/src/components/Chat/ChatCreation'
-import { Members } from '~/src/components/Members/Members'
-import { AgreementModal } from '~/src/components/Modals/AgreementModal'
-import { CoinbaseModal } from '~/src/components/Modals/CoinbaseModal'
-import { CommunityModal } from '~/src/components/Modals/CommunityModal'
-import { EditModal } from '~/src/components/Modals/EditModal'
-import { LeavingModal } from '~/src/components/Modals/LeavingModal'
-import { LogoutModal } from '~/src/components/Modals/LogoutModal'
-import { ProfileFoundModal } from '~/src/components/Modals/ProfileFoundModal'
-import { ProfileModal } from '~/src/components/Modals/ProfileModal'
-import { StatusModal } from '~/src/components/Modals/StatusModal'
-import { UserCreationModal } from '~/src/components/Modals/UserCreationModal'
-import { UserCreationStartModal } from '~/src/components/Modals/UserCreationStartModal'
-import { WalletConnectModal } from '~/src/components/Modals/WalletConnectModal'
-import { WalletModal } from '~/src/components/Modals/WalletModal'
-import { ToastMessageList } from '~/src/components/ToastMessages/ToastMessageList'
-import { ChatState, useChatState } from '~/src/contexts/chatStateProvider'
-import { useMessengerContext } from '~/src/contexts/messengerProvider'
-import { useNarrow } from '~/src/contexts/narrowProvider'
-
-import { CommunitySidebar } from './CommunitySidebar'
-
-function Modals() {
-  return (
-    <>
-      <CommunityModal subtitle="Public Community" />
-      <UserCreationModal />
-      <EditModal />
-      <ProfileModal />
-      <StatusModal />
-      <WalletModal />
-      <WalletConnectModal />
-      <CoinbaseModal />
-      <LogoutModal />
-      <AgreementModal />
-      <ProfileFoundModal />
-      <UserCreationStartModal />
-      <LeavingModal />
-    </>
-  )
-}
-
-export function CommunityChatRoom() {
-  const [state] = useChatState()
-  const [showMembers, setShowMembers] = useState(false)
-  const [editGroup, setEditGroup] = useState(false)
-  const narrow = useNarrow()
-  const { activeChannel } = useMessengerContext()
-
-  return (
-    <ChatWrapper>
-      {!narrow && (
-        <ChannelsWrapper>
-          <StyledCommunity />
-          <Channels setEditGroup={setEditGroup} />
-        </ChannelsWrapper>
-      )}
-      {state === ChatState.ChatBody && (
-        <ChatBody
-          onClick={() => setShowMembers(!showMembers)}
-          showMembers={showMembers}
-          permission={true}
-          editGroup={editGroup}
-          setEditGroup={setEditGroup}
-        />
-      )}
-      {showMembers &&
-        !narrow &&
-        state === ChatState.ChatBody &&
-        activeChannel &&
-        activeChannel.type !== 'dm' && <Members />}
-      {state === ChatState.ChatCreation && <ChatCreation />}
-      <Modals />
-      <ToastMessageList />
-    </ChatWrapper>
-  )
-}
-
-const ChatWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: relative;
-`
-
-const ChannelsWrapper = styled.div`
-  width: 21%;
-  height: 100%;
-  min-width: 250px;
-  background-color: ${({ theme }) => theme.sectionBackgroundColor};
-  padding: 10px 16px;
-  display: flex;
-  flex-direction: column;
-`
-
-const StyledCommunity = styled(CommunitySidebar)`
-  padding: 0 0 0 8px;
-  margin: 0 0 16px;
-`
diff --git a/packages/status-react/src/modules/community/CommunitySidebar.tsx b/packages/status-react/src/modules/community/CommunitySidebar.tsx
deleted file mode 100644
index a76ced46..00000000
--- a/packages/status-react/src/modules/community/CommunitySidebar.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react'
-
-import styled from 'styled-components'
-
-import { CommunityIdentity } from '../../components/CommunityIdentity'
-import { CommunityModalName } from '../../components/Modals/CommunityModal'
-import { CommunitySkeleton } from '../../components/Skeleton/CommunitySkeleton'
-import { useMessengerContext } from '../../contexts/messengerProvider'
-import { useModal } from '../../contexts/modalProvider'
-
-interface CommunityProps {
-  className?: string
-}
-
-export function CommunitySidebar({ className }: CommunityProps) {
-  const { communityData } = useMessengerContext()
-  const { setModal } = useModal(CommunityModalName)
-
-  if (!communityData) {
-    return (
-      <SkeletonWrapper>
-        <CommunitySkeleton />
-      </SkeletonWrapper>
-    )
-  }
-
-  return (
-    <>
-      <button className={className} onClick={() => setModal(true)}>
-        <CommunityIdentity subtitle={`${communityData.members} members`} />
-      </button>
-    </>
-  )
-}
-
-const SkeletonWrapper = styled.div`
-  margin-bottom: 16px;
-`
diff --git a/packages/status-react/src/modules/community/index.tsx b/packages/status-react/src/modules/community/index.tsx
index f8dfb718..9af1c363 100644
--- a/packages/status-react/src/modules/community/index.tsx
+++ b/packages/status-react/src/modules/community/index.tsx
@@ -2,6 +2,7 @@ import React, { useRef } from 'react'
 
 import styled, { ThemeProvider } from 'styled-components'
 
+import { AppProvider } from '~/src/contexts/app-context'
 import { ChatStateProvider } from '~/src/contexts/chatStateProvider'
 import { IdentityProvider } from '~/src/contexts/identityProvider'
 import { MessengerProvider } from '~/src/contexts/messengerProvider'
@@ -11,7 +12,7 @@ import { ScrollProvider } from '~/src/contexts/scrollProvider'
 import { ToastProvider } from '~/src/contexts/toastProvider'
 import { GlobalStyle } from '~/src/styles/GlobalStyle'
 
-import { CommunityChatRoom } from './CommunityChatRoom'
+import { Messenger } from './messenger'
 
 import type { Config } from '~/src/types/config'
 
@@ -23,30 +24,32 @@ export const Community = (props: Props) => {
   const ref = useRef<HTMLHeadingElement>(null)
 
   return (
-    <ThemeProvider theme={theme}>
-      <NarrowProvider myRef={ref}>
-        <ModalProvider>
-          <ToastProvider>
-            <Wrapper ref={ref}>
-              <GlobalStyle />
-              <IdentityProvider>
-                <MessengerProvider
-                  publicKey={publicKey}
-                  environment={environment}
-                >
-                  <ChatStateProvider>
-                    <ScrollProvider>
-                      <CommunityChatRoom />
-                      <div id="modal-root" />
-                    </ScrollProvider>
-                  </ChatStateProvider>
-                </MessengerProvider>
-              </IdentityProvider>
-            </Wrapper>
-          </ToastProvider>
-        </ModalProvider>
-      </NarrowProvider>
-    </ThemeProvider>
+    <AppProvider>
+      <ThemeProvider theme={theme}>
+        <NarrowProvider myRef={ref}>
+          <ModalProvider>
+            <ToastProvider>
+              <Wrapper ref={ref}>
+                <GlobalStyle />
+                <IdentityProvider>
+                  <MessengerProvider
+                    publicKey={publicKey}
+                    environment={environment}
+                  >
+                    <ChatStateProvider>
+                      <ScrollProvider>
+                        <Messenger />
+                        <div id="modal-root" />
+                      </ScrollProvider>
+                    </ChatStateProvider>
+                  </MessengerProvider>
+                </IdentityProvider>
+              </Wrapper>
+            </ToastProvider>
+          </ModalProvider>
+        </NarrowProvider>
+      </ThemeProvider>
+    </AppProvider>
   )
 }
 
diff --git a/packages/status-react/src/modules/community/messenger.tsx b/packages/status-react/src/modules/community/messenger.tsx
new file mode 100644
index 00000000..75219010
--- /dev/null
+++ b/packages/status-react/src/modules/community/messenger.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+
+import { Chat } from '~/src/components/chat'
+import { MainSidebar } from '~/src/components/main-sidebar'
+import { NewChat } from '~/src/components/new-chat'
+import { useAppState } from '~/src/contexts/app-context'
+import { styled } from '~/src/styles/config'
+
+// import { AgreementModal } from '~/src/components/Modals/AgreementModal'
+// import { CoinbaseModal } from '~/src/components/Modals/CoinbaseModal'
+// import { CommunityModal } from '~/src/components/Modals/CommunityModal'
+// import { EditModal } from '~/src/components/Modals/EditModal'
+// import { LeavingModal } from '~/src/components/Modals/LeavingModal'
+// import { LogoutModal } from '~/src/components/Modals/LogoutModal'
+// import { ProfileFoundModal } from '~/src/components/Modals/ProfileFoundModal'
+// import { ProfileModal } from '~/src/components/Modals/ProfileModal'
+// import { StatusModal } from '~/src/components/Modals/StatusModal'
+// import { UserCreationModal } from '~/src/components/Modals/UserCreationModal'
+// import { UserCreationStartModal } from '~/src/components/Modals/UserCreationStartModal'
+// import { WalletConnectModal } from '~/src/components/Modals/WalletConnectModal'
+// import { WalletModal } from '~/src/components/Modals/WalletModal'
+
+// function Modals() {
+//   return (
+//     <>
+//       <CommunityModal subtitle="Public Community" />
+//       <UserCreationModal />
+//       <EditModal />
+//       <ProfileModal />
+//       <StatusModal />
+//       <WalletModal />
+//       <WalletConnectModal />
+//       <CoinbaseModal />
+//       <LogoutModal />
+//       <AgreementModal />
+//       <ProfileFoundModal />
+//       <UserCreationStartModal />
+//       <LeavingModal />
+//     </>
+//   )
+// }
+
+export function Messenger() {
+  const { state } = useAppState()
+
+  return (
+    <Wrapper>
+      <MainSidebar />
+      {state.view === 'new-chat' && <NewChat />}
+      {(state.view === 'channel' || state.view === 'chat') && <Chat />}
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled('div', {
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'stretch',
+})