diff --git a/package.json b/package.json
index dcdf88ef81d..fa2dba1d772 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
+    "@ecency/ns-query": "^1.0.0",
     "@ecency/render-helper": "^2.2.29",
     "@ecency/render-helper-amp": "^1.1.0",
     "@emoji-mart/data": "^1.1.2",
@@ -24,6 +25,7 @@
     "@hiveio/hivescript": "^1.2.7",
     "@loadable/component": "^5.15.2",
     "@loadable/server": "^5.15.2",
+    "@noble/secp256k1": "^1.7.1",
     "@popperjs/core": "^2.11.8",
     "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-query-devtools": "^4.29.7",
@@ -35,6 +37,7 @@
     "connected-react-router": "^6.8.0",
     "cookie-parser": "^1.4.5",
     "currency-symbol-map": "^4.0.4",
+    "date-fns": "^2.30.0",
     "debounce": "^1.2.1",
     "diff-match-patch": "^1.0.5",
     "emoji-mart": "^5.5.2",
@@ -55,6 +58,7 @@
     "moment": "^2.29.4",
     "node-cache": "^5.1.0",
     "node-html-parser": "^5.3.3",
+    "nostr-relaypool": "^0.6.28",
     "numeral": "^2.0.6",
     "path-to-regexp": "^6.1.0",
     "qrcode": "^1.5.1",
@@ -135,7 +139,7 @@
     "@types/webpack-env": "^1.14.0",
     "@types/webscopeio__react-textarea-autocomplete": "^4.7.2",
     "autoprefixer": "^10.4.14",
-    "babel-preset-razzle": "^4.0.5",
+    "babel-preset-razzle": "^4.2.18",
     "html-webpack-plugin": "4.5.2",
     "husky": "^8.0.1",
     "jest": "^26.0.0",
@@ -145,9 +149,9 @@
     "postcss": "8.4.31",
     "postcss-cli": "^10.1.0",
     "prettier": "^2.7.1",
-    "razzle": "^4.0.5",
-    "razzle-dev-utils": "^4.0.5",
-    "razzle-plugin-scss": "^4.0.5",
+    "razzle": "^4.2.18",
+    "razzle-dev-utils": "^4.2.18",
+    "razzle-plugin-scss": "^4.2.18",
     "razzle-plugin-typescript": "^3.0.0",
     "react-test-renderer": "^16.13.1",
     "tailwindcss": "^3.3.2",
diff --git a/src/common/api/queries.ts b/src/common/api/queries.ts
index 0e87bd38c74..a3062356030 100644
--- a/src/common/api/queries.ts
+++ b/src/common/api/queries.ts
@@ -1,10 +1,11 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQueries, useQuery } from "@tanstack/react-query";
 import { QueryIdentifiers } from "../core";
 import { getPoints, getPointTransactions } from "./private-api";
 import { useMappedStore } from "../store/use-mapped-store";
 import axios from "axios";
 import { catchPostImage } from "@ecency/render-helper";
 import { Entry } from "../store/entries/types";
+import { getAccountFull } from "./hive";
 
 const DEFAULT = {
   points: "0.000",
@@ -88,3 +89,19 @@ export function useImageDownloader(
     }
   );
 }
+
+export function useGetAccountFullQuery(username?: string) {
+  return useQuery([QueryIdentifiers.GET_ACCOUNT_FULL, username], () => getAccountFull(username!), {
+    enabled: !!username
+  });
+}
+
+export function useGetAccountsFullQuery(usernames: string[]) {
+  return useQueries({
+    queries: usernames.map((username) => ({
+      queryKey: [QueryIdentifiers.GET_ACCOUNT_FULL, username],
+      queryFn: () => getAccountFull(username!),
+      enabled: !!username
+    }))
+  });
+}
diff --git a/src/common/app.tsx b/src/common/app.tsx
index a753e149200..627e7af6fe5 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -26,10 +26,13 @@ import Announcement from "./components/announcement";
 import FloatingFAQ from "./components/floating-faq";
 import { useMappedStore } from "./store/use-mapped-store";
 import { EntriesCacheManager } from "./core";
-
 import { UserActivityRecorder } from "./components/user-activity-recorder";
 import { useGlobalLoader } from "./util/use-global-loader";
 import useMount from "react-use/lib/useMount";
+import { ChatPopUp } from "./features/chats/components/chat-popup";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { ChatContextProvider } from "@ecency/ns-query";
+import { useGetAccountFullQuery } from "./api/queries";
 
 // Define lazy pages
 const ProfileContainer = loadable(() => import("./pages/profile-functional"));
@@ -50,6 +53,9 @@ const AuthPage = (props: any) => <AuthContainer {...props} />;
 const SubmitContainer = loadable(() => import("./pages/submit"));
 const SubmitPage = (props: any) => <SubmitContainer {...props} />;
 
+const ChatsContainer = loadable(() => import("./features/chats/screens/chats"));
+const ChatsPage = (props: any) => <ChatsContainer {...props} />;
+
 const OnboardContainer = loadable(() => import("./pages/onboard"));
 const OnboardPage = (props: any) => <OnboardContainer {...props} />;
 
@@ -80,9 +86,11 @@ const PurchasePage = (props: any) => <PurchaseContainer {...props} />;
 const DecksPage = loadable(() => import("./pages/decks"));
 
 const App = (props: any) => {
-  const { global } = useMappedStore();
+  const { global, activeUser } = useMappedStore();
   const { hide } = useGlobalLoader();
 
+  const { data: activeUserAccount } = useGetAccountFullQuery(activeUser?.username);
+
   useMount(() => {
     // Drop hiding from main queue to give React time to render
     setTimeout(() => hide(), 1);
@@ -100,88 +108,108 @@ const App = (props: any) => {
   return (
     <EntriesCacheManager>
       {/*Excluded from production*/}
-      {/*<ReactQueryDevtools initialIsOpen={false} />*/}
+      <ReactQueryDevtools initialIsOpen={false} />
       <Tracker />
       <UserActivityRecorder />
-      <Switch>
-        <Route exact={true} path={routes.HOME} component={EntryIndexContainer} />
-        <Route exact={true} strict={true} path={routes.FILTER} component={EntryIndexContainer} />
-        <Route exact={true} strict={true} path={routes.USER_FEED} component={EntryIndexContainer} />
-        <Route exact={true} strict={true} path={routes.PURCHASE} component={PurchasePage} />
-        <Route exact={true} strict={true} path={routes.USER} component={ProfilePage} />
-        <Route exact={true} strict={true} path={routes.USER_SECTION} component={ProfilePage} />
-        <Route exact={true} strict={true} path={routes.ENTRY} component={EntryPage} />
-        <Route exact={true} strict={true} path={routes.COMMUNITIES} component={CommunitiesPage} />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.COMMUNITIES_CREATE}
-          component={CommunityCreatePage}
-        />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.COMMUNITIES_CREATE_HS}
-          component={CommunityCreateHSPage}
-        />
-        <Route exact={true} strict={true} path={routes.COMMUNITY} component={CommunityPage} />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.FILTER_TAG}
-          component={EntryIndexContainer}
-        />
-        <Route exact={true} strict={true} path={routes.DISCOVER} component={DiscoverPage} />
-        <Route exact={true} path={routes.SEARCH} component={SearchPageContainer} />
-        <Route exact={true} path={routes.SEARCH_MORE} component={SearchMorePageContainer} />
-        <Route exact={true} strict={true} path={routes.AUTH} component={AuthPage} />
-        <Route exact={true} strict={true} path={routes.SUBMIT} component={SubmitPage} />
-        <Route exact={true} strict={true} path={routes.MARKET} component={MarketPage} />
-        <Route exact={true} strict={true} path={routes.EDIT} component={SubmitPage} />
-        <Route exact={true} strict={true} path={routes.SIGN_UP} component={SignUpPage} />
-        <Route exact={true} strict={true} path={routes.ONBOARD} component={OnboardPage} />
-        <Route exact={true} strict={true} path={routes.EDIT_DRAFT} component={SubmitPage} />
-        <Route exact={true} strict={true} path={routes.WITNESSES} component={WitnessesPage} />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.PROPOSALS}
-          component={ProposalsIndexContainer}
-        />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.PROPOSAL_DETAIL}
-          component={ProposalDetailContainer}
-        />
-        <Route
-          exact={true}
-          strict={true}
-          path={`/me${routes.PROPOSAL_DETAIL}`}
-          component={ProposalDetailContainer}
-        />
-        <Route exact={true} strict={true} path={routes.ABOUT} component={AboutPage} />
-        <Route exact={true} strict={true} path={routes.GUESTS} component={GuestPostPage} />
-        <Route exact={true} strict={true} path={routes.CONTRIBUTE} component={ContributePage} />
-        <Route exact={true} strict={true} path={routes.PRIVACY} component={PrivacyPage} />
-        <Route exact={true} strict={true} path={routes.WHITE_PAPER} component={WhitePaperPage} />
-        <Route exact={true} strict={true} path={routes.TOS} component={TosPage} />
-        <Route exact={true} strict={true} path={routes.FAQ} component={FaqPage} />
-        <Route exact={true} strict={true} path={routes.CONTRIBUTORS} component={ContributorsPage} />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.DECKS}
-          component={global.usePrivate ? DecksPage : NotFound}
-        />
-        <Route component={NotFound} />
-      </Switch>
-
-      <Announcement activeUser={props.activeUser} />
-      <FloatingFAQ />
-      <div id="popper-container" />
+      <ChatContextProvider activeUsername={activeUser?.username} activeUserData={activeUserAccount}>
+        <Switch>
+          <Route exact={true} path={routes.HOME} component={EntryIndexContainer} />
+          <Route exact={true} strict={true} path={routes.FILTER} component={EntryIndexContainer} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.USER_FEED}
+            component={EntryIndexContainer}
+          />
+          <Route exact={true} strict={true} path={routes.PURCHASE} component={PurchasePage} />
+          <Route exact={true} strict={true} path={routes.USER} component={ProfilePage} />
+          <Route exact={true} strict={true} path={routes.USER_SECTION} component={ProfilePage} />
+          <Route exact={true} strict={true} path={routes.ENTRY} component={EntryPage} />
+          <Route exact={true} strict={true} path={routes.COMMUNITIES} component={CommunitiesPage} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.COMMUNITIES_CREATE}
+            component={CommunityCreatePage}
+          />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.COMMUNITIES_CREATE_HS}
+            component={CommunityCreateHSPage}
+          />
+          <Route exact={true} strict={true} path={routes.COMMUNITY} component={CommunityPage} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.FILTER_TAG}
+            component={EntryIndexContainer}
+          />
+          <Route exact={true} strict={true} path={routes.DISCOVER} component={DiscoverPage} />
+          <Route exact={true} path={routes.SEARCH} component={SearchPageContainer} />
+          <Route exact={true} path={routes.SEARCH_MORE} component={SearchMorePageContainer} />
+          <Route exact={true} strict={true} path={routes.AUTH} component={AuthPage} />
+          <Route exact={true} strict={true} path={routes.SUBMIT} component={SubmitPage} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.CHATS}
+            component={global.usePrivate ? ChatsPage : NotFound}
+          />
+          <Route exact={true} strict={true} path={routes.MARKET} component={MarketPage} />
+          <Route exact={true} strict={true} path={routes.EDIT} component={SubmitPage} />
+          <Route exact={true} strict={true} path={routes.SIGN_UP} component={SignUpPage} />
+          <Route exact={true} strict={true} path={routes.ONBOARD} component={OnboardPage} />
+          <Route exact={true} strict={true} path={routes.EDIT_DRAFT} component={SubmitPage} />
+          <Route exact={true} strict={true} path={routes.WITNESSES} component={WitnessesPage} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.PROPOSALS}
+            component={ProposalsIndexContainer}
+          />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.PROPOSAL_DETAIL}
+            component={ProposalDetailContainer}
+          />
+          <Route
+            exact={true}
+            strict={true}
+            path={`/me${routes.PROPOSAL_DETAIL}`}
+            component={ProposalDetailContainer}
+          />
+          <Route exact={true} strict={true} path={routes.ABOUT} component={AboutPage} />
+          <Route exact={true} strict={true} path={routes.GUESTS} component={GuestPostPage} />
+          <Route exact={true} strict={true} path={routes.CONTRIBUTE} component={ContributePage} />
+          <Route exact={true} strict={true} path={routes.PRIVACY} component={PrivacyPage} />
+          <Route exact={true} strict={true} path={routes.WHITE_PAPER} component={WhitePaperPage} />
+          <Route exact={true} strict={true} path={routes.TOS} component={TosPage} />
+          <Route exact={true} strict={true} path={routes.FAQ} component={FaqPage} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.CONTRIBUTORS}
+            component={ContributorsPage}
+          />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.DECKS}
+            component={global.usePrivate ? DecksPage : NotFound}
+          />
+          <Route component={NotFound} />
+        </Switch>
+
+        <Announcement activeUser={props.activeUser} />
+        <FloatingFAQ />
+
+        <ChatPopUp {...props} />
+      </ChatContextProvider>
       <div id="modal-overlay-container" />
       <div id="modal-dialog-container" />
+      <div id="popper-container" />
     </EntriesCacheManager>
   );
 };
diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
index 6bbb7a34a7b..2ae8e7ecea3 100644
--- a/src/common/components/comment/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
@@ -208,11 +208,11 @@ exports[`(1) Default render 1`] = `
       title="Emoji"
     >
       <svg
+        fill="currentColor"
         viewBox="0 0 24 24"
       >
         <path
           d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
-          fill="currentColor"
         />
       </svg>
     </div>
@@ -227,9 +227,10 @@ exports[`(1) Default render 1`] = `
       >
         <svg
           fill="currentColor"
-          height="16"
+          height="18"
+          strokeWidth="2"
           viewBox="0 0 16 16"
-          width="16"
+          width="18"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -556,11 +557,11 @@ exports[`(2) Cancellable, in progress 1`] = `
       title="Emoji"
     >
       <svg
+        fill="currentColor"
         viewBox="0 0 24 24"
       >
         <path
           d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
-          fill="currentColor"
         />
       </svg>
     </div>
@@ -575,9 +576,10 @@ exports[`(2) Cancellable, in progress 1`] = `
       >
         <svg
           fill="currentColor"
-          height="16"
+          height="18"
+          strokeWidth="2"
           viewBox="0 0 16 16"
-          width="16"
+          width="18"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
diff --git a/src/common/components/community-card/_index.scss b/src/common/components/community-card/_index.scss
index 72d538a7b77..46d0a0c5c8e 100644
--- a/src/common/components/community-card/_index.scss
+++ b/src/common/components/community-card/_index.scss
@@ -147,6 +147,7 @@
         font-size: 90%;
         @apply text-gray-steel;
         max-width: 95%;
+
         p {
           word-break: break-all;
         }
@@ -156,7 +157,10 @@
 
   .community-controls {
     display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
     justify-content: center;
+    padding-bottom: 1rem;
 
     @media (min-width: $md-break) {
       justify-content: flex-start;
@@ -182,6 +186,7 @@
   .community-rewards {
     display: flex;
     justify-content: center;
+    padding-bottom: 1rem;
 
     @media (min-width: $md-break) {
       justify-content: flex-start;
@@ -199,6 +204,7 @@
     display: flex;
     flex-wrap: wrap;
     max-width: 95%;
+
     .username {
       margin-right: 6px;
     }
@@ -216,11 +222,12 @@
       word-break: break-all;
     }
   }
+
   .description-wrapper {
     height: auto;
     max-height: 350px;
     overflow-y: auto;
     border-radius: 10px;
-    padding: 0.5rem ;
+    padding: 0.5rem;
   }
 }
diff --git a/src/common/components/community-card/index.tsx b/src/common/components/community-card/index.tsx
index f8fd9ecb08a..abb02bc3ea7 100644
--- a/src/common/components/community-card/index.tsx
+++ b/src/common/components/community-card/index.tsx
@@ -29,6 +29,7 @@ import { renderPostBody } from "@ecency/render-helper";
 import "./_index.scss";
 import { Modal, ModalBody, ModalHeader, ModalTitle } from "@ui/modal";
 import { Button } from "@ui/button";
+import JoinCommunityChatBtn from "../../features/chats/components/join-community-chat-btn";
 
 interface EditPicProps {
   activeUser: ActiveUser;
@@ -317,17 +318,20 @@ export class CommunityCard extends Component<Props, State> {
         )}
         {global.usePrivate && roleInTeam === ROLES.OWNER.toString() && (
           <p className="community-rewards">
-            <a
-              href="#"
-              onClick={(e) => {
+            <Button
+              size="sm"
+              outline={true}
+              type="button"
+              onClick={(e: { preventDefault: () => void }) => {
                 e.preventDefault();
                 this.toggleRewards();
               }}
             >
               {_t("community-card.community-rewards")}
-            </a>
+            </Button>
           </p>
         )}
+        <JoinCommunityChatBtn community={this.props.community} history={this.props.history} />
         {info && (
           <Modal
             show={true}
diff --git a/src/common/components/community-cover/index.spec.tsx b/src/common/components/community-cover/index.spec.tsx
index ede94ab5f2c..d81d84fa613 100644
--- a/src/common/components/community-cover/index.spec.tsx
+++ b/src/common/components/community-cover/index.spec.tsx
@@ -38,7 +38,8 @@ const defProps = {
   deleteUser: () => {},
   toggleUIProp: () => {},
   updateSubscriptions: () => {},
-  addAccount: () => {}
+  addAccount: () => {},
+  resetChat: () => {}
 };
 
 it("(1) Render with loaded account object", () => {
diff --git a/src/common/components/community-cover/index.tsx b/src/common/components/community-cover/index.tsx
index b52e41dbee0..7c82d857a88 100644
--- a/src/common/components/community-cover/index.tsx
+++ b/src/common/components/community-cover/index.tsx
@@ -194,7 +194,7 @@ export class CommunityCover extends Component<Props> {
           )}
         </div>
 
-        <div className="controls-holder">
+        <div className="controls-holder flex gap-3 px-3">
           <SubscriptionBtn {...this.props} />
           {CommunityPostBtn({ ...this.props })}
         </div>
diff --git a/src/common/components/community-menu/__snapshots__/index.spec.tsx.snap b/src/common/components/community-menu/__snapshots__/index.spec.tsx.snap
index c3e9099cd5f..7b6cd9ed7be 100644
--- a/src/common/components/community-menu/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/community-menu/__snapshots__/index.spec.tsx.snap
@@ -100,6 +100,7 @@ exports[`(2) Hot filter 1`] = `
           </div>
           <div
             className="menu-down"
+            style={Object {}}
           >
             <svg
               viewBox="0 0 24 24"
diff --git a/src/common/components/community-settings/__snapshots__/index.spec.tsx.snap b/src/common/components/community-settings/__snapshots__/index.spec.tsx.snap
index 9cdc67ec535..0a6d4d2f0b0 100644
--- a/src/common/components/community-settings/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/community-settings/__snapshots__/index.spec.tsx.snap
@@ -666,7 +666,7 @@ Hate Speech is not allowed"
       </div>
     </div>
     <div
-      className="flex justify-content-end"
+      className="flex justify-end"
     >
       <button
         className="cursor-pointer rounded-full duration-300 no-wrap bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky h-[2.125rem] px-3 "
diff --git a/src/common/components/community-settings/index.tsx b/src/common/components/community-settings/index.tsx
index 1374417b57a..d19aa412e23 100644
--- a/src/common/components/community-settings/index.tsx
+++ b/src/common/components/community-settings/index.tsx
@@ -307,7 +307,7 @@ export class CommunitySettings extends BaseComponent<Props, State> {
               />
             </div>
           </div>
-          <div className="flex justify-content-end">
+          <div className="flex justify-end">
             <Button type="submit" disabled={inProgress}>
               {_t("g.save")}
             </Button>
diff --git a/src/common/components/dropdown/_index.scss b/src/common/components/dropdown/_index.scss
index 1008d031105..0fd1f2f866c 100644
--- a/src/common/components/dropdown/_index.scss
+++ b/src/common/components/dropdown/_index.scss
@@ -23,6 +23,7 @@
       border-radius: 50%;
       display: flex;
       height: 28px;
+      height: 28px;
       justify-content: center;
       width: 28px;
       user-select: none;
diff --git a/src/common/components/dropdown/index.tsx b/src/common/components/dropdown/index.tsx
index fd2cdcae1c2..7714cc4fe9e 100644
--- a/src/common/components/dropdown/index.tsx
+++ b/src/common/components/dropdown/index.tsx
@@ -34,6 +34,10 @@ interface Props {
   withPadding?: boolean;
   menuHide?: boolean;
   noMarginTop?: boolean;
+  style?: {
+    width: string;
+    height: string;
+  };
 }
 
 const MyDropDown = (props: Props) => {
@@ -112,11 +116,17 @@ const MyDropDown = (props: Props) => {
 
   const { label, float, items } = props;
 
+  const menuDownStyle = {
+    ...(props.style && props.style) // Merge the passed style props if available
+  };
+
   const child: JSX.Element =
     typeof label === "string" ? (
       <div className={_c(`dropdown-btn ${menu ? "hover" : ""}`)}>
         {label && <div className="label">{label}</div>}
-        <div className="menu-down">{props?.icon || menuDownSvg}</div>
+        <div style={menuDownStyle} className="menu-down">
+          {props?.icon || menuDownSvg}
+        </div>
       </div>
     ) : (
       label
@@ -203,7 +213,8 @@ export default (p: Props) => {
     className: p?.className,
     withPadding: p?.withPadding,
     menuHide: p?.menuHide,
-    noMarginTop: p?.noMarginTop
+    noMarginTop: p?.noMarginTop,
+    style: p?.style
   };
 
   return <MyDropDown {...props} />;
diff --git a/src/common/components/emoji-picker/__snapshots__/index.spec.tsx.snap b/src/common/components/emoji-picker/__snapshots__/index.spec.tsx.snap
index adf68b2a960..ae50384afb1 100644
--- a/src/common/components/emoji-picker/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/emoji-picker/__snapshots__/index.spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`(1) Default full render 1`] = `
 <div
   className="emoji-picker"
+  style={Object {}}
 >
   <div
     className="search-box"
@@ -11140,6 +11141,7 @@ exports[`(1) Default full render 1`] = `
 exports[`(2) Filter 1`] = `
 <div
   className="emoji-picker"
+  style={Object {}}
 >
   <div
     className="search-box"
@@ -11248,6 +11250,7 @@ exports[`(2) Filter 1`] = `
 exports[`(3) Filter - No result 1`] = `
 <div
   className="emoji-picker"
+  style={Object {}}
 >
   <div
     className="search-box"
diff --git a/src/common/components/emoji-picker/_index-old.scss b/src/common/components/emoji-picker/_index-old.scss
index 59c13f05131..43bfa7f4371 100644
--- a/src/common/components/emoji-picker/_index-old.scss
+++ b/src/common/components/emoji-picker/_index-old.scss
@@ -10,7 +10,7 @@
   padding: 14px 6px;
 
   @media (max-width: $sm-break) {
-    width: 160px !important;
+    width: 160px;
   }
 
   @include themify(day) {
diff --git a/src/common/components/emoji-picker/_index.scss b/src/common/components/emoji-picker/_index.scss
index fddfd5d5a44..9978e348bdd 100644
--- a/src/common/components/emoji-picker/_index.scss
+++ b/src/common/components/emoji-picker/_index.scss
@@ -3,7 +3,6 @@
 .emoji-picker-dialog {
   position: absolute;
   z-index: 201;
-  top: 100%;
 
   em-emoji-picker {
     width: 300px;
diff --git a/src/common/components/emoji-picker/index-old.tsx b/src/common/components/emoji-picker/index-old.tsx
index 9f2f3af6842..e25ecac145f 100644
--- a/src/common/components/emoji-picker/index-old.tsx
+++ b/src/common/components/emoji-picker/index-old.tsx
@@ -6,6 +6,7 @@ import { getEmojiData } from "../../api/misc";
 import * as ls from "../../util/local-storage";
 import { insertOrReplace } from "../../util/input-util";
 import "./_index-old.scss";
+import { EmojiPickerStyleProps } from "@ecency/ns-query";
 
 interface Emoji {
   a: string;
@@ -32,6 +33,7 @@ interface EmojiCacheItem {
 
 interface Props {
   fallback?: (e: string) => void;
+  style?: EmojiPickerStyleProps;
 }
 
 interface State {
@@ -137,8 +139,12 @@ export default class EmojiPicker extends BaseComponent<Props> {
 
     const recent: string[] = ls.get("recent-emoji", []);
 
+    const emojiPickerStyle = {
+      ...(this.props.style && this.props.style)
+    };
+
     return (
-      <div className="emoji-picker">
+      <div className="emoji-picker" style={emojiPickerStyle}>
         <SearchBox
           autoComplete="off"
           autoCorrect="off"
diff --git a/src/common/components/emoji-picker/index.tsx b/src/common/components/emoji-picker/index.tsx
index ae2895eaa87..29891566783 100644
--- a/src/common/components/emoji-picker/index.tsx
+++ b/src/common/components/emoji-picker/index.tsx
@@ -5,10 +5,13 @@ import { v4 } from "uuid";
 import Picker from "@emoji-mart/react";
 import { useMappedStore } from "../../store/use-mapped-store";
 import useClickAway from "react-use/lib/useClickAway";
+import { classNameObject } from "../../helper/class-name-object";
 
 interface Props {
-  anchor: HTMLElement | null;
+  anchor: Element | null;
   onSelect: (e: string) => void;
+  position?: "top" | "bottom";
+  isDisabled?: boolean;
 }
 
 /**
@@ -16,15 +19,16 @@ interface Props {
  *
  * @param {Props} anchor - The anchor element to position the picker relative to.
  * @param {function} onSelect - The callback function to be called when an emoji is selected.
+ * @param position
  * @return The rendered emoji picker dialog.
  */
-export function EmojiPicker({ anchor, onSelect }: Props) {
+export function EmojiPicker({ anchor, onSelect, position, isDisabled }: Props) {
   const ref = useRef<HTMLDivElement | null>(null);
 
   const { global } = useMappedStore();
 
   const [show, setShow] = useState(false);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
+
   // Due to ability to hold multiple dialogs we have to identify them
   const dialogId = useMemo(() => v4(), []);
 
@@ -37,7 +41,7 @@ export function EmojiPicker({ anchor, onSelect }: Props) {
   useEffect(() => {
     if (anchor) {
       anchor.addEventListener("click", () => {
-        anchor.style.position = "relative !important";
+        (anchor as HTMLElement).style.position = "relative !important";
         setShow(true);
       });
     }
@@ -48,14 +52,23 @@ export function EmojiPicker({ anchor, onSelect }: Props) {
       ref={ref}
       id={dialogId}
       key={dialogId}
-      className="emoji-picker-dialog"
+      className={classNameObject({
+        "emoji-picker-dialog": true,
+        "top-[100%]": (position ?? "bottom") === "bottom",
+        "bottom-[100%] right-0": position === "top"
+      })}
       style={{
         display: show ? "block" : "none"
       }}
     >
       <Picker
         dynamicWidth={true}
-        onEmojiSelect={(e: { native: string }) => onSelect(e.native)}
+        onEmojiSelect={(e: { native: string }) => {
+          if (isDisabled) {
+            return;
+          }
+          onSelect(e.native);
+        }}
         previewPosition="none"
         set="apple"
         theme={global.theme === "day" ? "light" : "dark"}
diff --git a/src/common/components/entry-list-item/index.tsx b/src/common/components/entry-list-item/index.tsx
index 5907f9300d7..92e5862a331 100644
--- a/src/common/components/entry-list-item/index.tsx
+++ b/src/common/components/entry-list-item/index.tsx
@@ -280,7 +280,7 @@ export function EntryListItem({
             </div>
             <div className="item-summary">
               <div className="item-nsfw">
-                <span className="nsfw-badge text-capitalize d-inline-flex align-items-center">
+                <span className="nsfw-badge text-capitalize d-inline-flex items-center">
                   <div className="mute-icon">{volumeOffSvg}</div> <div>{_t("g.muted")}</div>
                 </span>
               </div>
diff --git a/src/common/components/entry-menu/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-menu/__snapshots__/index.spec.tsx.snap
index bf56f3b52ee..27c3ba578a8 100644
--- a/src/common/components/entry-menu/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/entry-menu/__snapshots__/index.spec.tsx.snap
@@ -84,6 +84,7 @@ exports[`(2) Separated sharing buttons 1`] = `
       
       <div
         className="menu-down"
+        style={Object {}}
       >
         <svg
           viewBox="0 0 24 24"
diff --git a/src/common/components/floating-faq/index.scss b/src/common/components/floating-faq/index.scss
index a8e8bd42b24..47881b41c2b 100644
--- a/src/common/components/floating-faq/index.scss
+++ b/src/common/components/floating-faq/index.scss
@@ -15,6 +15,10 @@
   border-radius: 18px;
   overflow: hidden;
 
+  &.small-screen {
+    bottom: 7rem;
+  }
+
   &.submit {
     position: fixed;
     right: 23.7rem !important;
diff --git a/src/common/components/follow-controls/index.tsx b/src/common/components/follow-controls/index.tsx
index 9275857a013..c1e72f6f2d4 100644
--- a/src/common/components/follow-controls/index.tsx
+++ b/src/common/components/follow-controls/index.tsx
@@ -176,6 +176,14 @@ export default class FollowControls extends BaseComponent<Props, State> {
       )
     });
 
+    if (where && where === "chat-box" && following) {
+      return <>{btnUnfollow}</>;
+    }
+
+    if (where && where === "chat-box" && !following) {
+      return <>{btnFollow}</>;
+    }
+
     if (fetching) {
       return (
         <>
diff --git a/src/common/components/friends/__snapshots__/index.spec.tsx.snap b/src/common/components/friends/__snapshots__/index.spec.tsx.snap
index 55081780d66..1a722434e18 100644
--- a/src/common/components/friends/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/friends/__snapshots__/index.spec.tsx.snap
@@ -31,6 +31,7 @@ exports[`(1) Render list 1`] = `
                 </div>
                 <div
                   className="menu-down"
+                  style={Object {}}
                 >
                   <svg
                     viewBox="0 0 24 24"
diff --git a/src/common/components/gif-picker/_index.scss b/src/common/components/gif-picker/_index.scss
index 17605dcffa4..c9c4fad4eb7 100644
--- a/src/common/components/gif-picker/_index.scss
+++ b/src/common/components/gif-picker/_index.scss
@@ -2,7 +2,7 @@
 
 .emoji-picker.gif {
   // width: 280px;
-  width: 430px !important;
+  width: 430px;
   position: absolute;
   right: 0;
   z-index: 12;
@@ -11,7 +11,7 @@
   padding: 14px 6px;
 
   @media (max-width: $sm-break) {
-    width: 160px !important;
+    width: 160px;
   }
 
   @include themify(day) {
diff --git a/src/common/components/gif-picker/index.tsx b/src/common/components/gif-picker/index.tsx
index facac2b3e04..e0c3510f059 100644
--- a/src/common/components/gif-picker/index.tsx
+++ b/src/common/components/gif-picker/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MutableRefObject } from "react";
 import BaseComponent from "../base";
 import SearchBox from "../search-box";
 import { _t } from "../../i18n";
@@ -6,10 +6,26 @@ import { insertOrReplace } from "../../util/input-util";
 import _ from "lodash";
 import { fetchGif } from "../../api/misc";
 import "./_index.scss";
+import { classNameObject } from "../../helper/class-name-object";
+
 interface Props {
   fallback?: (e: string) => void;
   shGif: boolean;
   changeState: (gifState?: boolean) => void;
+  pureStyle?: boolean;
+  style?: {
+    width: string;
+    bottom: string;
+    left: string | number;
+    marginLeft: string;
+    borderTopLeftRadius: string;
+    borderTopRightRadius: string;
+    borderBottomLeftRadius: string;
+  };
+  gifImagesStyle?: {
+    width: string;
+  };
+  rootRef?: MutableRefObject<HTMLDivElement | null>;
 }
 
 interface State {
@@ -21,6 +37,10 @@ interface State {
   total_count: number;
 }
 
+interface GifImageStyle {
+  width: string;
+}
+
 export default class GifPicker extends BaseComponent<Props> {
   state: State = {
     data: [],
@@ -44,6 +64,7 @@ export default class GifPicker extends BaseComponent<Props> {
       this.delayedSearchOnScroll(filter, limit, offset + 50);
     }
   };
+
   componentDidMount() {
     const gifWrapper = document.querySelector(".emoji-picker");
     gifWrapper?.addEventListener("scroll", this.handleScroll);
@@ -95,6 +116,9 @@ export default class GifPicker extends BaseComponent<Props> {
     };
     this.stateSet(_data);
   };
+
+  delayedSearch = _.debounce(this.getSearchedData, 2000);
+
   getSearchedDataOnScroll = async (_filter: string | null, limit: string, offset: string) => {
     const { data } = await fetchGif(_filter, limit, offset);
     if (_filter?.length) {
@@ -110,6 +134,8 @@ export default class GifPicker extends BaseComponent<Props> {
     }
   };
 
+  delayedSearchOnScroll = _.debounce(this.getSearchedDataOnScroll, 2000);
+
   getGifsData = async (_filter: string | null, limit: string, offset: string) => {
     const { data } = await fetchGif(_filter, limit, offset);
     let _data: State = {
@@ -122,6 +148,7 @@ export default class GifPicker extends BaseComponent<Props> {
     };
     this.stateSet(_data);
   };
+
   getGifsDataOnScroll = async (_filter: string | null, limit: string, offset: string) => {
     const { data } = await fetchGif(_filter, limit, offset);
     let _data: State = {
@@ -158,9 +185,6 @@ export default class GifPicker extends BaseComponent<Props> {
     this.props.changeState(!this.props.shGif);
   };
 
-  delayedSearch = _.debounce(this.getSearchedData, 2000);
-  delayedSearchOnScroll = _.debounce(this.getSearchedDataOnScroll, 2000);
-
   filterChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({ filter: e.target.value });
     if (e.target.value === "") {
@@ -171,10 +195,15 @@ export default class GifPicker extends BaseComponent<Props> {
   };
 
   renderEmoji = (gifData: any[] | null) => {
+    const gifImageStyle: GifImageStyle = {
+      width: "200px",
+      ...(this.props.gifImagesStyle && this.props.gifImagesStyle)
+    };
     return gifData?.map((_gif, i) => {
       return (
         <div className="emoji gifs" key={_gif?.id || i}>
           <img
+            style={gifImageStyle}
             loading="lazy"
             src={_gif?.images?.fixed_height?.url}
             alt="can't fetch :("
@@ -193,8 +222,20 @@ export default class GifPicker extends BaseComponent<Props> {
       return null;
     }
 
+    const gifPickerStyle = {
+      ...(this.props.style && this.props.style)
+    };
+
     return (
-      <div className="emoji-picker gif" onScroll={this.handleScroll}>
+      <div
+        ref={this.props.rootRef}
+        className={classNameObject({
+          "gif-picker": true,
+          "emoji-picker gif": !this.props.pureStyle
+        })}
+        style={gifPickerStyle}
+        onScroll={this.handleScroll}
+      >
         <SearchBox
           autoComplete="off"
           autoCorrect="off"
@@ -223,7 +264,7 @@ export default class GifPicker extends BaseComponent<Props> {
             );
           }
         })()}
-        <span className="flex justify-content-end">{_t("gif-picker.credits")}</span>
+        <span className="flex justify-end">{_t("gif-picker.credits")}</span>
       </div>
     );
   }
diff --git a/src/common/components/leaderboard/__snapshots__/index.spec.tsx.snap b/src/common/components/leaderboard/__snapshots__/index.spec.tsx.snap
index c154b22f2db..a8be449a4bc 100644
--- a/src/common/components/leaderboard/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/leaderboard/__snapshots__/index.spec.tsx.snap
@@ -24,6 +24,7 @@ exports[`(1) Render with data. 1`] = `
           
           <div
             className="menu-down"
+            style={Object {}}
           >
             <svg
               viewBox="0 0 24 24"
diff --git a/src/common/components/login/index.tsx b/src/common/components/login/index.tsx
index 5d42b9037e9..0aae8d1a11b 100644
--- a/src/common/components/login/index.tsx
+++ b/src/common/components/login/index.tsx
@@ -23,6 +23,7 @@ import { usrActivity } from "../../api/private-api";
 import { hsTokenRenew } from "../../api/auth-api";
 import { formatError, grantPostingPermission } from "../../api/operations";
 import { getRefreshToken } from "../../helper/user-token";
+
 import ReCAPTCHA from "react-google-recaptcha";
 import { addAccountAuthority, signBuffer } from "../../helper/keychain";
 import { _t } from "../../i18n";
diff --git a/src/common/components/manage-auth-icon/index.tsx b/src/common/components/manage-auth-icon/index.tsx
index 50b8a1dc723..4fc214c9b9d 100644
--- a/src/common/components/manage-auth-icon/index.tsx
+++ b/src/common/components/manage-auth-icon/index.tsx
@@ -5,7 +5,7 @@ import { PrivateKey, PublicKey } from "@hiveio/dhive";
 import { actionType } from "../manage-authority/types";
 import DropDown, { MenuItem } from "../dropdown";
 
-import { KebabMenu, revokeSvg, copyOutlinSvg, keyOutlineSvg } from "../../img/svg";
+import { copyOutlinSvg, kebabMenuSvg, keyOutlineSvg, revokeSvg } from "../../img/svg";
 import { _t } from "../../i18n";
 import "./index.scss";
 
@@ -79,7 +79,7 @@ const ManageAuthIcon = (props: Props) => {
   const menuConfig = {
     history: props.history,
     label: "",
-    icon: KebabMenu,
+    icon: kebabMenuSvg,
     items: menuItems
   };
 
diff --git a/src/common/components/navbar/index.tsx b/src/common/components/navbar/index.tsx
index 76f54b1f4ff..e806342eaf3 100644
--- a/src/common/components/navbar/index.tsx
+++ b/src/common/components/navbar/index.tsx
@@ -120,7 +120,7 @@ export function Navbar({ match, history, setStepOne, setStepTwo, step }: Props)
 
   return (
     <div
-      className="fixed z-10 top-0 left-0 right-0 flex flex-col justify-start"
+      className="fixed z-20 top-0 left-0 right-0 flex flex-col justify-start"
       id="sticky-container"
     >
       <NavbarMobile
diff --git a/src/common/components/profile-card/index.tsx b/src/common/components/profile-card/index.tsx
index 3c0fa0930ee..59ffddc1948 100644
--- a/src/common/components/profile-card/index.tsx
+++ b/src/common/components/profile-card/index.tsx
@@ -34,6 +34,8 @@ import { Subscription } from "../../store/subscriptions/types";
 import { ResourceCreditsInfo } from "../rc-info";
 import "./_index.scss";
 import { Button } from "@ui/button";
+import JoinCommunityChatBtn from "../../features/chats/components/join-community-chat-btn";
+import { useCommunityCache } from "../../core";
 
 interface Props {
   global: Global;
@@ -57,6 +59,8 @@ export const ProfileCard = (props: Props) => {
   const [, updateState] = useState();
   const forceUpdate = useCallback(() => updateState({} as any), []);
 
+  const { data: community } = useCommunityCache(props.account?.name);
+
   const { activeUser, account, section, global } = props;
 
   useEffect(() => {
@@ -258,9 +262,12 @@ export const ProfileCard = (props: Props) => {
       )}
       <div className="btn-controls flex gap-3">
         {isCommunity(account?.name) && (
-          <Link to={`/created/${account?.name}`}>
-            <Button size="sm">{_t("profile.go-community")}</Button>
-          </Link>
+          <>
+            <Link to={`/created/${account?.name}`}>
+              <Button size="sm">{_t("profile.go-community")}</Button>
+            </Link>
+            {!!community && <JoinCommunityChatBtn history={props.history} community={community} />}
+          </>
         )}
         {isMyProfile && (
           <>
diff --git a/src/common/components/profile-menu/__snapshots__/index.spec.tsx.snap b/src/common/components/profile-menu/__snapshots__/index.spec.tsx.snap
index 3733838ae1b..577caf5583d 100644
--- a/src/common/components/profile-menu/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/profile-menu/__snapshots__/index.spec.tsx.snap
@@ -89,6 +89,7 @@ exports[`(2) With active user 1`] = `
           </div>
           <div
             className="menu-down"
+            style={Object {}}
           >
             <svg
               viewBox="0 0 24 24"
@@ -156,6 +157,7 @@ exports[`(2) With active user 1`] = `
           
           <div
             className="menu-down"
+            style={Object {}}
           >
             <svg
               fill="none"
diff --git a/src/common/components/scroll-to-top/_index.scss b/src/common/components/scroll-to-top/_index.scss
index 778307b79ab..a3ff30506f6 100644
--- a/src/common/components/scroll-to-top/_index.scss
+++ b/src/common/components/scroll-to-top/_index.scss
@@ -24,19 +24,18 @@
     }
 
     & ~ .floating-faq-button {
-
-      & > button {
-        bottom: 1.25rem !important;
-        right: 4.5rem !important;
+      & > .help-btn {
+        right: 5rem;
       }
 
       & > .floating-container {
-        bottom: 4.4rem;
         right: 5rem;
       }
     }
   }
-
+  &.small-screen {
+    bottom: 65px;
+  }
   svg {
     width: 20px;
     height: 20px;
diff --git a/src/common/components/scroll-to-top/index.tsx b/src/common/components/scroll-to-top/index.tsx
index 9148f0a73c6..24dad4d6e43 100644
--- a/src/common/components/scroll-to-top/index.tsx
+++ b/src/common/components/scroll-to-top/index.tsx
@@ -37,6 +37,11 @@ export default class ScrollToTop extends Component {
     }
 
     if (this.shouldShow()) {
+      if (window.innerWidth <= 666) {
+        this.button.current.classList.add("small-screen");
+      } else {
+        this.button.current.classList.remove("small-screen");
+      }
       this.button.current.classList.add("visible");
       return;
     }
diff --git a/src/common/components/user-nav/_index.scss b/src/common/components/user-nav/_index.scss
index 8f0f221e997..7346e943999 100644
--- a/src/common/components/user-nav/_index.scss
+++ b/src/common/components/user-nav/_index.scss
@@ -36,6 +36,7 @@
   .user-wallet,
   .user-points,
   .notifications,
+  .chats,
   .points {
     @apply text-white;
     display: flex;
@@ -68,7 +69,8 @@
     }
   }
 
-  .notifications {
+  .notifications,
+  .chats {
     cursor: pointer;
     position: relative;
 
@@ -113,10 +115,6 @@
       @apply bg-dark-200;
     }
 
-    .label {
-
-    }
-
     .power {
       display: flex;
 
@@ -125,10 +123,10 @@
         margin-right: 2px;
       }
 
-      .voting, .downVoting {
+      .voting,
+      .downVoting {
         display: flex;
         align-items: center;
-
       }
 
       .voting {
@@ -148,7 +146,6 @@
 
   // custom dropdown override
   .custom-dropdown {
-
     .menu-inner {
       width: 220px;
 
diff --git a/src/common/components/user-nav/index.tsx b/src/common/components/user-nav/index.tsx
index 5d094e1e7a5..20473f3ee83 100644
--- a/src/common/components/user-nav/index.tsx
+++ b/src/common/components/user-nav/index.tsx
@@ -1,9 +1,10 @@
 import React, { useState } from "react";
 import { _t } from "../../i18n";
+import { Link } from "react-router-dom";
 import { useMappedStore } from "../../store/use-mapped-store";
 import { useLocation } from "react-router";
 import "./_index.scss";
-import { bellOffSvg, bellSvg, chevronUpSvg, rocketSvg } from "../../img/svg";
+import { bellOffSvg, bellSvg, chevronUpSvg, messangerSvg, rocketSvg } from "../../img/svg";
 import { downVotingPower, votingPower } from "../../api/hive";
 import { WalletBadge } from "./wallet-badge";
 import ToolTip from "../tooltip";
@@ -115,16 +116,23 @@ export const UserNav = ({ history, icon }: Props) => {
         <WalletBadge icon={icon} />
 
         {global.usePrivate ? (
-          <ToolTip content={_t("user-nav.notifications")}>
-            <span className="notifications" onClick={() => toggleUIProp("notifications")}>
-              {notifications.unread > 0 && (
-                <span className="notifications-badge notranslate">
-                  {notifications.unread.toString().length < 3 ? notifications.unread : "..."}
-                </span>
-              )}
-              {global.notifications ? bellSvg : bellOffSvg}
-            </span>
-          </ToolTip>
+          <>
+            <ToolTip content={_t("user-nav.notifications")}>
+              <span className="notifications" onClick={() => toggleUIProp("notifications")}>
+                {notifications.unread > 0 && (
+                  <span className="notifications-badge notranslate">
+                    {notifications.unread.toString().length < 3 ? notifications.unread : "..."}
+                  </span>
+                )}
+                {global.notifications ? bellSvg : bellOffSvg}
+              </span>
+            </ToolTip>
+            <ToolTip content={_t("user-nav.chats")}>
+              <Link to={`/chats`}>
+                <span className="chats">{messangerSvg}</span>
+              </Link>
+            </ToolTip>
+          </>
         ) : (
           <></>
         )}
diff --git a/src/common/components/video-upload-threespeak/index.tsx b/src/common/components/video-upload-threespeak/index.tsx
index 30758c074ae..a273692f906 100644
--- a/src/common/components/video-upload-threespeak/index.tsx
+++ b/src/common/components/video-upload-threespeak/index.tsx
@@ -186,7 +186,7 @@ export const VideoUpload = (props: Props & React.HTMLAttributes<HTMLDivElement>)
           <source src={selectedFile} type="video/mp4" />
         </video>
       </div>
-      <div className="flex justify-content-end mt-3">
+      <div className="flex justify-end mt-3">
         <Button
           className="bg-dark"
           onClick={() => {
diff --git a/src/common/components/wallet-hive-engine/index.tsx b/src/common/components/wallet-hive-engine/index.tsx
index fff49bc5602..7430f6627cd 100644
--- a/src/common/components/wallet-hive-engine/index.tsx
+++ b/src/common/components/wallet-hive-engine/index.tsx
@@ -470,7 +470,7 @@ export class WalletHiveEngine extends BaseComponent<Props, State> {
                               return (
                                 <span
                                   key={i}
-                                  className={`flex justify-content-end ${
+                                  className={`flex justify-end ${
                                     changeValue < 0 ? "text-red" : "text-green"
                                   }`}
                                 >
@@ -546,7 +546,7 @@ export class WalletHiveEngine extends BaseComponent<Props, State> {
                               {b.stakingEnabled && (
                                 <div className="mr-1">
                                   <Tooltip content="Stake">
-                                    <div className="flex items-center flex-justify-center align-center">
+                                    <div className="flex items-center flex-justify-center items-center">
                                       <span
                                         onClick={() =>
                                           this.openTransferDialog("stake", b.symbol, b.balance)
@@ -562,7 +562,7 @@ export class WalletHiveEngine extends BaseComponent<Props, State> {
                               {b.stake > 0 && (
                                 <div className="mr-1">
                                   <Tooltip content="Unstake">
-                                    <div className="flex items-center flex-justify-center align-center">
+                                    <div className="flex items-center flex-justify-center items-center">
                                       <span
                                         onClick={() =>
                                           this.openTransferDialog(
diff --git a/src/common/core/caches/communities-cache.ts b/src/common/core/caches/communities-cache.ts
index 41fcdc749f0..1c617204c34 100644
--- a/src/common/core/caches/communities-cache.ts
+++ b/src/common/core/caches/communities-cache.ts
@@ -5,12 +5,13 @@ import { Community } from "../../store/communities";
 import isCommunity from "../../helper/is-community";
 import { useEffect } from "react";
 
-export function useCommunityCache(category: string, invalidate?: boolean) {
+export function useCommunityCache(category?: string, invalidate?: boolean) {
   const client = useQueryClient();
 
   const query = useQuery<Community | null>([QueryIdentifiers.COMMUNITY, category], {
-    queryFn: () => (isCommunity(category) ? bridgeApi.getCommunity(category) : null),
-    initialData: null
+    queryFn: () => (isCommunity(category) ? bridgeApi.getCommunity(category!!) : null),
+    initialData: null,
+    enabled: !!category
   });
 
   useEffect(() => {
diff --git a/src/common/core/react-query.ts b/src/common/core/react-query.ts
index 663aff22236..b9cc66c7b69 100644
--- a/src/common/core/react-query.ts
+++ b/src/common/core/react-query.ts
@@ -26,5 +26,7 @@ export enum QueryIdentifiers {
   THREE_SPEAK_VIDEO_LIST = "three-speak-video-list",
   THREE_SPEAK_VIDEO_LIST_FILTERED = "three-speak-video-list-filtered",
   DRAFTS = "drafts",
-  BY_DRAFT_ID = "by-draft-id"
+  BY_DRAFT_ID = "by-draft-id",
+
+  GET_ACCOUNT_FULL = "get-account-full"
 }
diff --git a/src/common/features/chats/components/chat-channel-messages.tsx b/src/common/features/chats/components/chat-channel-messages.tsx
new file mode 100644
index 00000000000..2b39aa9c531
--- /dev/null
+++ b/src/common/features/chats/components/chat-channel-messages.tsx
@@ -0,0 +1,141 @@
+import React, { useMemo, useState } from "react";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { _t } from "../../../i18n";
+import { ChatMessageItem } from "./chat-message-item";
+import { Dropdown, DropdownItemWithIcon, DropdownMenu } from "@ui/dropdown";
+import { hideSvg, removeUserSvg } from "../../../img/svg";
+import { Spinner } from "@ui/spinner";
+import {
+  Channel,
+  checkContiguousMessage,
+  PublicMessage,
+  useHideMessageInChannel,
+  useKeysQuery,
+  usePublicMessagesQuery,
+  useUpdateChannelBlockedUsers
+} from "@ecency/ns-query";
+import { groupMessages } from "../utils";
+import { ChatFloatingDate } from "./chat-floating-date";
+import { differenceInCalendarDays } from "date-fns";
+
+interface Props {
+  publicMessages: PublicMessage[];
+  currentChannel: Channel;
+  isPage?: boolean;
+}
+
+export function ChatsChannelMessages({ publicMessages, currentChannel, isPage }: Props) {
+  const { activeUser } = useMappedStore();
+
+  const channelMessagesRef = React.createRef<HTMLDivElement>();
+
+  // Message where users interacted with context menu
+  const [currentInteractingMessageId, setCurrentInteractingMessageId] = useState<string>();
+
+  const { publicKey } = useKeysQuery();
+  const { fetchNextPage } = usePublicMessagesQuery(currentChannel);
+
+  const { mutateAsync: updateBlockedUsers, isLoading: isUsersBlockingLoading } =
+    useUpdateChannelBlockedUsers(currentChannel);
+  const { mutateAsync: hideMessage, isLoading: isHideMessageLoading } =
+    useHideMessageInChannel(currentChannel);
+
+  const messages = useMemo(
+    () =>
+      publicMessages.filter((m) =>
+        currentChannel?.removedUserIds ? !currentChannel.removedUserIds.includes(m.creator) : true
+      ),
+    [publicMessages, currentChannel]
+  );
+  const groupedMessages = useMemo(() => groupMessages(messages), [messages]);
+
+  return (
+    <>
+      <div className="channel-messages" ref={channelMessagesRef}>
+        {groupedMessages.map(([date, group], i) => (
+          <React.Fragment key={date.getTime()}>
+            {(i > 0 ? differenceInCalendarDays(date, groupedMessages[i - 1][0]) : 1) ? (
+              <ChatFloatingDate currentDate={date} isPage={isPage} />
+            ) : (
+              <></>
+            )}
+            {group.map((message, j) => (
+              <>
+                <Dropdown
+                  show={currentInteractingMessageId === message.id}
+                  setShow={(v) =>
+                    setCurrentInteractingMessageId(v ? currentInteractingMessageId : undefined)
+                  }
+                >
+                  <ChatMessageItem
+                    currentChannel={currentChannel}
+                    type={message.creator !== publicKey ? "receiver" : "sender"}
+                    message={message}
+                    isSameUser={checkContiguousMessage(message, i, messages)}
+                    onContextMenu={() => {
+                      if (currentChannel?.communityName === activeUser?.username) {
+                        setCurrentInteractingMessageId(message.id);
+                      }
+                    }}
+                    onAppear={() =>
+                      setTimeout(
+                        () =>
+                          publicMessages?.length - 1 === i
+                            ? document
+                                .querySelector(`[data-message-id="${message.id}"]`)
+                                ?.scrollIntoView()
+                            : {},
+                        100
+                      )
+                    }
+                    onInViewport={() =>
+                      i === groupedMessages.length - 1 &&
+                      j === group.length - 1 &&
+                      fetchNextPage({
+                        pageParam: message.created * 1000
+                      })
+                    }
+                  />
+                  <DropdownMenu
+                    className="top-[70%]"
+                    align={message.creator === publicKey ? "right" : "left"}
+                  >
+                    <DropdownItemWithIcon
+                      icon={isHideMessageLoading ? <Spinner className="w-3.5 h-3.5" /> : hideSvg}
+                      label={_t("chat.hide-message")}
+                      onClick={() =>
+                        hideMessage({
+                          hide:
+                            currentChannel?.hiddenMessageIds?.some((id) => id === message.id) ===
+                            false,
+                          messageId: message.id
+                        })
+                      }
+                    />
+                    <DropdownItemWithIcon
+                      icon={
+                        isUsersBlockingLoading ? <Spinner className="w-3.5 h-3.5" /> : removeUserSvg
+                      }
+                      label={_t("chat.block-author")}
+                      onClick={() =>
+                        updateBlockedUsers([
+                          ...(currentChannel?.removedUserIds ?? []),
+                          message.creator
+                        ])
+                      }
+                    />
+                  </DropdownMenu>
+                </Dropdown>
+              </>
+            ))}
+          </React.Fragment>
+        ))}
+        {currentChannel?.removedUserIds?.includes(activeUser?.username!!) && (
+          <span className="flex justify-center items-center mt-3">
+            You have been blocked from this community
+          </span>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/chat-floating-date.tsx b/src/common/features/chats/components/chat-floating-date.tsx
new file mode 100644
index 00000000000..0188340c6db
--- /dev/null
+++ b/src/common/features/chats/components/chat-floating-date.tsx
@@ -0,0 +1,40 @@
+import React, { useMemo } from "react";
+import { format } from "date-fns";
+import { getDateFnsLocale } from "../utils";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { classNameObject } from "../../../helper/class-name-object";
+
+export function ChatFloatingDate({
+  currentDate,
+  isPage = false
+}: {
+  currentDate?: Date;
+  isPage?: boolean;
+}) {
+  const { global } = useMappedStore();
+  const currentFormattedDate = useMemo(
+    () =>
+      currentDate
+        ? format(currentDate, "dd MMMM", {
+            locale: getDateFnsLocale(global.lang)
+          })
+        : undefined,
+    [global.lang, currentDate]
+  );
+
+  return currentFormattedDate ? (
+    <div
+      className={classNameObject({
+        "sticky z-10 flex justify-center text-xs text-center": true,
+        "top-0": !isPage,
+        "top-[57px]": isPage
+      })}
+    >
+      <div className="bg-gray-200 my-3 dark:bg-gray-800 rounded-full p-1 ">
+        {currentFormattedDate}
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+}
diff --git a/src/common/features/chats/components/chat-input.tsx b/src/common/features/chats/components/chat-input.tsx
new file mode 100644
index 00000000000..01bb7a16e18
--- /dev/null
+++ b/src/common/features/chats/components/chat-input.tsx
@@ -0,0 +1,186 @@
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { EmojiPicker } from "../../../components/emoji-picker";
+import {
+  attachFileSvg,
+  chatBoxImageSvg,
+  emoticonHappyOutlineSvg,
+  gifIcon,
+  messageSendSvg
+} from "../../../img/svg";
+import { CHAT_FILE_CONTENT_TYPES, GifImagesStyle } from "./chat-popup/chat-constants";
+import { _t } from "../../../i18n";
+import { Form } from "@ui/form";
+import { FormControl } from "@ui/input";
+import { Button } from "@ui/button";
+import { useChatFileUpload } from "../mutations";
+import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
+import GifPicker from "../../../components/gif-picker";
+import useClickAway from "react-use/lib/useClickAway";
+import { Spinner } from "@ui/spinner";
+import {
+  Channel,
+  ChatContext,
+  DirectContact,
+  useChannelsQuery,
+  useSendMessage
+} from "@ecency/ns-query";
+
+interface Props {
+  currentChannel?: Channel;
+  currentContact?: DirectContact;
+}
+
+export default function ChatInput({ currentChannel, currentContact }: Props) {
+  useChannelsQuery();
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const emojiButtonRef = useRef<HTMLButtonElement | null>(null);
+  const gifPickerRef = useRef<HTMLDivElement | null>(null);
+
+  const { receiverPubKey } = useContext(ChatContext);
+
+  const [message, setMessage] = useState("");
+  const [showGifPicker, setShowGifPicker] = useState(false);
+
+  const { mutateAsync: upload } = useChatFileUpload(setMessage);
+  const { mutateAsync: sendMessage, isLoading: isSendMessageLoading } = useSendMessage(
+    currentChannel,
+    currentContact,
+    () => {
+      setMessage("");
+    }
+  );
+
+  const isCurrentUser = useMemo(() => !!currentContact, [currentContact]);
+  const isCommunity = useMemo(() => !!currentChannel, [currentChannel]);
+
+  const isDisabled = useMemo(
+    () => isCurrentUser && !receiverPubKey,
+    [isCurrentUser, receiverPubKey]
+  );
+
+  useClickAway(gifPickerRef, () => setShowGifPicker(false));
+
+  useEffect(() => {
+    if (!isCurrentUser && !isCommunity) {
+      setMessage("");
+    }
+  }, [isCommunity, isCurrentUser]);
+
+  const checkFile = (filename: string) => {
+    const filenameLow = filename.toLowerCase();
+    return CHAT_FILE_CONTENT_TYPES.some((el) => filenameLow.endsWith(el));
+  };
+
+  const fileInputChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    let files = [...(e.target.files as FileList)].filter((i) => checkFile(i.name)).filter((i) => i);
+
+    if (files.length > 0) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+
+    files.forEach((file) => upload(file));
+
+    // reset input
+    e.target.value = "";
+  };
+
+  return (
+    <div className="chat-input">
+      {showGifPicker && (
+        <GifPicker
+          rootRef={gifPickerRef}
+          pureStyle={true}
+          gifImagesStyle={GifImagesStyle}
+          shGif={true}
+          changeState={(gifState) => setShowGifPicker(gifState!)}
+          fallback={(e) => sendMessage(e)}
+        />
+      )}
+      <input
+        onChange={fileInputChanged}
+        className="hidden"
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        multiple={true}
+      />
+
+      <Form
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          sendMessage(message).then(() => {
+            // Re-focus to input because when DOM changes and input position changes then
+            //  focus is lost
+            setTimeout(() => inputRef.current?.focus(), 1);
+          });
+        }}
+        className="w-full flex items-center gap-2 p-1.5"
+      >
+        <Dropdown>
+          <DropdownToggle>
+            <Button
+              disabled={isDisabled || isSendMessageLoading}
+              className="mr-2"
+              noPadding={true}
+              icon={attachFileSvg}
+              appearance="gray-link"
+            />
+          </DropdownToggle>
+          <DropdownMenu align="top">
+            <DropdownItemWithIcon
+              icon={gifIcon}
+              label="GIF"
+              onClick={() => setShowGifPicker(true)}
+            />
+            <DropdownItemWithIcon
+              icon={chatBoxImageSvg}
+              label="Upload image"
+              onClick={() => fileInputRef.current?.click()}
+            />
+          </DropdownMenu>
+        </Dropdown>
+        <FormControl
+          ref={inputRef}
+          value={message}
+          autoFocus={true}
+          onChange={(e) => {
+            setMessage(e.target.value);
+          }}
+          required={true}
+          type="text"
+          placeholder={_t("chat.start-chat-placeholder")}
+          autoComplete="off"
+          disabled={isDisabled || isSendMessageLoading}
+        />
+        <div className="flex items-center px-2 h-full gap-3">
+          <div className="relative">
+            <Button
+              ref={emojiButtonRef}
+              noPadding={true}
+              appearance="gray-link"
+              disabled={isDisabled}
+              icon={emoticonHappyOutlineSvg}
+            />
+            <EmojiPicker
+              isDisabled={isDisabled || isSendMessageLoading}
+              position="top"
+              anchor={emojiButtonRef.current}
+              onSelect={(e: string) => setMessage((prevMessage) => prevMessage + e)}
+            />
+          </div>
+          <Button
+            noPadding={true}
+            appearance="gray-link"
+            icon={isSendMessageLoading ? <Spinner className="w-3.5 h-3.5" /> : messageSendSvg}
+            disabled={isDisabled || isSendMessageLoading}
+            onClick={() => sendMessage(message)}
+          />
+        </div>
+      </Form>
+    </div>
+  );
+}
diff --git a/src/common/features/chats/components/chat-message-box.tsx b/src/common/features/chats/components/chat-message-box.tsx
new file mode 100644
index 00000000000..e962c25d51e
--- /dev/null
+++ b/src/common/features/chats/components/chat-message-box.tsx
@@ -0,0 +1,78 @@
+import React, { useMemo } from "react";
+import { match } from "react-router";
+import { History } from "history";
+import ChatsMessagesHeader from "./chat-messages-header";
+import ChatsMessagesView from "./chat-messages-view";
+import { Button } from "@ui/button";
+import { useCommunityCache } from "../../../core";
+import ChatsProfileBox from "./chat-profile-box";
+import { _t } from "../../../i18n";
+import {
+  Channel,
+  DirectContact,
+  useAddCommunityChannel,
+  useAutoScrollInChatBox,
+  useLeftCommunityChannelsQuery
+} from "@ecency/ns-query";
+
+interface MatchParams {
+  filter: string;
+  name: string;
+  path: string;
+  url: string;
+  username: string;
+}
+
+interface Props {
+  match: match<MatchParams>;
+  history: History;
+  channel?: Channel;
+  currentContact?: DirectContact;
+}
+
+export default function ChatsMessagesBox(props: Props) {
+  const { data: community } = useCommunityCache(props.match.params.username);
+
+  const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
+
+  const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
+    useAddCommunityChannel(props.channel);
+
+  const hasLeftCommunity = useMemo(
+    () => leftCommunityChannelsIds?.includes(props.channel?.id ?? ""),
+    [props.channel]
+  );
+
+  useAutoScrollInChatBox(props.currentContact, props.channel);
+
+  return (
+    <div
+      className="grid min-h-full"
+      style={{
+        gridTemplateRows: "min-content 1fr min-content"
+      }}
+    >
+      {(props.channel && !hasLeftCommunity) || props.currentContact ? (
+        <>
+          <ChatsMessagesHeader username={props.match.params.username} history={props.history} />
+          <ChatsMessagesView
+            currentContact={props.currentContact!!}
+            currentChannel={props.channel!!}
+          />
+        </>
+      ) : (
+        <>
+          <div />
+          <div className="flex flex-col justify-center items-center mb-4">
+            <ChatsProfileBox communityName={community?.name} />
+            <p className="mb-4 text-gray-600">{_t("chat.welcome.join-description")}</p>
+            <Button onClick={() => addCommunityChannel()} disabled={isAddCommunityChannelLoading}>
+              Join Community Chat
+            </Button>
+          </div>
+          <div />
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/common/features/chats/components/chat-message-channel-item-extension.tsx b/src/common/features/chats/components/chat-message-channel-item-extension.tsx
new file mode 100644
index 00000000000..573589441df
--- /dev/null
+++ b/src/common/features/chats/components/chat-message-channel-item-extension.tsx
@@ -0,0 +1,113 @@
+import { Popover, PopoverContent } from "@ui/popover";
+import React, { PropsWithChildren, RefObject, useMemo, useRef } from "react";
+import FollowControls from "../../../components/follow-controls";
+import { Button } from "@ui/button";
+import { _t } from "../../../i18n";
+import UserAvatar from "../../../components/user-avatar";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { COMMUNITYADMINROLES } from "./chat-popup/chat-constants";
+import {
+  Channel,
+  CommunityModerator,
+  useNostrGetUserProfileQuery,
+  useUpdateChannelBlockedUsers
+} from "@ecency/ns-query";
+
+interface Props {
+  currentChannel: Channel;
+  creator: string;
+}
+
+export function ChatMessageChannelItemExtension({
+  currentChannel,
+  children,
+  creator
+}: PropsWithChildren<Props>) {
+  const popoverRef = useRef<HTMLDivElement | null>(null);
+
+  const { activeUser, setActiveUser, updateActiveUser, deleteUser, toggleUIProp, ui, users } =
+    useMappedStore();
+
+  const { data: nostrUserProfiles } = useNostrGetUserProfileQuery(creator);
+
+  const profile = useMemo(
+    () => nostrUserProfiles?.find((p) => p.creator === creator),
+    [creator, nostrUserProfiles]
+  );
+  const communityAdmins = useMemo(
+    () =>
+      currentChannel?.communityModerators
+        ?.filter((user: CommunityModerator) => COMMUNITYADMINROLES.includes(user.role))
+        .map((user: CommunityModerator) => user.name) ?? [],
+    [currentChannel]
+  );
+
+  const { mutateAsync: updateBlockedUsers } = useUpdateChannelBlockedUsers(currentChannel);
+
+  const block = (removedUserId: string) =>
+    updateBlockedUsers([...(currentChannel.removedUserIds ?? []), removedUserId]);
+
+  const unBlock = (removedUserId: string) =>
+    updateBlockedUsers(
+      currentChannel.removedUserIds?.filter((item) => item !== removedUserId) ?? []
+    );
+
+  return (
+    <>
+      <UserAvatar username={profile?.name ?? ""} size="w-[2rem] h-[2rem]" />
+      <Popover id="profile-popover" className="profile-popover">
+        {children}
+        <PopoverContent>
+          <div className="profile-box" ref={popoverRef as RefObject<HTMLDivElement>}>
+            <div className="profile-box-content">
+              <div className="profile-box-logo flex justify-center">
+                <UserAvatar username={profile?.name ?? ""} size="large" />
+              </div>
+
+              <p className="flex justify-center profile-name">{`@${profile?.name}`}</p>
+              <div
+                className={`flex mb-3 ${
+                  communityAdmins.includes(activeUser?.username!) &&
+                  profile?.name !== currentChannel.communityName
+                    ? "justify-between"
+                    : "justify-center"
+                }  profile-box-buttons`}
+              >
+                <FollowControls
+                  setActiveUser={setActiveUser}
+                  updateActiveUser={updateActiveUser}
+                  deleteUser={deleteUser}
+                  toggleUIProp={toggleUIProp}
+                  activeUser={activeUser}
+                  targetUsername={profile?.name ?? ""}
+                  where={"chat-box"}
+                  ui={ui}
+                  users={users}
+                />
+
+                {communityAdmins.includes(activeUser?.username!) &&
+                  profile?.name !== currentChannel.communityName && (
+                    <>
+                      {currentChannel?.removedUserIds?.includes(profile?.creator ?? "") ? (
+                        <>
+                          <Button onClick={() => unBlock(profile?.creator ?? "")}>
+                            {_t("chat.unblock")}
+                          </Button>
+                        </>
+                      ) : (
+                        <>
+                          <Button onClick={() => block(profile?.creator ?? "")}>
+                            {_t("chat.block")}
+                          </Button>
+                        </>
+                      )}
+                    </>
+                  )}
+              </div>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/chat-message-item.tsx b/src/common/features/chats/components/chat-message-item.tsx
new file mode 100644
index 00000000000..40227d948bd
--- /dev/null
+++ b/src/common/features/chats/components/chat-message-item.tsx
@@ -0,0 +1,168 @@
+import { isMessageGif } from "../utils";
+import { Spinner } from "@ui/spinner";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { classNameObject } from "../../../helper/class-name-object";
+import { renderPostBody } from "@ecency/render-helper";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { _t } from "../../../i18n";
+import { ChatMessageChannelItemExtension } from "./chat-message-channel-item-extension";
+import useMount from "react-use/lib/useMount";
+import { Button } from "@ui/button";
+import { failedMessageSvg } from "../../../img/svg";
+import useDebounce from "react-use/lib/useDebounce";
+import {
+  Channel,
+  DirectContact,
+  isMessageImage,
+  isSingleEmoji,
+  Message,
+  useKeysQuery,
+  useResendMessage
+} from "@ecency/ns-query";
+import { format } from "date-fns";
+import { useInViewport } from "react-in-viewport";
+
+interface Props {
+  type: "sender" | "receiver";
+  message: Message;
+  isSameUser: boolean;
+  showDate?: boolean;
+  currentContact?: DirectContact;
+  currentChannel?: Channel;
+  onContextMenu?: () => void;
+  onAppear?: () => void;
+  onInViewport?: (inViewport: boolean) => void;
+  className?: string;
+}
+
+export function ChatMessageItem({
+  type,
+  message,
+  isSameUser,
+  currentContact,
+  currentChannel,
+  onContextMenu,
+  onInViewport,
+  onAppear,
+  showDate = true,
+  className = ""
+}: Props) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const { global } = useMappedStore();
+  const { publicKey } = useKeysQuery();
+
+  const [holdStarted, setHoldStarted] = useState(false);
+
+  const isFailed = useMemo(() => message.sent === 2, [message]);
+  const isSending = useMemo(() => message.sent === 0, [message]);
+  const isGif = useMemo(() => isMessageGif(message.content), [message]);
+  const isImage = useMemo(() => isMessageImage(message.content), [message]);
+  const isEmoji = useMemo(() => isSingleEmoji(message.content), [message]);
+  const renderedPreview = useMemo(
+    () =>
+      renderPostBody(message.content, false, global.canUseWebp)
+        .replace(/<p[^>]*>/g, "")
+        .replace(/<\/p>/g, ""),
+    [message]
+  );
+
+  const { mutateAsync: resendMessage } = useResendMessage(currentChannel, currentContact);
+  const { inViewport } = useInViewport(ref);
+
+  useMount(() => onAppear?.());
+
+  useDebounce(
+    () => {
+      if (holdStarted) {
+        setHoldStarted(false);
+        onContextMenu?.();
+      }
+    },
+    500,
+    [holdStarted]
+  );
+
+  useEffect(() => {
+    onInViewport?.(inViewport);
+  }, [inViewport]);
+
+  return (
+    <div key={message.id} data-message-id={message.id} ref={ref}>
+      <div
+        className={classNameObject({
+          "flex gap-1 px-4": true,
+          "justify-start": type === "receiver",
+          "justify-end": type === "sender",
+          failed: isFailed,
+          sending: isSending,
+          "mb-4": showDate,
+          "mb-1": !showDate,
+          [className]: !!className
+        })}
+        onMouseDown={() => setHoldStarted(true)}
+        onMouseUp={() => setHoldStarted(false)}
+        onTouchStart={() => setHoldStarted(true)}
+        onTouchEnd={() => setHoldStarted(false)}
+        onContextMenu={(e) => {
+          if (onContextMenu) {
+            e.stopPropagation();
+            e.preventDefault();
+            onContextMenu();
+          }
+        }}
+      >
+        {currentChannel && message.creator !== publicKey && (
+          <ChatMessageChannelItemExtension
+            creator={message.creator}
+            currentChannel={currentChannel}
+          />
+        )}
+        <div
+          className={classNameObject({
+            "flex gap-1 flex-col": true,
+            "items-start": type === "receiver",
+            "items-end": type === "sender"
+          })}
+        >
+          <div
+            className={classNameObject({
+              "duration-300": true,
+              "text-sm p-2.5 rounded-b-2xl": !isGif && !isImage && !isEmoji,
+              "bg-blue-dark-sky text-white rounded-tl-2xl": type === "sender" && !isEmoji,
+              "bg-gray-200 dark:bg-gray-800 rounded-tr-2xl": type === "receiver" && !isEmoji,
+              "max-w-[300px] rounded-2xl overflow-hidden": isGif || isImage || isEmoji,
+              "same-user-message": isSameUser,
+              "text-[4rem]": isEmoji,
+              "scale-90": holdStarted && !!onContextMenu
+            })}
+          >
+            <div
+              className="sender-message-content"
+              dangerouslySetInnerHTML={{ __html: renderedPreview }}
+            />
+          </div>
+          {message.sent == 1 && showDate && (
+            <div className="text-gray-600 dark:text-gray-400 text-xs px-2">
+              {format(new Date(message.created * 1000), "HH:mm")}
+            </div>
+          )}
+          {message.sent === 0 && <Spinner className="w-3 h-3 mx-2" />}
+          {message.sent === 2 && (
+            <div className="flex items-center gap-1">
+              {failedMessageSvg}
+              <Button
+                size="xs"
+                className="text-xs"
+                appearance="link"
+                noPadding={true}
+                onClick={() => resendMessage(message)}
+              >
+                {_t("g.resend")}
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/common/features/chats/components/chat-messages-header.tsx b/src/common/features/chats/components/chat-messages-header.tsx
new file mode 100644
index 00000000000..256228eb087
--- /dev/null
+++ b/src/common/features/chats/components/chat-messages-header.tsx
@@ -0,0 +1,64 @@
+import React, { useContext } from "react";
+import { History } from "history";
+import ChatsCommunityDropdownMenu from "./chats-community-actions";
+import UserAvatar from "../../../components/user-avatar";
+import { CHATPAGE } from "./chat-popup/chat-constants";
+import Link from "../../../components/alink";
+import { expandSideBar } from "../../../img/svg";
+import { Button } from "@ui/button";
+import isCommunity from "../../../helper/is-community";
+import { ChatContext, formattedUserName, useChannelsQuery } from "@ecency/ns-query";
+
+interface Props {
+  username: string;
+  history: History;
+}
+
+export default function ChatsMessagesHeader(props: Props) {
+  const { username } = props;
+  const { setReceiverPubKey } = useContext(ChatContext);
+  const { data: channels } = useChannelsQuery();
+
+  const formattedName = (username: string) => {
+    if (username && !username.startsWith("@")) {
+      const community = channels?.find((channel) => channel.communityName === username);
+      if (community) {
+        return community.name;
+      }
+    }
+    return username.replace("@", "");
+  };
+
+  return (
+    <div className="flex sticky z-[10] top-0 bg-white justify-between border-b border-[--border-color] px-4 h-[57px]">
+      <div className="flex items-center gap-4">
+        <Button
+          appearance="gray-link"
+          className="md:hidden"
+          noPadding={true}
+          icon={expandSideBar}
+          to="/chats"
+          onClick={() => setReceiverPubKey("")}
+        />
+        <Link
+          className="flex items-center gap-3 decoration-0 after:!hidden font-semibold text-gray-800 dark:text-white"
+          to={username.startsWith("@") ? `/${username}` : `/created/${username}`}
+          target="_blank"
+        >
+          <UserAvatar username={formattedUserName(username)} size="medium" />
+          <div>{formattedName(username)}</div>
+        </Link>
+      </div>
+
+      {isCommunity(username) && (
+        <div className="flex items-center justify-center">
+          <ChatsCommunityDropdownMenu
+            from={CHATPAGE}
+            history={props.history}
+            username={props.username}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/common/features/chats/components/chat-messages-view.tsx b/src/common/features/chats/components/chat-messages-view.tsx
new file mode 100644
index 00000000000..fe3521b79b1
--- /dev/null
+++ b/src/common/features/chats/components/chat-messages-view.tsx
@@ -0,0 +1,66 @@
+import React, { useRef } from "react";
+import { Link } from "react-router-dom";
+import ChatsProfileBox from "./chat-profile-box";
+import ChatsDirectMessages from "./chats-direct-messages";
+import ChatInput from "./chat-input";
+import { classNameObject } from "../../../helper/class-name-object";
+import { ChatsChannelMessages } from "./chat-channel-messages";
+import {
+  Channel,
+  DirectContact,
+  DirectMessage,
+  PublicMessage,
+  useMessagesQuery
+} from "@ecency/ns-query";
+
+interface Props {
+  currentContact: DirectContact;
+  currentChannel: Channel;
+}
+
+export default function ChatsMessagesView({ currentContact, currentChannel }: Props) {
+  const { data: messages } = useMessagesQuery(currentContact, currentChannel);
+
+  const messagesBoxRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <>
+      <div
+        className={classNameObject({
+          "h-[100vh] md:h-full": true
+        })}
+        ref={messagesBoxRef}
+      >
+        <Link
+          className="after:!hidden"
+          to={!!currentChannel ? `/created/${currentChannel?.name}` : `/@${currentContact?.name}`}
+          target="_blank"
+        >
+          <ChatsProfileBox
+            communityName={currentChannel?.name}
+            currentUser={currentContact?.name}
+          />
+        </Link>
+        {currentChannel ? (
+          <>
+            <ChatsChannelMessages
+              publicMessages={messages as PublicMessage[]}
+              currentChannel={currentChannel!}
+              isPage={true}
+            />
+          </>
+        ) : (
+          <ChatsDirectMessages
+            directMessages={messages as DirectMessage[]}
+            currentContact={currentContact}
+            isPage={true}
+          />
+        )}
+      </div>
+
+      <div className="sticky z-10 bottom-0 border-t border-[--border-color] bg-white pl-3">
+        <ChatInput currentContact={currentContact} currentChannel={currentChannel} />
+      </div>
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/chat-popup/chat-constants.ts b/src/common/features/chats/components/chat-popup/chat-constants.ts
new file mode 100644
index 00000000000..dd215b6fa64
--- /dev/null
+++ b/src/common/features/chats/components/chat-popup/chat-constants.ts
@@ -0,0 +1,28 @@
+export const DropDownStyle = {
+  width: "35px",
+  height: "35px"
+};
+
+export const GifImagesStyle = {
+  width: "170px"
+};
+
+export const CHAT_FILE_CONTENT_TYPES = ["jpg", "jpeg", "gif", "png", "webp"];
+export const PRIVILEGEDROLES = ["owner", "admin", "mod"];
+export const COMMUNITYADMINROLES = ["owner", "admin"];
+
+export const NOSTRKEY = "nsKey";
+export const UPLOADING = "Uploading";
+export const GIPHGY = "giphy";
+export const HIDEMESSAGE = "hideMessage";
+export const ADDROLE = "addRole";
+export const BLOCKUSER = "blockUser";
+export const LEAVECOMMUNITY = "leaveCommunity";
+export const UNBLOCKUSER = "unblockUser";
+export const NEWCHATACCOUNT = "newChatAccount";
+export const CHATIMPORT = "chatImport";
+export const RESENDMESSAGE = "resendMessage";
+export const CHAT = "chat";
+export const COMMUNITY = "community";
+export const CHATPAGE = "chatPage";
+export const CHANNEL = "channel";
diff --git a/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
new file mode 100644
index 00000000000..43d0e0f7159
--- /dev/null
+++ b/src/common/features/chats/components/chat-popup/chat-direct-contact-or-channel-item.tsx
@@ -0,0 +1,35 @@
+import { Link } from "react-router-dom";
+import React from "react";
+import UserAvatar from "../../../../components/user-avatar";
+import { Channel, DirectContact, isCommunity, useLastMessageQuery } from "@ecency/ns-query";
+import { useCommunityCache } from "../../../../core";
+
+interface Props {
+  username: string;
+  contact?: DirectContact;
+  channel?: Channel;
+  userClicked: (username: string) => void;
+}
+
+export function ChatDirectContactOrChannelItem({ contact, channel, username, userClicked }: Props) {
+  const lastMessage = useLastMessageQuery(contact, channel);
+  const { data: community } = useCommunityCache(channel?.communityName);
+
+  return (
+    <div
+      className="flex items-center gap-3 px-3 border-b border-[--border-color] py-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-dark-300"
+      onClick={() => userClicked(username)}
+    >
+      <Link to={`/@${username}`}>
+        <UserAvatar username={username} size="medium" />
+      </Link>
+
+      <div>
+        <p className="font-semibold">
+          {isCommunity(username) && community ? community.title : username}
+        </p>
+        <p className="text-gray-600 text-sm">{lastMessage?.content}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
new file mode 100644
index 00000000000..cc770d5be36
--- /dev/null
+++ b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
@@ -0,0 +1,77 @@
+import React, { useContext } from "react";
+import { _t } from "../../../../i18n";
+import { ChatsWelcome } from "../chats-welcome";
+import { Button } from "@ui/button";
+import { ChatDirectContactOrChannelItem } from "./chat-direct-contact-or-channel-item";
+import {
+  ChatContext,
+  useChannelsQuery,
+  useDirectContactsQuery,
+  useKeysQuery
+} from "@ecency/ns-query";
+
+interface Props {
+  communityClicked: (v: string) => void;
+  userClicked: (v: string) => void;
+  setShowSearchUser: (v: boolean) => void;
+}
+
+export function ChatPopupContactsAndChannels({
+  communityClicked,
+  userClicked,
+  setShowSearchUser
+}: Props) {
+  const { setReceiverPubKey } = useContext(ChatContext);
+
+  const { privateKey } = useKeysQuery();
+  const { data: directContacts } = useDirectContactsQuery();
+  const { data: channels } = useChannelsQuery();
+
+  return (
+    <>
+      {(directContacts?.length !== 0 || (channels?.length !== 0 && channels?.length !== 0)) &&
+      privateKey ? (
+        <>
+          {channels?.length !== 0 && (
+            <>
+              <div className="px-3 pt-3 pb-2 text-xs uppercase font-bold text-gray-500">
+                {_t("chat.communities")}
+              </div>
+              {channels?.map((channel) => (
+                <ChatDirectContactOrChannelItem
+                  key={channel.id}
+                  channel={channel}
+                  username={channel.communityName!!}
+                  userClicked={() => communityClicked(channel.communityName!)}
+                />
+              ))}
+              {directContacts?.length !== 0 && (
+                <div className="px-3 pt-3 pb-2 text-xs uppercase font-bold text-gray-500">
+                  {_t("chat.dms")}
+                </div>
+              )}
+            </>
+          )}
+          {directContacts?.map((user) => (
+            <ChatDirectContactOrChannelItem
+              username={user.name}
+              contact={user}
+              userClicked={(v) => {
+                setReceiverPubKey(user.pubkey);
+                userClicked(v);
+              }}
+              key={user.pubkey}
+            />
+          ))}
+        </>
+      ) : !privateKey ? (
+        <ChatsWelcome />
+      ) : (
+        <div className="flex items-center justify-center h-full flex-col">
+          <p className="text-gray-600 dark:text-gray-400 mb-4">{_t("chat.no-chat")}</p>
+          <Button onClick={() => setShowSearchUser(true)}>{_t("chat.start-chat")}</Button>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-header.tsx b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
new file mode 100644
index 00000000000..d44d143969d
--- /dev/null
+++ b/src/common/features/chats/components/chat-popup/chat-popup-header.tsx
@@ -0,0 +1,151 @@
+import Tooltip from "../../../../components/tooltip";
+import { _t } from "../../../../i18n";
+import { Button } from "@ui/button";
+import { addMessageSvg, arrowBackSvg, expandArrow } from "../../../../img/svg";
+import ChatsCommunityDropdownMenu from "../chats-community-actions";
+import { history } from "../../../../store";
+import ChatsDropdownMenu from "../chats-dropdown-menu";
+import { classNameObject } from "../../../../helper/class-name-object";
+import React, { useContext, useMemo } from "react";
+import UserAvatar from "../../../../components/user-avatar";
+import { ChatContext, useKeysQuery } from "@ecency/ns-query";
+import { useCommunityCache } from "../../../../core";
+
+interface Props {
+  currentUser: string;
+  communityName: string;
+  showSearchUser: boolean;
+  expanded: boolean;
+  canSendMessage: boolean;
+  isCommunity: boolean;
+  isCurrentUser: boolean;
+  handleBackArrowSvg: () => void;
+  handleMessageSvgClick: () => void;
+  setExpanded: (v: boolean) => void;
+}
+
+export function ChatPopupHeader({
+  currentUser,
+  communityName,
+  showSearchUser,
+  expanded,
+  canSendMessage,
+  isCommunity,
+  isCurrentUser,
+  handleBackArrowSvg,
+  handleMessageSvgClick,
+  setExpanded
+}: Props) {
+  const { revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
+
+  const { data: community } = useCommunityCache(communityName);
+  const { privateKey } = useKeysQuery();
+  const title = useMemo(() => {
+    if (revealPrivateKey) {
+      return _t("chat.manage-chat-key");
+    }
+
+    if (currentUser) {
+      return currentUser;
+    }
+
+    if (isCommunity && community) {
+      return community.title;
+    }
+
+    if (showSearchUser) {
+      return _t("chat.new-message");
+    }
+
+    return _t("chat.page-title");
+  }, [currentUser, isCommunity, communityName, showSearchUser, revealPrivateKey]);
+  const isExpanded = useMemo(
+    () => (currentUser || communityName || showSearchUser || revealPrivateKey) && expanded,
+    [currentUser, communityName, showSearchUser, revealPrivateKey, expanded]
+  );
+
+  return (
+    <div
+      className="flex items-center justify-between border-b border-[--border-color] px-2 py-2 gap-2 cursor-pointer"
+      onClick={() => setExpanded(!expanded)}
+    >
+      <div className="flex items-center">
+        {isExpanded && (
+          <Tooltip content={_t("chat.back")}>
+            <Button
+              size="sm"
+              appearance="link"
+              onClick={(e: { stopPropagation: () => void }) => {
+                e.stopPropagation();
+                handleBackArrowSvg();
+              }}
+              icon={arrowBackSvg}
+            />
+          </Tooltip>
+        )}
+        <div className="flex items-center" onClick={() => setExpanded(!expanded)}>
+          {(currentUser || isCommunity) && (
+            <UserAvatar username={isCurrentUser ? currentUser : communityName || ""} size="small" />
+          )}
+
+          <div
+            className={classNameObject({
+              "truncate max-w-[180px] font-semibold pl-4": true
+            })}
+          >
+            {title}
+          </div>
+
+          <Tooltip content={expanded ? _t("chat.collapse") : _t("chat.expand")}>
+            <Button
+              size="sm"
+              appearance="gray-link"
+              className={classNameObject({
+                "duration-300": true,
+                "rotate-180": !expanded
+              })}
+              onClick={(e: { stopPropagation: () => void }) => {
+                e.stopPropagation();
+                setExpanded(!expanded);
+              }}
+              icon={expandArrow}
+            />
+          </Tooltip>
+        </div>
+      </div>
+      <div className="flex items-center gap-4">
+        {canSendMessage && (
+          <Tooltip content={_t("chat.new-message")}>
+            <Button
+              noPadding={true}
+              size="sm"
+              appearance="gray-link"
+              icon={addMessageSvg}
+              onClick={(e: { stopPropagation: () => void }) => {
+                e.stopPropagation();
+                handleMessageSvgClick();
+              }}
+            />
+          </Tooltip>
+        )}
+        {isCommunity && <ChatsCommunityDropdownMenu history={history!} username={communityName} />}
+        {!isCommunity && !isCurrentUser && privateKey && (
+          <div
+            className="flex items-center"
+            onClick={(e) => {
+              e.stopPropagation();
+              setExpanded(true);
+            }}
+          >
+            <ChatsDropdownMenu
+              history={history!}
+              communityName={communityName}
+              currentUser={currentUser}
+              onManageChatKey={() => setRevealPrivateKey(!revealPrivateKey)}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
new file mode 100644
index 00000000000..52e5c4eb814
--- /dev/null
+++ b/src/common/features/chats/components/chat-popup/chat-popup-messages-list.tsx
@@ -0,0 +1,48 @@
+import { Link } from "react-router-dom";
+import ChatsProfileBox from "../chat-profile-box";
+import ChatsDirectMessages from "../chats-direct-messages";
+import React from "react";
+import { useCommunityCache } from "../../../../core";
+import { ChatsChannelMessages } from "../chat-channel-messages";
+import {
+  Channel,
+  DirectContact,
+  DirectMessage,
+  PublicMessage,
+  useMessagesQuery
+} from "@ecency/ns-query";
+
+interface Props {
+  currentContact?: DirectContact;
+  currentChannel?: Channel;
+}
+
+export function ChatPopupMessagesList({ currentContact, currentChannel }: Props) {
+  const { data: currentCommunity } = useCommunityCache(currentChannel?.communityName);
+  const { data: messages } = useMessagesQuery(currentContact, currentChannel);
+
+  return (
+    <div className="chats h-full">
+      {" "}
+      <Link
+        to={!!currentChannel ? `/created/${currentCommunity?.name}` : `/@${currentContact?.name}`}
+      >
+        <ChatsProfileBox
+          communityName={currentChannel?.communityName}
+          currentUser={currentContact?.name}
+        />
+      </Link>
+      {!!currentChannel ? (
+        <ChatsChannelMessages
+          publicMessages={messages as PublicMessage[]}
+          currentChannel={currentChannel!}
+        />
+      ) : (
+        <ChatsDirectMessages
+          directMessages={messages as DirectMessage[]}
+          currentContact={currentContact!!}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx b/src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx
new file mode 100644
index 00000000000..afb8a03c953
--- /dev/null
+++ b/src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { useSearchUsersQuery } from "../../queries";
+import { ChatSidebarSearch } from "../chats-sidebar/chat-sidebar-search";
+import { useSearchCommunitiesQuery } from "../../queries/search-communities-query";
+import { ChatSidebarSearchItem } from "../chats-sidebar/chat-sidebar-search-item";
+
+interface Props {
+  setCurrentUser: (v: string) => void;
+}
+
+export function ChatPopupSearchUser({ setCurrentUser }: Props) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const { data: searchUsers } = useSearchUsersQuery(searchQuery);
+  const { data: searchCommunities } = useSearchCommunitiesQuery(searchQuery);
+
+  return (
+    <>
+      <div className="w-full mb-3">
+        <ChatSidebarSearch setSearch={setSearchQuery} />
+      </div>
+      <div className="user-search-suggestion-list">
+        {[...searchUsers, ...searchCommunities].map((item) => (
+          <ChatSidebarSearchItem
+            item={item}
+            onClick={() => setCurrentUser("account" in item ? item.account : item.name)}
+            key={"account" in item ? item.account : item.id}
+          />
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/chat-popup/index.scss b/src/common/features/chats/components/chat-popup/index.scss
new file mode 100644
index 00000000000..3937bf2478d
--- /dev/null
+++ b/src/common/features/chats/components/chat-popup/index.scss
@@ -0,0 +1,200 @@
+@import "src/style/vars_mixins";
+
+.chatbox-container {
+  position: fixed;
+  z-index: 99;
+  right: 13rem;
+  bottom: 0rem;
+  height: 50px;
+  width: 410px;
+
+  border-top-right-radius: 16px;
+  border-top-left-radius: 16px;
+
+  transition: height 0.5s ease;
+
+  @include themify(day) {
+    @apply bg-white border-[--border-color] border shadow-2xl;
+  }
+
+  @include themify(night) {
+    @apply bg-dark-200 border-[--border-color] border shadow-2xl;
+  }
+
+  &.expanded {
+    height: 530px;
+  }
+
+  .chat-body {
+    position: relative;
+    height: 470px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    &.current-user {
+      padding-bottom: 10px;
+      @apply border-b;
+
+      @include media-breakpoint-up(md) {
+        height: 422px;
+      }
+
+      @include themify(day) {
+        @apply border-light-300;
+      }
+      @include themify(night) {
+        border-bottom: 1px solid #172b44;
+      }
+    }
+
+    &.community {
+      height: 422px;
+      @apply border-b;
+
+      @include themify(day) {
+        @apply border-light-300;
+      }
+      @include themify(night) {
+        border-bottom: 1px solid #172b44;
+      }
+    }
+
+    .user-search-suggestion-list {
+      .search-content {
+        padding: 0.7rem;
+        border-radius: 10px;
+        cursor: pointer;
+        display: flex;
+        margin-bottom: 1rem;
+
+        .search-user-img {
+          justify-content: center;
+          align-items: center;
+          display: flex;
+          margin-left: 10px;
+        }
+
+        .search-user-title {
+          display: flex;
+          margin-left: 1rem;
+
+          .search-username {
+            margin: 7px 0 0 0;
+            font-size: 20px;
+            font-weight: 700;
+          }
+
+          .search-reputation {
+            margin: 9px 0 0 6px;
+          }
+        }
+
+        &:hover {
+          @include themify(day) {
+            @apply bg-light-400;
+          }
+          @include themify(night) {
+            @apply bg-gray-charcoal;
+          }
+        }
+      }
+    }
+
+    .chat-content:hover {
+      @include themify(day) {
+        background: #eeeeee;
+      }
+      @include themify(night) {
+        @apply bg-gunmetal;
+      }
+    }
+
+    .chats {
+      .not-joined {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 14%;
+      }
+    }
+
+    .import-chats {
+      margin-top: 20px;
+    }
+
+    .manage-chat-key {
+      @apply p-4;
+
+      .private-key {
+        margin: 0;
+      }
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    right: 0;
+    width: 100vw;
+    display: grid;
+    grid-template-rows: min-content 1fr min-content;
+    grid-template-columns: repeat(1, 1fr);
+
+    .chat-header {
+      width: 100vw;
+      grid-row: span 5;
+    }
+
+    .back-arrow-svg {
+      padding: 0;
+    }
+
+    .message-header-content {
+      max-width: 40vw !important;
+    }
+
+    .sender-message-content,
+    .receiver-message-content {
+      max-width: 75vw !important;
+    }
+
+    &.expanded {
+      height: 100vh;
+    }
+
+    .message-header-title {
+      width: 100vw;
+      margin: 0;
+      margin-right: 0.3rem;
+    }
+
+    .chat-body {
+      grid-row: span 95;
+      height: 100%;
+
+      &.current-user,
+      .community {
+        grid-row: span 90;
+      }
+
+      .chat-content {
+        .last-message {
+          max-width: 75vw;
+        }
+      }
+    }
+
+    .chat {
+      grid-row: span 5;
+    }
+  }
+
+  .chat-input {
+    @apply relative;
+
+    .gif-picker {
+      bottom: calc(100% - 1rem);
+      width: calc(100% - -3px);
+      left: 0.25rem;
+      @apply absolute border-t border-[--border-color];
+    }
+  }
+}
diff --git a/src/common/features/chats/components/chat-popup/index.tsx b/src/common/features/chats/components/chat-popup/index.tsx
new file mode 100644
index 00000000000..32cbc38dfc8
--- /dev/null
+++ b/src/common/features/chats/components/chat-popup/index.tsx
@@ -0,0 +1,183 @@
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useLocation } from "react-router";
+import LinearProgress from "../../../../components/linear-progress";
+import ManageChatKey from "../manage-chat-key";
+import ChatInput from "../chat-input";
+import { usePrevious } from "../../../../util/use-previous";
+import "./index.scss";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import { useMount } from "react-use";
+import { classNameObject } from "../../../../helper/class-name-object";
+import { ChatPopupHeader } from "./chat-popup-header";
+import { ChatPopupMessagesList } from "./chat-popup-messages-list";
+import { ChatPopupSearchUser } from "./chat-popup-search-user";
+import { ChatPopupContactsAndChannels } from "./chat-popup-contacts-and-channels";
+import { ChatsWelcome } from "../chats-welcome";
+import { useGetAccountFullQuery } from "../../../../api/queries";
+import {
+  ChatContext,
+  getUserChatPublicKey,
+  useChannelsQuery,
+  useDirectContactsQuery,
+  useJoinChat,
+  useKeysQuery
+} from "@ecency/ns-query";
+import { uploadChatKeys } from "../../utils/upload-chat-keys";
+
+export const ChatPopUp = () => {
+  const { activeUser, global } = useMappedStore();
+
+  const { receiverPubKey, revealPrivateKey, setRevealPrivateKey, setReceiverPubKey } =
+    useContext(ChatContext);
+  const { isLoading: isJoinChatLoading } = useJoinChat(uploadChatKeys);
+
+  const [currentUser, setCurrentUser] = useState("");
+
+  const { privateKey } = useKeysQuery();
+  const { data: directContacts } = useDirectContactsQuery();
+  const directContact = useMemo(
+    () => directContacts?.find((contact) => contact.pubkey === receiverPubKey),
+    [directContacts, receiverPubKey]
+  );
+  const { data: channels, isLoading: isChannelsLoading } = useChannelsQuery();
+  const { data: currentUserAccount } = useGetAccountFullQuery(currentUser);
+
+  const routerLocation = useLocation();
+  const prevActiveUser = usePrevious(activeUser);
+  const chatBodyDivRef = useRef<HTMLDivElement | null>(null);
+
+  const [expanded, setExpanded] = useState(false);
+  const [showSearchUser, setShowSearchUser] = useState(false);
+  const [show, setShow] = useState(false);
+  const [isCommunity, setIsCommunity] = useState(false);
+  const [communityName, setCommunityName] = useState("");
+  const [hasMore, setHasMore] = useState(true);
+
+  const hasUserJoinedChat = useMemo(() => !!privateKey, [privateKey]);
+  const currentContact = useMemo(
+    () => directContacts?.find((dc) => dc.pubkey === receiverPubKey),
+    [receiverPubKey]
+  );
+  const currentChannel = useMemo(
+    () => channels?.find((channel) => channel.communityName === communityName),
+    [communityName, channels]
+  );
+  const isCurrentUser = useMemo(() => !!currentUser, [currentUser]);
+  const canSendMessage = useMemo(
+    () => !currentUser && hasUserJoinedChat && !!privateKey && !isCommunity && !revealPrivateKey,
+    [currentUser, hasUserJoinedChat, privateKey, isCommunity, revealPrivateKey]
+  );
+
+  useMount(() => {
+    setShow(!routerLocation.pathname.match("/chats") && !!activeUser);
+  });
+
+  useEffect(() => {
+    if (currentUserAccount) {
+      setReceiverPubKey(getUserChatPublicKey(currentUserAccount) ?? "");
+    }
+  }, [currentUserAccount]);
+
+  // Show or hide the popup if current pathname was changed or user changed
+  useEffect(() => {
+    setShow(!routerLocation.pathname.match("/chats") && !!activeUser);
+  }, [routerLocation, activeUser]);
+
+  useEffect(() => {
+    if (prevActiveUser?.username !== activeUser?.username) {
+      setIsCommunity(false);
+      setCurrentUser("");
+      setCommunityName("");
+    }
+  }, [global.theme, activeUser]);
+
+  const handleMessageSvgClick = () => {
+    setShowSearchUser(!showSearchUser);
+    setExpanded(true);
+  };
+
+  const handleBackArrowSvg = () => {
+    setCurrentUser("");
+    setCommunityName("");
+    setIsCommunity(false);
+    setShowSearchUser(false);
+    setHasMore(true);
+    setRevealPrivateKey(false);
+  };
+
+  return (
+    <>
+      {show && (
+        <div
+          className={classNameObject({
+            "chatbox-container": true,
+            expanded
+          })}
+        >
+          <ChatPopupHeader
+            currentUser={currentUser}
+            setExpanded={setExpanded}
+            canSendMessage={canSendMessage}
+            expanded={expanded}
+            isCurrentUser={isCurrentUser}
+            communityName={communityName}
+            isCommunity={isCommunity}
+            handleBackArrowSvg={handleBackArrowSvg}
+            handleMessageSvgClick={handleMessageSvgClick}
+            showSearchUser={showSearchUser}
+          />
+          {(isJoinChatLoading || isChannelsLoading) && <LinearProgress />}
+          <div
+            className={`chat-body h-full ${
+              currentUser ? "current-user" : isCommunity ? "community" : ""
+            } ${
+              !hasUserJoinedChat ? "flex items-center justify-center" : hasMore ? "no-scroll" : ""
+            }`}
+            ref={chatBodyDivRef}
+          >
+            {hasUserJoinedChat && !revealPrivateKey ? (
+              <>
+                {currentUser.length !== 0 || communityName.length !== 0 ? (
+                  <ChatPopupMessagesList
+                    currentContact={currentContact}
+                    currentChannel={currentChannel}
+                  />
+                ) : showSearchUser ? (
+                  <ChatPopupSearchUser setCurrentUser={setCurrentUser} />
+                ) : (
+                  <ChatPopupContactsAndChannels
+                    communityClicked={(community: string) => {
+                      setIsCommunity(true);
+                      setCommunityName(community);
+                      setCurrentUser("");
+                      setReceiverPubKey("");
+                    }}
+                    setShowSearchUser={setShowSearchUser}
+                    userClicked={(username) => {
+                      setCurrentUser(username);
+                      setCommunityName("");
+                    }}
+                  />
+                )}
+              </>
+            ) : revealPrivateKey ? (
+              <div className="p-4">
+                <ManageChatKey />
+              </div>
+            ) : (
+              <ChatsWelcome />
+            )}
+          </div>
+          <div className="pl-2">
+            {((isCurrentUser && receiverPubKey) || isCommunity) && (
+              <ChatInput
+                currentContact={currentContact}
+                currentChannel={currentChannel ?? undefined}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/src/common/features/chats/components/chat-profile-box.tsx b/src/common/features/chats/components/chat-profile-box.tsx
new file mode 100644
index 00000000000..aaac49c6e06
--- /dev/null
+++ b/src/common/features/chats/components/chat-profile-box.tsx
@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from "react";
+import UserAvatar from "../../../components/user-avatar";
+import { dateToFormatted } from "../../../helper/parse-date";
+import { _t } from "../../../i18n";
+import { getAccountFull } from "../../../api/hive";
+import { useCommunityCache } from "../../../core";
+
+export interface ProfileData {
+  joiningData: string;
+  about: string | undefined;
+  followers: number | undefined;
+  name: string;
+  username: string;
+}
+
+interface Props {
+  communityName?: string;
+  currentUser?: string;
+}
+
+export default function ChatsProfileBox({ communityName, currentUser }: Props) {
+  const [profileData, setProfileData] = useState<ProfileData>();
+
+  const { data: community } = useCommunityCache(communityName!);
+
+  useEffect(() => {
+    fetchProfileData();
+  }, [communityName, currentUser]);
+
+  const formatFollowers = (count: number | undefined) => {
+    if (count) {
+      return count >= 1e6
+        ? (count / 1e6).toLocaleString() + "M"
+        : count >= 1e3
+        ? (count / 1e3).toLocaleString() + "K"
+        : count.toLocaleString();
+    }
+    return count;
+  };
+
+  const fetchProfileData = async () => {
+    if (community) {
+      setProfileData({
+        joiningData: community?.created_at!,
+        about: community?.about,
+        followers: community?.subscribers,
+        name: community?.title!,
+        username: community?.name!
+      });
+    } else if (currentUser) {
+      const response = await getAccountFull(currentUser.replace("@", ""));
+      setProfileData({
+        joiningData: response.created,
+        about: response.profile?.about,
+        followers: response.follow_stats?.follower_count,
+        name: response.name,
+        username: response.name
+      });
+    }
+  };
+
+  return profileData?.joiningData ? (
+    <div className="flex items-center justify-center p-4">
+      <div className="flex flex-col items-center p-4 border border-[--border-color] rounded-2xl bg-gray-100 dark:bg-gray-900">
+        <UserAvatar username={profileData.username} size="large" />
+        <div className="text-gray-800 dark:text-white mt-2 font-semibold">{profileData.name}</div>
+        {profileData.about?.length !== 0 && (
+          <div className="text-center text-xs">{profileData.about}</div>
+        )}
+
+        <div className="grid grid-cols-2 text-center justify-center pt-4 gap-3 text-gray-600">
+          <div className="flex flex-col gap-2">
+            <div className="text-sm">{_t("chat.joined")}</div>
+            <div className="text-blue-dark-sky">
+              {dateToFormatted(profileData!.joiningData, "LL")}
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="text-sm">{_t("chat.subscribers")}</div>
+            <div className="text-blue-dark-sky">{formatFollowers(profileData!.followers)}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+}
diff --git a/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx b/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx
new file mode 100644
index 00000000000..ed9ebc371a2
--- /dev/null
+++ b/src/common/features/chats/components/chats-community-actions/blocked-users-modal.tsx
@@ -0,0 +1,96 @@
+import { _t } from "../../../../i18n";
+import React, { useMemo } from "react";
+import UserAvatar from "../../../../components/user-avatar";
+import { Table, Td, Th, Tr } from "@ui/table";
+import { Modal, ModalBody, ModalHeader } from "@ui/modal";
+import { Button } from "@ui/button";
+import {
+  useChannelsQuery,
+  useNostrGetUserProfilesQuery,
+  useUpdateChannelBlockedUsers
+} from "@ecency/ns-query";
+
+interface Props {
+  username: string;
+  show: boolean;
+  setShow: (v: boolean) => void;
+}
+
+export function BlockedUsersModal({ username, setShow, show }: Props) {
+  const { data: channels } = useChannelsQuery();
+
+  const currentChannel = useMemo(
+    () => channels?.find((c) => c.communityName === username),
+    [channels]
+  );
+
+  const { data: profiles } = useNostrGetUserProfilesQuery(currentChannel?.removedUserIds ?? []);
+
+  const { mutateAsync: updateBlockedUsers, isLoading: isBlockedUsersLoading } =
+    useUpdateChannelBlockedUsers(currentChannel!!);
+
+  return (
+    <Modal centered={true} show={show} onHide={() => setShow(false)}>
+      <ModalHeader closeButton={true}>{_t("chat.blocked-users-management")}</ModalHeader>
+      <ModalBody>
+        <div className="flex flex-col mb-6 gap-6">
+          {currentChannel?.communityModerators?.length !== 0 ? (
+            <Table className="overflow-x-auto" full={true}>
+              <thead>
+                <Tr>
+                  <Th>{_t("g.username")}</Th>
+                  <Th>{_t("g.status")}</Th>
+                </Tr>
+              </thead>
+              <tbody>
+                {currentChannel?.removedUserIds?.map((user, i) => {
+                  return (
+                    <Tr key={i}>
+                      <Td>
+                        <div className="flex">
+                          <UserAvatar
+                            username={
+                              profiles?.find((profile) => profile.creator === user)?.name ?? ""
+                            }
+                            size="medium"
+                          />{" "}
+                          <span className="mt-2 ml-2 username">
+                            @{profiles?.find((profile) => profile.creator === user)}
+                          </span>
+                        </div>
+                      </Td>
+                      <Td>
+                        <Button
+                          size="sm"
+                          outline={!!currentChannel?.removedUserIds?.includes(user)}
+                          disabled={isBlockedUsersLoading}
+                          onClick={() => {
+                            if (currentChannel?.removedUserIds?.includes(user)) {
+                              updateBlockedUsers(
+                                currentChannel?.removedUserIds?.filter((id) => id !== user)
+                              );
+                            } else {
+                              updateBlockedUsers([...(currentChannel?.removedUserIds ?? []), user]);
+                            }
+                          }}
+                        >
+                          {currentChannel?.removedUserIds?.includes(user)
+                            ? _t("chat.unblock")
+                            : _t("chat.block")}
+                        </Button>
+                      </Td>
+                    </Tr>
+                  );
+                })}
+              </tbody>
+            </Table>
+          ) : (
+            <div className="text-center">
+              <p>{_t("chat.no-admin")}</p>
+            </div>
+          )}
+        </div>
+      </ModalBody>
+    </Modal>
+  );
+}
diff --git a/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx b/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx
new file mode 100644
index 00000000000..6db2579ce1a
--- /dev/null
+++ b/src/common/features/chats/components/chats-community-actions/edit-roles-modal.tsx
@@ -0,0 +1,212 @@
+import { _t } from "../../../../i18n";
+import LinearProgress from "../../../../components/linear-progress";
+import { FormControl, InputGroup } from "@ui/input";
+import React, { useMemo, useState } from "react";
+import { Button } from "@ui/button";
+import { NOSTRKEY } from "../chat-popup/chat-constants";
+import UserAvatar from "../../../../components/user-avatar";
+import { ROLES } from "../../../../store/communities";
+import { error } from "../../../../components/feedback";
+import useDebounce from "react-use/lib/useDebounce";
+import { getAccountFull } from "../../../../api/hive";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import { Table, Td, Th, Tr } from "@ui/table";
+import { Spinner } from "@ui/spinner";
+import { Modal, ModalBody, ModalHeader } from "@ui/modal";
+import { CommunityModerator, useChannelsQuery, useUpdateChannelModerator } from "@ecency/ns-query";
+
+interface Props {
+  username: string;
+  show: boolean;
+  setShow: (v: boolean) => void;
+}
+
+const roles = [ROLES.ADMIN, ROLES.MOD, ROLES.GUEST];
+
+export function EditRolesModal({ username, setShow, show }: Props) {
+  const { activeUser } = useMappedStore();
+  const { data: channels } = useChannelsQuery();
+
+  const [inProgress, setInProgress] = useState(false);
+  const [user, setUser] = useState("");
+  const [moderator, setModerator] = useState<CommunityModerator>();
+  const [role, setRole] = useState("admin");
+  const [addRoleError, setAddRoleError] = useState("");
+
+  const currentChannel = useMemo(
+    () => channels?.find((c) => c.communityName === username),
+    [channels]
+  );
+
+  const { mutateAsync: updateModerator, isLoading: isUpdateModeratorLoading } =
+    useUpdateChannelModerator(currentChannel);
+
+  useDebounce(
+    async () => {
+      if (user.length === 0) {
+        setAddRoleError("");
+        setInProgress(false);
+        return;
+      }
+      try {
+        const response = await getAccountFull(user);
+        if (!response) {
+          setAddRoleError("Account does not exist");
+          return;
+        }
+
+        if (!response.posting_json_metadata) {
+          setAddRoleError("This user hasn't joined the chat yet.");
+          return;
+        }
+
+        const { posting_json_metadata } = response;
+        const profile = JSON.parse(posting_json_metadata).profile;
+
+        if (!profile || !profile.hasOwnProperty(NOSTRKEY)) {
+          setAddRoleError("You cannot set this user because this user hasn't joined the chat yet.");
+          return;
+        }
+
+        const alreadyExists = currentChannel?.communityModerators?.some(
+          (moderator) => moderator.name === response.name
+        );
+
+        if (alreadyExists) {
+          setAddRoleError("You have already assigned some rule to this user.");
+          setInProgress(false);
+        } else {
+          const moderator = {
+            name: user,
+            pubkey: profile.nsKey,
+            role: role
+          };
+          setModerator(moderator);
+          setAddRoleError("");
+        }
+      } catch (err) {
+        error(err as string);
+      } finally {
+        setInProgress(false);
+      }
+    },
+    200,
+    [user, role]
+  );
+
+  return (
+    <Modal centered={true} show={show} onHide={() => setShow(false)}>
+      <ModalHeader closeButton={true}>{_t("chat.edit-community-roles")}</ModalHeader>
+      {inProgress && <LinearProgress />}
+      <ModalBody>
+        <div className={`flex flex-col mb-6 gap-6 ${inProgress ? "in-progress" : ""}`}>
+          <div className="grid grid-cols-12">
+            <div className="col-span-12 sm:col-span-2">{_t("community-role-edit.username")}</div>
+            <div className="col-span-12 sm:col-span-10">
+              <InputGroup prepend="@">
+                <FormControl
+                  type="text"
+                  autoFocus={user === ""}
+                  placeholder={_t("community-role-edit.username").toLowerCase()}
+                  value={user}
+                  onChange={(e) => {
+                    setUser(e.target.value);
+                    setInProgress(true);
+                  }}
+                  className={addRoleError ? "is-invalid" : ""}
+                />
+              </InputGroup>
+              {addRoleError && <div className="text-danger">{addRoleError}</div>}
+            </div>
+          </div>
+          <div className="grid grid-cols-12">
+            <div className="col-span-12 sm:col-span-2">{_t("community-role-edit.role")}</div>
+            <div className="col-span-12 sm:col-span-10">
+              <FormControl
+                type="select"
+                value={role}
+                onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setRole(e.target.value)}
+              >
+                {roles.map((r, i) => (
+                  <option key={i} value={r}>
+                    {r}
+                  </option>
+                ))}
+              </FormControl>
+            </div>
+          </div>
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              onClick={() => {
+                if (moderator) {
+                  updateModerator(moderator);
+                }
+              }}
+              disabled={isUpdateModeratorLoading || addRoleError.length !== 0 || user.length === 0}
+            >
+              {_t("chat.add")}
+            </Button>
+          </div>
+        </div>
+        {currentChannel?.communityModerators?.length !== 0 ? (
+          <>
+            <Table full={true}>
+              <thead>
+                <Tr>
+                  <Th style={{ width: "50%" }}>{_t("community.roles-account")}</Th>
+                  <Th style={{ width: "50%" }}>{_t("community.roles-role")}</Th>
+                </Tr>
+              </thead>
+              <tbody>
+                {currentChannel?.communityModerators &&
+                  currentChannel?.communityModerators!.map((moderator, i) => {
+                    return (
+                      <Tr key={i}>
+                        <Td>
+                          <div className="flex">
+                            <UserAvatar username={moderator.name} size="medium" />{" "}
+                            <span className="mt-2 ml-2 username">@{moderator.name}</span>
+                          </div>
+                        </Td>
+                        <Td>
+                          {moderator.name === activeUser?.username ? (
+                            <div style={{ margin: "5px 0 0 12px" }}>{moderator.role}</div>
+                          ) : (
+                            <InputGroup
+                              prepend={
+                                isUpdateModeratorLoading && <Spinner className="w-3.5 h-3.5" />
+                              }
+                            >
+                              <FormControl
+                                type="select"
+                                value={moderator.role}
+                                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                                  updateModerator({ ...moderator, role: e.target.value })
+                                }
+                                disabled={isUpdateModeratorLoading}
+                              >
+                                {roles.map((r, i) => (
+                                  <option key={i} value={r}>
+                                    {r}
+                                  </option>
+                                ))}
+                              </FormControl>
+                            </InputGroup>
+                          )}
+                        </Td>
+                      </Tr>
+                    );
+                  })}
+              </tbody>
+            </Table>
+          </>
+        ) : (
+          <div className="text-center">
+            <p>{_t("chat.no-admin")}</p>
+          </div>
+        )}
+      </ModalBody>
+    </Modal>
+  );
+}
diff --git a/src/common/features/chats/components/chats-community-actions/index.tsx b/src/common/features/chats/components/chats-community-actions/index.tsx
new file mode 100644
index 00000000000..e70ed0e5cfc
--- /dev/null
+++ b/src/common/features/chats/components/chats-community-actions/index.tsx
@@ -0,0 +1,90 @@
+import React, { useMemo, useState } from "react";
+import { History } from "history";
+import { chatLeaveSvg, editSVG, kebabMenuSvg, linkSvg, removeUserSvg } from "../../../../img/svg";
+import { _t } from "../../../../i18n";
+import { useMappedStore } from "../../../../store/use-mapped-store";
+import { success } from "../../../../components/feedback";
+import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
+import { EditRolesModal } from "./edit-roles-modal";
+import { Button } from "@ui/button";
+import { BlockedUsersModal } from "./blocked-users-modal";
+import { copyToClipboard, useChannelsQuery, useLeaveCommunityChannel } from "@ecency/ns-query";
+
+interface Props {
+  history: History;
+  from?: string;
+  username: string;
+}
+
+const ChatsCommunityDropdownMenu = ({ history, username }: Props) => {
+  const { activeUser } = useMappedStore();
+
+  const [showEditRolesModal, setShowEditRolesModal] = useState(false);
+  const [showBlockedUsersModal, setShowBlockedUsersModal] = useState(false);
+
+  const { data: channels } = useChannelsQuery();
+
+  const currentChannel = useMemo(
+    () => channels?.find((channel) => channel.communityName === username),
+    [channels, username]
+  );
+  const communityAdmins = useMemo(
+    () => (currentChannel?.communityModerators ?? []).map((mod) => mod.name),
+    [currentChannel]
+  );
+
+  const { mutateAsync: leaveChannel } = useLeaveCommunityChannel(() => history?.push("/chats"));
+
+  return (
+    <>
+      <Dropdown>
+        <DropdownToggle>
+          <Button icon={kebabMenuSvg} appearance="gray-link" noPadding={true} />
+        </DropdownToggle>
+        <DropdownMenu align="right">
+          <DropdownItemWithIcon
+            icon={linkSvg}
+            label={_t("chat.invite")}
+            onClick={() => {
+              copyToClipboard(
+                `https://ecency.com/created/${currentChannel?.communityName}?communityid=${currentChannel?.id}`
+              );
+              success("Link copied into clipboard.");
+            }}
+          />
+          <DropdownItemWithIcon
+            icon={chatLeaveSvg}
+            label={_t("chat.leave")}
+            onClick={() => leaveChannel(currentChannel?.id!!)}
+          />
+          {activeUser?.username === currentChannel?.communityName && (
+            <DropdownItemWithIcon
+              icon={editSVG}
+              label={_t("chat.edit-roles")}
+              onClick={() => setShowEditRolesModal(true)}
+            />
+          )}
+          {communityAdmins && communityAdmins.includes(activeUser?.username!) && (
+            <DropdownItemWithIcon
+              icon={removeUserSvg}
+              label={_t("chat.blocked-users")}
+              onClick={() => setShowBlockedUsersModal(true)}
+            />
+          )}
+        </DropdownMenu>
+      </Dropdown>
+      <EditRolesModal
+        show={showEditRolesModal}
+        setShow={setShowEditRolesModal}
+        username={currentChannel?.communityName!!}
+      />
+      <BlockedUsersModal
+        username={currentChannel?.communityName!!}
+        show={showBlockedUsersModal}
+        setShow={setShowBlockedUsersModal}
+      />
+    </>
+  );
+};
+
+export default ChatsCommunityDropdownMenu;
diff --git a/src/common/features/chats/components/chats-confirmation-modal/index.scss b/src/common/features/chats/components/chats-confirmation-modal/index.scss
new file mode 100644
index 00000000000..55c7e9b13c0
--- /dev/null
+++ b/src/common/features/chats/components/chats-confirmation-modal/index.scss
@@ -0,0 +1,11 @@
+@import "src/style/vars_mixins";
+
+.join-community-dialog-body {
+  font-size: 18px;
+  margin-top: 12px;
+}
+
+.join-community-confirm-buttons {
+  text-align: right;
+  margin-top: 2rem;
+}
diff --git a/src/common/features/chats/components/chats-confirmation-modal/index.tsx b/src/common/features/chats/components/chats-confirmation-modal/index.tsx
new file mode 100644
index 00000000000..4ee14ba3739
--- /dev/null
+++ b/src/common/features/chats/components/chats-confirmation-modal/index.tsx
@@ -0,0 +1,72 @@
+import React, { useContext, useEffect, useState } from "react";
+import { _t } from "../../../../i18n";
+import LinearProgress from "../../../../components/linear-progress";
+
+import "./index.scss";
+import { Button } from "@ui/button";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "@ui/modal";
+import { ChatContext } from "@ecency/ns-query";
+
+interface Props {
+  actionType: string;
+  content: string;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+const ChatsConfirmationModal = (props: Props) => {
+  const { onClose, onConfirm, content, actionType } = props;
+  const { hasUserJoinedChat } = useContext(ChatContext);
+  const [inProgress, setInProgress] = useState(false);
+
+  useEffect(() => {
+    if (hasUserJoinedChat && inProgress) {
+      setInProgress(false);
+    }
+  }, [hasUserJoinedChat]);
+  const confirmationModalContent = (
+    <>
+      <div className="join-community-dialog-header border-bottom">
+        <div className="join-community-dialog-titles">
+          <h2 className="join-community-main-title">{actionType}</h2>
+        </div>
+      </div>
+      {inProgress && <LinearProgress />}
+      <div className="join-community-dialog-body">{content}</div>
+    </>
+  );
+
+  return (
+    <Modal
+      animation={false}
+      show={true}
+      centered={true}
+      onHide={onClose}
+      className="chats-dialog"
+      size="lg"
+    >
+      <ModalHeader thin={true} closeButton={true} />
+      <ModalBody className="chat-modals-body">{confirmationModalContent}</ModalBody>
+      <ModalFooter className="flex justify-end gap-4 items-center">
+        <Button
+          outline={true}
+          onClick={() => {
+            onClose();
+          }}
+        >
+          {_t("chat.close")}
+        </Button>
+        <Button
+          onClick={() => {
+            setInProgress(true);
+            onConfirm();
+          }}
+        >
+          {_t("chat.confirm")}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default ChatsConfirmationModal;
diff --git a/src/common/features/chats/components/chats-default-screen.tsx b/src/common/features/chats/components/chats-default-screen.tsx
new file mode 100644
index 00000000000..5c0a1c39500
--- /dev/null
+++ b/src/common/features/chats/components/chats-default-screen.tsx
@@ -0,0 +1,55 @@
+import { _t } from "../../../i18n";
+import { Alert } from "@ui/alert";
+import { Button } from "@ui/button";
+import moment from "moment";
+import React, { HTMLProps, useContext, useMemo } from "react";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import useLocalStorage from "react-use/lib/useLocalStorage";
+import { PREFIX } from "../../../util/local-storage";
+import { classNameObject } from "../../../helper/class-name-object";
+import { ChatContext } from "@ecency/ns-query";
+
+export function ChatsDefaultScreen(props: HTMLProps<HTMLDivElement>) {
+  const { activeUser } = useMappedStore();
+  const { setRevealPrivateKey } = useContext(ChatContext);
+
+  const [lastKeysSavingTime, setLastKeysSaving] = useLocalStorage<string>(PREFIX + "_chats_lkst");
+
+  // We offer user to save account credentials each month
+  const isLastKeysSavingTimeExpired = useMemo(
+    () =>
+      lastKeysSavingTime
+        ? moment(new Date(lastKeysSavingTime)).isBefore(moment().subtract(30, "days"))
+        : true,
+    [lastKeysSavingTime]
+  );
+
+  return (
+    <div
+      {...props}
+      className={classNameObject({
+        "flex flex-col justify-center items-center px-4 w-full h-full": true,
+        [props.className ?? ""]: !!props.className
+      })}
+    >
+      <div className="text-xl text-blue-dark-sky mb-4 font-semibold">
+        {_t("chat.welcome.hello")}, @{activeUser?.username}
+      </div>
+      <div>{_t("chat.welcome.start-description")}</div>
+      {isLastKeysSavingTimeExpired && (
+        <Alert appearance="primary" className="max-w-[550px] flex items-center mt-4 gap-4">
+          <span>{_t("chat.warn-key-saving")}</span>
+          <Button
+            className="whitespace-nowrap"
+            onClick={() => {
+              setRevealPrivateKey(true);
+              setLastKeysSaving(moment().toDate().toISOString());
+            }}
+          >
+            {_t("chat.view-and-save")}
+          </Button>
+        </Alert>
+      )}
+    </div>
+  );
+}
diff --git a/src/common/features/chats/components/chats-direct-messages/index.scss b/src/common/features/chats/components/chats-direct-messages/index.scss
new file mode 100644
index 00000000000..a0c47aaeb67
--- /dev/null
+++ b/src/common/features/chats/components/chats-direct-messages/index.scss
@@ -0,0 +1,19 @@
+@import "src/style/vars_mixins";
+
+.direct-messages {
+  padding-bottom: 15px;
+
+  .custom-divider {
+    .custom-divider-text {
+      margin-bottom: 1rem;
+      font-size: 14px;
+    }
+  }
+  
+  .not-joined {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 14%;
+  }
+}
diff --git a/src/common/features/chats/components/chats-direct-messages/index.tsx b/src/common/features/chats/components/chats-direct-messages/index.tsx
new file mode 100644
index 00000000000..60e3b4e9f14
--- /dev/null
+++ b/src/common/features/chats/components/chats-direct-messages/index.tsx
@@ -0,0 +1,134 @@
+import React, { useContext, useMemo, useState } from "react";
+import { _t } from "../../../../i18n";
+import "./index.scss";
+import { ChatMessageItem } from "../chat-message-item";
+import { Button } from "@ui/button";
+import { useInviteViaPostComment } from "../../mutations";
+import { FormControl } from "@ui/input";
+import { Alert } from "@ui/alert";
+import {
+  ChatContext,
+  checkContiguousMessage,
+  DirectContact,
+  DirectMessage,
+  useDirectMessagesQuery,
+  useKeysQuery
+} from "@ecency/ns-query";
+import { ChatFloatingDate } from "../chat-floating-date";
+import { differenceInCalendarDays } from "date-fns";
+import { groupMessages } from "../../utils";
+
+interface Props {
+  directMessages: DirectMessage[];
+  currentContact: DirectContact;
+  isPage?: boolean;
+}
+
+export default function ChatsDirectMessages(props: Props) {
+  const { directMessages } = props;
+
+  const { receiverPubKey } = useContext(ChatContext);
+
+  const [initiatedInviting, setInitiatedInviting] = useState(false);
+  const [invitationText, setInvitationText] = useState(
+    "Hi! Let's start messaging privately. Register an account on [https://ecency.com/chats](https://ecency.com/chats)"
+  );
+  const { publicKey } = useKeysQuery();
+  const { fetchNextPage } = useDirectMessagesQuery(props.currentContact);
+
+  const {
+    mutateAsync: invite,
+    isLoading: isInviting,
+    isSuccess: isInvited
+  } = useInviteViaPostComment(props.currentContact?.name);
+
+  const groupedDirectMessages = useMemo(() => groupMessages(directMessages), [directMessages]);
+
+  return (
+    <>
+      <div className="direct-messages">
+        {receiverPubKey ? (
+          <>
+            {groupedDirectMessages?.map(([date, messages], i) => {
+              const diff =
+                i > 0 ? differenceInCalendarDays(date, groupedDirectMessages[i - 1][0]) : 1;
+              return (
+                <React.Fragment key={date.getTime()}>
+                  {diff > 0 && <ChatFloatingDate currentDate={date} isPage={props.isPage} />}
+                  {messages.map((message, j) => (
+                    <ChatMessageItem
+                      showDate={j === messages.length - 1}
+                      key={message.id}
+                      currentContact={props.currentContact}
+                      type={message.creator !== publicKey ? "receiver" : "sender"}
+                      message={message}
+                      isSameUser={checkContiguousMessage(message, i, directMessages)}
+                      onAppear={() =>
+                        setTimeout(
+                          () =>
+                            directMessages?.length - 1 === i
+                              ? document
+                                  .querySelector(`[data-message-id="${message.id}"]`)
+                                  ?.scrollIntoView()
+                              : {},
+                          100
+                        )
+                      }
+                      onInViewport={() =>
+                        i === groupedDirectMessages.length - 1 &&
+                        j === messages.length - 1 &&
+                        fetchNextPage({
+                          pageParam: message.created * 1000
+                        })
+                      }
+                    />
+                  ))}
+                </React.Fragment>
+              );
+            })}
+          </>
+        ) : (
+          <div className="flex flex-col justify-center text-center items-center p-4">
+            <div className="font-bold">{_t("chat.welcome.oops")}</div>
+            <div className="text-gray-600 dark:text-gray-400 mb-4">
+              {_t("chat.welcome.user-not-joined-yet")}
+            </div>
+            {!isInvited &&
+              (initiatedInviting ? (
+                <div className="flex flex-col gap-4 items-center">
+                  <Alert>{_t("chat.specify-invitation-message")}</Alert>
+                  <FormControl
+                    type="textarea"
+                    value={invitationText}
+                    onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                      setInvitationText(e.target.value)
+                    }
+                  />
+                  <Button
+                    outline={true}
+                    size="sm"
+                    disabled={isInviting}
+                    onClick={async () => {
+                      await invite(invitationText);
+                      setInitiatedInviting(false);
+                    }}
+                  >
+                    {_t("chat.send-invite")}
+                  </Button>
+                </div>
+              ) : (
+                <Button outline={true} size="sm" onClick={() => setInitiatedInviting(true)}>
+                  {_t("chat.invite")}
+                </Button>
+              ))}
+            {isInvited && (
+              <Alert className="my-4" appearance="success">
+                {_t("chat.successfully-invited")}
+              </Alert>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/chats-dropdown-menu.tsx b/src/common/features/chats/components/chats-dropdown-menu.tsx
new file mode 100644
index 00000000000..335172a480f
--- /dev/null
+++ b/src/common/features/chats/components/chats-dropdown-menu.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { History } from "history";
+import { chatKeySvg, extendedView, kebabMenuSvg, keySvg } from "../../../img/svg";
+import { _t } from "../../../i18n";
+import { Dropdown, DropdownItemWithIcon, DropdownMenu, DropdownToggle } from "@ui/dropdown";
+import { Button } from "@ui/button";
+import { history } from "../../../store";
+import { useLocation } from "react-router";
+import { useLogoutFromChats } from "@ecency/ns-query";
+
+interface Props {
+  history: History | null;
+  onManageChatKey?: () => void;
+  currentUser?: string;
+  communityName?: string;
+}
+
+const ChatsDropdownMenu = (props: Props) => {
+  const { mutateAsync: logout } = useLogoutFromChats();
+  const location = useLocation();
+
+  const handleExtendedView = () => {
+    if (props.currentUser) {
+      history?.push(`/chats/@${props.currentUser}`);
+    } else if (props.communityName) {
+      history?.push(`/chats/${props.communityName}`);
+    } else {
+      history?.push("/chats");
+    }
+  };
+
+  return (
+    <Dropdown>
+      <DropdownToggle>
+        <Button size="sm" appearance="gray-link">
+          {kebabMenuSvg}
+        </Button>
+        <DropdownMenu align="right">
+          {!location.pathname.startsWith("/chats") && (
+            <DropdownItemWithIcon
+              icon={extendedView}
+              label={_t("chat.extended-view")}
+              onClick={(e: { stopPropagation: () => void }) => {
+                e.stopPropagation();
+                handleExtendedView();
+              }}
+            />
+          )}
+          <DropdownItemWithIcon
+            label={_t("chat.manage-chat-key")}
+            icon={chatKeySvg}
+            onClick={() => props.onManageChatKey?.()}
+          />
+          <DropdownItemWithIcon icon={keySvg} label={_t("chat.logout")} onClick={() => logout()} />
+        </DropdownMenu>
+      </DropdownToggle>
+    </Dropdown>
+  );
+};
+
+export default ChatsDropdownMenu;
diff --git a/src/common/features/chats/components/chats-import.tsx b/src/common/features/chats/components/chats-import.tsx
new file mode 100644
index 00000000000..1eb8aae6865
--- /dev/null
+++ b/src/common/features/chats/components/chats-import.tsx
@@ -0,0 +1,52 @@
+import { Button } from "@ui/button";
+import { _t } from "../../../i18n";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "@ui/modal";
+import { CodeInput, FormControl } from "@ui/input";
+import React, { useState } from "react";
+import { Alert } from "@ui/alert";
+import { useImportChatByKeys } from "@ecency/ns-query";
+import { uploadChatKeys } from "../utils/upload-chat-keys";
+
+export function ChatsImport() {
+  const [step, setStep] = useState(0);
+  const [ecencyChatKey, setEcencyChatKey] = useState("");
+  const [pin, setPin] = useState("");
+
+  const { mutateAsync: importChatByKey } = useImportChatByKeys(uploadChatKeys);
+
+  return (
+    <>
+      <Button outline={true} onClick={() => setStep(1)}>
+        {_t("chat.import.button")}
+      </Button>
+      {step === 1 && (
+        <Modal centered={true} show={[1, 2].includes(step)} onHide={() => setStep(0)}>
+          <ModalHeader closeButton={true}>{_t("chat.import.title")}</ModalHeader>
+          <ModalBody>
+            <div className="text-gray-600 mb-4">{_t("chat.import.description")}</div>
+            <div className="text-sm p-3">{_t("chat.key")}</div>
+            <FormControl
+              className="mb-4"
+              type="text"
+              value={ecencyChatKey}
+              onChange={(e) => setEcencyChatKey(e.target.value)}
+            />
+            <Alert appearance="primary">{_t("chat.create-pin-description")}</Alert>
+            <CodeInput value={pin} setValue={setPin} codeSize={8} />
+          </ModalBody>
+          <ModalFooter className="flex justify-end items-center gap-3">
+            <Button appearance="secondary" onClick={() => setStep(0)}>
+              {_t("g.cancel")}
+            </Button>
+            <Button
+              disabled={!ecencyChatKey || pin.length < 7}
+              onClick={() => importChatByKey({ ecencyChatKey, pin })}
+            >
+              {_t("chat.import.button")}
+            </Button>
+          </ModalFooter>
+        </Modal>
+      )}
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/chats-scroller/index.scss b/src/common/features/chats/components/chats-scroller/index.scss
new file mode 100644
index 00000000000..8493b3b827e
--- /dev/null
+++ b/src/common/features/chats/components/chats-scroller/index.scss
@@ -0,0 +1,33 @@
+@import "src/style/vars_mixins";
+
+.scroller {
+  position: sticky;
+  width: 33px;
+  height: 33px;
+  border-radius: 50%;
+  float: right;
+  z-index: 9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  @include themify(day) {
+    background: #e4e6eb;
+    @apply border border-light-500;
+  }
+  @include themify(night) {
+    background: #0f223a;
+  }
+
+  svg {
+    @include themify(day) {
+      @apply text-blue-dark-sky;
+    }
+    @include themify(night) {
+      @apply text-white;
+    }
+
+    width: 20px;
+    height: 20px;
+  }
+}
\ No newline at end of file
diff --git a/src/common/features/chats/components/chats-scroller/index.tsx b/src/common/features/chats/components/chats-scroller/index.tsx
new file mode 100644
index 00000000000..8cec4b490d5
--- /dev/null
+++ b/src/common/features/chats/components/chats-scroller/index.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import Tooltip from "../../../../components/tooltip";
+
+import { _t } from "../../../../i18n";
+import { chevronDownSvgForSlider, chevronUpSvg } from "../../../../img/svg";
+
+import "./index.scss";
+
+interface Props {
+  bodyRef: React.RefObject<HTMLDivElement>;
+  isScrollToTop: boolean;
+  isScrollToBottom: boolean;
+  marginRight: string;
+}
+
+export default function ChatsScroller(props: Props) {
+  const { bodyRef, isScrollToTop, isScrollToBottom, marginRight } = props;
+
+  const scrollerClicked = () => {
+    bodyRef?.current?.scroll({
+      top: isScrollToBottom ? bodyRef.current?.scrollHeight : 0,
+      behavior: "auto"
+    });
+  };
+
+  return (
+    <Tooltip content={isScrollToTop ? _t("scroll-to-top.title") : _t("chat.scroll-to-bottom")}>
+      <div
+        className="scroller"
+        style={{ bottom: isScrollToBottom ? "20px" : "55px", marginRight: marginRight }}
+        onClick={scrollerClicked}
+      >
+        {isScrollToTop ? chevronUpSvg : chevronDownSvgForSlider}
+      </div>
+    </Tooltip>
+  );
+}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
new file mode 100644
index 00000000000..439f828e0ac
--- /dev/null
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
@@ -0,0 +1,45 @@
+import { Link } from "react-router-dom";
+import React, { useContext, useMemo } from "react";
+import UserAvatar from "../../../../components/user-avatar";
+import { classNameObject } from "../../../../helper/class-name-object";
+import { Channel, ChatContext, getRelativeDate, useLastMessageQuery } from "@ecency/ns-query";
+
+interface Props {
+  username: string;
+  channel: Channel;
+  isChannel: boolean;
+}
+
+export function ChatSidebarChannel({ channel, username, isChannel }: Props) {
+  const { revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
+
+  const lastMessage = useLastMessageQuery(undefined, channel);
+
+  const rawUsername = useMemo(() => username?.replace("@", "") ?? "", [username]);
+  const lastMessageDate = useMemo(() => getRelativeDate(lastMessage?.created), [lastMessage]);
+
+  return (
+    <Link
+      className={classNameObject({
+        "flex items-center text-dark-200 gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800":
+          true,
+        "bg-gray-100 dark:bg-gray-800": rawUsername === channel.communityName && isChannel
+      })}
+      to={`/chats/${channel.communityName}/channel`}
+      onClick={() => {
+        if (revealPrivateKey) {
+          setRevealPrivateKey(false);
+        }
+      }}
+    >
+      <UserAvatar username={channel.communityName!} size="medium" />
+      <div className="flex flex-col w-[calc(100%-40px-0.75rem)]">
+        <div className="flex justify-between w-full items-center">
+          <div className="font-semibold truncate dark:text-white">{channel.name}</div>
+          <div className="text-xs text-gray-500">{lastMessageDate}</div>
+        </div>
+        <div className="text-sm text-gray-600 truncate">{lastMessage?.content}</div>
+      </div>
+    </Link>
+  );
+}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
new file mode 100644
index 00000000000..28869144751
--- /dev/null
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -0,0 +1,46 @@
+import { Link } from "react-router-dom";
+import React, { useContext, useMemo } from "react";
+import UserAvatar from "../../../../components/user-avatar";
+import { classNameObject } from "../../../../helper/class-name-object";
+import { ChatContext, DirectContact, getRelativeDate, useLastMessageQuery } from "@ecency/ns-query";
+
+interface Props {
+  contact: DirectContact;
+  username: string;
+}
+
+export function ChatSidebarDirectContact({ contact, username }: Props) {
+  const { receiverPubKey, setReceiverPubKey, revealPrivateKey, setRevealPrivateKey } =
+    useContext(ChatContext);
+
+  const lastMessage = useLastMessageQuery(contact);
+  const rawUsername = useMemo(() => username?.replace("@", "") ?? "", [username]);
+  const lastMessageDate = useMemo(() => getRelativeDate(lastMessage?.created), [lastMessage]);
+
+  return (
+    <Link
+      className={classNameObject({
+        "flex items-center text-dark-200 gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800":
+          true,
+        "bg-gray-100 dark:bg-gray-800":
+          rawUsername === contact.name && receiverPubKey === contact.pubkey
+      })}
+      to={`/chats/@${contact.name}`}
+      onClick={() => {
+        setReceiverPubKey(contact.pubkey);
+        if (revealPrivateKey) {
+          setRevealPrivateKey(false);
+        }
+      }}
+    >
+      <UserAvatar username={contact.name} size="medium" />
+      <div className="flex flex-col w-[calc(100%-40px-0.75rem)]">
+        <div className="flex justify-between w-full items-center">
+          <div className="font-semibold truncate dark:text-white">{contact.name}</div>
+          <div className="text-xs text-gray-500">{lastMessageDate}</div>
+        </div>
+        <div className="text-sm text-gray-600 truncate">{lastMessage?.content}</div>
+      </div>
+    </Link>
+  );
+}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
new file mode 100644
index 00000000000..2dcfaf38d49
--- /dev/null
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-header.tsx
@@ -0,0 +1,32 @@
+import { _t } from "../../../../i18n";
+import ChatsDropdownMenu from "../chats-dropdown-menu";
+import React, { useContext } from "react";
+import { History } from "history";
+import { ChatContext, useKeysQuery } from "@ecency/ns-query";
+
+interface Props {
+  history: History;
+}
+
+export function ChatSidebarHeader({ history }: Props) {
+  const { privateKey } = useKeysQuery();
+  const { revealPrivateKey, setRevealPrivateKey } = useContext(ChatContext);
+
+  return (
+    <div className="sticky top-0 z-10 bg-white flex items-center justify-between border-b border-[--border-color] pl-4 pr-2 py-3 gap-4">
+      <div className="flex items-center gap-2">
+        <div className="font-semibold text-gray-600 text-sm">{_t("chat.title")}</div>
+      </div>
+      <div className="flex items-center">
+        {!!privateKey && (
+          <div className="chat-menu">
+            <ChatsDropdownMenu
+              onManageChatKey={() => setRevealPrivateKey(!revealPrivateKey)}
+              history={history}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
new file mode 100644
index 00000000000..25eba44e392
--- /dev/null
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search-item.tsx
@@ -0,0 +1,47 @@
+import accountReputation from "../../../../helper/account-reputation";
+import { Link } from "react-router-dom";
+import React, { createElement, useMemo } from "react";
+import UserAvatar from "../../../../components/user-avatar";
+import isCommunity from "../../../../helper/is-community";
+import { AccountWithReputation } from "@ecency/ns-query";
+import { Community } from "../../../../store/communities";
+
+interface Props {
+  item: AccountWithReputation | Community;
+  onClick: () => void;
+}
+
+export function ChatSidebarSearchItem({ item, onClick }: Props) {
+  const username = useMemo(() => {
+    if ("account" in item) {
+      return isCommunity(item.account) ? item.account : "@" + item.account;
+    }
+    return item.name;
+  }, [item]);
+
+  return createElement(
+    Link,
+    {
+      to: `/chats/${username}`,
+      className:
+        "flex items-center cursor-pointer justify-between gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800",
+      onClick
+    },
+    <>
+      <div className="flex items-center gap-3">
+        <UserAvatar username={username} size="medium" />
+        <div>
+          <div className="user-name text-dark-200 dark:text-white">
+            {"account" in item ? item.account : item.title}
+          </div>
+          <div className="text-gray-600 dark:text-gray-400 text-xs">
+            {isCommunity(username) ? "Community" : "User"}
+          </div>
+        </div>
+      </div>
+      {"reputation" in item && (
+        <span className="user-reputation">({accountReputation(item.reputation)})</span>
+      )}
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
new file mode 100644
index 00000000000..89c317067a5
--- /dev/null
+++ b/src/common/features/chats/components/chats-sidebar/chat-sidebar-search.tsx
@@ -0,0 +1,41 @@
+import { FormControl } from "@ui/input";
+import { _t } from "../../../../i18n";
+import React, { useState } from "react";
+import useDebounce from "react-use/lib/useDebounce";
+import LinearProgress from "../../../../components/linear-progress";
+import { useSearchUsersQuery } from "../../queries";
+import { useSearchCommunitiesQuery } from "../../queries/search-communities-query";
+
+interface Props {
+  setSearch: (v: string) => void;
+}
+
+export function ChatSidebarSearch({ setSearch: emitSearch }: Props) {
+  const [search, setSearch] = useState("");
+  const { isLoading, refetch } = useSearchUsersQuery(search);
+  const { isLoading: isCommunitiesLoading, refetch: refetchCommunities } =
+    useSearchCommunitiesQuery(search);
+
+  useDebounce(
+    async () => {
+      await Promise.all([refetch(), refetchCommunities()]);
+      emitSearch(search);
+    },
+    500,
+    [search]
+  );
+
+  return (
+    <>
+      <div className="bg-gray-100 dark:bg-dark-200 p-3 border-b border-[--border-color]">
+        <FormControl
+          type="text"
+          placeholder={_t("chat.search")}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+      </div>
+      {(isLoading || isCommunitiesLoading) && <LinearProgress />}
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
new file mode 100644
index 00000000000..a55680672dc
--- /dev/null
+++ b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -0,0 +1,87 @@
+import React, { useContext, useState } from "react";
+import { History } from "history";
+import { ChatSidebarHeader } from "./chat-sidebar-header";
+import { ChatSidebarSearch } from "./chat-sidebar-search";
+import { ChatSidebarSearchItem } from "./chat-sidebar-search-item";
+import { ChatSidebarDirectContact } from "./chat-sidebar-direct-contact";
+import { _t } from "../../../../i18n";
+import { ChatSidebarChannel } from "./chat-sidebar-channel";
+import { ChatContext, useChannelsQuery, useDirectContactsQuery } from "@ecency/ns-query";
+import { useSearchUsersQuery } from "../../queries";
+import { useSearchCommunitiesQuery } from "../../queries/search-communities-query";
+
+interface Props {
+  username: string;
+  history: History;
+  isChannel: boolean;
+}
+
+export default function ChatsSideBar(props: Props) {
+  const { username } = props;
+  const { setRevealPrivateKey } = useContext(ChatContext);
+
+  const { data: directContacts } = useDirectContactsQuery();
+  const { data: channels } = useChannelsQuery();
+  const chatsSideBarRef = React.createRef<HTMLDivElement>();
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showDivider, setShowDivider] = useState(false);
+
+  const { data: searchUsers } = useSearchUsersQuery(searchQuery);
+  const { data: searchCommunities } = useSearchCommunitiesQuery(searchQuery);
+
+  return (
+    <div className="flex flex-col h-full">
+      <ChatSidebarHeader history={props.history} />
+      <ChatSidebarSearch setSearch={setSearchQuery} />
+      {showDivider && <div className="divider" />}
+      <div className="flex flex-col" ref={chatsSideBarRef}>
+        {searchQuery ? (
+          [...searchUsers, ...searchCommunities].map((item) => (
+            <ChatSidebarSearchItem
+              item={item}
+              onClick={() => {
+                setSearchQuery("");
+                setRevealPrivateKey(false);
+              }}
+              key={"account" in item ? item.account : item.id}
+            />
+          ))
+        ) : (
+          <>
+            {channels?.length !== 0 && (
+              <div className="mt-4 mb-2 text-xs font-semibold text-gray-500 uppercase px-3">
+                {_t("chat.communities")}
+              </div>
+            )}
+            {channels?.map((channel) => (
+              <ChatSidebarChannel
+                isChannel={props.isChannel}
+                key={channel.id}
+                channel={channel}
+                username={username}
+              />
+            ))}
+            {directContacts?.length !== 0 && (
+              <div className="mt-4 mb-2 text-xs font-semibold text-gray-500 uppercase px-3">
+                {_t("chat.direct-messages")}
+              </div>
+            )}
+            {directContacts?.map((contact) => (
+              <ChatSidebarDirectContact
+                key={contact.pubkey}
+                contact={contact}
+                username={username}
+              />
+            ))}
+          </>
+        )}
+      </div>
+      {directContacts?.length === 0 && channels?.length === 0 && (
+        <div className="flex items-center justify-center h-full text-gray-400 dark:text-gray-600">
+          {_t("chat.no-contacts-or-channels")}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/common/features/chats/components/chats-welcome.tsx b/src/common/features/chats/components/chats-welcome.tsx
new file mode 100644
index 00000000000..57ab938dbd6
--- /dev/null
+++ b/src/common/features/chats/components/chats-welcome.tsx
@@ -0,0 +1,88 @@
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import { _t } from "../../../i18n";
+import { CodeInput } from "@ui/input";
+import OrDivider from "../../../components/or-divider";
+import { useGetAccountFullQuery } from "../../../api/queries";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { CreateAnAccount } from "./create-an-account";
+import { ChatsImport } from "./chats-import";
+import {
+  ChatContext,
+  getUserChatPrivateKey,
+  getUserChatPublicKey,
+  useRestoreChatByPin
+} from "@ecency/ns-query";
+
+export function ChatsWelcome() {
+  const { activeUser } = useMappedStore();
+
+  const [step, setStep] = useState(0);
+  const [pin, setPin] = useState("");
+
+  const { hasUserJoinedChat } = useContext(ChatContext);
+  const { data: fullAccount } = useGetAccountFullQuery(activeUser?.username);
+
+  const {
+    mutateAsync: restoreByPin,
+    isError: isRestoreFailed,
+    isLoading: isRestoreLoading
+  } = useRestoreChatByPin();
+
+  const isAlreadyRegisteredInChats = useMemo(() => {
+    if (!fullAccount) {
+      return false;
+    }
+    const publicKey = getUserChatPublicKey(fullAccount);
+    const { key, iv } = getUserChatPrivateKey(fullAccount);
+    return !!key && !!iv && !!publicKey;
+  }, [fullAccount]);
+
+  useEffect(() => {
+    // Handle PIN on account restoring
+    if (step === 0 && pin.length === 8) {
+      restoreByPin(pin);
+    }
+  }, [pin]);
+
+  useEffect(() => {
+    if (hasUserJoinedChat) {
+      setStep(0);
+    }
+  }, [hasUserJoinedChat]);
+
+  return (
+    <>
+      <div className="flex flex-col items-center justify-center p-4">
+        <div className="flex flex-col items-center mb-6">
+          <div className="font-bold">{_t("chat.welcome.title")}</div>
+        </div>
+
+        {isAlreadyRegisteredInChats ? (
+          <>
+            <div className="flex flex-col items-center text-gray-600 dark:text-gray-400 text-center">
+              <div>{_t("chat.welcome.already-joined-title")}</div>
+              <div>{_t("chat.welcome.already-joined-hint")}</div>
+              <CodeInput value={pin} setValue={setPin} codeSize={8} disabled={isRestoreLoading} />
+              {isRestoreFailed && <div className="text-red">{_t("chat.welcome.pin-failed")}</div>}
+            </div>
+            <OrDivider />
+            <div className="flex justify-center gap-4">
+              <ChatsImport />
+              <CreateAnAccount />
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="flex flex-col items-center mb-4 text-gray-600 dark:text-gray-400 text-center">
+              <div>{_t("chat.welcome.description")}</div>
+            </div>
+            <div className="flex justify-center gap-4">
+              <ChatsImport />
+              <CreateAnAccount />
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/create-an-account.tsx b/src/common/features/chats/components/create-an-account.tsx
new file mode 100644
index 00000000000..7eaab90948e
--- /dev/null
+++ b/src/common/features/chats/components/create-an-account.tsx
@@ -0,0 +1,39 @@
+import { _t } from "../../../i18n";
+import { Button } from "@ui/button";
+import React, { useState } from "react";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "@ui/modal";
+import { Alert } from "@ui/alert";
+import { CodeInput } from "@ui/input";
+import { useJoinChat } from "@ecency/ns-query";
+import { uploadChatKeys } from "../utils/upload-chat-keys";
+
+export function CreateAnAccount() {
+  const [step, setStep] = useState(0);
+  const [pin, setPin] = useState("");
+
+  const { mutateAsync: joinChat } = useJoinChat(uploadChatKeys);
+
+  return (
+    <>
+      <Button onClick={() => setStep(1)}>{_t("chat.create-new-account")}</Button>
+      {step === 1 && (
+        <Modal centered={true} show={[1, 2].includes(step)} onHide={() => setStep(0)}>
+          <ModalHeader closeButton={true}>{_t("chat.create-an-account")}</ModalHeader>
+          <ModalBody>
+            <div className="text-gray-600 mb-4">{_t("chat.create-description")}</div>
+            <Alert appearance="primary">{_t("chat.create-pin-description")}</Alert>
+            <CodeInput codeSize={8} value={pin} setValue={setPin} />
+          </ModalBody>
+          <ModalFooter className="flex justify-end items-center gap-3">
+            <Button appearance="secondary" onClick={() => setStep(0)}>
+              {_t("g.cancel")}
+            </Button>
+            <Button disabled={pin.length < 8} onClick={() => joinChat(pin)}>
+              {_t("chat.create-an-account")}
+            </Button>
+          </ModalFooter>
+        </Modal>
+      )}
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/join-community-chat-btn.tsx b/src/common/features/chats/components/join-community-chat-btn.tsx
new file mode 100644
index 00000000000..b35f0b79b70
--- /dev/null
+++ b/src/common/features/chats/components/join-community-chat-btn.tsx
@@ -0,0 +1,133 @@
+import React, { useContext, useMemo } from "react";
+import { History } from "history";
+import { Community } from "../../../store/communities";
+import { _t } from "../../../i18n";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { Spinner } from "@ui/spinner";
+import { Button } from "@ui/button";
+import {
+  ChatContext,
+  useAddCommunityChannel,
+  useChannelsQuery,
+  useCommunityChannelQuery,
+  useCreateCommunityChat,
+  useKeysQuery,
+  useLeaveCommunityChannel,
+  useLeftCommunityChannelsQuery,
+  useNostrJoinedCommunityTeamQuery
+} from "@ecency/ns-query";
+import { useGetAccountFullQuery, useGetAccountsFullQuery } from "../../../api/queries";
+import { updateProfile } from "../../../api/operations";
+
+interface Props {
+  history: History;
+  community: Community;
+}
+
+export default function JoinCommunityChatBtn(props: Props) {
+  const { publicKey } = useKeysQuery();
+  const { hasUserJoinedChat } = useContext(ChatContext);
+  const { activeUser } = useMappedStore();
+
+  const { data: communityAccount, isLoading: isCommunityAccountLoading } = useGetAccountFullQuery(
+    props.community.name
+  );
+  const communityTeamQueries = useGetAccountsFullQuery(
+    props.community.team.map(([name, role]) => name)
+  );
+  const { data: currentChannel, isLoading: isCurrentChannelLoading } = useCommunityChannelQuery(
+    props.community
+  );
+  const { data: channels, isLoading: isChannelsLoading } = useChannelsQuery();
+  const { data: communityTeam, isLoading: isCommunityTeamLoading } =
+    useNostrJoinedCommunityTeamQuery(
+      props.community,
+      communityAccount!!,
+      communityTeamQueries.map((query) => query.data!!)
+    );
+  const { data: leftChannelsIds, isLoading: isChannelsIdsLoading } =
+    useLeftCommunityChannelsQuery();
+
+  const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
+    useAddCommunityChannel(currentChannel);
+  const { mutateAsync: createCommunityChat, isLoading: isCreateCommunityChatLoading } =
+    useCreateCommunityChat(props.community, communityAccount!!, updateProfile);
+  const { mutateAsync: leaveCommunityChannel, isLoading: isLeavingCommunityChannelLoading } =
+    useLeaveCommunityChannel();
+
+  const isGlobalLoading = useMemo(
+    () =>
+      isChannelsLoading ||
+      isChannelsIdsLoading ||
+      isCommunityAccountLoading ||
+      isCommunityTeamLoading,
+    [isChannelsLoading, isChannelsIdsLoading, isCommunityAccountLoading, isCommunityTeamLoading]
+  );
+  const isCommunityChannelCreated = useMemo(() => !!currentChannel, [currentChannel]);
+  const isCommunityChannelJoined = useMemo(
+    () =>
+      channels?.some(
+        (item) =>
+          item.communityName === props.community.name &&
+          !leftChannelsIds?.includes(currentChannel?.id!)
+      ),
+    [channels, leftChannelsIds]
+  );
+  // Todo: all admin team should be able to create a channel
+  //      Upd: only community owner could create a channel because it requires Nostr private key
+  const isAbleToCreateChannel = useMemo(
+    () => props.community.name === activeUser?.username,
+    [activeUser, props.community]
+  );
+
+  const join = async () => {
+    if (!hasUserJoinedChat) {
+      return;
+    }
+    await addCommunityChannel();
+  };
+
+  return isGlobalLoading ? (
+    <></>
+  ) : (
+    <>
+      {isCommunityChannelJoined && (
+        <Button
+          size="sm"
+          appearance="secondary"
+          disabled={isLeavingCommunityChannelLoading}
+          icon={isLeavingCommunityChannelLoading && <Spinner className="w-3.5 h-3.5" />}
+          onClick={() => leaveCommunityChannel(currentChannel!!.name)}
+        >
+          {_t("chat.chat-joined")}
+        </Button>
+      )}
+      {!isCommunityChannelJoined && (
+        <Button
+          size="sm"
+          disabled={isAddCommunityChannelLoading}
+          to={`/chats/${props.community.name}/channel`}
+          iconPlacement="left"
+        >
+          {_t("chat.join-community-chat")}
+        </Button>
+      )}
+      {!isCommunityChannelCreated && isAbleToCreateChannel && (
+        <Button
+          size="sm"
+          onClick={async () => {
+            if (communityTeam.some((role) => role.pubkey === publicKey)) {
+              await createCommunityChat();
+              await join();
+            }
+          }}
+          disabled={isCreateCommunityChatLoading}
+          icon={isCreateCommunityChatLoading && <Spinner />}
+          iconPlacement="left"
+        >
+          {_t("chat.start-community-chat")}
+        </Button>
+      )}
+    </>
+  );
+}
diff --git a/src/common/features/chats/components/manage-chat-key.tsx b/src/common/features/chats/components/manage-chat-key.tsx
new file mode 100644
index 00000000000..3fe7214754d
--- /dev/null
+++ b/src/common/features/chats/components/manage-chat-key.tsx
@@ -0,0 +1,98 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { _t } from "../../../i18n";
+import { CodeInput, InputGroupCopyClipboard } from "@ui/input";
+import qrcode from "qrcode";
+import { classNameObject } from "../../../helper/class-name-object";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { PREFIX } from "../../../util/local-storage";
+import { Button } from "@ui/button";
+import { useKeysQuery } from "@ecency/ns-query";
+
+export default function ManageChatKey() {
+  const { activeUser } = useMappedStore();
+
+  const qrImgRef = useRef<HTMLImageElement | null>(null);
+
+  const [isUnlocked, setIsUnlocked] = useState(false);
+  const [validationPin, setValidationPin] = useState("");
+  const [isQrShow, setIsQrShow] = useState(false);
+
+  const { publicKey, privateKey, iv } = useKeysQuery();
+
+  const pin = useMemo(() => localStorage.getItem(PREFIX + "_nostr_pr_" + activeUser?.username), []);
+  const ecencyKey = useMemo(
+    () =>
+      Buffer.from(
+        JSON.stringify({
+          pub: publicKey,
+          priv: privateKey,
+          iv
+        })
+      ).toString("base64"),
+    [publicKey, privateKey]
+  );
+
+  useEffect(() => {
+    if (validationPin === pin) {
+      setIsUnlocked(true);
+    }
+  }, [validationPin, pin]);
+
+  useEffect(() => {
+    if (ecencyKey) {
+      compileQR();
+    }
+  }, [ecencyKey]);
+
+  const compileQR = async () => {
+    if (qrImgRef.current) {
+      qrImgRef.current.src = await qrcode.toDataURL(ecencyKey!!, { width: 300 });
+      setIsQrShow(true);
+    }
+  };
+
+  return (
+    <div className="flex gap-4 flex-col w-full">
+      {isUnlocked ? (
+        <>
+          <div className="text-sm text-gray-600">{_t("chat.chat-priv-key")}</div>
+          <div className="text-sm">PIN</div>
+          <InputGroupCopyClipboard value={pin ?? ""} />
+          <div className="text-sm mt-4">{_t("chat.ecency-key")}</div>
+          <InputGroupCopyClipboard value={ecencyKey ?? ""} />
+          <img
+            ref={qrImgRef}
+            className={classNameObject({
+              "self-center border rounded-xl border-[--border-color]": true,
+              hidden: !isQrShow,
+              block: isQrShow
+            })}
+          />
+          <Button
+            className="mx-auto"
+            onClick={() => {
+              const blob = new Blob([ecencyKey], { type: "text/plain" });
+              const a = document.createElement("a");
+              a.href = window.URL.createObjectURL(new File([blob], "ecency-key.txt"));
+              a.download = "ecency-key.txt";
+              a.click();
+              document.removeChild(a);
+            }}
+          >
+            {_t("g.download")}
+          </Button>
+        </>
+      ) : (
+        <>
+          <div className="text-center text-gray-600 dark:text-gray-400">
+            {_t("chat.unlock-the-section")}
+          </div>
+          <CodeInput value={validationPin} setValue={setValidationPin} codeSize={8} />
+          {validationPin !== pin && validationPin.length === pin?.length && (
+            <div className="text-red text-sm">{_t("chat.welcome.pin-failed")}</div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/common/features/chats/mutations/index.ts b/src/common/features/chats/mutations/index.ts
new file mode 100644
index 00000000000..ed1ed19caac
--- /dev/null
+++ b/src/common/features/chats/mutations/index.ts
@@ -0,0 +1,2 @@
+export * from "./upload";
+export * from "./invite-via-post-comment";
diff --git a/src/common/features/chats/mutations/invite-via-post-comment.ts b/src/common/features/chats/mutations/invite-via-post-comment.ts
new file mode 100644
index 00000000000..974c20f4e10
--- /dev/null
+++ b/src/common/features/chats/mutations/invite-via-post-comment.ts
@@ -0,0 +1,40 @@
+import { useMutation } from "@tanstack/react-query";
+import { getAccountPosts } from "../../../api/bridge";
+import { comment } from "../../../api/operations";
+import tempEntry from "../../../helper/temp-entry";
+import { FullAccount } from "../../../store/accounts/types";
+import { createReplyPermlink } from "../../../helper/posting";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import { error } from "../../../components/feedback";
+import { _t } from "../../../i18n";
+
+export function useInviteViaPostComment(username: string) {
+  const { activeUser, addReply } = useMappedStore();
+
+  return useMutation(["chats/invite-via-post-comment"], async (text: string) => {
+    const response = await getAccountPosts("posts", username);
+    if (response && response.length > 0) {
+      const firstPost = response[0];
+
+      const { author: parentAuthor, permlink: parentPermlink } = firstPost;
+      const author = activeUser!!.username;
+      const permlink = createReplyPermlink(author);
+      await comment(author, parentAuthor, parentPermlink, permlink, "", text, {}, null, true);
+      addReply(
+        tempEntry({
+          author: activeUser!!.data as FullAccount,
+          permlink,
+          parentAuthor,
+          parentPermlink,
+          title: "",
+          body: text,
+          tags: [],
+          description: null
+        })
+      );
+    } else {
+      error(_t("chat.no-posts-for-invite"));
+      throw new Error(_t("chat.no-posts-for-invite"));
+    }
+  });
+}
diff --git a/src/common/features/chats/mutations/upload.ts b/src/common/features/chats/mutations/upload.ts
new file mode 100644
index 00000000000..e1ac46cf6de
--- /dev/null
+++ b/src/common/features/chats/mutations/upload.ts
@@ -0,0 +1,61 @@
+import { useMutation } from "@tanstack/react-query";
+import { getAccessToken } from "../../../helper/user-token";
+import { uploadImage } from "../../../api/misc";
+import { addImage } from "../../../api/private-api";
+import { error } from "../../../components/feedback";
+import { _t } from "../../../i18n";
+import axios from "axios";
+import { useMappedStore } from "../../../store/use-mapped-store";
+
+class FileUploadingError {
+  constructor(public code: number, public message: string) {}
+}
+
+export function useChatFileUpload(setMessage: (v: string) => void) {
+  const { activeUser, global } = useMappedStore();
+
+  return useMutation(
+    ["chats/file-upload"],
+    async (file: File) => {
+      const username = activeUser?.username;
+
+      if (!username) {
+        throw new FileUploadingError(0, "[Chat][File uploading] No user");
+      }
+
+      const token = getAccessToken(username);
+
+      if (!token) {
+        throw new FileUploadingError(1, "[Chat][File uploading] No token");
+      }
+
+      const tempImgTag = `![Uploading ${file.name} #${Math.floor(Math.random() * 99)}]()\n\n`;
+      setMessage(tempImgTag);
+
+      let imageUrl: string;
+      const resp = await uploadImage(file, token);
+      imageUrl = resp.url;
+
+      if (global.usePrivate && imageUrl.length > 0) {
+        await addImage(username, imageUrl);
+      }
+
+      const imgTag = imageUrl.length > 0 && `![](${imageUrl})\n\n`;
+      if (imgTag) {
+        setMessage(imgTag);
+      }
+    },
+    {
+      onError: (e) => {
+        if (axios.isAxiosError(e) && e.response?.status === 413) {
+          error(_t("editor-toolbar.image-error-size"));
+        } else if (e instanceof FileUploadingError) {
+          error(_t("editor-toolbar.image-error-cache"));
+          throw new Error(e.message);
+        } else {
+          error(_t("editor-toolbar.image-error"));
+        }
+      }
+    }
+  );
+}
diff --git a/src/common/features/chats/queries/index.ts b/src/common/features/chats/queries/index.ts
new file mode 100644
index 00000000000..a25d33f77de
--- /dev/null
+++ b/src/common/features/chats/queries/index.ts
@@ -0,0 +1 @@
+export * from "./search-users-query";
diff --git a/src/common/features/chats/queries/search-communities-query.ts b/src/common/features/chats/queries/search-communities-query.ts
new file mode 100644
index 00000000000..d3d9a5da3ed
--- /dev/null
+++ b/src/common/features/chats/queries/search-communities-query.ts
@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import { getCommunities } from "../../../api/bridge";
+
+export function useSearchCommunitiesQuery(query: string) {
+  return useQuery(
+    ["chats/search-communities", query],
+    async () => {
+      const response = await getCommunities("", 10, query);
+      return response ?? [];
+    },
+    {
+      initialData: []
+    }
+  );
+}
diff --git a/src/common/features/chats/queries/search-users-query.ts b/src/common/features/chats/queries/search-users-query.ts
new file mode 100644
index 00000000000..b29d7eee6fa
--- /dev/null
+++ b/src/common/features/chats/queries/search-users-query.ts
@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+import { getAccountReputations } from "../../../api/hive";
+
+export function useSearchUsersQuery(query: string) {
+  return useQuery(
+    ["chats/search-user", query],
+    async () => {
+      if (!query) {
+        return [];
+      }
+      const response = await getAccountReputations(query, 10);
+      response.sort((a, b) => (a.reputation > b.reputation ? -1 : 1));
+      return response;
+    },
+    {
+      initialData: []
+    }
+  );
+}
diff --git a/src/common/features/chats/screens/_chats.scss b/src/common/features/chats/screens/_chats.scss
new file mode 100644
index 00000000000..14d6760d3a3
--- /dev/null
+++ b/src/common/features/chats/screens/_chats.scss
@@ -0,0 +1,24 @@
+.chat-input {
+  .gif-picker {
+    max-height: 300px;
+    overflow-y: auto;
+    @apply bg-white dark:bg-dark-200 border-b border-[--border-color] w-[calc(100%+0.75rem)] flex flex-col gap-3 mb-4 -mx-3;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .gif-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      @apply p-3;
+    }
+
+    .search-box {
+      position: sticky;
+      top: 0;
+      @apply bg-white dark:bg-dark-200 border-b border-[--border-color] p-3;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/common/features/chats/screens/chats-manage-key-section.tsx b/src/common/features/chats/screens/chats-manage-key-section.tsx
new file mode 100644
index 00000000000..1efc200539e
--- /dev/null
+++ b/src/common/features/chats/screens/chats-manage-key-section.tsx
@@ -0,0 +1,28 @@
+import { Button } from "@ui/button";
+import { arrowBackSvg } from "../../../img/svg";
+import { _t } from "../../../i18n";
+import ManageChatKey from "../components/manage-chat-key";
+import React, { useContext } from "react";
+import { ChatContext } from "@ecency/ns-query";
+
+export function ChatsManageKeySection() {
+  const { setRevealPrivateKey } = useContext(ChatContext);
+
+  return (
+    <div className="h-full">
+      <div className="flex gap-4 items-center sticky z-[10] top-0 bg-white border-b border-[--border-color] px-4 h-[57px]">
+        <Button
+          noPadding={true}
+          appearance="gray-link"
+          icon={arrowBackSvg}
+          onClick={() => setRevealPrivateKey(false)}
+        />
+        {_t("chat.manage-chat-key")}
+      </div>
+      <div className="max-w-[400px] mx-auto my-6 bg-gray-100 dark:bg-gray-900 w-full rounded-2xl border border-[--border-color] p-4">
+        <ManageChatKey />
+      </div>
+      <div className="h-[1rem]" />
+    </div>
+  );
+}
diff --git a/src/common/features/chats/screens/chats-user-not-joined-section.tsx b/src/common/features/chats/screens/chats-user-not-joined-section.tsx
new file mode 100644
index 00000000000..d380f283c89
--- /dev/null
+++ b/src/common/features/chats/screens/chats-user-not-joined-section.tsx
@@ -0,0 +1,25 @@
+import { _t } from "../../../i18n";
+import ChatsProfileBox from "../components/chat-profile-box";
+import React, { HTMLProps } from "react";
+import { match } from "react-router";
+import { classNameObject } from "../../../helper/class-name-object";
+
+export function ChatsUserNotJoinedSection({
+  match,
+  className
+}: HTMLProps<HTMLDivElement> & { match: match<{ username: string }> }) {
+  return (
+    <div
+      className={classNameObject({
+        "flex flex-col justify-center h-full items-center px-4": true,
+        [className ?? ""]: !!className
+      })}
+    >
+      <div className="font-bold">{_t("chat.welcome.oops")}</div>
+      <div className="text-gray-600 dark:text-gray-400 mb-4">
+        {_t("chat.welcome.user-not-joined-yet")}
+      </div>
+      <ChatsProfileBox currentUser={match.params.username} />
+    </div>
+  );
+}
diff --git a/src/common/features/chats/screens/chats.tsx b/src/common/features/chats/screens/chats.tsx
new file mode 100644
index 00000000000..409507c7399
--- /dev/null
+++ b/src/common/features/chats/screens/chats.tsx
@@ -0,0 +1,180 @@
+import React, { useContext, useEffect, useMemo } from "react";
+import { connect } from "react-redux";
+import { match } from "react-router";
+import NavBar from "../../../components/navbar";
+import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "../../../pages/common";
+import ChatsSideBar from "../components/chats-sidebar";
+import Feedback from "../../../components/feedback";
+import { useMappedStore } from "../../../store/use-mapped-store";
+import ChatsMessagesBox from "../components/chat-message-box";
+import { classNameObject } from "../../../helper/class-name-object";
+import "./_chats.scss";
+import { ChatsWelcome } from "../components/chats-welcome";
+import { useCommunityCache } from "../../../core";
+import { useGetAccountFullQuery } from "../../../api/queries";
+import useMountedState from "react-use/lib/useMountedState";
+import { _t } from "../../../i18n";
+import Meta from "../../../components/meta";
+import { ChatsDefaultScreen } from "../components/chats-default-screen";
+import { ChatsManageKeySection } from "./chats-manage-key-section";
+import { ChatsUserNotJoinedSection } from "./chats-user-not-joined-section";
+import {
+  ChatContext,
+  getUserChatPublicKey,
+  useChannelsQuery,
+  useCommunityChannelQuery,
+  useDirectContactsQuery,
+  useKeysQuery
+} from "@ecency/ns-query";
+
+interface Props extends PageProps {
+  match: match<{
+    filter: string;
+    name: string;
+    path: string;
+    url: string;
+    username: string;
+    channel?: string;
+  }>;
+}
+
+export const Chats = ({ match, history }: Props) => {
+  const { activeUser } = useMappedStore();
+  const { receiverPubKey, revealPrivateKey, setReceiverPubKey, setRevealPrivateKey } =
+    useContext(ChatContext);
+  const { data: community } = useCommunityCache(match.params.username);
+
+  const { publicKey, privateKey } = useKeysQuery();
+  const { data: userAccount } = useGetAccountFullQuery(match.params.username?.replace("@", ""));
+  const { data: directContacts } = useDirectContactsQuery();
+  const { data: channels } = useChannelsQuery();
+
+  const isChannel = useMemo(() => match.params.channel === "channel", [match.params]);
+  // Generate temporary contact from username and its public key
+  const directContact = useMemo(
+    () =>
+      match.params.username && !isChannel
+        ? {
+            name: match.params.username.replace("@", ""),
+            pubkey: receiverPubKey
+          }
+        : undefined,
+    [receiverPubKey, match.params]
+  );
+  const { data: communityChannel } = useCommunityChannelQuery(
+    isChannel && community ? community : undefined,
+    userAccount
+  );
+
+  const isReady = useMemo(
+    () => !!(activeUser && publicKey && privateKey),
+    [publicKey, privateKey, activeUser]
+  );
+  const isShowManageKey = useMemo(() => isReady && revealPrivateKey, [isReady, revealPrivateKey]);
+  const isShowChatRoom = useMemo(
+    () => isReady && (!!directContact || !!communityChannel) && !revealPrivateKey,
+    [isReady, receiverPubKey, revealPrivateKey, communityChannel, directContact]
+  );
+  const isShowDefaultScreen = useMemo(
+    () =>
+      isReady && !directContact && !communityChannel && !revealPrivateKey && !match.params.username,
+    [isReady, receiverPubKey, directContact, communityChannel, match]
+  );
+  const isShowImportChats = useMemo(() => !isReady, [isReady]);
+
+  const isMounted = useMountedState();
+
+  const title = useMemo(() => {
+    let title = _t("chat.page-title");
+
+    if (community) {
+      title = `${community.title} | ${title}`;
+    } else if (userAccount) {
+      title = `${userAccount.name} | ${title}`;
+    }
+
+    return title;
+  }, [community, userAccount]);
+
+  useEffect(() => {
+    if (userAccount && !isChannel) {
+      const key = getUserChatPublicKey(userAccount);
+      setReceiverPubKey(key ?? "");
+    } else {
+      setReceiverPubKey("");
+    }
+  }, [userAccount, isChannel]);
+
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, []);
+
+  return isMounted() ? (
+    <div className="bg-blue-duck-egg dark:bg-transparent pt-[63px] min-h-[100vh]">
+      <Feedback activeUser={activeUser} />
+      <NavBar history={history} />
+      <Meta title={title || _t("chat.page-title")} />
+
+      <div className="container mx-auto md:py-6">
+        <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white border border-[--border-color] relative h-[100vh] md:h-auto">
+          <div className="col-span-12 md:col-span-4 xl:col-span-3 border-r border-[--border-color] max-h-[calc(100vh-69px)] md:h-[calc(100vh-69px-3rem)] overflow-y-auto">
+            {isReady ? (
+              <ChatsSideBar
+                isChannel={isChannel}
+                history={history}
+                username={match.params.username}
+              />
+            ) : (
+              <></>
+            )}
+            {(!directContacts?.length || !channels?.length) && isShowDefaultScreen && (
+              <ChatsDefaultScreen className="md:hidden" />
+            )}
+            {(!directContacts?.length || !channels?.length) && isShowImportChats && activeUser && (
+              <div className="h-full w-full flex items-center justify-center md:hidden">
+                <ChatsWelcome />
+              </div>
+            )}
+            {!isShowChatRoom && isReady && match.params.username && (
+              <ChatsUserNotJoinedSection match={match} className="md:hidden" />
+            )}
+          </div>
+          <div
+            className={classNameObject({
+              "col-span-12 md:col-span-8 xl:col-span-9 max-h-[calc(100vh-69px)] md:h-[calc(100vh-69px-3rem)] overflow-y-auto absolute w-full bg-white z-10 md:static duration-500":
+                true,
+              "translate-x-0": isShowChatRoom || isShowManageKey,
+              "translate-x-[100%] md:translate-x-0": !isShowChatRoom && !isShowManageKey
+            })}
+          >
+            {isShowManageKey && <ChatsManageKeySection />}
+            {isShowImportChats && activeUser && (
+              <div className="h-full w-full flex items-center justify-center">
+                <ChatsWelcome />
+              </div>
+            )}
+            {isShowChatRoom && (
+              <ChatsMessagesBox
+                match={match}
+                history={history}
+                channel={communityChannel!!}
+                currentContact={directContact}
+              />
+            )}
+            {!isShowChatRoom && isReady && match.params.username && (
+              <ChatsUserNotJoinedSection match={match} />
+            )}
+            {isShowDefaultScreen && <ChatsDefaultScreen />}
+          </div>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+};
+export default connect(pageMapStateToProps, pageMapDispatchToProps)(Chats);
diff --git a/src/common/features/chats/screens/index.ts b/src/common/features/chats/screens/index.ts
new file mode 100644
index 00000000000..9a6ff3c6d09
--- /dev/null
+++ b/src/common/features/chats/screens/index.ts
@@ -0,0 +1 @@
+export * from "./chats";
diff --git a/src/common/features/chats/utils/get-date-fns-locale.ts b/src/common/features/chats/utils/get-date-fns-locale.ts
new file mode 100644
index 00000000000..6752403b418
--- /dev/null
+++ b/src/common/features/chats/utils/get-date-fns-locale.ts
@@ -0,0 +1,32 @@
+import { bg, enUS, es, fi, hi, id, it, pt, ru, sr, uk, uz, zhCN } from "date-fns/locale";
+
+export function getDateFnsLocale(lang: string) {
+  switch (lang) {
+    case "es":
+      return es;
+    case "hi":
+      return hi;
+    case "it":
+      return it;
+    case "id":
+      return id;
+    case "pt":
+      return pt;
+    case "sr":
+      return sr;
+    case "fi":
+      return fi;
+    case "uk":
+      return uk;
+    case "bg":
+      return bg;
+    case "ru":
+      return ru;
+    case "uz":
+      return uz;
+    case "zh":
+      return zhCN;
+    default:
+      return enUS;
+  }
+}
diff --git a/src/common/features/chats/utils/group-messages.ts b/src/common/features/chats/utils/group-messages.ts
new file mode 100644
index 00000000000..132fb1629eb
--- /dev/null
+++ b/src/common/features/chats/utils/group-messages.ts
@@ -0,0 +1,22 @@
+import { Message } from "@ecency/ns-query";
+
+export function groupMessages(messages: Message[]) {
+  return messages.reduce<[Date, Message[]][]>((acc, item, currentIndex) => {
+    if (currentIndex === 0) {
+      return [...acc, [new Date(item.created * 1000), [item]]];
+    }
+
+    // If difference less than 5 minutes then we group them together
+    const differenceInDates = item.created - messages[currentIndex - 1].created;
+    const groupItems = acc[acc.length - 1][1];
+    if (
+      differenceInDates * 1000 < 120000 &&
+      groupItems[groupItems.length - 1].creator === item.creator
+    ) {
+      groupItems.push(item);
+      return acc;
+    }
+
+    return [...acc, [new Date(item.created * 1000), [item]]];
+  }, []);
+}
diff --git a/src/common/features/chats/utils/index.ts b/src/common/features/chats/utils/index.ts
new file mode 100644
index 00000000000..799ebfe5fdf
--- /dev/null
+++ b/src/common/features/chats/utils/index.ts
@@ -0,0 +1,3 @@
+export * from "./is-message-gif";
+export * from "./get-date-fns-locale";
+export * from "./group-messages";
diff --git a/src/common/features/chats/utils/is-message-gif.ts b/src/common/features/chats/utils/is-message-gif.ts
new file mode 100644
index 00000000000..77d8fda9817
--- /dev/null
+++ b/src/common/features/chats/utils/is-message-gif.ts
@@ -0,0 +1,5 @@
+import { GIPHGY } from "../components/chat-popup/chat-constants";
+
+export const isMessageGif = (content: string) => {
+  return content.includes(GIPHGY);
+};
diff --git a/src/common/features/chats/utils/upload-chat-keys.ts b/src/common/features/chats/utils/upload-chat-keys.ts
new file mode 100644
index 00000000000..356fcefb528
--- /dev/null
+++ b/src/common/features/chats/utils/upload-chat-keys.ts
@@ -0,0 +1,19 @@
+import { getAccountFull } from "../../../api/hive";
+import { updateProfile } from "../../../api/operations";
+import { AccountData, createNoStrAccount } from "@ecency/ns-query";
+
+export const uploadChatKeys = async (
+  activeUser: AccountData,
+  { pub, priv, iv }: ReturnType<typeof createNoStrAccount> & { iv: Buffer }
+) => {
+  const response = await getAccountFull(activeUser?.name!);
+
+  return await updateProfile(response, {
+    ...JSON.parse(response?.posting_json_metadata ? response.posting_json_metadata : "{}").profile,
+    echat: {
+      pubKey: pub,
+      iv: iv.toString("base64"),
+      key: priv
+    }
+  });
+};
diff --git a/src/common/features/ui/button/index.tsx b/src/common/features/ui/button/index.tsx
index 32d00632ded..7f32c0ef23d 100644
--- a/src/common/features/ui/button/index.tsx
+++ b/src/common/features/ui/button/index.tsx
@@ -3,10 +3,11 @@ import { ButtonProps } from "./props";
 import { classNameObject } from "../../../helper/class-name-object";
 import { BUTTON_OUTLINE_STYLES, BUTTON_SIZES, BUTTON_STYLES } from "./styles";
 import { useFilteredProps } from "../../../util/props-filter";
+import { Link, NavLinkProps } from "react-router-dom";
 
 export * from "./props";
 
-export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
+export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement | NavLinkProps, ButtonProps>(
   (props, ref) => {
     const nativeProps = useFilteredProps<typeof props, Required<ButtonProps>>(props, [
       "appearance",
@@ -23,7 +24,8 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
       // Outline basics
       "border-[1.25px] border-solid": props.outline ?? false,
       // With icon
-      "flex items-center justify-center gap-2": !!props.icon,
+      "flex items-center justify-center gap-2":
+        !!props.icon || ("to" in props ? !!props.to : false),
       "flex-row-reverse": props.iconPlacement === "left",
 
       // Styles
@@ -56,6 +58,11 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
         {children}
         {icon}
       </a>
+    ) : "to" in props ? (
+      <Link to={(props as NavLinkProps).to} {...nativeProps} className={className} ref={ref as any}>
+        {children}
+        {icon}
+      </Link>
     ) : (
       <button
         {...nativeProps}
diff --git a/src/common/features/ui/button/props.ts b/src/common/features/ui/button/props.ts
index 75694027328..0b9bd148d0a 100644
--- a/src/common/features/ui/button/props.ts
+++ b/src/common/features/ui/button/props.ts
@@ -1,8 +1,10 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+import { LinkProps } from "react-router-dom";
 
 export type ButtonAppearance =
   | "primary"
   | "secondary"
+  | "gray-link"
   | "link"
   | "gray-link"
   | "danger"
@@ -38,4 +40,17 @@ interface LinkButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   noPadding?: boolean;
 }
 
-export type ButtonProps = RegularButtonProps | LinkButtonProps;
+interface NavLinkButtonProps extends LinkProps {
+  appearance?: ButtonAppearance;
+  size?: ButtonSize;
+  outline?: boolean;
+  className?: string;
+  disabled?: boolean;
+  full?: boolean;
+  icon?: ReactNode;
+  iconPlacement?: "left" | "right";
+  iconClassName?: string;
+  noPadding?: boolean;
+}
+
+export type ButtonProps = RegularButtonProps | LinkButtonProps | NavLinkButtonProps;
diff --git a/src/common/features/ui/button/styles.ts b/src/common/features/ui/button/styles.ts
index ea9dece6776..f4d7a25f811 100644
--- a/src/common/features/ui/button/styles.ts
+++ b/src/common/features/ui/button/styles.ts
@@ -2,7 +2,7 @@ import { ButtonAppearance, ButtonSize } from "@ui/button/props";
 
 export const BUTTON_STYLES: Record<ButtonAppearance, string> = {
   primary:
-    "bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky",
+    "bg-blue-dark-sky hover:bg-blue-dark-sky-hover focus:bg-blue-dark-sky-active text-white hover:text-white disabled:opacity-50 disabled:hover:bg-blue-dark-sky disabled:focus:bg-blue-dark-sky",
   secondary: "bg-gray-600 hover:bg-gray-700 focus:bg-gray-800 text-white",
   link: "text-blue-dark-sky hover:text-blue-dark-sky-hover focus:text-blue-dark-sky-active",
   danger: "bg-red hover:bg-red-020 focus:bg-red-030 text-white",
diff --git a/src/common/features/ui/dropdown/dropdown-item.tsx b/src/common/features/ui/dropdown/dropdown-item.tsx
index 55bf1ef81b9..e23706328b5 100644
--- a/src/common/features/ui/dropdown/dropdown-item.tsx
+++ b/src/common/features/ui/dropdown/dropdown-item.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLProps, useContext } from "react";
+import React, { HTMLProps, ReactNode, useContext } from "react";
 import { classNameObject } from "../../../helper/class-name-object";
 import { DropdownContext } from "@ui/dropdown/dropdown-context";
 
@@ -20,3 +20,16 @@ export function DropdownItem(props: HTMLProps<HTMLDivElement>) {
     />
   );
 }
+
+export function DropdownItemWithIcon(
+  props: HTMLProps<HTMLDivElement> & { icon: ReactNode; label: ReactNode }
+) {
+  return (
+    <DropdownItem {...props}>
+      <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-blue-dark-sky [&>div>svg]:w-4">
+        <div>{props.icon}</div>
+        <div className="text-sm font-semibold">{props.label}</div>
+      </div>
+    </DropdownItem>
+  );
+}
diff --git a/src/common/features/ui/dropdown/dropdown-menu.tsx b/src/common/features/ui/dropdown/dropdown-menu.tsx
index c12d8188f41..c19641f68bb 100644
--- a/src/common/features/ui/dropdown/dropdown-menu.tsx
+++ b/src/common/features/ui/dropdown/dropdown-menu.tsx
@@ -4,7 +4,7 @@ import { DropdownContext } from "@ui/dropdown/dropdown-context";
 import { useFilteredProps } from "../../../util/props-filter";
 
 interface Props {
-  align?: "left" | "right";
+  align?: "left" | "right" | "top" | "bottom";
 }
 
 export function DropdownMenu(props: HTMLProps<HTMLDivElement> & Props) {
@@ -16,9 +16,11 @@ export function DropdownMenu(props: HTMLProps<HTMLDivElement> & Props) {
     <div
       {...nativeProps}
       className={classNameObject({
-        "z-[1000] absolute top-[100%] flex flex-col items-start border border-[--border-color] min-w-[200px] py-2 gap-2 pr-3 rounded-xl bg-white":
+        "z-[1000] absolute flex flex-col items-start border border-[--border-color] min-w-[200px] py-2 gap-2 pr-3 rounded-xl bg-white":
           true,
         "right-0": props.align === "right",
+        "top-[100%]": (props.align ?? "bottom") === "bottom",
+        "bottom-[100%]": props.align === "top",
         [props.className ?? ""]: !!props.className
       })}
     />
diff --git a/src/common/features/ui/dropdown/index.tsx b/src/common/features/ui/dropdown/index.tsx
index b15688e8322..92dd813b89f 100644
--- a/src/common/features/ui/dropdown/index.tsx
+++ b/src/common/features/ui/dropdown/index.tsx
@@ -2,21 +2,42 @@ import React, { HTMLProps, useRef, useState } from "react";
 import { DropdownContext } from "@ui/dropdown/dropdown-context";
 import { classNameObject } from "../../../helper/class-name-object";
 import useClickAway from "react-use/lib/useClickAway";
+import { useFilteredProps } from "../../../util/props-filter";
 
 export * from "./dropdown-item";
 export * from "./dropdown-menu";
 export * from "./dropdown-toggle";
 
-export function Dropdown(props: HTMLProps<HTMLDivElement>) {
+interface Props {
+  show?: boolean;
+  setShow?: (v: boolean) => void;
+  closeOnClickOutside?: boolean;
+}
+
+export function Dropdown(props: HTMLProps<HTMLDivElement> & Props) {
   const [show, setShow] = useState(false);
   const ref = useRef<HTMLDivElement | null>(null);
 
-  useClickAway(ref, () => setShow(false));
+  useClickAway(ref, () => {
+    if (props.closeOnClickOutside ?? true) {
+      setShow(false);
+      // props.setShow?.(false);
+    }
+  });
+  const nativeProps = useFilteredProps(props, ["show", "setShow", "closeOnClickOutside"]);
 
   return (
-    <DropdownContext.Provider value={{ show, setShow }}>
+    <DropdownContext.Provider
+      value={{
+        show: props.show ?? show,
+        setShow: (v) => {
+          setShow(v);
+          props.setShow?.(v);
+        }
+      }}
+    >
       <div
-        {...props}
+        {...nativeProps}
         ref={ref}
         className={classNameObject({
           relative: true,
diff --git a/src/common/features/ui/input/code-input.tsx b/src/common/features/ui/input/code-input.tsx
new file mode 100644
index 00000000000..18c889db053
--- /dev/null
+++ b/src/common/features/ui/input/code-input.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import { FormControl } from "@ui/input/form-controls";
+import { v4 } from "uuid";
+
+interface Props {
+  codeSize?: number;
+  value: string;
+  setValue: (v: string) => void;
+  disabled?: boolean;
+}
+
+export function CodeInput({ value, setValue, codeSize = 6, disabled }: Props) {
+  const [id, setId] = useState("code_input_" + v4());
+  const [code, setCode] = useState(new Array(codeSize).fill(""));
+
+  useEffect(() => {
+    setValue(code.join(""));
+  }, [code]);
+
+  useEffect(() => {
+    const nextCode = value.split("");
+    setCode(
+      new Array(codeSize).fill("").map((_, i) => {
+        if (nextCode[i]) {
+          return nextCode[i];
+        }
+        return "";
+      })
+    );
+  }, [value]);
+
+  return (
+    <div className="flex py-6 [&>input]:w-[36px] [&>input]:h-[36px] gap-2 justify-center [&>input]:text-center">
+      {code.map((item, i) => (
+        <FormControl
+          disabled={disabled}
+          key={i}
+          id={`${id}_${i}`}
+          type="text"
+          value={item}
+          onKeyUp={(e) => {
+            if (e.key === "Backspace") {
+              const nextElement = document.querySelector(
+                `#${id}_${i - 1}`
+              ) as HTMLInputElement | null;
+              if (nextElement) {
+                nextElement.focus();
+              }
+            }
+          }}
+          onChange={(e) => {
+            const lastCharacter =
+              e.target.value.length > 0 ? e.target.value[e.target.value.length - 1] : "";
+            const tempCode = [...code];
+            tempCode[i] = lastCharacter;
+            setCode(tempCode);
+
+            const nextElement = document.querySelector(
+              `#${id}_${i + 1}`
+            ) as HTMLInputElement | null;
+            if (nextElement && lastCharacter) {
+              nextElement.focus();
+            }
+          }}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/common/features/ui/input/form-controls/index.tsx b/src/common/features/ui/input/form-controls/index.tsx
index efae39dc3b6..9e6f0206d86 100644
--- a/src/common/features/ui/input/form-controls/index.tsx
+++ b/src/common/features/ui/input/form-controls/index.tsx
@@ -1,26 +1,31 @@
-import React, { MutableRefObject } from "react";
+import React, { forwardRef } from "react";
 import { Textarea, TextareaProps } from "./textarea";
 import { Select, SelectProps } from "./select";
 import { Input, InputProps } from "./input";
 import { Checkbox, CheckboxProps } from "./checkbox";
 import { Toggle } from "@ui/input/form-controls/toggle";
 
-type Props = (InputProps | TextareaProps | SelectProps | CheckboxProps) & {
-  ref?: MutableRefObject<any>;
-};
+type Props = InputProps | TextareaProps | SelectProps | CheckboxProps;
 
-export function FormControl(props: Props) {
+export const FormControl = forwardRef<any, Props>((props, ref) => {
   switch (props.type) {
     case "textarea":
-      return <Textarea {...props} />;
+      return <Textarea {...props} ref={ref} />;
     case "select":
-      return <Select {...props}>{props.children}</Select>;
+      return (
+        <Select {...props} ref={ref}>
+          {props.children}
+        </Select>
+      );
     case "checkbox":
       if (props.isToggle) {
-        return <Toggle {...props} />;
+        return <Toggle {...props} ref={ref} />;
       }
-      return <Checkbox {...props} />;
+      return <Checkbox {...props} ref={ref} />;
     default:
-      return <Input {...props} />;
+      return <Input {...props} ref={ref} />;
   }
-}
+}) as React.FC<Props>;
+
+// https://github.com/storybookjs/storybook/issues/21898
+// This actually relates of our version of React. Need to upgrade the package
diff --git a/src/common/features/ui/input/index.ts b/src/common/features/ui/input/index.ts
index a3bd8f6f97f..c55a778e1b0 100644
--- a/src/common/features/ui/input/index.ts
+++ b/src/common/features/ui/input/index.ts
@@ -1,3 +1,4 @@
 export * from "./input-group";
 export * from "./input-group-copy-clipboard";
 export * from "./form-controls";
+export * from "./code-input";
diff --git a/src/common/features/ui/input/input-group.tsx b/src/common/features/ui/input/input-group.tsx
index 968dbea2db6..e6d0dccec22 100644
--- a/src/common/features/ui/input/input-group.tsx
+++ b/src/common/features/ui/input/input-group.tsx
@@ -11,6 +11,8 @@ interface Props {
   prepend?: ReactNode;
   onPrependClick?: () => void;
   className?: string;
+  transparentPrepend?: boolean;
+  transparentAppend?: boolean;
 }
 
 // TODO: Make styles for childrens: buttons
@@ -22,7 +24,9 @@ export function InputGroup({
   className,
   onPrependClick,
   onAppendClick,
-  onClick
+  onClick,
+  transparentPrepend,
+  transparentAppend
 }: PropsWithChildren<Props> & HTMLAttributes<HTMLElement>) {
   return (
     <div
@@ -37,13 +41,14 @@ export function InputGroup({
       {prepend ? (
         <div
           className={classNameObject({
-            "ecency-input-group-part ecency-input-group-prepend flex items-center justify-center border-r-0 rounded-tl-full rounded-bl-full bg-gray-200 dark:bg-gray-600 dark:border-gray-600":
+            "ecency-input-group-part ecency-input-group-prepend flex items-center justify-center border-r-0 rounded-tl-full rounded-bl-full dark:border-gray-600":
               true,
             "px-2.5": typeof prepend === "string" || (prepend as ReactElement)?.type === Spinner,
             "[&>.ecency-spinner]:w-3.5 [&>.ecency-spinner]:h-3.5":
               (prepend as ReactElement)?.type === Spinner,
             "[&>svg]:w-4 [&>svg]:h-4 px-2": true,
-            "border-2": (prepend as ReactElement)?.type !== Button
+            "border-2": (prepend as ReactElement)?.type !== Button,
+            "bg-gray-200 dark:bg-gray-600": !transparentPrepend ?? true
           })}
           onClick={() => onPrependClick?.()}
         >
@@ -56,13 +61,14 @@ export function InputGroup({
       {append ? (
         <div
           className={classNameObject({
-            "ecency-input-group-part ecency-input-group-append border-l-0 rounded-tr-full rounded-br-full bg-gray-200 dark:bg-gray-600 dark:border-gray-600":
+            "ecency-input-group-part ecency-input-group-append border-l-0 rounded-tr-full rounded-br-full dark:border-gray-600":
               true,
             "flex items-center justify-center px-2.5":
               typeof append === "string" || (prepend as ReactElement)?.type === Spinner,
             "[&>.ecency-spinner]:w-3.5 [&>.ecency-spinner]:h-3.5":
               (prepend as ReactElement)?.type === Spinner,
-            "border-2": (append as ReactElement)?.type !== Button
+            "border-2": (append as ReactElement)?.type !== Button,
+            "bg-gray-200 dark:bg-gray-600": !transparentAppend ?? true
           })}
           onClick={() => onAppendClick?.()}
         >
diff --git a/src/common/helper/is-community.ts b/src/common/helper/is-community.ts
index b5b5aae16c4..0c233af2fb0 100644
--- a/src/common/helper/is-community.ts
+++ b/src/common/helper/is-community.ts
@@ -1 +1 @@
-export default (s: string) => s.match(/^hive-\d+/) !== null;
+export default (s?: string) => s?.match(/^hive-\d+/) !== null;
diff --git a/src/common/helper/message-event-emitter.ts b/src/common/helper/message-event-emitter.ts
new file mode 100644
index 00000000000..e4b97f13ea6
--- /dev/null
+++ b/src/common/helper/message-event-emitter.ts
@@ -0,0 +1,112 @@
+import { EventEmitter } from "events";
+
+export enum EventEmitterEvents {
+  NewListener = "newListener",
+  RemoveListener = "removeListener",
+  Error = "error"
+}
+
+type AnyListener = (...args: any) => any;
+export type ListenerMap<E extends string> = { [eventName in E]: AnyListener };
+type EventEmitterEventListener = (eventName: string, listener: AnyListener) => void;
+type EventEmitterErrorListener = (error: Error) => void;
+
+export type Listener<
+  E extends string,
+  A extends ListenerMap<E>,
+  T extends E | EventEmitterEvents
+> = T extends E
+  ? A[T]
+  : T extends EventEmitterEvents
+  ? EventEmitterErrorListener
+  : EventEmitterEventListener;
+
+/**
+ * Typed Event Emitter class which can act as a Base Model for all our model
+ * and communication events.
+ * This makes it much easier for us to distinguish between events, as we now need
+ * to properly type this, so that our events are not stringly-based and prone
+ * to silly typos.
+ */
+export class TypedEventEmitter<
+  Events extends string,
+  Arguments extends ListenerMap<Events>,
+  SuperclassArguments extends ListenerMap<any> = Arguments
+> extends EventEmitter {
+  public addListener<T extends Events | EventEmitterEvents>(
+    event: T,
+    listener: Listener<Events, Arguments, T>
+  ): this {
+    return super.addListener(event, listener);
+  }
+
+  public emit<T extends Events>(event: T, ...args: Parameters<SuperclassArguments[T]>): boolean;
+  public emit<T extends Events>(event: T, ...args: Parameters<Arguments[T]>): boolean;
+  public emit<T extends Events>(event: T, ...args: any[]): boolean {
+    return super.emit(event, ...args);
+  }
+
+  public eventNames(): (Events | EventEmitterEvents)[] {
+    return super.eventNames() as Array<Events | EventEmitterEvents>;
+  }
+
+  public listenerCount(event: Events | EventEmitterEvents): number {
+    return super.listenerCount(event);
+  }
+
+  public listeners(event: Events | EventEmitterEvents): ReturnType<EventEmitter["listeners"]> {
+    return super.listeners(event);
+  }
+
+  public off<T extends Events | EventEmitterEvents>(
+    event: T,
+    listener: Listener<Events, Arguments, T>
+  ): this {
+    return super.off(event, listener);
+  }
+
+  public on<T extends Events | EventEmitterEvents>(
+    event: T,
+    listener: Listener<Events, Arguments, T>
+  ): this {
+    return super.on(event, listener);
+  }
+
+  public once<T extends Events | EventEmitterEvents>(
+    event: T,
+    listener: Listener<Events, Arguments, T>
+  ): this {
+    return super.once(event, listener);
+  }
+
+  public prependListener<T extends Events | EventEmitterEvents>(
+    event: T,
+    listener: Listener<Events, Arguments, T>
+  ): this {
+    return super.prependListener(event, listener);
+  }
+
+  public prependOnceListener<T extends Events | EventEmitterEvents>(
+    event: T,
+    listener: Listener<Events, Arguments, T>
+  ): this {
+    return super.prependOnceListener(event, listener);
+  }
+
+  public removeAllListeners(event?: Events | EventEmitterEvents): this {
+    return super.removeAllListeners(event);
+  }
+
+  public removeListener<T extends Events | EventEmitterEvents>(
+    event: T,
+    listener: Listener<Events, Arguments, T>
+  ): this {
+    return super.removeListener(event, listener);
+  }
+
+  public rawListeners(
+    event: Events | EventEmitterEvents
+  ): ReturnType<EventEmitter["rawListeners"]> {
+    return super.rawListeners(event);
+  }
+}
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 72ebb1932a0..c19cdca5e29 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -76,7 +76,13 @@
     "you": "You",
     "copy-clipboard": "Copy to clipboard",
     "first": "First",
-    "last": "Last"
+    "last": "Last",
+    "ok": "OK",
+    "join": "Join",
+    "resend": "Resend",
+    "failed": "Failed",
+    "status": "Status",
+    "download": "Download"
   },
   "confirm": {
     "title": "Are you sure?",
@@ -174,7 +180,8 @@
     "switch-to": "Switch",
     "vote-power": "Vote Power:",
     "boost": "Boost",
-    "submit": "Create a post"
+    "submit": "Create a post",
+    "chats": "Chats"
   },
   "intro": {
     "title": "Aspire to greatness",
@@ -750,7 +757,9 @@
     "roles-account": "Account",
     "roles-role": "Role",
     "roles-account-title": "Title",
-    "roles-add": "Add User"
+    "roles-add": "Add User",
+    "join-community-chat": "Join Community Chat",
+    "already-joined-community": "You have already joined this community"
   },
   "community-cover": {
     "rewards": "rewards",
@@ -1822,6 +1831,102 @@
     "update-successful": "Update successful",
     "update-success-message": "Your Recovery email has been updated successfully"
   },
+  "chat": {
+    "page-title": "Conversations",
+    "title": "Chats",
+    "messages": "Messages",
+    "key": "Ecency chat key",
+    "new-message": "New Message",
+    "direct-messages": "Direct messages",
+    "collapse": "Collapse",
+    "expand": "Expand",
+    "scroll-to-bottom": "Scroll to Bottom",
+    "joined": "Joined",
+    "followers": "Followers",
+    "start-chat-placeholder": "Start a new message",
+    "search": "Search people or communities",
+    "join-chat": "Join chat",
+    "back": "Back",
+    "no-chat": "No conversation found",
+    "start-chat": "Start chatting",
+    "not-joined": "This user hasn't joined the chat yet",
+    "subscribers": "Subscribers",
+    "invite": "Invite",
+    "send-invite": "Send an invite",
+    "leave:": "Leave",
+    "refresh": "Refresh",
+    "message-warning": "You cannot send messages in this group.",
+    "edit-community-roles": "Edit Community Roles",
+    "add": "Add",
+    "no-admin": "No admin or moderator for this community chat.",
+    "blocked-users": "Blocked Users",
+    "action": "Action",
+    "unblock": "Unblock",
+    "ecency-key": "Ecency key",
+    "no-locked-user": "Blocked users not found",
+    "enter-private-key": "Enter Chat private key",
+    "enter-private-key-detail": "Enter chat private key to import all chats",
+    "close": "Close",
+    "confirm": "Confirm",
+    "error-updating-community": "Error occurred while updating community",
+    "leave": "Leave",
+    "edit-roles": "Edit Roles",
+    "manage-chat-key": "Credentials info",
+    "block": "Block",
+    "communities": "Communities",
+    "dms": "Direct messages",
+    "import-chat": "Import Chat",
+    "create-new-account": "Create New Account",
+    "loading": "Loading...",
+    "blocked-user-message": "You have been blocked from this community",
+    "chat-joined": "Chat Joined",
+    "start-community-chat": "Start Community Chat",
+    "join-community-chat": "Join Community Chat",
+    "submit": "Submit",
+    "chat-priv-key": "Please, save Chat key by clicking on download button or scanning QR code to restore your conversations.",
+    "public-key": "Public key",
+    "private-key": "Private key",
+    "copy-priv-key": "Copy Private key",
+    "extended-view": "Extended View",
+    "you-haven-t-joined": "You haven't joined the Chat yet. Please join to get started!",
+    "invalid-private-key": "Invalid private key",
+    "enter-username": "Enter temporary username",
+    "hide-message": "Hide message",
+    "block-author": "Block author",
+    "unblock-author": "Unblock author",
+    "create-an-account": "Create chat account",
+    "create-description": "Welcome aboard! Your account is almost ready. Dive into conversations and enjoy connecting with others privately.",
+    "create-pin-description": "Please, set PIN for getting access to your chats from any device",
+    "logout": "Logout",
+    "specify-invitation-message": "This invitation message will be sent as comment to latest user post",
+    "successfully-invited": "Successfully invited!",
+    "invite-couldnt-be-sent": "Invite couldn't be sent due to user doesn't have any post yet",
+    "no-posts-for-invite": "Unfortunately, User doesn't seem active and haven't made any posts.",
+    "warn-key-saving": "Save the Chat key to access your messages. Keep it secure for uninterrupted service!",
+    "view-and-save": "Show keys and save",
+    "blocked-users-management": "Blocked users management",
+    "unlock-the-section": "Please, enter your PIN to see your credentials information",
+    "no-contacts-or-channels": "No conversations yet",
+    "welcome": {
+      "title": "Welcome to Chats",
+      "description": "Create or import an account start using Chats",
+      "already-joined-title": "Looks like, you've already joined the Chats",
+      "already-joined-hint": "Please, verify your account and get access by entering PIN",
+      "pin-failed": "Invalid PIN. Failed to verify.",
+      "oops": "Oops!",
+      "user-not-joined-yet": "You can't send a message. This user or channel hasn't joined to chats yet.",
+      "hello": "Hello",
+      "start-description": "Search a person or community and start messaging",
+      "join-description": "You are not part of this community. Join the community chat now!",
+      "rejoin-description": "You have left this community chat. Rejoin the chat now!"
+    },
+    "import": {
+      "title": "Importing account",
+      "description": "Please, enter public and private key pair to import your existing account",
+      "button": "Import",
+      "iv": "Initial vector value"
+    }
+  },
   "add-image": {
     "title": "Add Image",
     "text-label": "Image Text",
diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx
index 351897c2d46..f0dbc57f681 100644
--- a/src/common/img/svg.tsx
+++ b/src/common/img/svg.tsx
@@ -558,11 +558,8 @@ export const gridSvg = (
 );
 
 export const emoticonHappyOutlineSvg = (
-  <svg viewBox="0 0 24 24">
-    <path
-      fill="currentColor"
-      d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
-    />
+  <svg viewBox="0 0 24 24" fill="currentColor">
+    <path d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z" />
   </svg>
 );
 
@@ -1526,10 +1523,11 @@ export const upvote = (
 export const gifIcon = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
+    width="18"
+    height="18"
     fill="currentColor"
     viewBox="0 0 16 16"
+    strokeWidth="2"
   >
     <path
       fillRule="evenodd"
@@ -1714,7 +1712,7 @@ export const sellStakeSvg = (
   </svg>
 );
 
-export const KebabMenu = (
+export const kebabMenuSvg = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="20"
@@ -1882,6 +1880,122 @@ export const dragSvg = (
   </svg>
 );
 
+export const addMessageSvg = (
+  <svg viewBox="0 0 24 24" fill="none">
+    <path
+      opacity="0.4"
+      d="M16 2H8C4 2 2 4 2 8V21C2 21.55 2.45 22 3 22H16C20 22 22 20 22 16V8C22 4 20 2 16 2Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.5 12H15.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 15.5V8.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const expandArrow = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="30"
+    height="30"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <path d="M6 9l6 6 6-6" />
+  </svg>
+);
+
+export const arrowBackSvg = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <path d="M19 12H6M12 5l-7 7 7 7" />
+  </svg>
+);
+
+export const messageSendSvg = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    strokeWidth="2"
+    stroke="currentColor"
+    fill="none"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M10 14l11 -11" />
+    <path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5" />
+  </svg>
+);
+
+export const chatBoxImageSvg = (
+  <svg width={20} height={20} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M21.6809 16.9601L18.5509 9.65013C17.4909 7.17013 15.5409 7.07013 14.2309 9.43013L12.3409 12.8401C11.3809 14.5701 9.5909 14.7201 8.3509 13.1701L8.1309 12.8901C6.8409 11.2701 5.0209 11.4701 4.0909 13.3201L2.3709 16.7701C1.1609 19.1701 2.9109 22.0001 5.5909 22.0001H18.3509C20.9509 22.0001 22.7009 19.3501 21.6809 16.9601Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M6.9707 8C8.62756 8 9.9707 6.65685 9.9707 5C9.9707 3.34315 8.62756 2 6.9707 2C5.31385 2 3.9707 3.34315 3.9707 5C3.9707 6.65685 5.31385 8 6.9707 8Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const chatLeaveSvg = (
+  <svg
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"
+    />
+  </svg>
+);
+
 export const videoSvg = (
   <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
@@ -1894,6 +2008,91 @@ export const videoSvg = (
   </svg>
 );
 
+export const editSVG = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <polygon points="16 3 21 8 8 21 3 21 3 16 16 3" />
+  </svg>
+);
+
+export const hideSvg = (
+  <svg
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    width={16}
+    height={16}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+    />
+  </svg>
+);
+
+export const removeUserSvg = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+    <circle cx="8.5" cy="7" r="4" />
+    <line x1="18" y1="8" x2="23" y2="13" />
+    <line x1="23" y1="8" x2="18" y2="13" />
+  </svg>
+);
+
+export const resendMessageSvg = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
+    <path d="M19.0003 10.0003L19.0004 19.0002L17.0004 19.0002L17.0003 12.0003L6.82845 12.0002L10.7782 15.9499L9.36396 17.3642L3 11.0002L9.36396 4.63623L10.7782 6.05044L6.8284 10.0002L19.0003 10.0003Z" />
+  </svg>
+);
+
+export const failedMessageSvg = (
+  <svg width={16} viewBox="0 0 24 24">
+    <path
+      fill="#e05e5e"
+      d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+    />
+  </svg>
+);
+
+export const chatKeySvg = (
+  <svg
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
+    />
+  </svg>
+);
 export const uploadSvgV = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -1963,3 +2162,142 @@ export const switchCameraSvg = (
     <path d="M6 2l3 3-3 3" />
   </svg>
 );
+
+export const chatSvg = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="21"
+    height="21"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+  </svg>
+);
+
+export const messangerSvg = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+  </svg>
+);
+
+export const extendedView = (
+  <svg viewBox="0 0 24 24" fill="none">
+    <path
+      d="M17.98 10.79V14.79C17.98 15.05 17.97 15.3 17.94 15.54C17.71 18.24 16.12 19.58 13.19 19.58H12.79C12.54 19.58 12.3 19.7 12.15 19.9L10.95 21.5C10.42 22.21 9.56 22.21 9.03 21.5L7.82999 19.9C7.69999 19.73 7.41 19.58 7.19 19.58H6.79001C3.60001 19.58 2 18.79 2 14.79V10.79C2 7.86001 3.35001 6.27001 6.04001 6.04001C6.28001 6.01001 6.53001 6 6.79001 6H13.19C16.38 6 17.98 7.60001 17.98 10.79Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M21.9791 6.79001V10.79C21.9791 13.73 20.6291 15.31 17.9391 15.54C17.9691 15.3 17.9791 15.05 17.9791 14.79V10.79C17.9791 7.60001 16.3791 6 13.1891 6H6.78906C6.52906 6 6.27906 6.01001 6.03906 6.04001C6.26906 3.35001 7.85906 2 10.7891 2H17.1891C20.3791 2 21.9791 3.60001 21.9791 6.79001Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M13.4955 13.25H13.5045"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M9.9955 13.25H10.0045"
+      stroke="#292D32"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M6.4955 13.25H6.5045"
+      stroke="#292D32"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const expandSideBar = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="30"
+    height="30"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="square"
+    strokeLinejoin="round"
+  >
+    <path d="M15 18l-6-6 6-6" />
+  </svg>
+);
+
+export const duotoneRefreshSvg = (
+  <svg viewBox="0 0 24 24" fill="none">
+    <path
+      d="M2 12C2 6.48 6.44 2 12 2C18.67 2 22 7.56 22 7.56M22 7.56V2.56M22 7.56H17.56"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M21.89 12C21.89 17.52 17.41 22 11.89 22C6.37 22 3 16.44 3 16.44M3 16.44H7.52M3 16.44V21.44"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const attachFileSvg = (
+  <svg
+    style={{ minWidth: "24px" }}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.2009 11.8002L10.7908 13.2102C10.0108 13.9902 10.0108 15.2602 10.7908 16.0402C11.5708 16.8202 12.8408 16.8202 13.6208 16.0402L15.8409 13.8202C17.4009 12.2602 17.4009 9.73023 15.8409 8.16023C14.2809 6.60023 11.7508 6.60023 10.1808 8.16023L7.76086 10.5802C6.42086 11.9202 6.42086 14.0902 7.76086 15.4302"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
+      opacity="0.4"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/src/common/pages/community-functional.tsx b/src/common/pages/community-functional.tsx
index eb62d569a10..326ac8e2c3f 100644
--- a/src/common/pages/community-functional.tsx
+++ b/src/common/pages/community-functional.tsx
@@ -1,10 +1,11 @@
 import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "./common";
 import { match } from "react-router";
-import React, { Fragment, useEffect, useState } from "react";
+import React, { Fragment, useEffect, useMemo, useState } from "react";
 import { search as searchApi, SearchResult } from "../api/search-api";
 import { getSubscriptions } from "../api/bridge";
 import { EntryFilter, ListStyle } from "../store/global/types";
 import { usePrevious } from "../util/use-previous";
+
 import { makeGroupKey } from "../store/entries";
 import _ from "lodash";
 import Meta from "../components/meta";
@@ -33,8 +34,16 @@ import { EntryListContent } from "../components/entry-list";
 import { connect } from "react-redux";
 import { withPersistentScroll } from "../components/with-persistent-scroll";
 import "./community.scss";
+import LoginRequired from "../components/login-required";
 import { QueryIdentifiers, useCommunityCache } from "../core";
 import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@ui/button";
+import { Modal, ModalBody, ModalHeader } from "@ui/modal";
+import {
+  getJoinedCommunities,
+  useChannelsQuery,
+  useLeftCommunityChannelsQuery
+} from "@ecency/ns-query";
 
 interface MatchParams {
   filter: string;
@@ -47,11 +56,18 @@ interface Props extends PageProps {
 
 export const CommunityPage = (props: Props) => {
   const getSearchParam = () => {
-    return props.location.search.replace("?", "").replace("q", "").replace("=", "");
+    const updatedLocation = props.location.search.replace(/communityid=.*?(?=&|$)/, "");
+    return updatedLocation.replace("?", "").replace("q", "").replace("=", "").replace("&", "");
   };
-
   const queryClient = useQueryClient();
   const { data: community } = useCommunityCache(props.match.params.name);
+  const { data: channels } = useChannelsQuery();
+  const { data: leftChannelsIds } = useLeftCommunityChannelsQuery();
+
+  const currentChannel = useMemo(
+    () => channels?.find((channel) => channel.communityName === community?.name),
+    [channels, community]
+  );
 
   const [account, setAccount] = useState<Account | undefined>(
     props.accounts.find(({ name }) => [props.match.params.name])
@@ -60,11 +76,21 @@ export const CommunityPage = (props: Props) => {
   const [search, setSearch] = useState(getSearchParam());
   const [searchDataLoading, setSearchDataLoading] = useState(getSearchParam().length > 0);
   const [searchData, setSearchData] = useState<SearchResult[]>([]);
+  const [isJoinCommunity, setIsJoinCommunity] = useState(false);
+  const [inProgress, setInProgress] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
   const prevMatch = usePrevious(props.match);
   const prevActiveUser = usePrevious(props.activeUser);
 
+  const isCommunityAlreadyJoined = useMemo(
+    () =>
+      getJoinedCommunities(channels ?? [], leftChannelsIds ?? []).some(
+        (community) => community.name === currentChannel?.communityName
+      ),
+    [channels, leftChannelsIds]
+  );
+
   useEffect(() => {
     setIsLoading(true);
 
@@ -74,6 +100,11 @@ export const CommunityPage = (props: Props) => {
     const { filter, name } = match.params;
     // fetch blog posts.
     if (EntryFilter[filter]) fetchEntries(filter, name, false);
+    const urlParams = new URLSearchParams(location.search);
+    const communityId = urlParams.get("communityid");
+    if (communityId) {
+      setIsJoinCommunity(true);
+    }
 
     fetchSubscriptions();
   }, []);
@@ -183,8 +214,65 @@ export const CommunityPage = (props: Props) => {
     return { title, description, url, rss, image, canonical };
   };
 
+  const joinCommunityModal = () => {
+    if (isCommunityAlreadyJoined) {
+      return (
+        <>
+          <div>
+            <h4>{_t("community.already-joined-community")}</h4>
+          </div>
+          <p className="mt-5 text-right">
+            <Button outline={true} onClick={() => setIsJoinCommunity(false)}>
+              {_t("g.ok")}
+            </Button>
+          </p>
+        </>
+      );
+    } else {
+      return (
+        <>
+          <div className="border-bottom">
+            <div className="join-community-dialog-titles">
+              <h2 className="join-community-main-title">Confirmaton</h2>
+            </div>
+            {inProgress && <LinearProgress />}
+          </div>
+          <div
+            className="join-community-dialog-body"
+            style={{ fontSize: "18px", marginTop: "12px" }}
+          >
+            {_t("confirm.title")}
+          </div>
+          <p className="join-community-confirm-buttons" style={{ textAlign: "right" }}>
+            <Button outline={true} className="mr-4" onClick={() => setIsJoinCommunity(false)}>
+              {_t("g.close")}
+            </Button>
+            <Button outline={true} className="confirm-btn" to={`/chats/${community?.name}`}>
+              {_t("g.join")}
+            </Button>
+          </p>
+        </>
+      );
+    }
+  };
+
   return community && account ? (
     <>
+      {isJoinCommunity && (
+        <LoginRequired {...props}>
+          <Modal
+            animation={false}
+            show={true}
+            centered={true}
+            onHide={() => setIsJoinCommunity(false)}
+            className="authorities-dialog"
+            size="lg"
+          >
+            <ModalHeader thin={true} closeButton={true} />
+            <ModalBody>{joinCommunityModal()}</ModalBody>
+          </Modal>
+        </LoginRequired>
+      )}
       <Meta {...getMetaProps()} />
       <ScrollToTop />
       <Theme global={props.global} />
diff --git a/src/common/pages/onboard.tsx b/src/common/pages/onboard.tsx
index b8144f31c48..27f523e7a97 100644
--- a/src/common/pages/onboard.tsx
+++ b/src/common/pages/onboard.tsx
@@ -530,7 +530,7 @@ const Onboard = (props: Props) => {
                 </span>
               </div>
               <span className="mt-3">{_t("onboard.copy-key")}</span>
-              <div className="mt-3 flex flex-col align-center">
+              <div className="mt-3 flex flex-col items-center">
                 <div className="flex">
                   <span className="mr-3 mt-1">
                     {innerWidth <= 768 ? shortPassword + "..." : masterPassword}
diff --git a/src/common/routes.ts b/src/common/routes.ts
index b79f4df04a3..68542905b9f 100644
--- a/src/common/routes.ts
+++ b/src/common/routes.ts
@@ -28,7 +28,9 @@ export default {
   COMMUNITIES: `/communities`,
   COMMUNITIES_CREATE: `/communities/create`,
   COMMUNITIES_CREATE_HS: `/communities/create-hs`,
-  COMMUNITY: `/:filter(${entryFilters.join("|")}|subscribers|activities|roles)/:name(hive-[\\d]+)`,
+  COMMUNITY: `/:filter(${entryFilters.join(
+    "|"
+  )}|subscribers|activities|roles)/:name(hive-[\\d]+)(/:communityid)?`,
   SUBMIT: `/submit`,
   EDIT: `/:username(@[\\w\\.\\d-]+)/:permlink/edit`,
   EDIT_DRAFT: `/draft/:draftId`,
@@ -39,5 +41,6 @@ export default {
   PROPOSALS: `/proposals`,
   PROPOSAL_DETAIL: `/proposals/:id(\\d+)`,
   PURCHASE: "/purchase",
-  DECKS: "/decks"
+  DECKS: "/decks",
+  CHATS: `/chats/:username?/:channel?`
 };
diff --git a/src/common/store/users/types.ts b/src/common/store/users/types.ts
index 23057f4c0f7..407ea2a6f95 100644
--- a/src/common/store/users/types.ts
+++ b/src/common/store/users/types.ts
@@ -1,5 +1,3 @@
-import { PrivateKey } from "@hiveio/dhive";
-
 export interface UserKeys {
   owner?: string;
   active?: string;
diff --git a/yarn.lock b/yarn.lock
index 152cba1681a..ed15cb257b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1262,6 +1262,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.21.0":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.7.2":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
@@ -1362,6 +1369,18 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@ecency/ns-query@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@ecency/ns-query/-/ns-query-1.0.0.tgz#24703f0bb1dbc253e9a0d6965d4841471d667e4e"
+  integrity sha512-DnG8m/qWLs5fo/B/Uf2dD8rNwXHSgQuYMwsn2K96KK3uAPV1Wh3X8ycKreS7jGNukPvNut2UHRLnSlwyBRBABw==
+  dependencies:
+    "@tanstack/react-query" "^4.29.7"
+    date-fns "^2.30.0"
+    nostr-tools "^1.17.0"
+    react "^16.8.6"
+    react-dom "^16.8.6"
+    react-use "^17.4.1"
+
 "@ecency/render-helper-amp@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@ecency/render-helper-amp/-/render-helper-amp-1.1.0.tgz#8ccb12163786227510a2cc5ce7b09797ac680577"
@@ -1655,6 +1674,15 @@
     graceful-fs "^4.2.4"
     source-map "^0.6.0"
 
+"@jest/source-map@^29.4.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.6.3.tgz#d90ba772095cf37a34a5eb9413f1b562a08554c4"
+  integrity sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.18"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
 "@jest/test-result@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
@@ -1768,7 +1796,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
   integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
 
-"@jridgewell/sourcemap-codec@^1.4.14":
+"@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.4.15":
   version "1.4.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
@@ -1781,6 +1809,14 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@jridgewell/trace-mapping@^0.3.18":
+  version "0.3.20"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz#72e45707cf240fa6b081d0366f8265b0cd10197f"
+  integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
 "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.13"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz#dcfe3e95f224c8fe97a87a5235defec999aa92ea"
@@ -1820,6 +1856,33 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@noble/ciphers@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@noble/ciphers/-/ciphers-0.2.0.tgz#a12cda60f3cf1ab5d7c77068c3711d2366649ed7"
+  integrity sha512-6YBxJDAapHSdd3bLDv6x2wRPwq4QFMUaB3HvljNBUTThDd12eSm7/3F+2lnfzx2jvM+S6Nsy0jEt9QbPqSwqRw==
+
+"@noble/curves@1.1.0", "@noble/curves@~1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.1.0.tgz#f13fc667c89184bc04cccb9b11e8e7bae27d8c3d"
+  integrity sha512-091oBExgENk/kGj3AZmtBDMpxQPDtxQABR2B9lb1JbVTs6ytdzZNwvhxQ4MWasRNEzlbEH8jCWFCwhF/Obj5AA==
+  dependencies:
+    "@noble/hashes" "1.3.1"
+
+"@noble/hashes@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.1.tgz#8831ef002114670c603c458ab8b11328406953a9"
+  integrity sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==
+
+"@noble/hashes@~1.3.0", "@noble/hashes@~1.3.1":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.2.tgz#6f26dbc8fbc7205873ce3cee2f690eba0d421b39"
+  integrity sha512-MVC8EAQp7MvEcm30KWENFjgR+Mkmf+D189XJTkFIlwohU5hcBbn1ZkKq7KVTi2Hme3PMGF390DaL52beVrIihQ==
+
+"@noble/secp256k1@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.7.1.tgz#b251c70f824ce3ca7f8dc3df08d58f005cc0507c"
+  integrity sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1910,6 +1973,33 @@
   resolved "https://registry.yarnpkg.com/@redis/time-series/-/time-series-1.0.4.tgz#af85eb080f6934580e4d3b58046026b6c2b18717"
   integrity sha512-ThUIgo2U/g7cCuZavucQTQzA9g9JbDDY2f64u3AbAoz/8vE2lt2U37LamDUVChhaDA3IRT9R6VvJwqnUfTJzng==
 
+"@scure/base@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.1.tgz#ebb651ee52ff84f420097055f4bf46cfba403938"
+  integrity sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==
+
+"@scure/base@~1.1.0":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.3.tgz#8584115565228290a6c6c4961973e0903bb3df2f"
+  integrity sha512-/+SgoRjLq7Xlf0CWuLHq2LUZeL/w65kfzAPG5NH9pcmBhs+nunQTn4gvdwgMTIXnt9b2C/1SeL2XiysZEyIC9Q==
+
+"@scure/bip32@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.3.1.tgz#7248aea723667f98160f593d621c47e208ccbb10"
+  integrity sha512-osvveYtyzdEVbt3OfwwXFr4P2iVBL5u1Q3q4ONBfDY/UpOuXmOlbgwc1xECEboY8wIays8Yt6onaWMUdUbfl0A==
+  dependencies:
+    "@noble/curves" "~1.1.0"
+    "@noble/hashes" "~1.3.1"
+    "@scure/base" "~1.1.0"
+
+"@scure/bip39@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@scure/bip39/-/bip39-1.2.1.tgz#5cee8978656b272a917b7871c981e0541ad6ac2a"
+  integrity sha512-Z3/Fsz1yr904dduJD0NpiyRHhRYHdcnyh73FZWiV+/qhWi83wNJ3NWolYqCEN+ZWsUz2TWwajJggcRE9r1zUYg==
+  dependencies:
+    "@noble/hashes" "~1.3.0"
+    "@scure/base" "~1.1.0"
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
@@ -3190,10 +3280,10 @@ babel-preset-jest@^26.6.2:
     babel-plugin-jest-hoist "^26.6.2"
     babel-preset-current-node-syntax "^1.0.0"
 
-babel-preset-razzle@^4.0.5:
-  version "4.2.16"
-  resolved "https://registry.yarnpkg.com/babel-preset-razzle/-/babel-preset-razzle-4.2.16.tgz#c6336ee6f5239462983a49401254e49afdb46a06"
-  integrity sha512-ilCj8YjiWuRgzoaHOtW+B63RZ/yySlV8km7yh+Y0vQt2kSQCKxSnouUhADQXzr31K0DEMw5uIjRCr3h3MGsUcw==
+babel-preset-razzle@^4.2.18:
+  version "4.2.18"
+  resolved "https://registry.yarnpkg.com/babel-preset-razzle/-/babel-preset-razzle-4.2.18.tgz#257cf684337cbbff54ce0e74695a6f2f6977d585"
+  integrity sha512-UmoGdxuobZJ2ut/7JQPEZaDMH4aJMEWj1E8aeX2uV+C1I7FULo/kkrD8I43hnfcZVX3cAdZYATZ6LiNe01plNg==
   dependencies:
     "@babel/core" "^7.11.1"
     "@babel/plugin-proposal-class-properties" "^7.8.3"
@@ -4744,6 +4834,11 @@ csstype@^3.0.6:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+csstype@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
 currency-symbol-map@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/currency-symbol-map/-/currency-symbol-map-4.0.4.tgz#3cfba625974dd3f86822d327ecbd10248695e95e"
@@ -4781,6 +4876,13 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 debounce@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
@@ -6230,6 +6332,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
+graceful-fs@^4.2.9:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -6818,6 +6925,14 @@ inline-style-prefixer@^6.0.0:
     css-in-js-utils "^3.1.0"
     fast-loops "^1.1.3"
 
+inline-style-prefixer@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-7.0.0.tgz#991d550735d42069f528ac1bcdacd378d1305442"
+  integrity sha512-I7GEdScunP1dQ6IM2mQWh6v0mOYdYmH3Bp31UecKdrcUgcURTcctSe1IECdUznSHKSmsHtjrT3CwCPI1pyxfUQ==
+  dependencies:
+    css-in-js-utils "^3.1.0"
+    fast-loops "^1.1.3"
+
 inquirer@7.0.4:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.0.4.tgz#99af5bde47153abca23f5c7fc30db247f39da703"
@@ -7275,6 +7390,11 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-ws@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz#e5529148912ecb9b451b46ed44d53dae1ce04bbf"
+  integrity sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==
+
 istanbul-lib-coverage@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
@@ -8614,6 +8734,20 @@ nano-css@^5.3.1:
     stacktrace-js "^2.0.2"
     stylis "^4.0.6"
 
+nano-css@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.6.1.tgz#964120cb1af6cccaa6d0717a473ccd876b34c197"
+  integrity sha512-T2Mhc//CepkTa3X4pUhKgbEheJHYAxD0VptuqFhDbGMUWVV2m+lkNiW/Ieuj35wrfC8Zm0l7HvssQh7zcEttSw==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+    css-tree "^1.1.2"
+    csstype "^3.1.2"
+    fastest-stable-stringify "^2.0.2"
+    inline-style-prefixer "^7.0.0"
+    rtl-css-js "^1.16.1"
+    stacktrace-js "^2.0.2"
+    stylis "^4.3.0"
+
 nanoid@^3.1.22, nanoid@^3.3.6:
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
@@ -8830,6 +8964,28 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+nostr-relaypool@^0.6.28:
+  version "0.6.28"
+  resolved "https://registry.yarnpkg.com/nostr-relaypool/-/nostr-relaypool-0.6.28.tgz#50f1dc21c11bda1fca2a6d785d78fd6f6ead9a57"
+  integrity sha512-kyLChBunf6IB2O3MSPHBe9iSokBGyqZHvAJXZ5+eh9C4znAu7iY8L/yh0V4Ta/P9TtzDna3QTEgFWVan4m0vBA==
+  dependencies:
+    "@jest/source-map" "^29.4.3"
+    isomorphic-ws "^5.0.0"
+    nostr-tools "^1.10.0"
+    safe-stable-stringify "^2.4.2"
+
+nostr-tools@^1.10.0, nostr-tools@^1.17.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/nostr-tools/-/nostr-tools-1.17.0.tgz#b6f62e32fedfd9e68ec0a7ce57f74c44fc768e8c"
+  integrity sha512-LZmR8GEWKZeElbFV5Xte75dOeE9EFUW/QLI1Ncn3JKn0kFddDKEfBbFN8Mu4TMs+L4HR/WTPha2l+PPuRnJcMw==
+  dependencies:
+    "@noble/ciphers" "0.2.0"
+    "@noble/curves" "1.1.0"
+    "@noble/hashes" "1.3.1"
+    "@scure/base" "1.1.1"
+    "@scure/bip32" "1.3.1"
+    "@scure/bip39" "1.2.1"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -10202,10 +10358,10 @@ razzle-dev-utils@3.4.5:
     strip-ansi "6.0.0"
     webpack-dev-server "~3.10.3"
 
-razzle-dev-utils@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/razzle-dev-utils/-/razzle-dev-utils-4.0.5.tgz#51d236a21c590a9dd017b0107c261643e36d497f"
-  integrity sha512-ki1PxtBCugmpTyYdQ4/Ls3uToBimxNxJsxoZzNx/C8NaxBbbDAVKvysX1oqFRVT9KyMOLaQXFG/qdSFXDxcvlg==
+razzle-dev-utils@^4.2.18:
+  version "4.2.18"
+  resolved "https://registry.yarnpkg.com/razzle-dev-utils/-/razzle-dev-utils-4.2.18.tgz#ba55ca6a19931eb4c7540fcedbe57d1f31838f45"
+  integrity sha512-WOXpAUAJaR3JJYhhb6iQKa+i25Ab2lAGiJXdbkDAXWDFRikpnojoUaZ2VuoNluSo0Xd7OKeaX8Ge29LW4mjEEg==
   dependencies:
     "@babel/code-frame" "^7.8.3"
     chalk "^4.1.0"
@@ -10219,10 +10375,10 @@ razzle-dev-utils@^4.0.5:
     sockjs-client "~1.4.0"
     strip-ansi "^6.0.0"
 
-razzle-plugin-scss@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/razzle-plugin-scss/-/razzle-plugin-scss-4.0.5.tgz#bc36e021c14f88fbcbca32849abc7ee9d2d3a5db"
-  integrity sha512-uxLwIqLA/SvdhVtPEa4wHZX+wvseBRR1FHEN22u8kZKGIdr8HWwiU7vIVpxtt228yCFyqthminMkQAsCxJlwAA==
+razzle-plugin-scss@^4.2.18:
+  version "4.2.18"
+  resolved "https://registry.yarnpkg.com/razzle-plugin-scss/-/razzle-plugin-scss-4.2.18.tgz#829838946aff73b0d8ecc539b78951971833ae88"
+  integrity sha512-G3Vwunt3kWJk117fS9hue7+cDNVIUyJrGLY0qdHwJPgceRggZR9XlKT9U09lCZan0UoaASLVfQmZVITiLIGodA==
   dependencies:
     autoprefixer "^10.2.3"
     css-loader "^5.0.0"
@@ -10243,15 +10399,15 @@ razzle-plugin-typescript@^3.0.0:
     razzle-dev-utils "3.4.5"
     ts-loader "^5.2.1"
 
-razzle-start-server-webpack-plugin@4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/razzle-start-server-webpack-plugin/-/razzle-start-server-webpack-plugin-4.0.5.tgz#432719af814944ad15deeb9134ee5bfcfe9dc69b"
-  integrity sha512-IrsdXUsNdPYe4enEQseG/rFeggkVTvzopjICJxCxx/bco5pqcAZUdJ02ntuPPqa3f9KOr9mYFDKgBo6gh96UiQ==
+razzle-start-server-webpack-plugin@4.2.18:
+  version "4.2.18"
+  resolved "https://registry.yarnpkg.com/razzle-start-server-webpack-plugin/-/razzle-start-server-webpack-plugin-4.2.18.tgz#153e35647b78f0224becc2d586d43a9af0838cfe"
+  integrity sha512-yR86/T7hmfseBFOQYZDiDfLNxIvws7wBvRoQNz7aw4cT6cX8JFDPpMDHQQNdnESRDencDozMtFLX0jECJJi/CA==
 
-razzle@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/razzle/-/razzle-4.0.5.tgz#314da48f85b19022ea7f1ae21ee3c71b6b685f2a"
-  integrity sha512-35zdVelUH+7OifhDMsFeqopyz2I3u7JT2bKu+KcliR1AFOplDnPMEUSwWdQ4KFdJI7b+eFFuCAx0jJh3yi8Ahg==
+razzle@^4.2.18:
+  version "4.2.18"
+  resolved "https://registry.yarnpkg.com/razzle/-/razzle-4.2.18.tgz#6a7c7c692b7ce0224e3d99fd43da1db6d5f0cd68"
+  integrity sha512-lgumXubb/rs5oQVcmu3UDSObbWQ2H1FLf2/VLal25yusotEbyePVLAw9f9QGu+bbUohvEY0rfYyJtnQNE8J4Og==
   dependencies:
     "@babel/plugin-transform-modules-commonjs" "^7.12.1"
     "@pmmmwh/react-refresh-webpack-plugin" "^0.4.3"
@@ -10279,7 +10435,7 @@ razzle@^4.0.5:
     postcss-load-config "^3.0.0"
     postcss-loader "^4.2.0"
     process "^0.11.10"
-    razzle-start-server-webpack-plugin "4.0.5"
+    razzle-start-server-webpack-plugin "4.2.18"
     react-dev-utils "^11.0.4"
     react-refresh "^0.9.0"
     resolve "^1.17.0"
@@ -10616,6 +10772,26 @@ react-use@^17.4.0:
     ts-easing "^0.2.0"
     tslib "^2.1.0"
 
+react-use@^17.4.1:
+  version "17.4.2"
+  resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.4.2.tgz#26d43c774ccb733a17a87be62e12fbcbc5654173"
+  integrity sha512-1jPtmWLD8OJJNYCdYLJEH/HM+bPDfJuyGwCYeJFgPmWY8ttwpgZnW5QnzgM55CYUByUiTjHxsGOnEpLl6yQaoQ==
+  dependencies:
+    "@types/js-cookie" "^2.2.6"
+    "@xobotyi/scrollbar-width" "^1.9.5"
+    copy-to-clipboard "^3.3.1"
+    fast-deep-equal "^3.1.3"
+    fast-shallow-equal "^1.0.0"
+    js-cookie "^2.2.1"
+    nano-css "^5.6.1"
+    react-universal-interface "^0.6.2"
+    resize-observer-polyfill "^1.5.1"
+    screenfull "^5.1.0"
+    set-harmonic-interval "^1.0.1"
+    throttle-debounce "^3.0.1"
+    ts-easing "^0.2.0"
+    tslib "^2.1.0"
+
 react-virtualized@^9.22.3:
   version "9.22.3"
   resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.22.3.tgz#f430f16beb0a42db420dbd4d340403c0de334421"
@@ -10778,6 +10954,11 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regenerator-transform@^0.15.0:
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"
@@ -11088,6 +11269,13 @@ rtl-css-js@^1.14.0:
   dependencies:
     "@babel/runtime" "^7.1.2"
 
+rtl-css-js@^1.16.1:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.16.1.tgz#4b48b4354b0ff917a30488d95100fbf7219a3e80"
+  integrity sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 run-async@^2.2.0, run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -11145,6 +11333,11 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
+safe-stable-stringify@^2.4.2:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/safe-stable-stringify/-/safe-stable-stringify-2.4.3.tgz#138c84b6f6edb3db5f8ef3ef7115b8f55ccbf886"
+  integrity sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==
+
 "safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
@@ -12091,6 +12284,11 @@ stylis@^4.0.6:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
   integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
 
+stylis@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c"
+  integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==
+
 sucrase@^3.32.0:
   version "3.34.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"